Skip to content

Front-End Website Design

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, and you will design and style a basic website. We will use responsive web design techniques so that the site works across multiple devices and screen resolutions. We’ll also discuss the pros and cons of using a content management system (such as WordPress) and adding advanced functionality to your site using jQuery (a common JavaScript library).

Prerequisite: HTML & CSS II or strong working knowledge of HTML/CSS and some JavaScript.

Week 1: Overview of Web Design and introduction to design/prototype tool Figma.
Video: Getting Started with Figma
Week 2: 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 3: 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
Building Color Confidence
More about image optimization
Inclusive Design
Creative Commons photo search
Five column grid code sample
Week 4: Brand ideation, mood board, using and creating images including SVG images, creating an original logo
How to use a Mood Board
How to create mood boards that inspire
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 5: Web Style Guides – atomic design, the styling of specific elements
Brief discussion about GAAD with JAWS screen reader demo
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 6: 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
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.

General Resources:
Figma’s Design Dictionary
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: Generate font combinations with deep learning
Color pairing with Adobe Explore

Individuals to Follow:
Tatiana Mac on twitter and video: How Privilege Defines Performance
Jeffrey Zeldman on twitter