Week 13

Lecture

Lecture recorded with posting your site tutorial, Q&A, and presentations: https://www.youtube.com/watch?v=aVoLUDTn4X4

Compress your images!!

Only pngs and jpgs work for this. Svgs are by default ultra compressed as long as you only use shapes/vectors in them.

tinypng.com

Host your project online to share with friends and family!

pages.github.com

Due today

Responsive design (5%)

In Figma, re-design your major project at least 50% of your content for a different size screen. If you did a desktop/computer sized design, design for mobile (320-411px wide); if you did a mobile size, design for desktop (1200px wide).

This will not have to be coded nor will it need to be similar to how you are coding any responsiveness in your final project.

We are looking for considerations on translating your design to a different screen size that is considerate of size of objects and text that is both readable, understandable, and still impactful.

Due to the conditions of the reduced class, you have the option to not do this assignment and the weighting for all your other assignments will equally rise to make up this 5%. If you have any questions, please reach out. Also please let your instructor know if you are choosing to forgoe this assignment.

Developed major project (20%)

Time to take your design into development. It is very likely that you will need to connect with your instructor for a consultation into what you need to look into to code your specific project.

It is understood that you may have to make adjustments to your design based on what your skill level is in development.

We are looking for well exectued code, accuracy to your design where appropriate (understanding more intense functionality and positioning may have to be scaled back), responsiveness where appropriate, and finally the overall user experience of using/browsing your site.

The entire site is not required to be responsive as some projects are very size specific, but an effort should be made to include responsiveness to an extent (between some widths). Again, connect with your instructor to establish these constraints. Everyone's project is a little different.

Week 12

Lecture

Video: youtube.com/watch?v=cv6yIufG6io

Attendance next week at the lecture is mandatory. Please make sure you attend.

Audio files tutorial

Load your songs


								var tracks = [];

								for(i=0; i<2; i++) {

								   tracks[i]=document.createElement('audio');

								}


								tracks[0].setAttribute('src', 'music/song-1.mp3');

								tracks[1].setAttribute('src', 'music/song-2.mp3');

Play a song


								tracks[0].play();

Pause a song


								tracks[0].pause();

Reset a song to the beginning


								tracks[0].currentTime=0;

Pause/reset all songs except for the one you want to play


								for(i=0; i<tracks.length; i++) {

								   if(i==0) {

								 

								   }

								   else {

								      tracks[i].pause();

								      tracks[i].currentTime = 0;

								   }

								}

								tracks[0].play();

Due next week

Responsive design (5%)

In Figma, re-design your major project at least 50% of your content for a different size screen. If you did a desktop/computer sized design, design for mobile (320-411px wide); if you did a mobile size, design for desktop (1200px wide).

This will not have to be coded nor will it need to be similar to how you are coding any responsiveness in your final project.

We are looking for considerations on translating your design to a different screen size that is considerate of size of objects and text that is both readable, understandable, and still impactful.

Due to the conditions of the reduced class, you have the option to not do this assignment and the weighting for all your other assignments will equally rise to make up this 5%. If you have any questions, please reach out. Also please let your instructor know if you are choosing to forgoe this assignment.

Developed major project (20%)

Time to take your design into development. It is very likely that you will need to connect with your instructor for a consultation into what you need to look into to code your specific project.

It is understood that you may have to make adjustments to your design based on what your skill level is in development.

We are looking for well exectued code, accuracy to your design where appropriate (understanding more intense functionality and positioning may have to be scaled back), responsiveness where appropriate, and finally the overall user experience of using/browsing your site.

The entire site is not required to be responsive as some projects are very size specific, but an effort should be made to include responsiveness to an extent (between some widths). Again, connect with your instructor to establish these constraints. Everyone's project is a little different.

Week 11

Updates

I'd like to remind everyone when using flexbox grid, to not forget your rows. Columns MUST be a direct child of a row.

For review next week

Responsive design (5%)

Due: March 31, 2020

In Figma, re-design your major project at least 50% of your content for a different size screen. If you did a desktop/computer sized design, design for mobile (320-411px wide); if you did a mobile size, design for desktop (1200px wide).

This will not have to be coded nor will it need to be similar to how you are coding any responsiveness in your final project.

We are looking for considerations on translating your design to a different screen size that is considerate of size of objects and text that is both readable, understandable, and still impactful.

Due to the conditions of the reduced class, you have the option to not do this assignment and the weighting for all your other assignments will equally rise to make up this 5%. If you have any questions, please reach out. Also please let your instructor know if you are choosing to forgoe this assignment.

Developed major project (20%)

Due: March 31, 2020

Time to take your design into development. It is very likely that you will need to connect with your instructor for a consultation into what you need to look into to code your specific project.

It is understood that you may have to make adjustments to your design based on what your skill level is in development.

We are looking for well exectued code, accuracy to your design where appropriate (understanding more intense functionality and positioning may have to be scaled back), responsiveness where appropriate, and finally the overall user experience of using/browsing your site.

The entire site is not required to be responsive as some projects are very size specific, but an effort should be made to include responsiveness to an extent (between some widths). Again, connect with your instructor to establish these constraints. Everyone's project is a little different.

Week 10

Code grab bag

What are arrays and loops and how can you code faster with them? How can I animate things in CSS?

Lecture

Readings

CSS "Animate" property

CSS Keyframe Animations

CSS Transform properties

jQuery Each loop

Basic for loop (javascript)

For review next week

Developed major project (20%)

Due: March 31, 2020

Time to take your design into development. It is very likely that you will need to connect with your instructor for a consultation into what you need to look into to code your specific project.

It is understood that you may have to make adjustments to your design based on what your skill level is in development.

We are looking for well exectued code, accuracy to your design where appropriate (understanding more intense functionality and positioning may have to be scaled back), responsiveness where appropriate, and finally the overall user experience of using/browsing your site.

The entire site is not required to be responsive as some projects are very size specific, but an effort should be made to include responsiveness to an extent (between some widths). Again, connect with your instructor to establish these constraints. Everyone's project is a little different.

Week 9.5

Online tutorial: Horizontal scroll

A lot of students have a horizontal scroll webpage, so this is a quick tutorial going over how to make it.

Video

Downloads

MouseWheel Jquery plugin

Download JS file

Link your js plugin

Add the jquery.mousewheel.min.js file into your js folder with your scripts.js. Link it in your body above your script.js call.


										<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

										<script src="js/jquery.mousewheel.min.js"></script>

										<script src="js/scripts.js"></script>

Add the mousewheel functionality

Add this jQuery to your custom scripts.js file.


										$(function() {

										    $('html').mousewheel(function(event, delta) {

										        this.scrollLeft -= (delta);

										        event.preventDefault();

										    });

										});

Week 9

Javscript: actually, jQuery

Lecture

Tutorial videos

Readings

jQuery syntax Selectors Events jQuery

Link your JS to your HTML

Include this just before the closing body tag


									<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

									<script src="js/scripts.js"></script>

Due next week

MA09: jQuery exercise (2.5%)

Edit this existing project with jQuery already in it. Feel free to experiment. But the main point is to have images also appear, well positioned, in sections when they are scrolled to. Images are included in the folder.

This is purely a technical challenge.

Download folder

Submit the assignment here:

Google Drive

For review next week

Developed major project (20%)

Due: March 31, 2020

Time to take your design into development. It is very likely that you will need to connect with your instructor for a consultation into what you need to look into to code your specific project.

It is understood that you may have to make adjustments to your design based on what your skill level is in development.

We are looking for well exectued code, accuracy to your design where appropriate (understanding more intense functionality and positioning may have to be scaled back), responsiveness where appropriate, and finally the overall user experience of using/browsing your site.

The entire site is not required to be responsive as some projects are very size specific, but an effort should be made to include responsiveness to an extent (between some widths). Again, connect with your instructor to establish these constraints. Everyone's project is a little different.

Week 8.5

Online tutorial

Apologies, I accidentally stopped the recording halfway through and had to restart it so it's in two parts. No part was missed, just an awkard video switch!.

Part 1 Part 2

Downloads

Setting up Sass

Slides showing setup

Code

You'll notice there are a few more features in the live one, such as hovering and links on the story card images. I'll spend time showing you guys how to do animations like that in a later lecture however I think it's worth looking at the fancier version code cause it is more perfect compared to me bumbling around in the lecture live coding it.

I have included both code versions for you to determine which is easier for you to understand and follow.

In tutorial Finished live code - more complex

Figma File

Note, this is not a perfect Figma file. It's a bit quickly thrown together and there are mistakes, try not to use it as a best practice or anything.

Figma file

Week 8

Responsive CSS: Media-queries and coding grids

Lecture

Complex grid example

Inspect this page (right click + inspect element) to see lots of real code examples of how to use Flexbox Grid. View example here.

Readings

Media Queries

Basic run-through on media queries.

W3 Schools

Flexbox Grid

Read about Flexbox Grid and download it from the course website.

Flexbox Grid documentation Download link

Due next week

Design: 30%

The design MUST be created in Figma. The entire project should be fully mocked up and designed. You will be judged on the overall execution, concept, design-skills, asthetic, and be evaluating you on your execution of key themes discussed in previous classes including but not limited to user experience, best practices, system design application and consistency, usability heuristics, interactive principles, gestalt principles, etc.

Micro-assignment 08: Responsive code 2.5%

Code a profile page for a person's feed of images/posts on a platform (like instagram or flickr) that has a minimum of 3 columns at it's widest point and 1 column at its thinnest point. The posts can be all images.

Extra points given to those who are more creative, creating variety to the grid such as "featured post" highlighting, or maybe a treatment for image-less posts.

Requirements:

A minimum of 9 posts
Use Flexbox Grid
Proper use of media-queries for applying other design element changes between mobile and desktop (that are appropriate and not random)
Profile name, profile photo, and profile bio
Effective application of previous advanced css, basic css, and HTML
Effective application of previous interaction and usability principles learned up till now from lectures and in-class

Submit the assignment here:

Google Drive

Week 6

Advanced CSS: Rem, Flex, Positioning

Adding on to CSS, we are introducing some new concepts to get fancier with your styling capabilities.

Lecture

View Positioning example

Positioning example

Readings

I highly recommend looking through these readings.

Flex

Two pages about the capabilities of flex.

Simple explanation In-depth explanation

Position

Explaining absolute, relative, and fixed positioning (among others).

W3Schools positioning

Z-index

Explaining z-index property.

Simple explanation More in-depth explanation

Due Feb 25

Micro Assignment: Advanced CSS 2.5%

Part 1

Create a new basic HTML file creating a page for a news/review/story article. Link CSS to this and style it. The content and images can be directly copied from another site, however the design should be entirely original. Don't worry about sidebars or promotional content. Include a dummy non-functional comment section (view-only) with at least 4 comments by different users.

You sould demonstrate:

Understanding of basic CSS as well as HTML
Understanding of the position property
Understanding of when to use % and when to use rem
Understanding of display: flex and other flex properties (this does not mean to use all variations of the flex properties, but to choose which you want to achieve a design)

Requirements:

CSS file should have * {box-sizing: border-box;} at the top of the file.
Website should be responsive (no HORIZONTAL scrollbar; looks visually un-broken) between 992px - 1300px (use % to achieve this)
Use at least one Google font
Apply margin and padding correctly
At least two paragraphs
A link
Images should be stored in an image folder
Documents must be formatted with proper tab indentation

Advanced:

For more advanced students, while you will not be marked for this, we recommend trying to incorporate Flexbox Grid CSS (don't download from here). You can view documentation on how to use it on that site. However, recommended for download, use this link instead. You can ask your instructor for help intro-ing this. A beginning explainer is here.

Advanced:

For more advanced students, while you will not be marked for this, we recommend trying to incorporate Media-queries.

Part 2

Create a duplicate of the HTML file created once you are done. Create a non-functional email newsletter signup pop-up for this page.

Requirements:

There should be some sort of transparent background-color overlay covering the whole page in a fixed position.
Popup must be ontop of that background overlay with position: fixed, centered horizontally and vertically on the screen
There should be an X in the top right of the centered popup.

Submit the assignment here:

Google Drive

For review next week

Design: 30%

This is due March 3.

The design MUST be created in Figma. The entire project should be fully mocked up and designed. You will be judged on the overall execution, concept, design-skills, asthetic, and be evaluating you on your execution of key themes discussed in previous classes including but not limited to user experience, best practices, system design application and consistency, usability heuristics, interactive principles, gestalt principles, etc.

Week 5

Basic CSS

Moving on to styling your HTML, we are looking at the basics of CSS

Lecture

Readings

I highly recommend looking through these readings.

Applying Google fonts

Instructions on how to use a Google font.

Google font tutorial

CSS declaration list

W3Schools lists every CSS declaration for your reference.

CSS declaration list

W3Schools CSS tutorial

A handy and simple tutorial that you can go through.

CSS tutorial

How to acheive specific features in CSS

A list of very specific features / common things you see on other websites, such as navigation menus, etc. Recommended for advanced users only. How to's

CSS Must

Include this in the top of your css file:

* {box-sizing: border-box;}

HTML Must

Include these in the head of your HTML file, after title:


								<meta charset="UTF-8">

								<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Link your CSS to your HTML

Include this in the head tag


								<link href="css/style.css" rel="stylesheet">

Due next week

Micro Assignment: Basic CSS 2.5%

Create a new basic HTML file creating a page for a recipe. Link CSS to this and style it.

The more CSS you experiement with in a competetent and design-minded manner, the better you will do.

These are the base requirements (does not mean high mark):

CSS file should have * {box-sizing: border-box;} at the top of the file.
Image should not expand outside of the width of the page
Use at least one Google font
Change the colour of at least one thing.
Apply margin and padding correctly
A list
At least two paragraphs
A link
Images should be stored in an image folder
Documents must be formatted with proper tab indentation

Advanced:
For more advanced students, while you will not be marked for this, we recommend trying to incorporate Flexbox Grid CSS (don't download from here). You can view documentation on how to use it on that site. However, recommended for download, use this link instead. You can ask your instructor for help intro-ing this. A beginning explainer is here.

Submit the assignment here:

Google Drive

For review next week

Design: 30%

This is due March 3.

The design MUST be created in Figma. The entire project should be fully mocked up and designed. You will be judged on the overall execution, concept, design-skills, asthetic, and be evaluating you on your execution of key themes discussed in previous classes including but not limited to user experience, best practices, system design application and consistency, usability heuristics, interactive principles, gestalt principles, etc.

Week 4

Into to Code (HTML)

We'll be learning HTML, SASS (CSS), and Javascript. However, let's start with the base, HTML.

Lecture

View HTML example

HTML example

Tools

VS Code

Readings

Coursera course
Click enroll for free - sign up for an account and then click "Audit course" (very tiny text option)
Learn HTML – easy 101 tutorial

Due in-class

Micro Assignment: Basic HTML 2.5%

Create a basic HTML file of a blog post summarizing your learnings from a reading from any week on the course site. You will not be marked on design as HTML does not provide design capabilities just yet.

Requirements:

An image
At least 2 heading level types
A list
A paragraph
A link
Images should be stored in an image folder
Minimum 500 words
Document must be formatted with proper tab indentation

Advanced:
For more advanced students, while you will not be marked for this, we recommend trying to incorporate Flexbox Grid CSS (don't download from here). You can view documentation on how to use it on that site. However, recommended for download, use this link instead. You can ask your instructor for help intro-ing this. A beginning explainer is here.

Submit the assignment here:

Google Drive

Due next week

Wireframes: 15%

Wireframe your entire project. Every scene,the entirety of the project, should be wireframed for final submission.

We are looking for you to map out exactly your entire project without spending time on the visual design elements such as colour, font choice, and graphic creation (however you may want to think about average font size). This will be your blueprint.

We are looking for clear communication so that we can understand by looking at your wireframe, the intended design's structure/layout. We are looking for smart layout designs and creative thinking about where to place items on the page that align with your vision. You should already be thinking and applying the previous 3 lectures in these wireframes on usability, interaction principles, and the basics.

We recommend doing it in figma with a grid. Your wireframe will likely be more realized in this form. But we do absolutely accept highly detailed sketches if you work better in that format. Please refer to first few slides in the week 3 lecture for reference on what detail we are looking for in wireframes

Week 3

Usability Heuristics

What makes your design usable? Some considerations and rules of practice for digital design. Always return to these to evaluate your design.

Lecture

Readings

For review next week

Wireframes (15%*)

Wireframe your entire project. Every scene should be wireframed for final submission. However you do not have to have every scene wireframed for next week.

This can be sketched on paper or created on Figma.

Recommended to do it digitally on Figma (you do not need to worry about components for this). However, if you are able to more clearly work in sketches, feel free to do it as paper sketches. You will not be docked marks, however be sure to make it detailed and percise.

If sketched on paper, use a template so that you are working in the same size across different mocked up screens.

This wireframe should be entirely grayscale (no colour). This is not design. Do not get caught up in the design minuitia, focus on the placement of your items and how much space you want them to take up. Make sure it is clear to the instructor. Do not inclue any photos, illustrations, or graphical elements.

Note: watch your type size. Even though it is not final type styles or sizes, you should be thinking about it. Your wireframes shouldn't be all in 12px font-size.

Refer to the readings for assistance on creating wireframes. There are many more helpful articles and videos on how to create a good wireframe.

*The final mark for the system design will be 15%. It will not be due till week 5.

Due next week

System design resubmission: 5%

Revise your system design based on recommendations from your instructor and apply a newly designed component—that is not in the design already—to fit within your system.

Week 2

Grids & System Design

All digital design, starts with these two fundamentals: Grids and System Design.

Lecture

View grid example

Live grid demo example from lecture. (Overlay removed here).

Readings

Due Sunday morning

System Design applied (*)

Download this Figma file and open it in your Figma.

Apply your own system and take care to apply a clear and distinctive personality but also have an attention to detail to make sure the system is workable and pixel perfect. Pay special attention to your padding and margin as well as a clean file/layers.

Make sure to set the file sharing permissions to edit with your instructor. You can find their email in the course overview on this site.

Figma file

*The final mark for the system design will be 5%. However, after submitting next week, the instructor will review and provide you feedback and an additional challenge, upon this point will it be given a final mark.

Due next week

Proposal: 5%

Apply any feedback from your instructor/class. Moodboards (create on Figma), inspiration for project, and loose notes on structure/events of movie and potential ideas of organizing it.

Rough Sketches: 2.5%

Slightly more thought about ideas roughly sketched out. It can very rough. Think of it as an expanded proposal with a clearer sense of how you will be organizing the information. These are not wireframes. Every detail does not need to be put down. Big picture. These rough sketches should simply communicate, What is your concept? without getting into the design or nitty gritty.

Week 1

What is digital design?

What are the applications? What are the ranges? How do we recognize good work and what are the building blocks of it?

Lecture

Slack

Make sure to sign up for Slack with this invite link and join your lab channel.

Readings

Learn Design - Figma

It is highly recommended you take the time to read through these lessons, it won't take you more than an hour and will set you off on the right foot in this class.

Learn Design — Figma

Lynda tutorial

There is also a more in-depth tutorial on Lynda that really goes through everything in detail. We really recommend taking the time familiarizing yourselves!

Lynda tutorial

Due in class

Download Figma and sign up for the student account (free pro version).

Figma tutorial: 2.5%

Complete this Figma tutorial and submit the link to your instructor of the file you should have been created by following it.

Download an svg file for the tutorial here (right click "here" and click "save link as").
Download an image file for the tutorial here (right click "here" and click "save link as").

Figma experiment: 2.5%

Experiment in Figma. No parameters, just experiment and make something interesting.

For review next week

Proposal: 5% (Due week 3)

Moodboards (create on Figma), inspiration for project, and loose notes on structure/events of movie and potential ideas of organizing it.

For inspiration

Awwwards CSS Design Awards Dribble

Google fonts

Have a look through the Google Fonts library. You can reference Typewolf for help identifying nice parings and being able to sift through a rather large library.

Google fonts Typewolf

Code resources

Important links or code

CSS Must

Include this in the top of your css file:

* {box-sizing: border-box;}

HTML Must

Include these in the head of your HTML file, after title:


								<meta charset="UTF-8">

								<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Link your CSS to your HTML

Include this in the head tag


								<link href="css/flexboxgrid.css" rel="stylesheet">

								<link href="css/style.css" rel="stylesheet">

Link your JS to your HTML

Include this just before the closing body tag


								<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

								<script src="js/scripts.js"></script>

Download Flexbox Grid

Read about Flexbox Grid and download it from the course website.

Flexbox Grid documentation Download link

Readings

I highly recommend looking through these readings.

Applying Google fonts

Instructions on how to use a Google font.

Google font tutorial

CSS declaration list

W3Schools lists every CSS declaration for your reference.

CSS declaration list

W3Schools CSS tutorial

A handy and simple tutorial that you can go through.

CSS tutorial

How to acheive specific features in CSS

A list of very specific features / common things you see on other websites, such as navigation menus, etc. Recommended for advanced users only. How to's

Major project

Project brief

Create a digital interactive piece demonstrating key events of a movie (e.g. a timeline). The organization and choice of events is entirely up to you. Avoid simply using screenshots with no form of image treatment or editing from the movie. Creative representation of the events (illustrations, collage, typographic, colour, etc) is encouraged.

Be mindful of your design system when representing different events, while you may decide to treat them visually different, there should be an underlying system so that someone could still tell that the event still belongs on your webpage.

Movie options

Jurassic Park (Netflix or Youtube)

The Usual Suspects (Amazon Prime Video or Youtube)

Clueless (Netflix or Youtube)

Mad Max - Fury Road (Youtube)

Booksmart (Amazon Prime Video or Youtube)

LaLa Land (Netflix or Youtube)

Baby Driver (Netflix or Youtube)

Requirements

Include at least one image

3 font maximum (recommended 1 - 2 fonts) (use Google Fonts)

At least one javascript interaction (e.g. click)

DESN 1011

Course overview

Investigate the role of basic coding and software applications in interaction design and how to implement digital design best practices.

Course outline Schedule Slack invite

Instructors

Katrina Lovrick hello@katrinalovrick.com

Adrian Davila-Zuniga adrian.davilazuniga@gmail.com

Jennifer Lee lee.j.dsgn@gmail.com

Week 13

Lecture

Compress your images!!

Host your project online to share with friends and family!

Due today

Responsive design (5%)

Developed major project (20%)

Week 12

Lecture

Audio files tutorial

Load your songs

Play a song

Pause a song

Reset a song to the beginning

Pause/reset all songs except for the one you want to play

Due next week

Responsive design (5%)

Developed major project (20%)

Week 11

Updates

For review next week

Responsive design (5%)

Due: March 31, 2020

Developed major project (20%)

Due: March 31, 2020

Week 10

Code grab bag

Readings

For review next week

Developed major project (20%)

Due: March 31, 2020

Week 9.5

Online tutorial: Horizontal scroll

Downloads

MouseWheel Jquery plugin

Link your js plugin

Add the mousewheel functionality

Week 9

Javscript: actually, jQuery

Tutorial videos

Creating a popup:

Explaining purpose of $(this):

Creating a slider:

Readings

Link your JS to your HTML

Due next week

MA09: jQuery exercise (2.5%)

Submit the assignment here:

For review next week

Developed major project (20%)

Due: March 31, 2020

Week 8.5

Online tutorial

Downloads

Setting up Sass

Code

Figma File

Week 8

Responsive CSS: Media-queries and coding grids

Complex grid example

Readings

Media Queries

Flexbox Grid

Due next week

Design: 30%

Micro-assignment 08: Responsive code 2.5%

Requirements:

Submit the assignment here:

Week 6

Advanced CSS: Rem, Flex, Positioning

View Positioning example

Readings

Flex

Position

Z-index

Due Feb 25

Micro Assignment: Advanced CSS 2.5%

Part 1

You sould demonstrate:

Requirements: