[VIP] TWID: Typography In Web Design

Learn editorial style web design and master grids, typography, art direction, hierarchy, spacing and more.

1. Typography makes or breaks a design. Master it.
2. Become confident in making design decisions and never doubt yourself again.
3. Learn a new design style and become an art director level designer.

What you’ll find inside: 12 on demand lessons, 7 Figma resources.

Lessons:

What is editorial design (07:38)
Before we do a deep dive in all the fundamentals of this course, let's define what editorial style web design is.

Typography fundamentals (42:18)
Typography is one of the most important. things in design, in this lesson you'll learn everything you need to master it.

Grid fundamentals (17:11)
Grids are the backbone of any editorial style web design, in this lesson we'll cover everything you need to know about them.

Art direction (19:40)
Art direction can be a vague term, let's clear it up in this lesson. You'll get practical advice which you can use right away.

Hierarchy, spacing and balance (21:13)
Hierarchy, spacing and scale are the fundamentals of a good editorial style layout. In this lesson I go over how I use these.

Developing design taste (07:54)
Developing design taste is key to growing as a designer, in this lesson you learn how to do that, in line with your personality

How to get inspired (06:04)
Learn how to use inspiration in your work to create something new, we'll also cover all platforms you can use for inspiration and how to use them best.

UX tips (05:15)
In this lesson you'll find practical UX tips and insights that will help you make design decisions with confidence.

How to start a new project (06:26)
Practical guide to how to start your first design project after learning all the design fundamentals of editorial style web design.

Responsive design (04:04)
My approach for responsive design explained and how it applies to not only smaller screens but also bigger screens.

Developer handoff (03:44)
When working with a developer, the right mindset and process are key. This lesson explains how you work best with them.

Final thoughts and next steps (02:39)
Final thougts and advice so you can make the most of this course and a final piece of advice that changed my life.

Resources:

Colette Landingpage
Landing page for a fictional production company in desktop and mobile design, use at as inspiration or remix as you like.

Course Landingpage
The design file of this landingpage. I wanted not only fictional designs in here as recourses but also from a real project.

Fonts & Foundries
My favourite fonts and type foundries in one place. There's sans serifs, serifs, foundries and some book recommendations.

Art Direction
7 Art direction work sheets to get all the information you need from your client to create a well thought out art direction.

TypeScale
Type scale templete for you to use on your projects to set all your type styles neat in one place for yourself or a developer.

Course Slides
All slides to the course in one easy figma file, 632 to be precise. All organised for each lesson.

Design Start File
The file I always use when I start a new project. Desktop and mobile artboard with my go to grids applied to it.