Paul's course knowledge base

LWP Design Module 1

Evergreen course · 78 lessons · 14h58m. Every lesson is listed below; use the section menu to jump.

HomeBrowseContentsConceptsToolsSpeakersFiguresQuotesConcept mapFindFindSearchTranscriptsStudyRefresherPart 107 studyCertificatesSEO/GEOOut of date?MineProjectsAboutAdmin

LWP's design module: the visual-design fundamentals that make a site look intentionally designed rather than assembled.

LWP Design Module 1
evergreen · 76/76 lessons extracted · 100% · complete · 0/76 videos archived locally

01Chapter 1: Welcome & Getting into the Right Mindset11 lessons

--

Welcome into the prelaunch, you are one of the first!

info
—info
--

A very warm welcome

extracted
03:52vttinfo
--

What you can expect

extracted
03:28vttinfo
--

Resources & community

extracted
05:22vttdeck
--

Figma vs Web Development - Part 1

extracted
13:24vttinfo
--

Figma vs Web Development - Part 2

extracted
13:10vttinfo
--

Let's open our mind for change

extracted
05:19vttinfo
--

Why your work never feels good enough

extracted
07:05vttinfo
--

Copying is not always bad

extracted
08:24vttinfo
--

Myths about design

extracted
10:21vttinfo
--

Test

info
—info

02Chapter 2: Why we struggle so much5 lessons

--

Identifying the problems

extracted
08:25vttinfo
--

Learning from other industries

extracted
10:55vttinfo
--

Making it relate to Web Design

extracted
13:49vttinfo
--

Watch out with assumptions

extracted
05:12vttinfo
--

Introduction of the Workflow

extracted
04:19vttinfo

03Chapter 3: The Professional Design Workflow6 lessons

--

Introduction to the workflow

extracted
02:53vttinfo
--

The power of agreement rounds

extracted
06:39vttinfo
--

Step 1: The Discovery

extracted
12:44vttinfo
--

Step 2: The Sitemap

extracted
20:04vttinfo
--

Step 3: The Visual Direction

extracted
14:29vttinfo
--

Step 4: The Visual Design

extracted
23:41vttinfo

04Chapter 4: Best practices for Web Design18 lessons

--

Introduction

extracted
02:50vttinfo
--

How to pick Colors and make a color palette

extracted
17:56vttinfo
--

How to pick fonts and work with Typography

extracted
47:28vttinfo
--

How to work with Spacing

extracted
27:57vttinfo
--

Visuals: How to work with Photography

extracted
16:07vttinfo
--

Visuals: How to work with Icons

extracted
08:38vttinfo
--

Visuals: How to work with Illustrations

extracted
07:47vttinfo
--

Visuals: How to work with Graphic Elements

extracted
06:42vttinfo
--

Visuals: How to work with Logos

extracted
02:19vttinfo
--

How to make your design sexy by Layout changes

extracted
09:12vttinfo
--

How to make your design sexy by Removing & Dividers

extracted
05:22vttinfo
--

How to make your design sexy with Randomness

extracted
06:14vttinfo
--

How to make your design sexy by Adding stuff

extracted
04:05vttinfo
--

How to make your design sexy with Off canvas

extracted
05:44vttinfo
--

How to make your design sexy with Text effects

extracted
03:11vttinfo
--

How to make your design sexy with Trendy effects

extracted
05:33vttinfo
--

Balancing order & creative chaos

extracted
14:59vttinfo
--

Different web design styles explained

extracted
18:48vttinfo

05Chapter 5: Designing 1 website together with Figma38 lessons

--

1 Introduction

extracted
06:05vttinfo
--

2 Discovery - The client approaches us

extracted
08:17vttinfo
--

3 Discovery - The client has responded

extracted
11:10vttinfo
--

4 Discovery - Preparing for the videocall

extracted
06:42vttinfo
--

5 Discovery - Analysing notes from our client call

extracted
16:48vttinfo
--

6 Sitemap - Analysing competitors

extracted
12:22vttinfo
--

7 Sitemap - Client input analysis

extracted
08:43vttinfo
--

8 Sitemap - Inspiration websites

extracted
06:17vttinfo
--

9 Sitemap - Using AI to get more input

extracted
13:27vttinfo
--

10 Sitemap - Creating the Sitemap in Figma

extracted
24:15vttinfo
--

11 Sitemap - Sending it to our client

extracted
15:57vttinfo
--

12 Visual Direction: Creating moodboards

extracted
22:02vttinfo
--

13 Visual Direction: Sending it to our client

extracted
03:33vttinfo
--

14 Visual Design: The plan

extracted
06:10vttinfo
--

15 Visual Design: Inspiration

extracted
15:30vttinfo
--

16 Visual Design: Rough layout part 1

extracted
13:15vttinfo
--

17 Visual Design: Setting up our typography

extracted
14:00vttinfo
--

18 Visual Design: Finding a nice font

extracted
16:15vttinfo
--

19 Visual Design: Creating your color palette

extracted
15:43vttinfo
--

20 Visual Design: Exploring Variables and Components

extracted
16:09vttinfo
--

21 Visual Design: Creating our button components

extracted
12:28vttinfo
--

22 Visual Design: Tags and pagination

extracted
09:53vttinfo
--

23 Visual Design: Bento grid

extracted
09:14vttinfo
--

24 Visual Design: Specials section

extracted
11:06vttinfo
--

25 Visual Design: Photo slider

extracted
03:34vttinfo
--

26 Visual Design: FAQ section & Corner variables

extracted
20:55vttinfo
--

27 Visual Design: Location section

extracted
09:50vttinfo
--

28 Visual Design: Opening hours

extracted
09:06vttinfo
--

29 Visual Design: Footer

extracted
12:07vttinfo
--

30 Visual Design: Adding details

extracted
32:36vttinfo
--

31 Visual Design: Sending it to the client

extracted
10:08vttinfo
--

32 Visual Design: Applying feedback & aligning sections

extracted
18:05vttinfo
--

33 Visual Design: Adding images

extracted
19:52vttinfo
--

34 Visual Design: Generating images

extracted
06:56vttinfo
--

35 Visual Design: Designing the popup

extracted
18:22vttinfo
--

36 Visual Design: Adding spicy details part 1

extracted
18:54vttinfo
--

37 Visual Design: Adding spicy details part 2

extracted
13:27vttinfo
--

38 Visual Design: Sending our final design

extracted
04:46vttinfo