Web Design for Beginners (Epic Free Course!)

Web Design for Beginners (Epic Free Course!)


For those who’re new to internet design, this free course on internet design for inexperienced persons will educate you every part you want to know.

“How do I decide typefaces, how do I decide colours, what the heck is whitespace, and the way do I place and dimension parts appropriately?”

These are precisely the sorts of questions which we’ll deal with on this epic newbie internet design course.

When it comes to fundamentals, you’ll study coloration, typography, spacing, sizing, imagery, and responsive internet design. We’ll talk about the idea, finest practices, and a few instruments you need to use to make your job simpler.

Relating to frequent internet design patterns, you’ll be taught in regards to the parts you need to use to design an online web page—issues like headers, hero areas, buttons, picture galleries, contact varieties, and extra. For every of those patterns, we’ll have a look at the definition and a few use instances, after which we’ll apply that data to a demo venture: a three-page portfolio web site designed particularly for this course.

Net Design Belongings on Envato Parts

You will discover among the finest premium internet templates on Envato Parts. These premium property embrace top quality options that make it quick and straightforward so that you can design and construct web sites. Together with your Parts subscription you’ll get limitless entry to UI kits, internet templates, fonts, WordPress themes and different helpful stuff for any internet designer.

This can be a enormous course (05:20 hours lengthy) and it’s break up into 36 classes in complete. You’ll discover it’s an excellent useful resource to dip out and in of, and be sure you bookmark the bits you’re most occupied with.

Obtain the venture transient and course assignments so you possibly can observe alongside, and take a look at the lesson contents under to see what’s coated intimately!


1. Welcome to the Course!

So that you need to turn out to be an online designer, however you don’t have any concept the place to start out. Don’t panic! It’s not as laborious because it appears, although it requires effort and time to be taught. On this course, I’ll information you thru the essential steps of changing into an online designer. You’ll be taught numerous nice info, just like the distinction between UI and UX design or learn how to learn venture briefs and create wireframes. You’ll study typography, coloration, spacing, sizing and utilizing imagery.

The course additionally has a sensible task you possibly can take so that you’ll be capable to solidify the knowledge you be taught. By means of this task you’ll discover ways to use among the commonest patterns in internet design by making a portfolio web site.

2. Course Undertaking and Task

Alright in order I’ve been saying beforehand, on this course we’ll be engaged on a demo venture and there may even be an task. For you. Don’t give it some thought as a homework as a result of no person likes doing that, however as an alternative as a possibility to take what you realized throughout the course and put it to good use, to observe, proper?

portfolio website design assignmentportfolio website design assignmentportfolio website design assignment

So first let me present you the course venture after which we’ll discuss just a little bit in regards to the task.

Associated hyperlinks:

3. UI Design vs. UX Design vs. Net Design

Alright so let’s see what’s up with all these acronyms. UI, UX, internet designer… what’s their deal? How is a UI designer totally different from a UX designer? Are each of those internet designers or is that one thing fully totally different? Let’s discover out.

Undertaking Briefs, Wireframes and Instruments

4. Studying to Work with Undertaking Briefs

Each internet design venture ought to begin with the UX half, proper? The consumer expertise — as a result of that’s what we have to give attention to. Earlier than we even contemplate colours or fonts, we want a transparent construction of the content material and we have to know who we’re designing this for.

And that is the place a venture transient comes very helpful. So for this utility, we’ll faux we’re the UX designer and we simply had a chat with the shopper. Based mostly on that discuss we created a venture transient.

5. Working with Wireframes

Alright, let’s speak about wireframes. These are low-fidelity variations of the ultimate design. You possibly can even take into consideration them as sketches.

The thought with a wireframe is to show the ultimate content material in addition to its construction. However do it in a means that overlooks any aesthetic selections. That means, a wireframe will not be about colours or typefaces or spacing. It’s purely in regards to the content material, how that content material flows and the way it’s organised.

Now, coming again to our venture, we’re nonetheless on the UX facet. Proper? We’re nonetheless taking a look at issues from the consumer’s perspective and since we have now a venture transient able to go we are able to get began on the wireframe.

To save lots of a little bit of time, I went forward and created the wireframe so now I’ll stroll you thru it.

working with our wireframeworking with our wireframeworking with our wireframe

6. Choosing the Proper Design Software

Alright in order we’re slowly moving into the UI design a part of this course, it’s time to resolve which software program we’ll be utilizing shifting ahead and I’m certain this is likely one of the primary questions you’re asking your self as a newbie.

And whereas it’s comparatively straightforward to be taught a UI design software program, it’s all the time useful to find out about professionals and cons earlier than you start so that you’ve got the very best info accessible when making the choice.

Associated hyperlinks:

Fundamentals: Coloration & Accessibility

7. Coloration Principle

Relating to coloration principle, there’s numerous info and when you did design work earlier than, then you definately in all probability know the fundamentals. However simply in case you don’t or possibly you want a refresh, this lesson is all about that.

I’ll try to offer you a really fast information to utilizing colours in internet design, with out making it very sophisticated. Let’s go.

8. Coloration Harmonies, Psychology and Instruments

Working with coloration may be daunting at occasions, particularly as a newbie as a result of, certain, you realize the idea, however how do you set it into observe? How do you decide colours that work finest on your venture and likewise work very properly collectively?

To reply that, let’s start by exploring coloration psychology or the that means of coloration.

Associated hyperlinks:

9. Making a Coloration Palette for Our Undertaking

Alright so now we’re within the realm of UI design. We’ve a venture transient, we have now a wireframe and a reasonably clear course. Now it’s our job to create a design primarily based on that wireframe and the simplest place to start out is the colour palette.

Fundamentals: Typography

10. Let’s Speak About Typography

Arguably, typography is crucial a part of any design as a result of a lot of the content material is often textual content. So when you’re not utilizing the suitable typefaces, font sizes, line heights, font weights and so forth, every part else kinda simply falls aside.

It doesn’t matter how good wanting the remainder of the web site is. In case your typography seems dangerous, that’s going to translate to the entire thing.

So how do you get began with typography? Effectively, there’s a multi-step course of and I’m going to try to simplify it for you. All of it begins with selecting the place you get your fonts from.

choose fonts wiselychoose fonts wiselychoose fonts wisely

Associated hyperlinks:

11. Creating the Typography for Our Undertaking

Alright so let’s observe the steps I described beforehand and decide the best typography traits for our venture. Let’s go.

Associated hyperlinks:

Fundamentals: Spacing, Sizing and Imagery

12. Spacing and Sizing in Net Design

Alright, spacing and sizing in internet design. This refers to how a lot area it’s best to use inside and outdoors of parts and likewise how huge or small they need to be. And these will generally overlap as a result of the ultimate dimension of a component may also be dictated by the inside spacing, like for instance, a button.

spacing and sizingspacing and sizingspacing and sizing

Associated hyperlinks:

13. Utilizing Icons and Photos in Net Design

Earlier than we begin placing pixels on the display screen, I need to offer you just a few pointers for working with icons and pictures.

Don’t overlook to take a look at Envato Parts for limitless use of hundreds of artistic property—together with icons for internet design!


Associated hyperlinks:

Widespread Patterns: Headers, Hero Areas and Buttons

14. Definition and Use Circumstances for Headers

Earlier than we design a header, let’s have a look at what it’s.

15. Let’s Design a Header

To design our header we’ll use the wireframe as a place to begin and since I’m working in Figma I’ll be utilizing the auto format characteristic fairly closely. However don’t fear, I’ll clarify the way it works as we’re constructing stuff with it.

header designheader designheader design

Associated hyperlinks:

16. Definition and Use Circumstances for Hero Areas

Hero sections have been as soon as thought of to be a passing pattern however they really caught very properly in internet design and just about all web sites these days use one.

17. Let’s Design a Hero Space

Okay, beforehand we designed the header for the web site of Robert Fox. And if we have a look at the wireframe, proper under that we have now a hero part. So let’s take that and work our magic.

18. Definition and Use Circumstances for Buttons

I feel everyone is aware of by now what a button is. However simply in case, let’s do a recap.

19. Let’s Design Some Buttons

My hero space is incomplete in the mean time as a result of I have to design the button. So whereas I do this I’ll additionally offer you some ideas and tips for designing handsome buttons. Let’s go.

Widespread Patterns: Picture Galleries

20. Definition and Use Circumstances for Picture Galleries

Alright, let’s speak about picture galleries and I feel the title is fairly self-explanatory.

21. Let’s Design an Picture Gallery

Based mostly on the wireframe, our web site additionally has a picture gallery even tho it’s extra like a portfolio showcase. However we’re solely displaying photographs there so can safely categorize it as a picture gallery.

image gallery designimage gallery designimage gallery design

Widespread Patterns: Footers

22. Definition and Use Circumstances for Footers

Alright, time to work with footers however first, let’s try to outline them.

23. Let’s Design the Footer

Alright, time to get busy once more and use our large data of footers to create our very personal. Prepared?

Widespread Patterns: Testimonials

24. Definition and Use Circumstances for Testimonials

Alright, testimonials. What are they? Effectively, they’re mainly good issues that your shoppers say about you. You the enterprise, the model.

25. Let’s Design some Testimonials

Alright so our web site has 2 locations for testimonials: the homepage and the about web page. And we’ll use a barely totally different type between the two pages.

Widespread Patterns: Tab Controls

26. Definition and Use Circumstances for Tabs

Alright, let’s speak about tabs. I’m certain most of you realize what a tab management is by now, however simply in case you don’t, right here’s a fast definition.

27. Let’s Design Some Tabs

Based mostly on the wireframes, the tab management we have to design is within the about web page and its function is to current the instruments that Robert Fox is utilizing for design and for growth.

Widespread Patterns: Accordion Controls

28. Definition and Use Circumstances for Accordions

Okay, let’s speak about accordions. In UI design, these are similar to tab controls within the sense that content material is break up up in a number of panels which may be opened by the consumer.

29. Let’s Design an Accordion

Based mostly on the wireframes, our accordion is for a Q&A piece contained in the contact web page. So let’s get to it.

Widespread Patterns: Contact Varieties

30. Definition and Use Circumstances for Contact Varieties

I’m certain we don’t actually need a definition for this sample proper? It’s fairly self-explanatory. It’s an online kind that folks can use to contact you.

31. Let’s Design a Contact Type

Okay so primarily based on the wireframe, the contact kind is positioned within the… contact web page. Think about that. So let’s get began.

contact formcontact formcontact form

Responsive Net Design

32. What’s a Responsive Web site?

Alright, let’s speak about responsive web sites and I need to begin by telling you a brief story.

Associated hyperlinks:

33. Making Structure Modifications for Pill and Telephone

Okay so first let’s see what sort of issues our layouts are dealing with when displayed on a smaller display screen after which we’ll take into consideration options.

34. Making a Part Responsive

Making an internet site responsive will not be a really troublesome activity, however now and again you’ll encounter a sure UI factor that’s going to offer you a tough time, for instance a desk.

We don’t have any tables on this design, however we have now tabs. And these can someday show to be problematic as properly so on this lesson I’ll present you learn how to make the tab element responsive.

responsive componentsresponsive componentsresponsive components


35. A Fast Phrase About Prototyping

So what’s a prototype? Effectively, it’s mainly an interactive mockup of your design. It doesn’t essentially imply the ultimate model of the design, however as an alternative a model that permits you to higher see the performance and the consumer’s journey by means of the web site.

36. Subsequent Steps and Key Takeaways

Effectively this was an enormous course. 36 classes, over 3 hours lengthy and numerous hopefully helpful info. So congrats for ending it, I hope you realized one thing new and in case you have any questions or suggestions please go away a remark down under.


We will be happy to hear your thoughts

Leave a reply

Enable registration in settings - general