Course description
With the Internet being served up on everything from hand-held devices to widescreen TVs, building websites has become an increasingly challenging and complex process. This course will introduce the fundamentals of visual and experience design. You will create a design brief stating the problem you are trying to solve, then design and style a basic website. We will use responsive web design techniques so the site will work across multiple devices and screen resolutions. We’ll discuss the pros and cons of using a content management system (such as WordPress or Drupal) and adding advanced functionality to your site using JavaScript.
Prerequisite: HTML & CSS II or strong working knowledge of HTML/CSS and some JavaScript.
Week 1, First Class
Overview of Web Design and introduction to design/prototype tool Figma.
Video: Figma for Beginners playlist
Video: Figma UI Design Tutorial: Get Started in Just 24 Minutes!
Site: FigmaResources.com
Week 1, Second Class
Typography and Alignment
- Video: History of Typography
- Video: Parts and shapes of type
- Video: Typography | Off Book | PBS
- Video: Improving Web Typography
- Video: Shawn Berry on Alignment
- Fixed Width Layouts Versus Liquid Layouts
Week 2, First Class
Color Theory, using color on the web, color, and accessibility, choosing and using photographic assets.
- Accessible Brand Colors tool
- WebAIM Color Contrast Checker
- Hex Code Codepen
- Adobe Color Wheel
- Color palette tool
- Building Color Confidence
- More about image optimization
- Inclusive Design
- Creative Commons photo search
- Five column grid code sample
Week 2, Second Class
Brand ideation, mood board, using and creating images including SVG images, creating an original logo
- Design for Cognitive Bias
- How to use a Mood Board
- How to create mood boards that inspire
- Moodboarding 101 from dribbble
- Google Fonts
- Design Brief Example
- Figma Design Brief and Mood Board and link to editable Mood Board
- Video: Five Main Elements of Logo Design
Week 3, First Class
Web Style Guides – atomic design, the styling of specific elements
- Brief discussion about Global Accessibility Awareness Day
- Short Atomic Design video, based on Brad Frost’s Atomic Design
- Design System in Figma: Complete guide to designing a site using a collaborative and powerful design system
- How to build a component library/style guide with Figma
- A More Modern Scale for Web Typography and The Responsive Website Font Size Guidelines
- A comprehensive guide to design systems, and Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science introduction
- AIGA Minnesota – inspiration, professional development, and excellence in design in MN
Week 3, Second Class
Website Design – utilize your branding and style guide to put together a web page according to your guide and the principles of design.
- The Anatomy of a Landing Page
- Video about website builders: Adobe Muse vs WordPress vs Dreamweaver vs Squarespace vs Webflow vs Wix vs others
- Wix vs Squarespace
- Squarespace vs Webflow: Website Building Platform Review
- How to become a designer without going to design school
- How to describe what you do (elevator pitch)
- Jekyll static site generator tutorial videos
- From Figma to Webflow: turning your static designs into interactive websites
When you’re ready to go beyond prototyping in Figma, Webflow’s ready to help you bring your designs to life — without coding them. - What are the Similarities & Differences Between UI Design & UX Design?
- What is wireframing?
General Resources
- Figma’s Design Dictionary
- Web Design Industry Jargon from Smashing Magazine
- A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
- 99% Invisible is (a podcast) about all the thought that goes into the things we don’t think about — the unnoticed architecture and design that shape our world.
- Mina Markham and Design Systems and Pantsuit
- How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System (which is another Design System)
- How to Use Curly Quotes on Mac OSX and Windows
- Helvetica Documentary
- Font pairing made simple: fontjoy’s tool to generate font combinations with deep learning
- Color pairing with Adobe Explore
- OpenPeeps: A hand-drawn illustration library
Individuals to Follow
- Sara Soueidan, UI engineer & conference speaker on twitter
- Tatiana Mac on twitter and video: How Privilege Defines Performance
- Jessica Chan aka The Coder Coder
- Web Technologies Evangelist Jen Simmons
- Web Standards Godfather Jeffrey Zeldman
- Chank Diesel. Interview Ask an Expert: Type Design with Chank Diesel, Font Pioneer
- Designer Charli Marie
- Illustrator Abelle Hayford
- Directory of illustrators: Women Who Draw