Week 12 ^4.18

Notes

Style Guides

• Style Guide Module

• Animista
  Awesome library of basic animations/interactions that can be tweaked and downloaded. Nice design as well.
• Animate.css

CSS Gradients

• WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.

Sketch Tools

• Sketch Documentation
• Prototyping in Sketch
• Anima Toolkit for Sketch (create simple animations in Sketch. Paid plugin, but offers 14-day trial)

SASS

• Sass Basics
• Scout App
• Koala App
• SASS Cheatsheets
  • https://sass-cheatsheet.brunoscopelliti.com/
  • devhints

Reading

Read for Week 13:

• Read these sections from the IBM Design Language
  • Visual: Typography
  • Visual: Color
  • Interaction: Information architecture - Information architecture ensures that content fits its context.
  • Interaction: Touch - Create thoughtful mobile designs with easy touch targets, awareness of how users hold devices and optimal interaction areas.
  • Animation: Elements - Animation creates energy within an interface and lets the user know what’s happening before, during and after an action.
• A List Apart: Creating Style Guides

Review these readings on style guides as necessary

• Review Design Systems (Chapters 1-4) [Google Drive ]. Skim and use whatever bits you find helpful.
• Front End Style Guides [Google Drive ]

Homework

Note: There will be no class next week (4/25) because of the Senior Banquet. Your homework is still due that date by 6pm. I will also be updating the class page for Week 13 with material for our final class and instructions on how to schedule your meeting with me for the final project.

No reading summary due.

Nonprofit Redesign

For next week complete the following items for your nonprofit redesign project:

• 2 Style Tiles
• Formal sketches for at least three sizes
• Style Guide

Ensure that all materials are posted on the final project page of your class website. Review the requirements for the project to ensure that you've completed all steps.

• Nonprofit Redesign Project Assignment

Class Website

Check your class website to ensure that it is responsive and all links work. You should have a summary with links for each week of class, including a reading summary. This counts as part of your homework grade. Review the weekly class pages for assignments as well as the topics posted on your grading pages.

You may modify your class website however you see fit. Make sure that it is easy to use and read on a mobile device.