SuperHi FM

Search:

Catalog Cart About Sign in

BEGINNERCOURSE

Visual Design + Branding

Gain practical foundations in responsive web design, from layouts and visual hierarchy to branding, color, type and so much more.

Milan Moffatt

Kristen Altomare-Ciallella

Taught by

Milan Moffatt and Kristen Altomare-Ciallella

Design History, Elements + Principles

Design History, Elements + Principles

Lesson 01

Welcome

Lesson 02

Week 1 Project Introduction

Lesson 03

Design History Overview

Grid, Layout + Visual Hierarchy

Grid, Layout + Visual Hierarchy

Lesson 01

Week 2 Overview and Project

Lesson 02

Introduction to Grids

Lesson 03

Grid Anatomy

Color + Type

Color + Type

Lesson 01

Week 3 Overview and Project

Lesson 02

Designer Spotlight — Elizabeth Goodspeed

Lesson 03

Introduction to Color

Branding: Research + Logo Design

Lesson 01

Week 4 Overview + Project

Lesson 02

What is a Brand?

Lesson 03

The Branding Process

Branding: Visual Identity + Brand Guidelines

Lesson 01

Week 5 Overview

Lesson 02

Industry Talks — Noemie Le Coz

Lesson 03

Visual Identity: Moodboard

Designing For Screens: Part 1

Designing For Screens: Part 1

Lesson 01

Week 6 Overview

Lesson 02

Introduction to Responsive Design

Lesson 03

Design Systems

Designing For Screens: Part 2

Designing For Screens: Part 2

Lesson 01

Week 7 Introduction

Lesson 02

Designing with Code Introduction

Lesson 03

What is a website, anyway?

Capstone Project

Capstone Project

Lesson 01

Week 8 Intro

Lesson 02

Capstone Brief

Lesson 03

Step 1 — Finding your book

Get access to Visual Design + Branding

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructors

Milan Moffatt

Milan Moffatt

Teacher

Kristen Altomare-Ciallella

Kristen Altomare-Ciallella

Teacher

Course structure

Chapter 01

Design History, Elements + Principles

Lesson 01
Welcome
Lesson 02
Week 1 Project Introduction
Lesson 03
Design History Overview
Lesson 04
The Printing Revolution
Lesson 05
Typographic Milestones
Lesson 06
The Industrial Revolution
Lesson 07
The Modernist Era
Lesson 08
20th Century Design
Lesson 09
The Digital Revolution and Beyond
Lesson 10
Design Elements: Line
Lesson 11
Design Elements: Shape
Lesson 12
Design Elements: Form
Lesson 13
Design Elements: Size
Lesson 14
Design Elements: Texture
Lesson 15
Design Elements: Value
Lesson 16
Design Elements: Color
Lesson 17
Design Elements: Typography
Lesson 18
Design Principles: Emphasis
Lesson 19
Design Principles: Proximity
Lesson 20
Design Principles: Balance
Lesson 21
Design Principles: Alignment
Lesson 22
Design Principles: Unity
Lesson 23
Design Principles: Space
Lesson 24
Design Principles: Repetition
Lesson 25
Design Principles: Framing
Lesson 26
Week 1 Project
Homework 01
Wave Festival

Chapter 02

Grid, Layout + Visual Hierarchy

Lesson 01
Week 2 Overview and Project
Lesson 02
Introduction to Grids
Lesson 03
Grid Anatomy
Lesson 04
Types of Grids
Lesson 05
Layout Grids
Lesson 06
Exercise: Designing grids in Figma
Lesson 07
Common Layouts – Portfolio
Lesson 08
Common Layouts – Marketing Site 1
Lesson 09
Common Layouts – Marketing Site 2
Lesson 10
Common Layouts – Marketing Site 3
Lesson 11
Common Layouts – News
Lesson 12
Common Layouts – Store
Lesson 13
Common Layouts – Blog
Lesson 14
Introduction to Visual Hierarchy
Lesson 15
Type Hierarchy – Examples
Lesson 16
Type Hierarchy – Tips
Lesson 17
Exercise: Building a type scale
Lesson 18
Color + Contrast
Lesson 19
Exercise: Building a grayscale color palette
Lesson 20
Proximity + Whitespace
Lesson 21
Fontanello + Chrome DevTools Inspector
Lesson 22
Exercise: Redesign Mimi's Kitchen website
Lesson 23
Exercise: Quick overview of final design
Lesson 24
Exercise: Navigation and hero section
Lesson 25
Exercise: Welcome section
Lesson 26
Exercise: About Mimi's section
Lesson 27
Exercise: Quote section
Lesson 28
Exercise: Catering section
Lesson 29
Exercise: Final sections
Lesson 30
Week 2 Project: Introduction and Navigation
Lesson 31
Week 2 Project: Hero
Lesson 32
Week 2 Project: Explore Neighborhoods
Lesson 33
Week 2 Project: Eat, See and Do
Lesson 34
Week 2 Project: Blog
Lesson 35
Week 2 Project: New on The Block
Lesson 36
Week 2 Project: Newsletter
Lesson 37
Week 2 Project: Footer
Lesson 38
Week 2 Project: Neighborhood page
Homework 01
Daisy Records

Chapter 03

Color + Type

Lesson 01
Week 3 Overview and Project
Lesson 02
Designer Spotlight — Elizabeth Goodspeed
Lesson 03
Introduction to Color
Lesson 04
Color Relationships
Lesson 05
CMYK vs. RGB
Lesson 06
Color Interactions
Lesson 07
Color, Brands and Emotions — Part 1
Lesson 08
Color, Brands and Emotions — Part 2
Lesson 09
Tips for Creating Color Palettes
Lesson 10
Exercise: Checking your wireframe's contrast
Lesson 11
Exercise: Eyedropping photography
Lesson 12
Exercise: Create a complementary palette
Lesson 13
Exercise: Create an analogous palette
Lesson 14
Exercise: Create a monochromatic palette
Lesson 15
Exercise: Try it on two more photos
Lesson 16
Exercise: Review + share color palettes!
Lesson 17
Color Inspiration
Lesson 18
Quick Look: SuperHi Color Guide
Lesson 19
Industry Talks — Laura Bohill
Lesson 20
Typography Introduction + Anatomy
Lesson 21
Serif: Old Style
Lesson 22
Serif: Transitional
Lesson 23
Serif: Modern
Lesson 24
Serif: Slab
Lesson 25
Sans Serif: Humanist
Lesson 26
Sans Serif: Geometric
Lesson 27
Sans Serif: Transitional
Lesson 28
Script Typefaces
Lesson 29
Display Typefaces
Lesson 30
Pixel Typefaces
Lesson 31
Monospaced Typefaces
Lesson 32
How To Choose the Right Typeface
Lesson 33
Typefaces In Use: Case Studies
Lesson 34
Exercise: Choosing typefaces for families
Lesson 35
Exercise: Choosing typefaces for digital nomads
Lesson 36
Exercise: Choosing typography for foodies
Lesson 37
Exercise: Choosing typography for photographers
Lesson 38
Quick Look: SuperHi Typography Guide
Lesson 39
Introduction to Accessibility
Lesson 40
Exercise: Checking color contrast
Lesson 41
Quick Look: SuperHi Accessibility Guide
Lesson 42
Industry Talks — Tatiana Mac
Lesson 43
Week 3 Project Overview
Lesson 44
Adding Typography to The Block
Lesson 45
Adding Color to The Block
Lesson 46
Adding Photography: Hero
Lesson 47
Adding Photography: Homepage
Lesson 48
Adding Photography: Neighborhood
Lesson 49
Adding Icons to The Block
Homework 01
House of Circles

Chapter 04

Branding: Research + Logo Design

Lesson 01
Week 4 Overview + Project
Lesson 02
What is a Brand?
Lesson 03
The Branding Process
Lesson 04
Reviewing Brand Identity: Google
Lesson 05
What Makes Brands Successful?
Lesson 06
Project 4 Overview + Brief
Lesson 07
Understanding the Problem
Lesson 08
Conducting Market Research
Lesson 09
Figuring Out Your Target Audience
Lesson 10
Brand Questionnaire
Lesson 11
Moodboarding
Lesson 12
Naming Your Brand + Designing Your Logo
Homework 01
Presta

Chapter 05

Branding: Visual Identity + Brand Guidelines

Lesson 01
Week 5 Overview
Lesson 02
Industry Talks — Noemie Le Coz
Lesson 03
Visual Identity: Moodboard
Lesson 04
Visual Identity: Color Palette Exploration
Lesson 05
Choosing A Final Color Palette
Lesson 06
Visual Identity: Type Pairing 1
Lesson 07
Visual Identity: Type Pairing 2
Lesson 08
Visual Identity: Final Type Pairings
Lesson 09
Visual Identity: Type Setting + Writing About Choices
Lesson 10
Visual Identity: Graphic Elements
Lesson 11
Visual Identity: Brand Voice
Lesson 12
What Are Brand Guidelines?
Lesson 13
Brand Guidelines Examples
Lesson 14
Brand Guidelines Overview
Lesson 15
Brand Guidelines: Title + Table of Contents
Lesson 16
Brand Guidelines: Moodboard + Introduction
Lesson 17
Brand Guidelines: Logo
Lesson 18
Brand Guidelines: Color
Lesson 19
Brand Guidelines: Typography
Lesson 20
Finishing Brand Guidelines
Lesson 21
Deron Millay Interview
Homework 01
Prickly Pear Rebrand

Chapter 06

Designing For Screens: Part 1

Lesson 01
Week 6 Overview
Lesson 02
Introduction to Responsive Design
Lesson 03
Design Systems
Lesson 04
Web Do's + Dont's
Lesson 05
Week 6 Project Introduction
Lesson 06
Navigation + Hero
Lesson 07
Hero Inspiration
Lesson 08
Hero Layout Variations
Lesson 09
Creating Animated GIFs for Hero Sections
Lesson 10
Final Hero Design
Lesson 11
Blog Section
Lesson 12
Blog Section Inspiration
Lesson 13
Optimizing Images for the Web
Lesson 14
Fun Fact Section
Lesson 15
Donation Cards
Lesson 16
Get Involved Section
Lesson 17
Logo Garden
Lesson 18
Finishing Homepage Design
Lesson 19
Donation Popup Part 1
Lesson 20
Donation Popup Part 2
Lesson 21
Finishing Donation Popup Flow
Lesson 22
Prototyping in Figma
Lesson 23
Industry Talks: Victoria Jung
Homework 01
Donation Flow + E-card Design

Chapter 07

Designing For Screens: Part 2

Lesson 01
Week 7 Introduction
Lesson 02
Designing with Code Introduction
Lesson 03
What is a website, anyway?
Lesson 04
Content and Style in Figma
Lesson 05
HTML + CSS
Lesson 06
Adding Links
Lesson 07
Grouping Tags
Lesson 08
Intro to CSS Grid
Lesson 09
Intro to Flexbox
Lesson 10
Fixed Positioning
Lesson 11
Hover States
Lesson 12
Responsive Design + Media Queries
Lesson 13
SEO + Accessibility Basics
Lesson 14
Developer Review: The Beach Collective
Lesson 15
Mobile Best Practices: Interactions
Lesson 16
Mobile Best Practices: Adapting Your Content
Lesson 17
Mobile Best Practices: Images
Lesson 18
Mobile Best Practices: Typography
Lesson 19
Mobile Best Practices: Navigation
Lesson 20
Project: Mobile Grid + Getting Started with Figma Mirror
Lesson 21
Project: Mobile Navigation
Lesson 22
Project: Mobile Hero + Sticky Nav
Lesson 23
Project: Setting up Mobile Type Scale
Lesson 24
Project: About Section
Lesson 25
Project: Blog + Designing Lists for Mobile
Lesson 26
Project: Quote
Lesson 27
Project: Donate + Designing Mobile Carousels
Lesson 28
Project: Get Involved + Designing Mobile Grids
Lesson 29
Project: Mobile Logo Garden
Lesson 30
Project: Finishing Mobile Homepage
Lesson 31
Project: Donation Screen + Mobile Form UI
Lesson 32
Finishing Up with a Mobile Prototype
Lesson 33
Designer Spotlight — Carolyn Zhang
Homework 01
Designing a mobile onboarding flow

Chapter 08

Capstone Project

Lesson 01
Week 8 Intro
Lesson 02
Capstone Brief
Lesson 03
Step 1 — Finding your book
Lesson 04
Step 2 — Determining your project
Lesson 05
Project Ideas
Lesson 06
Step 3 — Designing your project
Lesson 07
Step 4 — Documenting your process
Lesson 08
Step 5 — Writing your case study
Lesson 09
Our Project: Picking our book
Lesson 10
Our Project: Designing Camp Mate
Lesson 11
Camp Mate Prototype
Lesson 12
Our Project: Camp Mate case study
Lesson 13
Case Study Examples
Lesson 14
What's Next?

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection.

Our course is not program-specific, but we will be teaching in Figma because it’s free and available for both Mac and Windows users.

Target Audience

Anyone who wants to better understand the fundamentals of digital design, branding and improve their skills.

You can be brand new to design and want a solid understanding of how to see and think like a designer, and create effective designs from scratch, or you can be a current designer, developer or someone working with design who wants to improve your processes and design with confidence. We'll teach you how to design with code in mind, so that you can work better with developers too.

Welcome to the course! In our first week, we’ll cover a concise design history and break down the design elements and principles. You’ll learn about important design milestones throughout history to deepen your understanding and appreciation of design.

This week we'll learn about grids, layout and visual hierarchy. We'll design wireframes for two pages for a city guide website called The Block. This project will continue into Week 3, when we finish the design by applying color, images and icons!

This week, we’ll cover the second half of Visual Design Fundamentals. You’ll learn best practices for creating color palettes, choosing and pairing typefaces and how to design with accessibility in mind. Plus a bit on working with photography and icons!

This week, we'll cover what a brand is, what makes them successful and break down the end-to-end branding process. For our project, we'll choose a social good cause to create a brand for.

This week, we’ll continue working on our social good brand. We'll translate our logo into a full visual identity. Once we've designed all our brand elements, we'll package everything up neatly into brand guidelines!

We'll take our completed brand to design the desktop version of our website. We'll learn best practices for web + UI design, responsive designing, tips for designing with code in mind, how to work with and hand off to developers using Figma prototypes.

This week you’ll take your desktop web designs and optimize them for mobile. We also have a guest lecturer this week, Rik (coder, teacher and SuperHi CEO!) to talk us through how to design with code in mind and work better with developers.

In our final week of the course, we’ll complete a capstone project. The brief is find a print publication without an online presence and use it to inspire your final project — a digital experience of some kind.

Milan is a branding and design freelancer based in Brooklyn! She previously worked at creative agencies in Brooklyn, with early-stage startups in Santiago, Chile and was part of the SuperHi team.

Kristen is a Toronto-based senior visual designer at Glitch, a site for making websites from scratch. She previously worked for as a visual designer for SuperHi, Nike and Huge.