Design Better Than 99% of UI Designers

In this video we cover 7 key guidelines the top 1% UI designers use to design amazing websites again and again.

Timecodes
0:00 - Intro
0:21 - Guideline 1
2:59 - Guideline 2
5:38 - Guideline 3
6:56 - Guideline 4
7:52 - Guideline 5
9:22 - Guideline 6
11:52 - Guideline 7

[priceandproduct]

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

[jolenekk]

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.

[TheHennes]

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! 🙏

[tommarshall]

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!

[FluxAcademy]

Great work Tim! You've really stepped up your game! love it.

[StudioNvzt]

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!!

[arandomguy]

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.

[LuLeBe]

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.

[TheHoinoel]

Great vid man. Breaking the process into these steps gives anyone a clear way to get to a desireable outcome. You're killing it!

[KriszX]

Came here without high expectations since the thumbnail is such a catcher… but this is some real good content.

[unadventurer_]

Ooof, those AI art assets at the end are horrible.

[JosVanWeesel]

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.

[mrdenikub]

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

[baljka]

Wow, your workflow is astonishing. I'd love to follow those step by step.

[Itachiuiux]

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❤

[martijnambagtsheer]

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.

[ThisDesignLife]

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.

[etorty_dev]

I love this. As a web developer, I find this design workflow / checklist invaluable. Thanks Tim

[vs]

My youtube search ends here! You are amazing! Showing practical application of design terms is niche of your channel. Thank you so much!

[abeblue]

*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*