GDS 46

Aug. 28 - Week 1

Topics: Introduction to the class

Assignments and Basic Information

• Here is a link to the class in Canvas
• There is a link to the syllabus on the first page in Canvas.
• Watch the class intro video - Duration 27:47
  This video is in Panopto, so you may need to be logged into Canvas to see it.  You probably want to use VS Code in the class. You can download it here.
  If you are not familiar with VS Code, watch the video here. VS Code is becoming probably the most popular editor used in web development. I would advise using it for all coding work done in the class. The videos are made using a number of different editors like Dreamweaver and Brackets, but the actual code is the same no matter what editor you use. You CAN use any editor you want in the class.
• Here is another video on using emmet, specifically in VS Code - Duration 17:36
  • emmet can save you a LOT of time when coding.
• Review Ch. 1-3 in Learning Web Design. They talk about the Web Design Process, such as creating wireframes. You should be able to get free online access to this book through Mission’s new online access to Safari Online. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari
  Here is a direct link to the book once you have the safari account.
• Assignment: Post in the "Introductions" discussion forum in Canvas. Give a short introduction to yourself, and about your expectations for the class. You can find the discussion forum under the Discussions link on the left in Canvas. I will check this to verify you are in the class. Make sure to reply to the post as soon as possible to avoid being dropped.
• Take the opening day survey in Canvas under the modules link
• Optional Office hours: Generally Mondays 10:00AM - 12:30PM on Zoom and Wednesdays 1:00PM - 2:00PM in-person and through Zoom. Check the home page in Canvas for links to the zoom office hours. You can talk to me live at those times to ask questions, etc.
• Start Project 1: Bio Page
  • Create 1 web page about yourself. You only need to make 1 page.
  • Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
  • A wireframe is due first.
    • Here is a video from GDS 045 on using figma for wireframes if you would like to use figma, although you can use whatever app you want to for the wireframes.
    • There are lots of videos on using figma to make wireframes here
    • Here is a link to the page detailing how you can get a free upgrade to your figma account for students.
    • Here are example wireframes and other student work.
  • See more instructions here

Additional Info

Review CSS and HTML Basics

• Most, but maybe not all of the main GDS 46 videos can be found in this youtube playlist, but you should use this page to access ALL the videos.
• Watch videos from GDS 45 if you do not feel comfortable with some beginning concepts. Here is a link to all the GDS 45 Beginning Web Design Videos. We may also use them for review or context throughout the semester.
• Review CSS basics if necessary here (optional) - Duration 29:26
  • Download the source files here (optional)

Dreamweaver

• Some of the videos use Dreamweaver, but Dreamweaver is no longer required for the course. If you do want to use Dreamweaver while creating your pages, you can. Here are links to some videos on using Dreamweaver. They are not being updated, so the interface may be slightly different that the current one. These are older, optional videos for those who want to use Dreamweaver in the class. I'm assuming you will be using VSCode, however.
  • Introduction to the Dreamweaver interface V2 - Duration 35:24 - The starting file is linked here if you want to follow along with the video
  • GDES 46 Creating a site in Dreamweaver - Duration 23:08
  • GDES 46 Using the Files Panel in Dreamweaver - Duration 22:52
  • The Document Window and Live View in Dreamweaver - Duration 32:58
  • Creating a basic Page with Dreamweaver - Duration 31:14 - The source files are here if you want to follow along with the video
  • Assets Panel, Images and Smart Objects in Dreamweaver - Duration 33:03 - The start files are here if you want to follow along with the video
  • Text in Dreamweaver - Duration 31:52 - Download the source files here and follow along with the video if you wish
  • The CSS Designer Panel in Dreamweaver - Duration 39:51 - Download the source files here and follow along with the video if you wish
  • Tables in Dreamweaver - Duration 29:48 - Download the source files here and follow along with the video if you wish
  • Coding in Dreamweaver - Duration 31:50
  • Rollovers in Dreamweaver using Behaviors - Duration 15:29 - Download the source files here and follow along with the video if you wish
  • Dreamweaver Library Items, Snippets, and Templates - Duration 37:43 - Download the source files here and follow along with the video (if you want to)
  • There may be more videos on using Dreamweaver that will be available later in the semester when applicable.

CSS Shapes

• Here are a couple of links from the book on using CSS Shapes
  • CSS Shapes at the Experimental Layout Lab of Jen Simmons (labs.jensimmons.com/#shapes)
  • “A Redesign with CSS Shapes” by Eric Meyer (alistapart.com/article/redesign-with-css-shapes)
• Other links on CSS Shapes
  • Using CSS Shapes for Interesting User Controls and Navigation

Sept. 4 - Week 2

Topics: The Web Design Process and some review of Flexbox, CSS Positioning, and Floats

Important Note: Adobe stopped supporting the Brackets code editor a while back. It is now an open source project, so you COULD use it for the the class, but I suggest you use VS Code going forward to do the coding in the class(download here). If you are used to Brackets, here is a video from the GDS 45 class on switching to VS Code from Brackets, and includes some useful VS Code extensions. VS Code and extensions change all the time, so things may change rapidly. VS Code has becomevery popular and seems to be the current standard. The videos in the class were done using different editors like Brackets, VS Code, and maybe others, but remember the code is the same. It's just a different editor.

Assignments

There is some review this week, as well as some new things. We'll be getting everybody up to speed on the Web Design Process, Flexbox, CSS Positioning and Floats.

The Web Design Process

• Watch the video on The Web Design and Development Process - Methods and Resources - Duration 19:03
  • Here is a link to the page in the video on the web design and development process. It has links to many resources.

Flexbox

• If you haven't already, read the section on Flexbox in Ch. 16 of Learning Web Design
  • This will provide more background on Flexbox.
  • Do Exercises 16-1 through 16-3 to practice using Flexbox. You will make a menu bar, a flexible menu, and change the order of items. You do not have to turn these in, but the material is important.
• Optional: If you are not familiar with the display property, you may want to Watch this short video on the Display Property, Learn CSS Display Property In 4 Minutes - Duration 4:14
• If you don't feel real comfortable with flexbox, you may want to watch these videos from GDS 045, especially the first one. They are newish as of Fall 23, so you probably haven't seen them. Hopefully a lot of it would be review :)
  • Introduction to Flexbox - Duration 22:37
  • Flexbox Container Properties - Duration 21:39
  • Flex Item Properties - Order and Alignment - Duration 14:27
  • Flex Item Properties - flex-grow, flex-shrink, and flex-basis - Duration - 27:39
• Assignment:
  Watch the video on Responsive Flexbox Layout Patterns - Duration 28:12
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
    
• If you have never played it, Flexbox Froggy is a great way to learn flexbox and get a feel for how to use many of the properties related to flexbox.
• Optional:
  Watch this video from GDS 45 on Layout with Flexbox if you have not already seen this video, and you want to see flexbox used in a complete layout. Use this start file(right click to download) if you want to follow along.
• Optional: Take a look at Ch. 4 of the book Responsive Web Design with HTML5 and CSS - Fourth Edition on Fluid Layout and Flexbox. You should have access to the book through your O'Reilly account. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari

Multicolumn Layout

• Check out Multicolumn Layout as another method of creating columns
  • Page 420 of Learning Web Design has information on this technique
  • There is also a full article here
  • This is a pretty easy way to make text flow into columns, and can come in handy

CSS Positioning and Floats

• Very Optional: Review Ch. 15 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. Float based layouts are going away, but you MAY need to update a float based layout sometime, so it's good to know, and Positioning is used in specific instances, although not usually for an entire layout. Do the exercises in Ch. 15 if you want to practice CSS Positioning, and if you have not already looked at these. These exercises are optional, and are not to be turned in. The information on float based layouts is for reference only.

CSS Shapes

• Look at the information in Ch. 15 of Learning Web Design on CSS shapes, which is pretty cool, although I'm not sure it is being used too much out in the wild... Yet.
  • Here is a video from Jen Simmons on using CSS Shapes. There are more links in the book. Extra credit if you use CSS Shapes on the Bio Page Assignment!

Bio Project

• Complete the Bio Page Project
  • See more details here
  • Here are example wireframes and other student work.
  • Extra credit if you use CSS Shapes on the assignment!
  • Don't forget to validate your assignment by checking the file at: http://validator.w3.org/ Click on Validate File by Upload near the top, and then click the browse button, locate your file, and submit. Make any corrections necessary so you get the happy, green, OK message.
  • To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. It is important to name your folder correctly BEFORE you zip it to send, so I know who's folder it is. Please name you folder like this firstname_lastname_assignX. Then when you zip the folder, I will know it is yours. Don't rename any files of folders inside your site folder before sending, as that will probably break things. To zip a folder on a PC, create the folder with your name on it like this firstname_lastname_assignX and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder". On a mac, control click or right click on the folder and select compress. Remember to name the folder before compressing it, so I can see who's it is when it is uncompressed.
  • Drop the zip files into the drop box under the Projects module in Canvas.

Additional Info

Flexbox Resources

• A Complete Guide to Flexbox
  • Lots of people use this one
• Flexbox.io
  • A free 20 video course just on flexbox
• CSS Flexbox from W3Schools
• Basic concepts of flexbox from Mozilla
• Flexbox Froggy
  • A game to learn Flexbox. If you haven't played it before, you should. It's fun and helps with understanding flexbox.

CSS Shapes

• Here are a couple of links from the book on using CSS Shapes
  • CSS Shapes at the Experimental Layout Lab of Jen Simmons (labs.jensimmons.com/#shapes)
  • “A Redesign with CSS Shapes” by Eric Meyer (alistapart.com/article/redesign-with-css-shapes)

CSS Positioning Review

• Here is a video on CSS Positioning from GDS 45, if you are fuzzy on what that is.
• CSS Positioning is discussed on page 405 of Learning Web Design in Ch. 15

Very Optional Floats Review(For historical purposes only)

• Note: Floats are no longer current to use for layout, but you may end up redesigning a site that uses them sometime, so it might be good to know.
• Here is a video on the basics of floats if you are not already comfortable with how they work.
• Watch this video on Layout with CSS Floats if you do not feel comfortable with layout using floats. This is a slightly older video on how to create a fixed layout with Floats, but you may run into sites like this, especially if doing a redesign. Use this start file(right click to download) if you want to follow along.
• Here is an even simpler video on float layout from GDS 45
• Clearfix for Floats: Check out this page on using clearfix. Clearfix methods are used to contain floated elements in designs so they don't leak out of the container they are in. This can occur any time you are using floats, not just in float based layouts. The Learning Web Design book has information on Clearfix on page 398 in Ch. 15. Here is a page from CSS Tricks on clearfix.
  • Stop Using the Old “Clearfix” (Some think it is bad)

Sept. 11 - Week 3

Topics: Finishing Flexbox, Design Principals, Starting CSS Grid, Information Architecture and Photoshop Layer Comps

Assignments

Here are some more good videos on Flexbox, if you haven't seen them already

• Watch: Flexbox design patterns you can use in your projects - Duration 15:32
• Optional: Do you understand how Flexbox does what it does? - Duration 7:55
• Optional: Learn Flexbox in 15 Minutes - Duration 15:11

A little more Flexbox

Assignment:
Watch the video on Cards with Flexbox - Duration 19:42

• For this video, follow along with the video and recreate the page done in the video.
• The start files are here
• Drop your zipped site folder into the Canvas drop box in the Assignment module.
• You can check the Canvas calendar for due dates.

Design Principals and Information Architecture

• Contrast, Repetition, Alignment, and Proximity are important design principals used in web design. If you haven't seen it already, watch the short video Intro 4 Foundational UI Design Principles | C.R.A.P. - Duration 9:15
• Assignment: Watch Information Architecture in UX design - Duration 3:32. A good, short video with simple definitions and techniques
• Optional: Watch What Is Information Architecture? (UX Design Guide) - Duration 17:19 - Mental Models and other topics in IA

Getting started with an Introduction to CSS Grid - we will start using it more next week

• If you can, check out the video Learn CSS Grid the easy way - Duration 37:03
• Look at A Complete Guide to Grid from CSS-Tricks
• Optional: Another video you might look at is Learn CSS Grid in 20 Minutes - Duration 18:34
• Try to take a look at pages 446-483 in Learning Web Design on CSS Grid(Ch. 16)

Optional: Layer Comps in Photoshop

• Optional: Check out this help page on Layer Comps in Photoshop
  • Layer comps can be good way to save multiple versions of a design in 1 file if you are using Photoshop.

• Start Artist Project - See the requirements here.
  • Sketches are due first (There are examples in the Discussion in Canvas)
  • Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
  • Here is a link to the figma team for the Wireframes due later. so you can save a COPY of your figma wireframes, so I and others can see them there.
  • Here are example wireframes and other student work
  • Check the Canvas Calendar for all due dates

Additional Info

• Review image file formats for the web here if necessary (from GDS 045)

More Information Architecture (from GDS 072)

• Information Architecture Essentials
  • Video series/class in Information Architecture
  • Lots of detail here if you have the time
  • Accessible through your Oreilly Online account
• The Easier Way to Create IA: Establish Information Priority - Duration 5:50 - An example of techniques for figuring out information priority
• Chris How - Digital Experiences and Information Architecture - Duration 39:18 - More in-depth discussion on the different ways you can organize information
• Information Architecture & Sketching for UI/UX Projects | Behind the Design - Duration 6:44 - A bit of a case study in building an app and the IA process

CSS Grid Resources

• A Complete Guide to Grid from CSS-Tricks
• Layout Land Videos on Youtube
• Grid by Example by Rachel Andrews
  • Videos for CSS Grid
  • Examples
  • Patterns(these are nice)
• CSS Grid Class by Web Bos
  • Videos from the same guy who did flexbox.io
• CSS Grid Playground from mozilla
• Ten modern layouts in one line of CSS
  • Pretty cool stuff, a lot using CSS Grid. We may look at similar code later.
• More resources on CSS Grid

Other Resources and Links

• Check out http://www.caniuse.com to see more about support for CSS Properties
• Figma blog. Lots of good articles.
• Invision - collaborative prototyping tool
• Check out draw.io for information architecture and sitemaps
• Local events on Web Design and Development from meetup.com

Sept. 18 - Week 4

Topics: CSS Grid, Media Queries and Photoshop Art Boards

CSS Grid

• CSS Grid is becoming more popular as a method to lay out pages and elements. It's a fairly recent CSS thing, and should perhaps be used with care for a while longer, and perhaps with fallbacks for those browsers that don't support it yet.
• If you want to watch a video on CSS Grid Basics, Jen Simmons has one here- Duration 15:24
• Here is a video comparing Flexbox and CSS Grid, also from Jen Simmons - Duration 4:17
• If you haven't read it already, read pages 446-483 in Learning Web Design on CSS Grid(Ch. 16)
  • Do Exercises 16-4 through 16-6 to practice using CSS Grid. You do not have to turn these in, but the material is important.
• Optional: Take a look at Ch. 5 of the book Responsive Web Design with HTML5 and CSS - Fourth Edition on Layout with CSS Grid. You should have access to the book through your O'Reilly account. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari
• Make sure to take a look at the other CSS Grid Resources in the Additional Info section. There is a lot of good stuff there.
• Assignment:
  Watch the video on CSS Grid Gallery with Flexbox Fallback - Duration 25:31
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
  • Hint: This video and code can help with the required gallery in the Artist Assignment

Assignments

• Message Assignment: Log into Canvas, click on the discussions link and reply to the discussion "Well Designed Websites" with the URL of a site you think is well designed, and give us 3 reasons why. Also describe who you think the target audience is. Try to enter your first post by Friday, so everyone will have time to reply. Reply to 1 other person's post with your comment or opinion on their site by Monday.

Media Queries

• If you are fuzzy on media queries, here is a quick intro, Learn CSS Media Query In 7 Minutes - Duration 7:11
• Here is another quick intro, Tutorial: Learn how to use CSS Media Queries in less than 5 minutes - Duration 4:29
• Optional: For more in-depth uses, watch CSS Media Queries & Responsive Web Design tutorial for Beginners - Duration 27:02
• Optional: Watch the video Media Queries - Duration 35:46
  • This is an older video from me with background on using media queries. It should still be OK as far as accuracy.
  • Download the source files here and follow along with the video if you wish. You do not have to turn this exercise in.

CSS Grid

• See the links from last week above
• Play Grid Garden is a game to kearn CSS Grid form those that brought you Flexbox Froggy . What! We have to play a game? YES! It's fun ;) and it will help you get better at CSS Grid.
• Links related to the CSS Grid Gallery video from this week
  • This code is adapted from Rachel Andrew's Header, footer, centre panel containing as many items as fit
  • A Complete Guide to Grid
  • Repeat CSS function
  • grid-rows / grid-columns includes information about the repeat function used in this example
  • grid-auto-columns
  • grid-auto-rows
  • Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'
  • An Introduction to the `fr` CSS unit
• More resources on CSS Grid

Photoshop Art Boards

• Watch the video on Design with Artboards in Photoshop from Adobe - Duration 3:57
• More videos in the Additional info section

Continue the Artist Project

• See the requirements here
• Don't procrastinate!
• Wireframes are due soon. There are links on the project page to Figma(online app) and Sketch (mac only, unfortunately), which are popular design tools, that can also be used for wireframing. Figma would be great to use for the wireframes. If you use figma, you can share the wireframes with me instead of uploading them. You can share figma files by clicking the share button in the top right while in figma. See the video Introduction to Figma for Wireframing for tips on using figma.
  Here is the link to our Figma Team this semester. You shuld see a project there for Artist Project Wireframes.
• Check the canvas Calendar for due dates.

Additional Info

• Review image file formats for the web here if necessary

Media Queries Resources

• Using media queries from MDN web docs
• Responsive Web Design - Media Queries from W3schools
• CSS Media Queries - Examples from W3schools
• CSS @media Rule from W3schools
• Responsive Web Design Basics from Google

Hover Effect Overlay Text Sample Code

• You might need to hunt through these files a little to see what works

More CSS Grid Resources

• Learn CSS Grid. This is a pretty neat collection of tips and techniques with CSS grid.
• CSS Grid Layout documentation from MDN Web Docs
• 8 Common Website Layouts Built with CSS Grid

Photoshop Artboards Resources

• How to Use Artboards in Photoshop (UX / UI / Web Design in Photoshop) video - Duration 28:28

Sept. 25 - Week 5

Topics: Figma and More CSS Grid

Assignments

Figma

• Sign up for a Figma account if you haven't already.
  Use your Mission email address to sign up. It will be free :)
• You can use figma for some things going forward like wireframes and/or comps.
• Figma is covered extensively in GDS 072 Digital Imaging and User Interface Design, where there is a much more in depth look at it, and how it can be used for UI/UX. GDS 072 is part of our new User Experience and Interface Design Certificate.
• If you haven't seen it, watch the Introduction to Figma video from GDS 045 - Duration 17:47
• Figma does a great job of creating lots of video tutorials on how to use it. The Figma youtube channel is here. Take a look when you have time.

CSS Grid

• Watch 3 short videos on the flexibilty of CSS Grid from Jen Simmons
  • Video: Min & Max Content Sizing in CSS Grid - Duration 7:41
  • Video: FR Units in CSS Grid - Duration 8:21
  • Video: MinMax in CSS Grid in CSS Grid - Duration 4:36
• Assignment:
  Watch the video on CSS Grid Layout Using Grid Line Numbers, Names, and Spans - Duration 25:24
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
  • These exercises are based in part on examples here and patterns here by Rachel Andrew.
  • Note: There is a missing closing } at the end of the styles in the video. Go ahead and add it.

Artist Project

• See the requirements here
• Check the Canvas Calendar for due dates.

Additional Info

More CSS Grid Resources

• Grid Examples is a collection of sites using CSS Grid
• Here is Eric Meyer's site done with CSS Grid, and here is an article about how he converted it, Practical CSS Grid: Adding Grid to an Existing Design. A nice story :)

More Figma resources

• Figma Youtube Channel from above
• Desktop App for macOS
• Desktop App for Windows
• Figma Downloads
• Figma Community

Developer Tools

• Watch Basic Beginner’s guide to Chrome & Firefox developer tools - youtube video - Duration 5:13

Review if necessary

• Review the video for CSS Box Model if necessary here (optional) - Duration 36:56
• Review the video for CSS Background Images if necessary here (optional) - Duration 20:58
• Review the video for CSS Floats if necessary here (optional) - Duration 30:59
• All other GDES 45 Intro to Web Design videos can be found here

Oct. 2 - Week 6

Topics: Responsive Web Design and More CSS Grid

Responsive Web Design

• Suggested Reading: pages 485-513 in Learning Web Design on Responsive Web Design(Ch. 17)
  • This chapter is about Responsive Web Design, which we have kind of been doing already, and will do more of in the next few weeks.
  • Do or review Exercise 17-1 to practice responsive layout. You do not have to turn this in, but the practice helps.
• Suggested Reading: Check out Ch. 1, "The Essentials of Responsive Design" in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This newer text goes over more basics of responsive design. You should be able to access the book through your free student O'reilly account.
• If you have not already seen it in GDS 45, watch the video Basic Responsive inline Images(Youtube video) - Duration 5:28
  • If you use narrow columns, it can help prevent your images from leaking out of the columns. This is the most basic information on responsive images, and can easily be added to your Artist projects. We will be doing more advanced work with responsive images soon. There is no exercise due for this video.
• Suggested video: Check out the video 5 simple tips to making responsive layouts the easy way - Duration 15:53 from Kevin Powell. There are some more good videos from him on responsive design over the next couple of weeks.
• Update: Some of you probably need to use a hamburger menu for responsive navigation on the Artist Project. Here is a video from later on that.

Assignments

• Optional: Watch the video lecture on Creating Equal Height Boxes and Cards. This is actually from GDS 045, but is a little advanced for that class(sorry if you were in that class :). There is a section about using CSS Grid to do the layout for a group of cards. It also shows how you can mix flexbox and grid to create the best solution. Here are the files if you want to follow along.
• Extra Credit Assignment:
  Watch the video CSS Grid Layout with Grid Areas, Nested Grids, and Float Fallback - Duration 29:39
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • This exercise is extra credit since you are finishing the Artist site this week. It's VERY good to know this information, however.

Artist Project

• See the requirements here
• Due Soon! Check the Canvas Calendar for due dates.

Additional Info

Responsive Web Design

• Video: Are you writing responsive CSS the wrong way? - Duration 14:14
  • This is another video from Kevin Powell referencing CSS Zengarden and how you could apply RWD principles to make a version of the page.
• 11 powerful examples of responsive web design
• HTML Responsive Web Design from W3 Schools
• Responsive Web Design Basics from Google
• Responsive Web Design by Ethan Marcotte May 25, 2010 - The Origin Story
• BTW here is Ethan Marcotte's personal site, built using CSS grid

More CSS Grid Resources

• The Holy Grail Layout with CSS Grid from CSS Tricks
• The Auto-Flowing Powers of Grid’s Dense Keyword from CSS-Tricks
• Video: Floats, Flexbox, Grid? The progression of CSS layouts - Duration 26:59
• Video: Responsive CSS Grid with NO MEDIA QUERIES! - Duration 20:03
• Video: The Magic of CSS Grid AUTO-FIT vs AUTO-FILL - Duration 11:24

Color in Design

• 12 colours and the emotions they evoke - A web designer's guide to using colour to target key audiences. By Jerry Cao

Jobs

• Check out this Salary Guide
  • Glossary of job descriptions
• 10 Web Skills that Pay - An Article from Creative Bloq - you are already doing some of them!

Oct. 9 - Week 7

Topics: More RWD Principals, Figma links, More CSS Grid, and Personal Project Intro

More Responsive Web Design

• Suggested Reading: Review Ch. 2, "Writing HTML Markup" in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This chapter is hopefully review for you :)
• Reading: Look more closely at Ch. 3, "Media Queries And Container Queries" in the same book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This chapter should be SOME review and some NEW (Container Queries, which are pretty cool). We may see more about Container Queries later. They are fairly bleeding edge.

Links to resources and tutorials about Figma and Design

• Here is a link to the GDS 072 class from last Spring with links to tons of videos and articles about Figma and design in general. Feel free to take a look in your free time ;) especially if you are having trouble using Figma for wireframes. I think some of you have taken GDS 072, and some haven't, but the videos and links are available to you. You might want to bookmark this one.
• Especially helpful might be Introduction to Figma and Introduction to Figma for Wireframing

Assignments

• This week, choose at least 1 of the following 2 exercises to do. If you do both, 1 will be extra credit. It's important to know the material in the RWD Principles and Layout exercise, but it may be mostly review for you. The Cards with CSS Grid exercise lets you apply some of the things you have been doing in other exercises with CSS Grid. It's important to know the material in both videos, even if you don't do both exercises.
• Assignment:
  More cards! Watch the video Cards with CSS Grid - Duration 34:43
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • Here are some of the links in the video
    • Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit
    • Auto-placement in CSS Grid Layout
    • object-fit
    • aspect-ratio
    • Designing An Aspect Ratio Unit For CSS
    • Aspect Ratio Boxes
    • Ultimate CSS Gradient Generator
    • Font Awesome
    • You probably noticed the mistake in the video. I should have used .stats instead of #stats for the stats sections, since you can only use an ID once on a page. I changed the start file, so you should be ok to start. Just make sure to use .stats instead of #stats in your code. We will see who reads this note ;)
    • The aspect-ratio CSS from the video above is only now becoming well supported, so it might be a little risky to use right now. Shalabh reminded me of another method to crop images to a square or other shape, while hiding parts of the image. I think instagram uses it, or has used it. There is a good article on it here.
• Assignment:
  Watch the video RWD Principles and Layout - Duration 31:28
  • Note: This video covers some of the pricipals and techniques involved in responsive design, but there are many more. Obviously, flexbox, CSS Grid and other techniques also offer ways to make things 'responsive'
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.

Start the Personal Project

• See the requirements here
• Here are example wireframes and other student work.
• If you use Figma for the Wireframes and/or Comps, please turn in exported image files in Canvas and put a COPY of your figma file in our calss Figma team, in the appropriate project.
  • Here is a link to the figma team this semester
• Here is the link to some sample wireframes and comps from previous semesters
• Check the Canvas Calendar for due dates.

Additional Info

More Responsive Web Design Resources

• this is responsive by Brad Frost
• Responsive Patterns by Brad Frost
• Responsive Resources by Brad Frost
  • This one has links to more resources than you can use ;)
• You can see how your page would look on different devices by using these browser features(instructions are linked below)
  • Chrome Device Mode
  • Firefox Responsive Design Mode

Tools that can be used for creating comps(or wireframes). You probably already know this, but...

• Figma - This is now kind of an industry standard.
  • Figma Resources
  • Figma Guides and Best Practices
• Photoshop
  • Some still use Photoshop for designing pages
  • See the earlier Layer Comps in Photoshop video here - duration 6:26
• Sketch 3
  • Sketch is a very popular tool for front end design, but has lost some market share to Figma.
  • Here is a link to the education store discount
  • Intro to Sketch - Beginners guide to Sketch Basics (youtube video)

Oct. 16 - Week 8

Topics: CSS Subgrid and Basic Responsive Images

Note: The Adobe Max online conference just happened, and it is free to watch the sessions. It has sessions on all areas of design. You can check out the Adobe Max Conference here.

Subgrid

• Check out this article about subgrid called Learn CSS Subgrid
  • Subgrid is a newer part of CSS Grid that is not really ready to be used because of lack of browser support in Chrome, but it will be coming and helps when you want nested grids that follow the master grid.
• Watch the helpful short video on subgrid, "Easy and more consistent layouts using subgrid" - Duration: 8:00
• Here are a couple more videos on subgrid. For some reason(I can't figure out why) support is lagging on Chrome, so this is still in the 'future' category.
  • Creating a robust grid system using subgrid
  • You can't do this without subgrid

Images and Responsive Images

• Suggested Reading: Look at Ch. 9, "Responsive Images" in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This chapter is hopefully review for you :)
• Optional but encouraged: Review the following videos from GDS 045 about images for image basics
  • Images and File Types
    Duration 47:07
    • This video shows how to export different typoes of images. Here are the files if you want to follow along.
  • Background Images
    Duration 33:08
  • Basic Inline Images
    Duration 34:10
  • Processing and Exporting an Image - Duration 32:02. This one goes over some ways to clean up images.
  • Exporting from Bridge Using the Export Panel - Quick Tip - Duration 5:49 This is another way to export images to use on pages.
• Review pages 146-162 in Learning Web Design on Responsive Image Markup (Ch. 7)
  • This section covers html and CSS for Responsive Images.
  • Do Exercise 7-3 to practice responsive images. You do not have to turn this in.
• Extra Credit Assignment:
  Watch the video Basics of Responsive Images - Duration 37:55
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
  • You don't HAVE to do this one, but you do need to know the material.
  • See the Additional Info section for apps that you can use to export images.
• Watch the video Luke Wroblewski - Mobile Design Essentials Part 1 - Conversions@Google 2015 - Duration 1:18:53
  • Post important or interesting points from the video in the discussion forum Luke Wroblewski Video Comments
    • Post 1 or 2 points from the video that you thought were important or interesting
    • Comment on at least 1 point by others
    • The forum is under the lessons link in Canvas
    • This video is a few years old, but has some good insight into mobile design.
• Very Optional Exercise - Watch the video CSS Sprites - Duration 25:47
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • You do not have to turn in this exercise!

Continue the Personal Project

• See the requirements here
• Finish your wireframes which are due pretty soon.
• Check the Canvas Calendar for due dates.

Additional Info

Responsive Images Articles

• Responsive Images: Use Cases and Documented Code Snippets to Get You Started
• Responsive Images 101, Part 1: Definitions

Tools that can be used for outputting images in multiple sizes and formats

• Figma
  • Here is a video from Figma on importing and exporting images.
  • Here is a page on Guide to exports in Figma
• Photoshop generator to create images from layers in different versions
  • Photoshop generator tutorial article
  • Video Generate Image Assets AS YOU WORK! - Photoshop CC Tutorial (youtube video)
• Sketch 3
  • Sketch can output multiple versions of images
  • Video Exporting Assets in Sketch 3 (youtube video)

Salaries and Jobs

• Look at a Salary Guide for Creatives
  • Glossary of job descriptions

Oct. 23 - Week 9

Topics: Advanced Responsive Images

More Responsive Images

• Optional: Images and File Types
  Duration 47:07
  • This would be good to look at if you don't feel like you know a lot about exporting images. This is s new, updated video from the beginning class, GDS 045.
  • The video shows how to export different types of images. Here are the files if you want to follow along.
• Read pages 139-146(Ch. 7 section on Adding SVG Images), and check out Chapters 23, 24 and 25 in Learning Web Design
  • Pages 139-146(Ch. 7) cover using SVG Images on pages, which is becoming very popular
    • Do Exercise 7-2 to practice using SVG Images if you wish
  • Ch. 23 covers Web Image Basics. You probably know a lot of this already, but check it out to make sure you are comfortable with all the details.
    • You could do the exercises in Ch. 23 for practice, but you do not have to turn them in.
  • Ch. 24 covers Image Asset Production and has more information about producing responsive images.
    • Do Exercise 24-3 to practice optimizing images, but you do not have to turn this in.
  • Ch. 25 covers SVGs in depth
  • If you didn't already, make sure to look at the part of Ch. 7 in Learning Web Design on Responsive Image Markup. It's on page 146 of the printed book(if anyone has that). You could do exercise 7-3 for practice, but you don't have to turn it in. This content is the subject of this weeks exercise.
• Assignment:
  Watch the video Advanced Responsive Images - Duration 38:22
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
  • Here are some sites shown in the video. See more in the Addition Info section.
    • Responsive Images: Use Cases and Documented Code Snippets to Get You Started
    • The anatomy of responsive images

Continue the Personal Project

• See the requirements here
• Check the Canvas Calendar for due dates.

Additional Info

More Responsive Image Resources

• Optional Video: srcset and sizes attributes - [ images on the web | part one ] - Duration 30:07
• Optional Video: Reduce image size: use srcset to automatically choose the right image - Duration 3:33
• The anatomy of responsive images
• The Picture element
• Responsive images
• Swapping Images with the Sizes Attribute

Using SVGs on the web

• The complete guide to SVG
• Everything You Need To Know About SVG
• Using SVG
• SVG ON THE WEB A Practical Guide

Creating SVGs

• BOXY SVG SCALABLE VECTOR GRAPHICS EDITOR
• Inkscape
  • A free vector tool for SVGs
• SVGOMG
  • Optimizing tool for SVGs
• Adobe Illustrator
  • Can make SVGs, but it is a very deep program
• SVGs can also be animated!
  • Animating SVG Files With SVGator
  • svgator to animate SVGs

Oct.  30 - Week 10

Topics: Responsive Typography, WebFonts, Responsive Navigation and Icon Fonts

Responsive Typography

• If you are not already comfortable with the general principles of Typography, take a look at What Is Typography, and Why Is It Important? A Beginner’s Guide - 14 min read
• Read pages 264-265(Ch. 12) on Web Fonts in Learning Web Design if you don't know about using custom fonts on the web.
  • Make sure you are comfortable with the rest of the content in Ch. 12 on formatting text
• See the Additional Info section for resources on Responsive Typography, especially the first video
• Optional Reading: There is a section on Web Typography in the "Responsive Web Design with HTML5 and CSS - Fourth Edition" book.
• Extra Credit Assignment:
  Watch the video Responsive Typography with CSS Custom Properties and clamp - Duration 39:27
  • I know you are completing the Personal Project, so this exercise is extra credit!
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • Even if you don't do this extra credit assignment, it has important information to know, so maybe you might jsut watch it on high speed playback. I can't gurantee you safety if you do though :)
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• Here is an article on using Google Fonts, which is also covered a little in the previous video, and in the video below.
• Bonus Exercise (No points):
  Watch the video Using Web Fonts - Duration 20:08
  • I know you are completing the Personal Project, so this exercise is extra credit!
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• See more links to resources about Responsive Typography in the Additional Info section.

Responsive Navigation

• Hopefully you already have been using these, but make sure to check your sites in mobile design/RWD modes in browsers
  • Simulate Mobile Devices with Device Mode in Chrome DevTools
  • Responsive Design Mode (in firefox)
• Read pages 502-506(Ch. 17) on Fluid Typography and responsive navigation patterns in Learning Web Design
  • Remember, exercise 17-1 has a method to create basic responsive navigation.
• Highly Suggested: Watch the video Responsive Navigation - Duration 24:45
  • This optional (no points) exercise can help with creating responsive navigation for your site.
  • Start at 15:10 in the video to see responsive navigation with a hamburger menu/toggle to display navigation on mobile.
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here - if you want to follow along
  • Here is the article A Brief Overview On Responsive Navigation Patterns mentioned in the video.
  • Here is the tutorial that the exercise page is based on.
    How to Build a Responsive Navigation Bar using CSS Flexbox and Javascript
  • You do not have to turn this exercise in.
  • Here is another video on creating Basic Responsive Navigation Panels.
    It is an older video covering some of the examples in more depth.
    • Here are the start files for this optional/older one if you want to take a look.
• See more links to resources about Responsive Navigation in the Additional Info section, including a nice tutorial for another hamburger menu.

Complete the Personal Project

• See the requirements here
• Check the Canvas Calendar for due dates.

Additional Info

Responsive Typography

• Article: Modern Fluid Typography Using CSS Clamp
  • This is the one with the scary math from the video :)
• Article: A guide to responsive typography
  Creating an efficient typography design system to adopt responsive web design.
• Video: Truly Fluid Typography with 1 CSS PROPERTY!
• Video: Responsive Typography with CSS Clamp
• Responsive And Fluid Typography With vh And vw Units
• Precise control over responsive typography
• The rules of responsive web typography
• 9 responsive typography tips

Responsive Navigation

• How to create Responsive Top Navigation from W3 Schools
• Here is another one with a dropdown from W3 Schools (no, they are not paying me)
• Older but still relevant articles
  • The Rules for Modern Navigation
  • Responsive navigation patterns by Brad Frost
  • Complex navigation patterns for responsive design by Brad Frost
  • Adventures in Responsive Navigation
    • This one has some very nice examples and code, although a bit dated
  • Hamburger Menus and Hidden Navigation Hurt UX Metrics
  • How to build a responsive navbar with a toggle menu using Flexbox

Icon Fonts

• Icon Fonts are Awesome from CSS-Tricks
• Font Awesome. A very popular way to add icons to your website.
• Video: How to use font awesome icons in 2020
• The 50 Best Free Icon Fonts for UI Design
• Bye the way, I used fontawesome for the cool Jedi icon at the top of this page. Didn't know I was secretly a Jedi, did you? ;)

Other Articles

• My Head Hurts! Cognitive Friction in the Age of Mobile
• Optional: Check out this article, Here’s How to Become a UX Designer in 2023, if you are interested.
  

Nov. 6 - Week 11

Topics: Bootstrap, Advanced Selectors, Git, Github, an extra credit project, and the Final Project! (Not all due at once ;)

• Update: Don't worry about the Kahoot Quiz that was here, if you haven't done it already. It doesn't seem to be working as intended. It is not required.
• Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
• See the Additional Information on Accessibility, collaborative tools, Bootstrap resources, etc.
• If you didn't already know about it, here is a video on using emmet, specifically in VS Code - Duration 17:36
  • Emmet can save you a LOT of time when coding.

Bootstrap

• Bootstrap Documentation with setup information, examples, etc.
• Assignment: Watch the video Introduction to Bootstrap - Duration 48:21
  • Here is a link to the start files to use.
  • For this video, follow along with the video and recreate the page done in the video.
  • This exercise can help with the Extra Credit Redesign Assignment.
  • Here is a link to the bootstrap site.
  • Some links from the video are in the Additional Information section, as well as a link to an entire course on Bootstrap.
• See more information and videos about Bootstrap in the Additional Info section

Advanced Selectors

• Highly Suggested Reading: There is a lot of good information on advanced selectors in Ch. 6, CSS Selectors, Typography, and More in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition".
• Optional Exercise: Watch the video on Advanced Selectors - Duration 35:30
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • See Appendix C in Learning Web Design for a list of advanced selectors.
  • There is nothing to turn in for this optional exercise.
• For beyond the basics information on selectors, check out the video CSS Selectors - beyond the very basics - Duration 18:46
• Also from Kevin Powell, take a look at the video The new CSS pseudo-classes explained - :is() :where() :has() - Duration 13:49
  • These are even newer selectors
  • Some people call has() the parent selector. It's pretty cool stuff.
• See more information and videos about advanced selectors in the Additional Info section

Group Project

• Start Group Project
  • See the requirements here
  • Group Project Wireframes Due Nov. 20
  • Group Project Prototype with Comps Due Nov. 27
  • Group Project Due for testing Dec. 8
  • Group Project Final Version with Beta Tests and Report Due Dec. 11
• Note: These dates are on various days of the week, not once a week on Mondays.
• Also see the Canvas Calendar for due dates
• There is a discussion in Canvas listing the team members. Please respond there to let me know who is filling the different roles on the team.

Git and Github CAN be used during production of the Final Project

• Git
  • Git is a free and open source distributed version control system
• Github
  • You can host and review code and manage projects
  • Read pages 581-588 in Learning Web Design for information on how to use Git and Github
• Watch Git, GitHub, & GitHub Desktop for beginners - Duration 22:15, for a quick intro
• Watch the video Intro to Git and GitHub - Duration 27:08
  • You don't have to use git or github for the final project, but it does allow for collaboration on code in a project. It does take a bit to learn though, so feel free not to use it right now.
  • You do not have to turn anything in for this video.

Extra Credit Redesign Project

• Start Extra Credit(Optional) Redesign Project (if you want)
  • See the requirements here
  • Due Dec. 4
• Also see the Canvas Calendar for due dates

Additional Info

Bootstrap

• Bootstrap Documentation with setup information, etc. (Same as Above)
• Video: Bootstrap 5 Crash Course - Duration 1:11:14
• Video: Bootstrap 5 Crash Course | Website Build & Deploy - Duration 1:18:47
• Video Playlist: Bootstrap 5 Tutorial - 20 videos on Bootstrap!
• Full Bootstrap 5 Tutorial for Beginners from freecodecamp
• Learn Bootstrap from Code Academy
• Entire course on Bootstrap from net ninja
• Bootstrap 5 Tutorial from W3 Schools
• Links from the Bootstrap video
  • Bootstrap website with Docs and Examples
  • Bootstrap Examples Cheatsheet
  • Sass Documentation(We will see more on Sass later)
  • Foundation CSS framework
  • Tailwind CSS framework
  • ARIA
  • Using the aria-label attribute
  • Using data attributes
  • Entire course on Bootstrap from net ninja
  • Bootstrap 5 Tutorial from W3 Schools

Accessibility

• Check out the video on using browser tools and browser extensions to verify contrast is ok on your pages, so your text is readable to ALL your users.
• If you didn't see it before(in the GDS 045 class) Check out this site on Accessibility for Designers. Accessibility is very important, often deals with making sites easier to "see" for the vision impaired, and is mandatory on some some sites, such as government sites. Also see the section on "ONE WEB FOR ALL (ACCESSIBILITY)" in Chapter 3 of Learning Web Design.

Recommended tools for the Final Project

• figma
  • You could do both wireframes and comps in figma
• Invision
  • Good for testing and sharing prototypes
• dropbox
  • Good for sharing large files
• google docs
  • good for sharing text files and copy
• monday
  • May be good for project management(haven't tried this one)

Other Collaborative tools for Web Designers

• Figma - There are a lot of collaboration tools, built into Figma.
  • Here is a post/article on how Figma allows you to collaborate with others
• Article: 10 best design and creative collaboration tools for every situation - 5 min read
• Article: 18 of the best collaboration tools for designers

Advanced Selector Resources

• Article: :where() :is() :has()? New CSS selectors that make your life easier
• Article: Modern CSS Selectors
• Article: A Guide To Newly Supported CSS Pseudo-Class Selectors
• Reference: CSS Selector Reference from w3schools
• Reference: CSS selectors from mozilla
• Reference: CSS selectors and combinators from mozilla

Nov. 13 - Week 12

Topics: Tailwind CSS and CSS Transforms and Transitions

Tailwind CSS

• Check out Tailwind CSS. Tailwind is a CSS library that allows you to use utility classes to design websites. You basically apply a lot of classes in the html to design your page, instead of writing CSS to target objects on your pages. It has some benefits over other frameworks like Bootstrap and Foundation, but it does have a learning curve since there are a lot of CSS classes to become familiar with. Tailwind CSS (or Bootstrap) can be used on the Extra Credit Redesign Project.
  • Here is a good, short video on how tailwind works, and whether you should use it.
  • Tailwind CSS website, where you can see how it works, access documentation, etc.
  • Read Utility first fundamentals explaining why you MIGHT like working this way
  • See more resources in the Additional Info section
• Exercise Option 1 for this week: Watch the video on Introduction to Tailwind CSS - Duration 43:03
  • For this video, you can follow along with the video and recreate the page done in the video.
  • The start files are here
  • The other option for this weeks weekly exercise is to do the CSS Transforms and Transitions exercise below.
  • Even if you do not do this one, it is a valuable framework to know about. People are using it in industry :)

CSS Transforms and Transitions

• Take a look at Ch. 11, Transitions, Transformations, and Animations in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition".
• Optional: For another reference, read Ch. 18 of Learning Web Design on Transitions, Transforms, and Animation in Learning Web Design, 5th Edition
• Check out the Animation Handbook from Invision in the weekly module
• Optional: Do exercises 18-1 and 18-2 in Learning Web Design. They should be fun! You do not have to turn them in.
• Exercise Option 2 for this week: Watch the video on CSS Transforms and Transitions - Duration 23:52
  • This is a new video for Fall 23, replacing an older version you MAY have seen in GDS 045.
  • For this video, you can follow along with the video and recreate the page done in the video.
  • The start files are here
  • Like option 1 above, even if you don't do this exercise, you might want to watch it (maybe at high speed) so you know about transforms and transitions, which are very useful (and fun).

Continue Group Project

• Continue Group Project
  • See the requirements here
  • Here are some wireframing resources that might be useful for the final project.
  • Group Project Wireframes Due Nov. 20
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Prototype with Comps Due Nov. 27
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Due for testing Dec. 8
  • Group Project Final Version with Beta Tests and Report Due Dec. 11
  • Note: These dates are on various days of the week, not once a week.
  • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

• Continue Extra Credit(Optional) Redesign Project(if you want)
  • See the requirements here
  • Due Dec. 4
  • Also see the Canvas Calendar for due dates

Additional Info

Tailwind

• Tailwind UI, which is a collection of components built with Tailwind (a little like what Bootstrap does). This library is not free if you want to access all components.
• Tailwind CSS Intellisense extension for VS Code, which will add code hinting fro Tailwind to VS Code
• Here is a quick video on Tailwind called Tailwind in 100 Seconds - Duration ... 100 seconds :)
• Here is a video with a different opinion of Tailwind called Tailwind CSS is the worst… - Durattion 3:54
• Here is another negative video on Tailwind, Watching Tailwind Tutorials Is A Waste Of Time - Duration 7:56. You can make your own decision on whether to use it.
• Tailwind had a convention wiht a keynote video - Duration 1:37:11. Everybody has to have a convention, I guess...

CSS Transforms and Transitions

• See the page on Transform from MDN Webdics here
• Article: CSS Transform Handbook – Complete Guide to CSS Transform Functions and Properties
  • This is a good in-depth look at CSS Transforms
• Another reference on CSS Transforms
• This article called The World of CSS Transforms has really cool interactive demos of CSS Transforms
• See the video CSS Transform Is Dead! Use This Instead - Duration 7:21, for another wayt to 'transform' things
• Here is another video on the same topic, A new way to do CSS transforms! - Duration 2:51
• Here is a an article about the new properties, Finer grained control over CSS transforms with individual transform properties

Layout

• If you have not already done so, Check out Modern Layouts: Getting Out of Our Ruts with Jen Simmons from SFHTML5 User Group

Nov. 20 - Week 13

Topics: CSS Animation, Introduction to Javascript and CSS Custom Properties

Assignments

• Update: I know you just turned in the wireframes for the final project, but if you used figma for the wireframes, please add 1 COPY of your file to the figma project here for Fall 23, so we can all see where you are. Do not put your working files there, only a copy of your wireframes as they are now. You will also put a COPY of the prototype there as well, unless you did not use figma for the prototype, but most probably did. Please label your files with versions and either wireframes or prototypes. Only 1 person needs to post the file. Thanks.
• Assignment: Watch the video on Introduction to Animation on the Web - Duration 38:02
  • Assignment: For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• In this class, I just wanted to give you a little intro to javascript, so that it is not completely unfamiliar. There is a dedicated javascript class(GDS 89) which covers it in much more detail. There is also GDS 089B, Javascript II and Web Development, for those who already feel famliar with Javascript. If you know HTML, CSS and Javascript well, you have the main skills to be a front-end web developer!
• Read Chapter 21 in Learning Web Design on Introduction to Javascript.
• Watch video on Intro to Javascript - Duration 33:32
  • Extra Credit Assignment: For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • If you don't do the exercise, you should still know the basics of Javascript from the video
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • Again, this exercise is extra credit, but you should know the material.
• Watch the Quick Tip video on CSS Custom Properties/CSS Variables - Duration 10:03
  • This is a pretty cool way to store CSS property values to be able to update styles quickly, and maybe save some time.
  • The start file is here if you want to follow along(Right click to download)
  • You DO NOT need to turn this in.
• Optional: Watch the video on Intro to Jquery and Jquery UI in Dreamweaver - Duration 39:42
  • This is an older video, but Jquery UI is still in use and can do some cool things like tabbed content and accordians, similar to some of the bootstrap components.
  • There are no start files for this one. You start from scratch.
  • You DO NOT need to turn this in.
• If you didn't look at this from way back in Week 4, you should check out Ten modern layouts in one line of CSS
  • It is pretty cool and uses CSS Grid.
  • Here is the video from the article, if you want to watch ANOTHER video ;)

Continue Group Project

• Continue Group Project
  • Here is a video Introduction to Figma for Wireframing - Duration 40:09 that can help with the wireframing step.
  • Check out this video on Basic Protoyping in Figma - Duration 25:33
    • You can use figma for wireframing, comps and/or prototypes if you want.
  • Here is a link to a playlist on youtube with tutorials on using InVision to create your prototype. It is fairly easy to create a clickable version of your Group Project using comps. You may be able to get by with just the first 2 short(not like mine;) videos
    • How to create your first project in InVision - Duration 1:36
    • How to create an interactive prototype with InVision - Duration 3:15
  • See the project requirements here
  • Here is a bonus video that might help with going from wireframes to code... it's called From idea to layout: How I approach designing a site - Duration 45:53
  • Group Project Wireframes Due Nov. 20
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Prototype with Comps Due Nov. 27
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Due for testing Dec. 8
  • Group Project Final Version with Beta Tests and Report Due Dec. 11
  • Note: These dates are on various days of the week, not once a week.
  • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

• Continue Extra Credit(Optional) Redesign Project(if you want)
  • See the requirements here
  • Due Dec. 4
  • Also see the Canvas Calendar for due dates
• Check out the Prototyping in Invision, rounded images, and full screen video resources under Additional Info

Additional Info

Web Animation

• Top 5 Must Have UI Animation Patterns by Rachel Nabors
  • Video - Duration 49:03
• Check out the video State of the Animation with Rachel Nabors from SFHTML5 User Group
  • Video - Duration 49:03 . This one is 5 years old.
• Rachel Nabors | Alice in Web Animations API Land | Browser API Special, CSS Day 2017
  • Video - Duration 51:05
• Build a Bootstrap Theme With Scroll Animation
  • Video - Duration 35:44
• CSS Animation Tutorial #1 - Introduction
• 10 impressive examples of CSS3 animation
• How Functional Animation Helps Improve User Experience
• Functional Animation In UX Design
• CSS Animation Trends in Web Design
• Complex Responsive Animations with Sarah Drasner (SVG Animation)
• The Ultimate Guide to Web animation
• Web Animations W3C Working Draft, 7 July 2015
• The State Of Animation 2014 By Rachel Nabors
• MOTION DESIGN WITH CSS Val Head - Video - Duration 29:39
• Animation at w3schools
• Keyframe animation syntax at CSS Tricks
• animate.css file thing
• Controlling CSS Animations and Transitions with JavaScript

Layout

• If you have not already done so, Check out Modern Layouts: Getting Out of Our Ruts with Jen Simmons from SFHTML5 User Group

Javascript

• JavaScript docs from Mozilla
• JavaScript Tutorial from W3schools
• Introduction To JavaScript from codeacademy
• Videos on "What is Javascript"
  • What Is JavaScript | Explained - Duration 4:14
  • What Is JavaScript? - Duration 10:07

Figma

• Here is the video Introduction to Figma for Wireframing - Duration 40:09 that can help with the wireframing step.
• Here is the video on Basic Protoyping in Figma - Duration 25:33

InVision

• How to create your first project in InVision - Duration 1:36
• How to create an interactive prototype with InVision - Duration 3:15

Useful Techniques

• Full screen background video example
• Rounded Images with CSS example
  • See this file for a method to make rounded images

Nov. 27 - Week 14

Topics: More Javascript, CSS Processors and the Parallax Effect

More Javascript

• Read Chapter 22 in Learning Web Design on Using Javascript.
• Watch the video Javascript Characteristics and Objects - Duration 24:25
  • Assignment: For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• Do exercise 21-2 in Learning Web Design for some more practice.

CSS

• Optional: Watch the video on Random CSS Fun 1 - Duration 19:18
  • This one is a small collection of little tips that might be interesting and/or useful, like background-blend-mode.
  • Download the source files here and follow along with the video if you wish
  • You do not have to turn this in, but some of the info may be on the final exam(sorry).

CSS Processors

• CSS Processors like SASS, LESS and Stylus can speed up development with features like variables and nested rules. They are also used in CSS Frameworks like Bootstrap. They are a bit complicated and intended for serious front-end development, but feel free to dive in.
• As CSS adds features, processors like Sass may be needed less. Check out the video CSS is getting better, but Sass is still relevant - Duration 18:41 for more information.
• Read pages 572 - 578 on CSS Power Tools in Learning Web Design. This section is a good intro to CSS Processors.
• Here is a nice short book on SASS from A Book Apart called SASS For Web Designers. They distibute a lot of books on coding for designers, so they are not too hard :)
• SASS Basics/Documentation
• See more in the Additional Info Section

Continue Group Project

• Continue Group Project
  • See the project requirements here
  • Group Project Wireframes Due Nov. 20
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Prototype with Comps Due Nov. 27
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Due for testing Dec. 8
  • Group Project Final Version with Beta Tests and Report Due Dec. 11
  • Note: These dates are on various days of the week, not once a week.
  • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

• Continue Extra Credit(Optional) Redesign Project(if you want)
  • See the requirements here
  • Due Dec. 4
  • Also see the Canvas Calendar for due dates

Additional Info

More on CSS Processors

• LESS Documentation
• Stylus Documentation
• Learn Sass in this Free Crash Course video on youtube
• Less CSS Pre-Processor Tutorial video on youtube

Parallax Effect on Websites

• Using parallax effects on websites has been around a while, and still remains somewhat popular. Parallax effects on web pages are when elements are made to move at different speeds while scrolling, which helps add depth to the page while simulting a 3D environment. There are authoring apps, services, and plug-ins tha help with creating parallax effects, and it is mostly done using javascript. See the following videos and links for uses and tutorials.
  • Video: Use Rellax.js to Create this Awesome Parallax Scrolling Effect
    • Here is an example I did using Rellax.js
    • You can download all the files here
  • Video: Stunning Pure CSS Parallax Scrolling | 5 Minutes Tutorial
  • Video: Creating a parallax effect in Webflow
  • Video: Materialize Tutorial #19 - Parallaxes

Dec. 4 - Week 15

Topics: Javascript and User Testing

Assignments

• Finish reading Chapter 22 in Learning Web Design on Using Javascript.
• Watch the video on Javascript Functions, Events and Arguments/Parameters - Duration 31:45
  • Download the source files here and follow along with the video
  • You do not have to turn this in, but some of the info MAY be on the final exam(sorry). This video is a little dated, but essentially accurate.
• Watch the video on Javascript Variables and Conditional Statements - Duration 40:45
  • For this video, follow along with the video and recreate the pages done in the video.
  • The start files are here
  • You do not have to turn this in, but some of the info MAY be on the final exam(sorry again).
  • This video is a also a little dated, but also essentially accurate.

Continue Group Project

• Complete Group Project
  • See the project requirements here
  • Group Project Wireframes Due Nov. 20
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Prototype with Comps Due Nov. 27
    • Here is the link to a figma team project where you can put a COPY of your wireframes and prototypes for Fall 23 - Please make sure to label versions as you add files. Don't put the working file here, but make a copy and add it.
  • Group Project Due for testing Dec. 8
  • Group Project Final Version with Beta Tests and Report Due Dec. 11
  • Note: These dates are on various days of the week, not once a week.
  • Also see the Canvas Calendar for due dates

Beta test the site

• Watch this video on Usability Testing
• Watch this video on Instructions for User Testing using the form linked below
• Have 2 people beta test your Group Project
  • Use this PDF version if you want to print the form and fill it out with your test subject.
  • Use this Word version of the form if you want to fill it out on a computer
  • Here is the video on the testing form, procedure and tips
• You can turn in images of the completed beta test forms if you had them filled out on paper, or you can turn in PDF or Word files if you fill them out on a computer.
• Complete 1 Beta Test Summary Report for each group summarizing all of the beta test results and listing any planned actions.
  • Use this help file as an outline for the report
    
  • Due with the final version of the site
  • More details are on the project page

User Testing tools for Web Designers and Developers

• Mopinion - User Feedback Service

Complete Extra Credit Redesign Project

• Complete Extra Credit(Optional) Redesign Project(if you want)
  • See the requirements here
  • Due Dec. 4
  • I added a video on using Tailwind CSS, which you could use on the Project instead of Bootstrap.
  • Also see the Canvas Calendar for due dates

Exit Survey

• Take the class exit survey in the Exercises module for more extra credit.

Additional Info

User Testing Resources

• Rocket Surgery Made Easy - Steve Krug book/video on usability testing
• Steve Krug Video
• Video of usablility test with a paper prototype(with a child test subject)
• UX prototyping tutorial: Paper prototyping techniques | lynda.com
• Guerilla Testing with Usability Cafe - Google Developers
• Eye Tracking Demo - video
• Silverback (Guerrilla usability testing software for designers and developers)
• openhallway.com/ online usability testing
  • Video of openhallway
• Another Eye-tracking Web Usability Test Sample - video
• Usability Testing with Tobii T60 Eye Tracker and Tobii Studio - video
• Voices That Matter: Google Web Toolkit - Usability - video