English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 216 Lectures (24h 24m) | 7.58 GB
Gain practical foundations in responsive web design, from layouts and visual hierarchy to branding, color, type and so much more.
Our flexible, 8-week online course provides foundations in responsive web design, user interfaces and branding. It’s aimed towards those who want to improve their digital design skills, understand what makes designs effective and design with confidence.
You’ll learn visual design elements, principles and hierarchy; the branding process (from research to final design + how to deliver branding guidelines); how to choose colors and typefaces; practical tips and ways to improve your UI design skills; how to design for responsive experiences across multiple device types, and a whole lot more!
Whether you’re totally new to design or just want to refresh and improve your digital design skills, our Visual Design + Branding course provides a unique, practical design foundation.
What you’ll learn
- Design principles + practical user interface tips to help you design better right away
- An end-to-end branding process — how to design your own brand and create brand guidelines for handoff
- How to design responsive experiences for desktop and mobile from scratch
- How to create a design system and a user interface library of components
- Best practices for handoff and how to keep design consistent across teams
- How to present your work and talk through your design decisions with confidence
Table of Contents
1 Welcome
2 Week 1 Project Introduction
3 Design History Overview
4 The Printing Revolution
5 Typographic Milestones
6 The Industrial Revolution
7 The Modernist Era
8 20th Century Design
9 The Digital Revolution and Beyond
10 Design Elements: Line
11 Design Elements: Shape
12 Design Elements: Form
13 Design Elements: Size
14 Design Elements: Texture
15 Design Elements: Value
16 Design Elements: Color
17 Design Elements: Typography
18 Design Principles: Emphasis
19 Design Principles: Proximity
20 Design Principles: Balance
21 Design Principles: Alignment
22 Design Principles: Unity
23 Design Principles: Space
24 Design Principles: Repetition
25 Design Principles: Framing
26 Week 1 Project
27 Week 2 Overview and Project
28 Introduction to Grids
29 Grid Anatomy
30 Types of Grids
31 Layout Grids
32 Exercise: Designing grids in Figma
33 Common Layouts – Portfolio
34 Common Layouts – Marketing Site 1
35 Common Layouts – Marketing Site 2
36 Common Layouts – Marketing Site 3
37 Common Layouts – News
38 Common Layouts – Store
39 Common Layouts – Blog
40 Introduction to Visual Hierarchy
41 Type Hierarchy – Examples
42 Type Hierarchy – Tips
43 Exercise: Building a type scale
44 Color + Contrast
45 Exercise: Building a grayscale color palette
46 Proximity + Whitespace
47 Fontanello + Chrome DevTools Inspector
48 Exercise: Redesign Mimi’s Kitchen website
49 Exercise: Quick overview of final design
50 Exercise: Navigation and hero section
51 Exercise: Welcome section
52 Exercise: About Mimi’s section
53 Exercise: Quote section
54 Exercise: Catering section
55 Exercise: Final sections
56 Week 2 Project: Introduction and Navigation
57 Week 2 Project: Hero
58 Week 2 Project: Explore Neighborhoods
59 Week 2 Project: Eat, See and Do
60 Week 2 Project: Blog
61 Week 2 Project: New on The Block
62 Week 2 Project: Newsletter
63 Week 2 Project: Footer
64 Week 2 Project: Neighborhood page
65 Week 3 Overview and Project
66 Designer Spotlight — Elizabeth Goodspeed
67 Introduction to Color
68 Color Relationships
69 CMYK vs. RGB
70 Color Interactions
71 Color, Brands and Emotions — Part 1
72 Color, Brands and Emotions — Part 2
73 Tips for Creating Color Palettes
74 Exercise: Checking your wireframe’s contrast
75 Exercise: Eyedropping photography
76 Exercise: Create a complementary palette
77 Exercise: Create an analogous palette
78 Exercise: Create a monochromatic palette
79 Exercise: Try it on two more photos
80 Exercise: Review + share color palettes!
81 Color Inspiration
82 Quick Look: SuperHi Color Guide
83 Industry Talks — Laura Bohill
84 Typography Introduction + Anatomy
85 Serif: Old Style
86 Serif: Transitional
87 Serif: Modern
88 Serif: Slab
89 Sans Serif: Humanist
90 Sans Serif: Geometric
91 Sans Serif: Transitional
92 Script Typefaces
93 Display Typefaces
94 Pixel Typefaces
95 Monospaced Typefaces
96 How To Choose the Right Typeface
97 Typefaces In Use: Case Studies
98 Exercise: Choosing typefaces for families
99 Exercise: Choosing typefaces for digital nomads
100 Exercise: Choosing typography for foodies
101 Exercise: Choosing typography for photographers
102 Quick Look: SuperHi Typography Guide
103 Introduction to Accessibility
104 Exercise: Checking color contrast
105 Quick Look: SuperHi Accessibility Guide
106 Industry Talks — Tatiana Mac
107 Week 3 Project Overview
108 Adding Typography to The Block
109 Adding Color to The Block
110 Adding Photography: Hero
111 Adding Photography: Homepage
112 Adding Photography: Neighborhood
113 Adding Icons to The Block
114 Week 4 Overview + Project
115 What is a Brand?
116 The Branding Process
117 Reviewing Brand Identity: Google
118 What Makes Brands Successful?
119 Project 4 Overview + Brief
120 Understanding the Problem
121 Conducting Market Research
122 Figuring Out Your Target Audience
123 Brand Questionnaire
124 Moodboarding
125 Naming Your Brand + Designing Your Logo
126 Week 5 Overview
127 Industry Talks — Noemie Le Coz
128 Visual Identity: Moodboard
129 Visual Identity: Color Palette Exploration
130 Choosing A Final Color Palette
131 Visual Identity: Type Pairing 1
132 Visual Identity: Type Pairing 2
133 Visual Identity: Final Type Pairings
134 Visual Identity: Type Setting + Writing About Choices
135 Visual Identity: Graphic Elements
136 Visual Identity: Brand Voice
137 What Are Brand Guidelines?
138 Brand Guidelines Examples
139 Brand Guidelines Overview
140 Brand Guidelines: Title + Table of Contents
141 Brand Guidelines: Moodboard + Introduction
142 Brand Guidelines: Logo
143 Brand Guidelines: Color
144 Brand Guidelines: Typography
145 Finishing Brand Guidelines
146 Deron Millay Interview
147 Week 6 Overview
148 Introduction to Responsive Design
149 Design Systems
150 Web Do’s + Dont’s
151 Week 6 Project Introduction
152 Navigation + Hero
153 Hero Inspiration
154 Hero Layout Variations
155 Creating Animated GIFs for Hero Sections
156 Final Hero Design
157 Blog Section
158 Blog Section Inspiration
159 Optimizing Images for the Web
160 Fun Fact Section
161 Donation Cards
162 Get Involved Section
163 Logo Garden
164 Finishing Homepage Design
165 Donation Popup Part 1
166 Donation Popup Part 2
167 Finishing Donation Popup Flow
168 Prototyping in Figma
169 Industry Talks: Victoria Jung
170 Week 7 Introduction
171 Designing with Code Introduction
172 What is a website, anyway?
173 Content and Style in Figma
174 HTML + CSS
175 Adding Links
176 Grouping Tags
177 Intro to CSS Grid
178 Intro to Flexbox
179 Fixed Positioning
180 Hover States
181 Responsive Design + Media Queries
182 SEO + Accessibility Basics
183 Developer Review: The Beach Collective
184 Mobile Best Practices: Interactions
185 Mobile Best Practices: Adapting Your Content
186 Mobile Best Practices: Images
187 Mobile Best Practices: Typography
188 Mobile Best Practices: Navigation
189 Project: Mobile Grid + Getting Started with Figma Mirror
190 Project: Mobile Navigation
191 Project: Mobile Hero + Sticky Nav
192 Project: Setting up Mobile Type Scale
193 Project: About Section
194 Project: Blog + Designing Lists for Mobile
195 Project: Quote
196 Project: Donate + Designing Mobile Carousels
197 Project: Get Involved + Designing Mobile Grids
198 Project: Mobile Logo Garden
199 Project: Finishing Mobile Homepage
200 Project: Donation Screen + Mobile Form UI
201 Finishing Up with a Mobile Prototype
202 Designer Spotlight — Carolyn Zhang
203 Week 8 Intro
204 Capstone Brief
205 Step 1 — Finding your book
206 Step 2 — Determining your project
207 Project Ideas
208 Step 3 — Designing your project
209 Step 4 — Documenting your process
210 Step 5 — Writing your case study
211 Our Project: Picking our book
212 Our Project: Designing Camp Mate
213 Camp Mate Prototype
214 Our Project: Camp Mate case study
215 Case Study Examples
216 What’s Next?
Resolve the captcha to access the links!