Web Design for Beginners | FREE COURSE

Net Design for Freshmen | FREE COURSE

by



For those who’re new to net design, this course on net design for freshmen will train you all the things you might want to know. ► Obtain artistic digital property with Envato Components: https://components.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description “How do I choose typefaces, how do I choose colours, what the heck is whitespace, and the way do I place and measurement components accurately?” These are precisely the sorts of questions which we’ll deal with on this newbie net design tutorial.

► Obtain artistic digital property with Envato Components: https://components.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

When it comes to fundamentals, you’ll find out about coloration, typography, spacing, sizing, imagery, and responsive net design. We’ll talk about the speculation, greatest practices, and a few instruments you need to use to make your job simpler.

In the case of widespread net design patterns, you’ll study concerning the components 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 take a look at the definition and a few use circumstances, after which we’ll apply that information to a demo undertaking: a three-page portfolio web site designed particularly for this course.

► Try this hyperlink for the undertaking transient and course assignments: https://bit.ly/37YMk4W
► Learn the course notes (and extra!) for Net Design for Freshmen on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course–cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Hyperlink to wireframe portfolio web site with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Web site?node-id=0percent3A1

What You will Be taught:

00:00:00 Welcome!
00:04:31 Course transient and project
00:05:48 UI design vs. UX design vs. net design
00:14:08 Studying to work with undertaking briefs
00:19:59 Working with wireframes
00:28:08 Choosing the right design device
00:33:53 Shade principle
00:51:36 Shade harmonies, psychology and instruments
01:03:11 Making a coloration palette for our undertaking
01:20:00 Let’s discuss typography
01:31:11 Creating the typography for our undertaking
01:46:01 Spacing and sizing in net design
01:54:47 Utilizing icons and pictures in net design
02:03:33 Definition and use circumstances for headers
02:11:39 Let’s design a header
02:28:16 Definition and use circumstances for hero areas
02:33:06 Let’s design a hero space
02:39:08 Definition and use circumstances for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use circumstances for picture galleries
03:01:38 Let’s design a picture gallery
03:12:34 Definition and use circumstances for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use circumstances for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use circumstances for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use circumstances for accordions
04:04:03 Let’s design an accordion
04:13:19 Definition and use circumstances for contact varieties
04:18:17 Let’s design a contact kind
04:32:49 What’s a responsive web site?
04:36:55 Making structure modifications for tablets and telephones
04:56:44 Making a part responsive
05:09:52 A fast phrase about prototyping
05:16:11 Subsequent steps and key takeaways

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Uncover free how-to tutorials and on-line programs. Design a emblem, create a web site, construct an app, or study a brand new ability: https://tutsplus.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Components
All of the artistic property you want below one subscription. Customise your undertaking by including distinctive pictures, fonts, graphics, and themes.
► Obtain Limitless Inventory Images, Fonts & Templates with Envato Components: https://components.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Comply with Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Comply with Envato Tuts+ on Fb: https://www.fb.com/tutsplus
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

source

36 thoughts on “Net Design for Freshmen | FREE COURSE”

  12. This video is an excellent resource for anyone looking to improve their web design skills. The information on UI and UX is well-presented and easy to understand, and the examples given are very helpful in illustrating the concepts. I especially appreciated the emphasis on user-centered design, as it is crucial for creating a great website. Thank you for sharing this valuable information!

    Reply

  15. Can please someone help me here, I am new to this and mac os and 1:04:17, I am not able to figure out how he selected the colour from pdf. I tried the shortcut but not working for me. I am doing something wrong definitely.

    Reply

  28. After the web design, web developers will have to code the frontend of the website using html, css and probably some scripts. How beneficial is the work of the designers to the developers?
    Because I see the web developers to be starting all over again.
    Or is there a way the developer can easily write the codes from the work (in figma) of the web designer?

    Reply

Leave a Comment