Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Web Design for Beginners | FREE COURSE

Envato Tuts+
1.66M subscribers
3.8M views 3 years ago Web Design for Beginners
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato: https://elements.envato.com/?utm_camp... “How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial. ► Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_camp... In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive w …...more
...more

Welcome!

0:00

Course brief and assignment

4:31

UI design vs. UX design vs. web design

5:48

Learning to work with project briefs

14:08

Working with wireframes

19:59

Picking the right design tool

28:08

Color theory

33:53

Color harmonies, psychology and tools

51:36

Creating a color palette for our project

1:03:11

Let’s talk about typography

1:20:00

Creating the typography for our project

1:31:11

Spacing and sizing in web design

1:46:01

Using icons and images in web design

1:54:47

Definition and use cases for headers

2:03:33

Let’s design a header

2:11:39

Definition and use cases for hero areas

2:28:16

Let’s design a hero area

2:33:06

Definition and use cases for buttons

2:39:08

Let’s design some buttons

2:44:46

Definition and use cases for image galleries

2:57:27

Let’s design an image gallery

3:01:38

Definition and use cases for footers

3:12:34

Let’s design the footer

3:17:55

Definition and use cases for testimonials

3:26:37

Let’s design some testimonials

3:31:48

Definition and use cases for tabs

3:44:15

Let’s design some tabs

3:48:11

Definition and use cases for accordions

3:59:47

Let's design an accordion

4:04:03

Definition and use cases for contact forms

4:13:19

Let’s design a contact form

4:18:17

What is a responsive website?

4:32:49

Making layout changes for tablets and phones

4:36:55

Making a component responsive

4:56:44

A quick word about prototyping

5:09:52

Next steps and key takeaways

5:16:11
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato: https://elements.envato.com/?utm_camp... “How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial. ► Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_camp... In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier. When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more. For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course. ► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W ► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articl... ► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65d... What You'll Learn: 00:00:00 Welcome! 00:04:31 Course brief and assignment 00:05:48 UI design vs. UX design vs. web design 00:14:08 Learning to work with project briefs 00:19:59 Working with wireframes 00:28:08 Picking the right design tool 00:33:53 Color theory 00:51:36 Color harmonies, psychology and tools 01:03:11 Creating a color palette for our project 01:20:00 Let’s talk about typography 01:31:11 Creating the typography for our project 01:46:01 Spacing and sizing in web design 01:54:47 Using icons and images in web design 02:03:33 Definition and use cases for headers 02:11:39 Let’s design a header 02:28:16 Definition and use cases for hero areas 02:33:06 Let’s design a hero area 02:39:08 Definition and use cases for buttons 02:44:46 Let’s design some buttons 02:57:27 Definition and use cases for image galleries 03:01:38 Let’s design an image gallery 03:12:34 Definition and use cases for footers 03:17:55 Let’s design the footer 03:26:37 Definition and use cases for testimonials 03:31:48 Let’s design some testimonials 03:44:15 Definition and use cases for tabs 03:48:11 Let’s design some tabs 03:59:47 Definition and use cases for accordions 04:04:03 Let's design an accordion 04:13:19 Definition and use cases for contact forms 04:18:17 Let’s design a contact form 04:32:49 What is a responsive website? 04:36:55 Making layout changes for tablets and phones 04:56:44 Making a component responsive 05:09:52 A quick word about prototyping 05:16:11 Next steps and key takeaways
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt... Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_camp... ► Subscribe to Envato Tuts+ on YouTube:    / tutsplus   ► Follow Envato on X:   / envato   ► Follow Envato on TikTok:   / envato   ► Follow Envato on Instagram:   / envato   ► Follow Envato on Facebook:   / envato   ► Explore Envato's full stack of AI tools, all included in your subscription: https://labs.envato.com/?utm_campaign...
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
5 lessons
Web Design for Beginners
Envato Tuts+

Course progress

0 of 5 lessons complete

Follow along using the transcript.

Envato Tuts+

1.66M subscribers