I didn't think I needed to watch this one, but I'm so glad I did. Designers can 10x their design skills with the principles you covered here. I'm going to start using opacity from now on. Thanks for another bang on the money, valuable and entertaining video.
There are a few really good ones in here. I do not like your typography choices though. The "before" was soo much easier to just quickly read at a glance. Like it literally took me enough time to notice to find my way around the "after" design. Plus, I'm also not sure what kind of websites most people build, probably portfolio websites (for businesses, not themselves :P) and this works great for those. I'm mainly building actual applications, like for example a scheduling tool for work etc, and a lot of these things are not as clearly applicable there. Of course, youtube looks much better than my apps, but it's hard to figure out the reasons.
My favorite tip is to begin designing using system fonts, as they will feel very natural to the user because those are the fonts used most prominently on their devices. If you are getting far along in the process and is still doesn't feel right, only then consider using webfonts. A big plus is that system fonts eliminate the need for the user's browser to load bloated font files, making your website faster.
BIG thanks for the spacing tip - I already saw it in another video you did recently (7 things I wish I knew - or so) I have always been struggling with spacing before but this REALLY has changed the game for me! 🙏
Hi Tim, thanks for the guide - I've found it incredibly useful! I don't usually comment on videos, but thought I should on this one because you obviously put a lot of effort into editing and finding relevant examples. The side-by-side comparisons you do are also very practical - keep up the good work!
Looking at the flow tip you gave, I've been incorporating the wave flow in all of my designs without even knowing it, as anyone would've done, I felt EXTREMELY proud of my guts haha. Great video, learnt a lot.
Cam to this video without much expectation, but in the end, the simplicity and the quality of the pieces of advice really got me! Congrats for this awesome video!!
Great video. I'm going to push back on your one font concept. Most good brand guidelines will give you the option of a main feature font and a secondary one. Then you can use contrast and emphasis in the designs.
It's really really teach me a lot. I'm a Jr UI/UX designer from Bangladesh. But, always still confusing how to design something unique. But right now, i teach lot of things from this video. Thank you so much❤
Great video!!! So many useful tips! But please dont use multiple H1 tags on a page for styling reason. You can do what Apple does and hide h1 tag from the page so its only there for SEO and visually impaired users who use screen readers, but their biggest typography on page is h2 tag. Or simple style h1 and h2 tags to look identical and then decrease the font size with h3 and down
Actually typography and spacing guidelines are very important. After coming other details. Thank you so much man for share your insights. I follow you, that's amazing❤
*Tim a big shootout to you, this past 2month i spent days and days learning webdesign with your video, and i think i really understood how it works thanks to all your great tutorials. I for sure have to improve my skills but really, when i work now, i'm really comfortable while working on web design. You're the best dude, thanks x1000*
Wow how people say website is not UI design?????? Website are consistent of UIs. The UI is what users interact with when they visit a website, and it includes all the visual and interactive elements that make up the site. These elements are designed to facilitate user interaction, provide information, and enable users to perform tasks. Thanks for the good information! Keep going!
I have been doing all of that intuitively but i was having hard time explaining all that to my juniors Thankyou for making all of this easier to explain
This video started off shaky for me, since I saw some of your other stuff and it was repeated content. But that stuff near the end was awesome and I'm surprised it was free. Great video.
This is amazing. Thank you SO much for this vid - especially for new designers this is super helpful and clears so many things up regarding high-fid design
Amazing Video! Me who learning web dev and knows how to code such websites but was missing the part to how to make then design look good. Thank you so much after this video i can make it look good.
@@TimGabeand this was the first video i saw of your channel and it was very helpful now me in progress of making my projects look good as before they were just functional with black text on white background
Watch it anyway because this doesn't really show how useful it is. 1 Typography 2 Spacing 3 Grids 4 Kill monotony 5 Colors 6 Visuals 7 Details One point for example, the concept of a wave for placement is pretty cool and it is something I myself have never even considered - I am a backend guy so not really designing a shed-load of websites - but it is something so glaringly obvious that I mentally kicked myself.
Wow! This is one of your best videos, simple and easy, a quick recap of most of the things you have discussed before but in the same place. And the website turned out amazing! I'm glad your channel is growing, you deserve it. :) I have a question regarding using Midjourney or free assets websites, Is that a legal thing to do with real clients? My company doesn't let me use any free assets that are on the internet. I have to create them by myself or the client needs to send them, which in most cases their assets suck and that doesn't help to create nice interfaces :( haha
Thank you Mr Tim Gabe ,this helps us to have a clean framework and discipline our creativity. Through you advice I can create clean structured websites
headings are for laying out web sections, giving them meaning, not for styling. They are required for organizing a site. Do not style your site using headings as style points.
Very nice content as usual, Tim 👌 I can't wait for the Framer course !! Any idea on the potential release date ? Also, happy new year, I wish you the best for this year ✨
thank you so much, friend! 😃 happy new year!! i'm filming like a maniac at the moment, fighting to keep my promise of a january launch. will keep you all posted in the newsletter! 🙏
Good video .:) i will say u container size is bit small 960 . :) But like what u came up with and showing alot of small details make the difference! Keep up the good work
Here is free ultimate cheat trick, just make everything simple, ease of use and accessibility is what matters way more then how it looks or any fancy effects etc. There is reason why most exclusive brands have very simple web pages and titans of front end like Facebook team makes everything uninspired and simple.
I recently learned from a Graphic Designer that the term "font" is more granular than "typefrace". So technically, font is e.g. one installable variant (e.g. Roboto Regular) with one particular font weight. While the overall thing is called "typeface" or "font family". I am not sure I love the idea of being such a stickler, I used font forever for everything and so do most people, but has anyone else come across this definition?
Hi Tim, your vids have been incredible! With your zero to hero course, do we know roughly when this will be released please as considering purchasing a web design course and am planning to use framer for portfolio & moving forward Thank you so much
Hey mate, just love your work and tips. Thanks for sharing with us..Good luck to you for your future journey..I too love to play with font, colour, typography ,editing and want to kickstart a journey as a graphic designer and am keen to extend my services and learn from them. Any tip would be highly appreciated. Thanks in advance 😊
Thanks for all the good tips! I'm curious, do you have any content on putting together a UX/design portfolio? Currently trying to revamp mine and I feel like so much has changed over the last few years in terms of tools/trends/recommendations that we could use some pointers!
don't have a video on this, but i'm hearing it so much from different people that i definitely have to make a video on this in the future. thanks for the suggestion!!
Great content, Tim. It would be great if you could give the links of the great website shown in the video. That would add a lot of value in our life & save time.
Wow thanks for the video!! You are simply amazing! I would like to know which software you recommend to use to animate something in your websites? And which software do you recommend for me as a designer to use for animation in Figma
I prefer the first one more. All it needed was some spacing and small layout changes and it would look much better than the ai generated looking website on the rigjt
Don't use opacity for your final colors - it's too dependant on the background it's placed on, you don't have a solid hex/hsl to work with, and highlighting the text once it's on the website looks different to other text. Instead, play with the opacity to find the right look and convert it to a solid color without opacity.
Handing out 2nd year tipps won’t cut it. If you want to be top 1% listen to the top 1%, not some basic rubbish. For starters: train your eye, patience, grind for 12h a day (this is not a joke), drop distractions that may interest you aside from your core skillset. This is how you enter the top tier, everything else is clickbait like this video here.
happy to help!! i have a playlist with a bunch of figma videos, but no full tutorial unfortunately! here's the playlist: ruclips.net/p/PLOIq79MWqv84BLdSq8avEj5mMtxT2zWLE
I've summarized the 7 guidelines. You should definitly watch the whole video tho, because it is full of good detailed information. 1. Typography: Use one or two well-paired fonts and create a consistent text style guide. 2. Spacing: Apply spacing based on element relationships, using multipliers for consistency. 3. Grids: Structure your design using grids, but don't be afraid to occasionally break them for visual interest. 4. Breaking Monotony: Introduce unpredictability in your design to keep it engaging. 5. Colors: Stick to a three-color palette (base, primary, neutral) and ensure good contrast. 6. Visuals: Prioritize high-quality, modern visuals that align with your design's color scheme. 7. Details: Focus on simplicity and minimalism, adding subtle effects for depth without cluttering.
0:21 - Guideline 1. Typography
2:59 - Guideline 2. Spacing
5:38 - Guideline 3. Grids
6:56 - Guideline 4. Kill Monotomy
7:52 - Guideline 5. Colors
9:22 - Guideline 6. Visuals
11:52 - Guideline 7. Details
Thanks random guy, I really don't have time for watching the whole video.
3:15 - Indian guy doing hand trick
I didn't think I needed to watch this one, but I'm so glad I did. Designers can 10x their design skills with the principles you covered here. I'm going to start using opacity from now on. Thanks for another bang on the money, valuable and entertaining video.
bang on the money? which money that you paid for this lol
that's a really cool comment. thank you so much!!
There are a few really good ones in here. I do not like your typography choices though. The "before" was soo much easier to just quickly read at a glance. Like it literally took me enough time to notice to find my way around the "after" design. Plus, I'm also not sure what kind of websites most people build, probably portfolio websites (for businesses, not themselves :P) and this works great for those. I'm mainly building actual applications, like for example a scheduling tool for work etc, and a lot of these things are not as clearly applicable there. Of course, youtube looks much better than my apps, but it's hard to figure out the reasons.
My favorite tip is to begin designing using system fonts, as they will feel very natural to the user because those are the fonts used most prominently on their devices. If you are getting far along in the process and is still doesn't feel right, only then consider using webfonts. A big plus is that system fonts eliminate the need for the user's browser to load bloated font files, making your website faster.
BIG thanks for the spacing tip - I already saw it in another video you did recently (7 things I wish I knew - or so)
I have always been struggling with spacing before but this REALLY has changed the game for me! 🙏
that's so so cool to hear, friend!!
Hi Tim, thanks for the guide - I've found it incredibly useful! I don't usually comment on videos, but thought I should on this one because you obviously put a lot of effort into editing and finding relevant examples. The side-by-side comparisons you do are also very practical - keep up the good work!
Came here without high expectations since the thumbnail is such a catcher… but this is some real good content.
He talks fluent, this is very cool!
You helped me revisit the fundamentals, even after designing for 20 years, thanks man
Great work Tim! You've really stepped up your game! love it.
means a ton coming from you, ran! 🙏 thank you!! 😃
Looking at the flow tip you gave, I've been incorporating the wave flow in all of my designs without even knowing it, as anyone would've done, I felt EXTREMELY proud of my guts haha. Great video, learnt a lot.
haha same as me with the spacing & grouping, always naturally thought about what he said
Great tips! But in guideline 6, please don't see a lower opacity for smaller (sub)text, just use a darker shade of your neutral color.
I love this. As a web developer, I find this design workflow / checklist invaluable. Thanks Tim
Ooof, those AI art assets at the end are horrible.
Cam to this video without much expectation, but in the end, the simplicity and the quality of the pieces of advice really got me! Congrats for this awesome video!!
that's amazing to hear. thank you!!
Same. This was more than i was looking for thanks
Great vid man. Breaking the process into these steps gives anyone a clear way to get to a desireable outcome. You're killing it!
thanks a lot 🤩
Great video. I'm going to push back on your one font concept. Most good brand guidelines will give you the option of a main feature font and a secondary one. Then you can use contrast and emphasis in the designs.
This. A lot of sites I've seen use one font for headings, and another font for body text.
This is a video I will need to come back to over and over to remind me to keep it simple when my ideas get to many and get me stuck. Thanks a lot.
love that. thank you for commenting!!
My youtube search ends here! You are amazing! Showing practical application of design terms is niche of your channel. Thank you so much!
I'm really looking forward to your "Framer Zero To Hero Course". You are an excellent teacher, love your style ;)
I don't normally leave comments on videos but this one is extremely helpful, and I can only say that it helped me clear my mind incredibly🙌
It's really really teach me a lot. I'm a Jr UI/UX designer from Bangladesh. But, always still confusing how to design something unique. But right now, i teach lot of things from this video. Thank you so much❤
that's great to hear, my friend! thanks for sharing 💜
Great video!!! So many useful tips! But please dont use multiple H1 tags on a page for styling reason. You can do what Apple does and hide h1 tag from the page so its only there for SEO and visually impaired users who use screen readers, but their biggest typography on page is h2 tag. Or simple style h1 and h2 tags to look identical and then decrease the font size with h3 and down
Actually typography and spacing guidelines are very important. After coming other details. Thank you so much man for share your insights. I follow you, that's amazing❤
Wow, your workflow is astonishing. I'd love to follow those step by step.
thank you man!!
i watched the video many times and get amazed with the final result every time. thank you very much
thank you so much tim! you're absolutely inspiring! I'm waiting for your framer course
that's amazing to hear. thank you!! it's out soooooon, doing my best to get it out there!!
*Tim a big shootout to you, this past 2month i spent days and days learning webdesign with your video, and i think i really understood how it works thanks to all your great tutorials. I for sure have to improve my skills but really, when i work now, i'm really comfortable while working on web design. You're the best dude, thanks x1000*
that's simply amazing to hear, my friend. makes me really, really glad!!
I was a bit put off but the title, but this is one of the BEST video I have seen so far about web design. Thank you!!!
Enjoy your trip on the way to that Golden RUclips plaque buddy. This is an excellent channel 🎉
Great video, but please don't use H* for the size of the headings. It is for the accessibility of a website, not the size.
really good point martijn -- the nice thing is that you can easily swap those tags out in the framer sidebar!
The opacity trick was nice ngl. Great video!
thanks a lot!! 😃
great video for beginners... how to design better than %99 of beginners...
happy you liked it!!
Wow how people say website is not UI design?????? Website are consistent of UIs.
The UI is what users interact with when they visit a website, and it includes all the visual and interactive elements that make up the site. These elements are designed to facilitate user interaction, provide information, and enable users to perform tasks.
Thanks for the good information! Keep going!
I have been doing all of that intuitively but i was having hard time explaining all that to my juniors
Thankyou for making all of this easier to explain
Hi Tim, Have been looking for something like this for a while. GOLD. Thankyou soooo much for making this video.
This video started off shaky for me, since I saw some of your other stuff and it was repeated content. But that stuff near the end was awesome and I'm surprised it was free. Great video.
the end result was amazing bro I swear
This is amazing. Thank you SO much for this vid - especially for new designers this is super helpful and clears so many things up regarding high-fid design
Those midjourney output really came out good!
The guidelines were really simple and the result was outstanding
that was my goal with the video!! thank you for the kind comment!
What a masterclass 🔥 Thanks, Tim
Such a great video. I've already shared it to all my social media cuz it's so good
that's so nice of you. thanks a lot!!
Thanks a lot! I like your style of presenting and the info you're providing. When can we expect your course? 😊
Amazing Video! Me who learning web dev and knows how to code such websites but was missing the part to how to make then design look good. Thank you so much after this video i can make it look good.
that's great to hear, my friend 😃
@@TimGabeand this was the first video i saw of your channel and it was very helpful now me in progress of making my projects look good as before they were just functional with black text on white background
Love yout content! can't wait for your framer course!
thank you so much!! i can't wait either, it's craaaazy time consuming to create it but soooon we're there 😅
That was a powerful little course on design !
thank you, vincent! glad you found it powerful!!
Watch it anyway because this doesn't really show how useful it is.
1 Typography
2 Spacing
3 Grids
4 Kill monotony
5 Colors
6 Visuals
7 Details
One point for example, the concept of a wave for placement is pretty cool and it is something I myself have never even considered - I am a backend guy so not really designing a shed-load of websites - but it is something so glaringly obvious that I mentally kicked myself.
Great explanation!!! Gonna apply these rules in my next design for sure! Thank you.
Wow! This is one of your best videos, simple and easy, a quick recap of most of the things you have discussed before but in the same place. And the website turned out amazing! I'm glad your channel is growing, you deserve it. :)
I have a question regarding using Midjourney or free assets websites, Is that a legal thing to do with real clients? My company doesn't let me use any free assets that are on the internet. I have to create them by myself or the client needs to send them, which in most cases their assets suck and that doesn't help to create nice interfaces :( haha
really appreciate that, andres!!
both of those are definitely legal and i use them daily! 😃
One of the best and clean tutorial ever!
Tim tim tim, Im with you from 500 subscribers! Good luck in 2024!
i see you, my friend!! thank you for all the support!!
Thanks man. I recently started with UI/UX design and it helps me a lot :D
that's awesome!!
Thank you Mr Tim Gabe ,this helps us to have a clean framework and discipline our creativity. Through you advice I can create clean structured websites
this is soo cool i loved the way you explained and i checked the course it is a quite higher in price
Im love with your editing and voice
that's very nice of you, thank you!!
Awesome video buddy !!
thanks my friend!!
What a great video for learners, step by step with clean guideline and by far the best tutorial video 🎉 please keep creating
that's amazing to hear. thank you for the support!
headings are for laying out web sections, giving them meaning, not for styling. They are required for organizing a site. Do not style your site using headings as style points.
It really helps for beginners like me, thank you Tim.
glad to hear it, my friend!!
Very nice content as usual, Tim 👌
I can't wait for the Framer course !! Any idea on the potential release date ?
Also, happy new year, I wish you the best for this year ✨
thank you so much, friend! 😃 happy new year!!
i'm filming like a maniac at the moment, fighting to keep my promise of a january launch.
will keep you all posted in the newsletter! 🙏
Brilliant Video. You made it so easy to understand and consume. Kudos man.
thanks a lot, really appreciate it!!
Great work🔥Thanks for the guidelines Tim!
Good video .:) i will say u container size is bit small 960 . :) But like what u came up with and showing alot of small details make the difference!
Keep up the good work
we all have different taste, i personally like them very tidy 😃 thanks man!
This had info as much as an whole book, thank you soo much for this Tim💯
Here is free ultimate cheat trick, just make everything simple, ease of use and accessibility is what matters way more then how it looks or any fancy effects etc. There is reason why most exclusive brands have very simple web pages and titans of front end like Facebook team makes everything uninspired and simple.
you're right! simplicity is the best rule of thumb!
I recently learned from a Graphic Designer that the term "font" is more granular than "typefrace". So technically, font is e.g. one installable variant (e.g. Roboto Regular) with one particular font weight. While the overall thing is called "typeface" or "font family". I am not sure I love the idea of being such a stickler, I used font forever for everything and so do most people, but has anyone else come across this definition?
Really enjoy those kind of Videos, Please give us more webdesign tips, especially with examples.
this video is performing well, so will definitely explore this more 😃
What prompt did you use for the other abstract designs? Thanks so much for the tutorials!
I never knew i needed to watch this until i do. the workflow is just... phenomenal! Thankyou for sharing this!
these kinds of comments are awesome! thanks a lot, joshua!!
Hi Tim, your vids have been incredible!
With your zero to hero course, do we know roughly when this will be released please as considering purchasing a web design course and am planning to use framer for portfolio & moving forward
Thank you so much
More value than others have in their course
that's amazing to hear. thanks dominik, really nice comment!
Loved all the tips, especially the details one and colors
Great video! Left me inspired to get some work done:)
The visuals and details part was pretty awesome. And the fact that it's quite feasible on Framer, it's Framer right?
super easy to do in Framer!
yes, it's Framer 😃
@@TimGabe nOICe !
I like this upgrade bud.
thanks man! 😃
Hey mate, just love your work and tips. Thanks for sharing with us..Good luck to you for your future journey..I too love to play with font, colour, typography ,editing and want to kickstart a journey as a graphic designer and am keen to extend my services and learn from them. Any tip would be highly appreciated. Thanks in advance 😊
that's awesome to hear, friend. thanks a lot for the kind words and good luck on your journey! 😃
this was a great video - need that checklist if you have for reference? And seems like Framer is really heating up, I’ll have to check it out more.
don't have the checklist anywhere, sorry 😅 but framer is definitely heating up, you should check it out for sure 🙏😃
I'm so proud to be the 1% who watch RUclips tutorials
Thanks for all the good tips! I'm curious, do you have any content on putting together a UX/design portfolio? Currently trying to revamp mine and I feel like so much has changed over the last few years in terms of tools/trends/recommendations that we could use some pointers!
I agree! I mean on ADPList on portfolio.
Definitely checkout Sarah Doody's UX case study google doc helper.
don't have a video on this, but i'm hearing it so much from different people that i definitely have to make a video on this in the future. thanks for the suggestion!!
@@TimGabe That would be super helpful, looking forward to it!
Well, you say there's no excuse for having bad visuals. How about giving us a video on how to improve visuals particularly
Great content, Tim. It would be great if you could give the links of the great website shown in the video. That would add a lot of value in our life & save time.
thanks a lot, hardi!!
godly.design was used to source a bunch of inspo 😃 (great resource)
Again that's a nice tutorial and nice Tips thx Tim
appreciate the kind words, ahmad! 😃
Absolutely amazing video, thank you for giving away these cheat codes :)
Wow, this is so cool, thanks gee
happy to help 😃
Great, simple and to the point video with good examples, thanks!
I like "primitive uninspiring" version more lol
Typography
Spacing
Grids
Kill monotony
Colours
Visuals
Details
that pretty much sums it up 😃
This is amazing. Thank you so much tim!
Wow! Great job! I got a lot of inspiration from this video ☺
that's awesome to hear, alan! 😃
Thanks a lot Tim for those awesome contents. What kind of details can one add to a light mode design?
Wow thanks for the video!!
You are simply amazing!
I would like to know which software you recommend to use to animate something in your websites? And which software do you recommend for me as a designer to use for animation in Figma
I prefer the first one more. All it needed was some spacing and small layout changes and it would look much better than the ai generated looking website on the rigjt
to each their own!! thanks for commenting!
Isn't it good practice to define those numbers all in terms of root font size (rem) instead of pixels?
i think this specific one needed another color, you see how the sections were stripes of white and gray? making it all one color looks very weird
i usually like one-colored pages more, so i think it's pretty subjective!
@TimGabe yes, after all you're the one designing. good job though I did learn a lot from this vid
Don't use opacity for your final colors - it's too dependant on the background it's placed on, you don't have a solid hex/hsl to work with, and highlighting the text once it's on the website looks different to other text. Instead, play with the opacity to find the right look and convert it to a solid color without opacity.
Absolutely amazing 🔥🔥
thank you for the support, friend!!
Really appreciate the helpful tips in this video!☺
Great video - are you able to share the 3 hex codes for the 3 colours you used? thanks!
Handing out 2nd year tipps won’t cut it. If you want to be top 1% listen to the top 1%, not some basic rubbish. For starters: train your eye, patience, grind for 12h a day (this is not a joke), drop distractions that may interest you aside from your core skillset. This is how you enter the top tier, everything else is clickbait like this video here.
Thanks a lot. :) Do you have a full tutorial on how to use figma?
happy to help!!
i have a playlist with a bunch of figma videos, but no full tutorial unfortunately!
here's the playlist:
ruclips.net/p/PLOIq79MWqv84BLdSq8avEj5mMtxT2zWLE
I've summarized the 7 guidelines. You should definitly watch the whole video tho, because it is full of good detailed information.
1. Typography: Use one or two well-paired fonts and create a consistent text style guide.
2. Spacing: Apply spacing based on element relationships, using multipliers for consistency.
3. Grids: Structure your design using grids, but don't be afraid to occasionally break them for visual interest.
4. Breaking Monotony: Introduce unpredictability in your design to keep it engaging.
5. Colors: Stick to a three-color palette (base, primary, neutral) and ensure good contrast.
6. Visuals: Prioritize high-quality, modern visuals that align with your design's color scheme.
7. Details: Focus on simplicity and minimalism, adding subtle effects for depth without cluttering.
good summary! thank you!!