↑ ↓ Navigate ↡ Select ESC Close

Design Better Than 99% of UI Designers

2024-01-02 Education
252.4k
10.6k
369
Tim Gabe
Tim Gabe
157.0k subscribers

Unlock all features

FREE: Get instant access to 10 AI summaries, chats, or transcripts per day.

Description

In this video we cover 7 key guidelines the top 1% UI designers use to design amazing websites again and again. πŸ”΄ learn about the future of creative work: https://timgabe.com/newsletter πŸ”΄ Framer Course: https://timgabe.com/framer-course 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

Top Comments (10)

@jolenekk 2024-01-03

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.

97 2 replies
@tommarshall9961 2024-01-27

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!

23
@daleonov 2025-05-12

Great tutorial, thanks! The only thing that I don't quite agree with are those AI generated images after 12:36. The isometric one at the top is cool, but the rest of them look hideous, even though they match the website's pallette better then those photos from the "before" shot.

5
@MikePreston-darkflib 2024-03-12

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.

4
@JosVanWeesel 2024-06-06

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.

3
@rogersonb 2024-01-29

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.

3
@climbingworkouts 2024-02-23

You helped me revisit the fundamentals, even after designing for 20 years, thanks man

2
@hojjatbandani 2026-03-08

this was best tutorial ever seen it has anything I need for design in 15 min

0
@bellini2535 2025-10-31

Watched a first time. Just watching. Then a second time while writing notes on specific points. And that's when it started becoming clear. This is a gem. The last 2 sections especially cleared up so many things I see and wonder. Thank you Gabe.

0
@TimGabe 2025-01-24

if you’re interested in the future of creative work, follow along here: https://timgabe.com/newsletter ❀

0

Unlock the Data Inside
Turn Videos into Knowledge

  • Get FREE 10/day: transcripts, summaries, chats
  • Chat with videos, export text & PDF
  • $1 free API credit for RAG, chatbots & research

Free forever plan β€’ All features unlocked

App screenshot