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 Elements: “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:
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:
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+:
► Link to wireframe portfolio website with Figma:
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:
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:
► Subscribe to Envato Tuts+ on YouTube:
► Follow Envato Tuts+ on Twitter:
► Follow Envato Tuts+ on Facebook:
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
I found it very informative and helpful. The video was well-organized and easy to follow, and I learned a lot about the basics of web design.
Sir , Do i need to know html before watching this ? or can i use this for UI/UX or any other space of designing , where i can use all this knowledge ?
I get super chills knowing that there exist people like you who are willing to educate the community for FREE. We forget that we are in 2023 , where technology has enabled us to literally do anything yet the price of Education is increasing daily whilst it should be decreasing! Keep going brodie, you have all our support
Ai will obliterated these skills and youtube channels talking about manual programming skills. Sadly , looking forward to ai developing websites contents in this channel
Envato Tuts+ has helped me to learn things that I never knew even existed. This channel is a gift to every creator and beginner. Thank you so much!
Thank you very much for this wonderful piece. I'm a beginner and I hope to make optimal use of your lessons. God bless you really good!
Best free course I ever taken. I’m gonna take web designs career or as a side hustle within god’s hands and it’s blessings. Don’t delete this video.
Great
I just subscribed to this channel! I finished a coding bootcamp. But they never taught us all that. I don’t know if it was because of the pace of the program, but this free course was great! Thank you!
can you also make course videos about web development
Found your post interesting to watch. I can't wait to see your new videos soon. Good Luck with the upcoming update. This YouTube channel is really very informative and effective.
So useful!
But can someone be a web designer and a web developer too?
I need pdf file of this course please
Thank you very much
I haven't come across such a fantastic tutorial before like its a great great great opportunity to learn ui hx designing for beginners like me. I am very happy that after searching a lot…finally I found the right thing to learn. Thank You so much.😊
thank you man <3 i will give back to the community one day
Web designer, UX, UI, which one needs more computer background, and which one has higher salary? XD Thank you for answering.
Sir your mathod of teaching is remarkable i enjoyed your way of explaing things .i subsxribe to your chanell ro seek knowledge, thank you
Man, I have been looking for so long for some decent guidelines on webdesign, I've been programming for a couple years already but the design part has always been just magic to me. This gives so much insight and explanation to how and why certain design aspects work together and how that can communicate in certain ways (like the use of proper color palettes, typography, white spaces etc.)
Now surely this course is just the tip of the iceberg of all there is to know about design, but it's giving such a major step-up to my personal projects.
Thank you!!
:)dear youtube i want to to show me more of these courses
Very helpful. Can creating WordPress templates work in the same way? I'd like to create themes for customers to download
Found your post interesting to watch. I can't wait to see your new videos soon. Good Luck with the upcoming update. This YouTube channel is really very informative and effective.
I didn't have a choice but to subscribe. You really know how to present content. Very clear and straightforward
Hi sir I am a beginner can you give me some tips? And can it be done on MacBook?
are you familiar with the vsble service, if so opinion. Thanks in advance
Now I want to see the development side of things…
Does he have a homepage? ❤
As a backend developer who always struggled to make a modern web UI. This video was incredibly helpful, thank you
Is there a way to get a wireframe or is that the idea of the website you are creating?