6 UI Hacks I Wish I Knew As A Beginner 

I've summarized the main points 1. Importance of Line Height in Typography: Good design involves appropriate line height, with the recommended range being 1.1 to 1.3 times the text size for headings and 1.3 to 1.5 times for body text. This improves readability and the overall aesthetic of the design. 2. Letter Spacing Makes a Difference: Adjusting the space between characters, known as letter spacing, can enhance the design. Negative letter spacing is suggested for headings to add a certain crispness but should be avoided for body text to maintain readability. 3. Proper Text Alignment is Essential: Avoid center-aligning long paragraphs, as it can slow down reading speed. For anything that spans more than three lines of text, left alignment is recommended. Also, avoid mixing alignments between headings and body text. 4. Considerations for Text Width: Based on a study by The Baymard Institute, long lines of text can overwhelm users, leading to less engagement and lower conversions. A good range to maintain is 50 to 75 characters for body text, with around 600 pixels width for a desktop screen. 5. Hierarchy,: Avoid overusing text sizes to indicate hierarchy. Try to stick to two different font sizes, using font weight and color changes for hierarchy. 6. Spacing: Consider the space between text elements; elements with closer relationships should be positioned closer. Use multipliers to maintain consistent spacing between elements.

Watch this in 1.5 speed

_"Whitespace is an active element"_ This is not just applicable in graphical / UI design: I taught my colleagues the same thing in terms of coding style. A blank line doesn't hurt while typing, but improves readability immensely and also serves as an indicator for logical blocks of statements, thus helping to keep a more "organized" code. The requirement (and benefit!) to the programmer is that s/he would have to _think_ about how to best group their statements and what they actually do, effectively resulting in a "two-pass" process of writing code and verifying it. Step two -- rearranging logical blocks into groups of similar types of code (declarations / assignments vs. pure statements) -- would be the next resulting optimization pass; however, this is not about typography anymore.

Currently in my IxD major we have 3 typography classes, learning typography is so important.

I’ve been watching a lot of your videos recently and just subscribed. I love the balance between practical advice and keeping them concise. Keep up the awesome work Tim 😎

You earned a like and a follow just from that first hack you shared. As a new designer struggling to find a place, having concrete numbers to rely on as a base is really helpful. Thank you so much !

Couldn't agree more! It's incredible how a few well-chosen tips can revolutionize your UI work. Learning from the experiences of those who've been in the field for years is like unlocking a treasure chest of wisdom. The fact that these tips promise not only to save time but also to elevate the overall look and feel of UIs is incredibly enticing.

I just discovered your channel through this video and I love how you take your time to talk and explain everything in detail even giving examples, thank you so much :) I'm a graphic and ux/ui designer and your videos just helped me understand a lot!!!! Thank you!!

I've been doing UI for couple of years, and still learned a lot from this video! Will definitely be doing things differently now! Thanks for quality content, I'm watching them all :)

Hey Tim, as a new UX designer preparing to enter the field, I really like what you’ve shared and found it really important. I’ll take it forward with me, thanks a lot

Subscribed. Love the brief, straight to the point, value packed content. Thank you.

The video quality is awesome The way the explanation is fun with the application of tips One of the best videos explaining typography ⁦❤️⁩⁦❤️⁩⁦❤️⁩

Your videos are awesome, congratulations! The quality is unbelievable

Underrated video. Some of these tips took me a way too long to figure out on my own, solid tips

Awesome tips! I really appreciate how you gave us concrete numbers to work with and not just explain how things are supposed to work in theory! 🤓👍

Absolutely incredible content. Thank you Tim!😊

Another video that put into words what I've been using for years without knowing how to explain it! Thank you so much!

Love it!!! So many actionable tips, thanks Tim!🤗

this video was fantastic, gave me a good insight of how to think of UI and design and also a new perspective! thank you so much! video was great with all the descriptions and before after effects when you applied what you were talking about for each hack.

As a "forced to do design work" in my current job and not something I have actually studied I find all of these "hacks" a. very easy to implement, b. easy to understand, c. they just make sense. Thank you!

Just as a small hint, you can give percentage values in Figma input fields. So instead of writing the font size times 1.2 you can just write 120%.

Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!

When I started up In UI/UX design, I never considered letter spacing in my practice projects and I'd wonder what they weren't looking as good as I wanted. But videos like this helped me improve on my "type use"

Great video, I love the way you explain things, its super clear, love it !

Really well explained Tim! As a designer, articulating these are so important for our clients, especially when most of the world doesn’t have much of what I describe as visual and content design literacy (and yet our societies have incredible maths, science and language literacy thanks to content design they consume across two decades of learning). Many of the books we learnt on in my generation barely cared for how design impacts learning. But I’m hopeful that things will change for education in the decades ahead as learning becomes more mix-content, AI assisted and as the new generation of young people becomes increasingly more media savvy.

Awesome presentation of information in your videos! Really helpful but also interesting to watch, and good speed to receive the info. Keep it up!

Great lesson and examples. I would have loved to see the original design and updated design side by side.

Thank you for videos like these. While it is easy to get carried away by fancy looking prototypes and animations, it's the basics like these that keep us grounded in creating meaningful designs.

Your video is very supportive ❤ I have already subscribed to your channel. Keep working ^^

Brilliant! Thanks for delivering such helpful information in a concise and easy-to-understand way!

Great video, well explained with awesome use of visuals etc. Thanks for all the effort you put in. It really shows 👌😎

As a person coming from a software engineering background this is a really helpful video. I've always wondered what were the "hard truths" that made a design good and this definitely help me have a outline

Loved the video and the speed. I actually paused and rewinded the video to take notes. Thanks Tim!

Awesome video, Tim! Keep it up, cheers 🙏

I love how you go just to the point and don't waste our time. You sir just got a new suscriber.

This video is super duper useful!!! Wish I found your channel and watched this earlier. Thank you so much for sharing❤❤❤❤

In so glad someone brought this up I'm not alone at last

Your narrative, voice and articulation manners sounds really comfortable. Enough to subscribe to your channel right after watching this one video. Cool content🥕

OMG, love your video! Thank you for sharing awesome tips 🙌

These were so well thought out that I immediately subscribed!v Looking forward to checking out your older videos!

Absolutely amazing video, and explained the concept so well!! Thankss!

Good tips. Your content is very premium!!!! Man make more videos on UI designing ❤

I've been a self taught designer for over 30 years. While I accidently followed those rules, I never realized I was doing it. Instead, I spent way too much time adjusting elements until they "looked" right. THANK YOU! You just saved me SOOOOO much time!

Nice to see your subscribers has multiplied by 10x. Great content. Subscribed.

Super helpful thank you!!

Hooolyyyy. This is really good video mate ;) Thx a lot for your tips!

Great lesson. Although the comparison between the before and after designs is somewhat unfair because in the last design, you used colorful background instead of a grayscale one :D But, everything is improved in a great way, so, it`s OK in the end.🤩 Still, an awesome video! Thanks for such great and elaborate content!

Thank you very much Sir Tim

Man i dropped here like a week ago, by an accident, and now i can tell that i'm soo thankful for those multiple videos and tutorials which you create !

absolutely amazing. thank you so much please make more videos like this.

Thank you so much! Such great content! I’ve just subscribed!!!

For more people and channels like Tim Gabe. cheers!

In my opinion, this is the most well-explained explanation of this topic I have heard !!

I love this. This is my first time on this channel and it was a lovely one. Thank you.

Absolutey awesome tips and superwell explained. Thanks!

Great video, calm and clear voice and great content :D thx

very insightful, Loved this, you get my sub bro

Amazing,amazing staff.Thanks!

Very informative and entertaining. Enjoyed the video!

your vid quality is better than before😊 and also thx for contents 👍

your videos really send high quality vibes!

Great tips as usual, thanks a lot Tim ! :)

This is an enormous helps me (a developer). Now I won't need to keep moving and changing things around until I finally feel good about it. Thank you

This is the first video I saw summerising actual guidelines with numbers. Thanks a lot!

This was really a worthy watch! Thanks

First video I watch from you, it appeared to me in my homescreen, I really liked it. Thanks for sharing and cheers from 🇦🇷!

Great video. This helps me understand why I like some designs more than others!

Really nice video Tim

Value packed content! Thank you for sharing

great video - thank you so much !! simple and i will be applying it immediately 👍

It was a much-needed video. Thank you very much.

super helpful video, thank you!

This is crystal clear, and i'm french so really your good to explain all this stuff ! thk you so much !!

Thank you so much for sharing this knowledge and experience! It’s invaluable! ❤

Amazing Tips. These Hacks are insane level. Thanks a lot. Best wishes for you!

Literally the most enlightening design tutorial I have ever come across.

This is one of the best tips I've seen on youtube congrats on the channel

This one was really good. Much more clearer about distances👍🏻

Your videos getting better and better

Some great technical tips! Thank you

Being a full stack dev, I appreciate you. Thanks for the tips, subscribed!

I like the Mike Shinoda reaction you put in between

Thanks - big help!

Muchas gracias por los tips prácticos hermano, es algo que buscaba en específico 😎👍

this was great, thanks Tim 👍🏻

UI designer here, really like the style and quality of your videos. One thing I noticed, you like to 2x the CTA in relationship to the copy beforehand. I feel it becomes kind of isolated that way and I like to give it the same visual spacing as headline to body copy.

I always like the tips and points u share with us in ur channel , greetings from Morocco ✨✌🏻

Excellent video on typography! Such an underrated area of ux design.

I'm not a designer but as a dev who does some frontend work some of this is really useful

This content is a gem. Thank you so much❤

Another great video on your channel 🔥

absolutely wonderful, useful info, thanks a lot!!!

Though the whole difference you made to the old design with the guidelines !🔥

holy shit! this is the video I've been searching for!!!

Man, I learned these 'basic' things through years of trial and error and assumption. Really wish someone told me the exact values back in the day. I almost envy the kids who are new to design nowadays. Anyways, great video, informative, short and sweet.

Insightfull content as usual, You help me a lot.. Keep it going please

you earned a subscriber, well done 👏👏

fantastic advice, thank you!

Astonishing content Tim 🔥🔥🔥 🚀

As a software developer whos currently tasked with making a legacy desktop application high dpi compatible, hearing you talk about pixel values in a 2022 design tips video made me wanna cry.