6 UI Hacks I Wish I Knew As A Beginner

Some things you just wish you learned YEARS earlier in your career. These 6 practical UI tips and tricks will save you a lot of time and make your UIs look much more crisp — without a bunch of effort.

Timecodes
00:00 Introduction
02:11 Hack 1
03:35 Hack 2
04:58 Hack 3
06:15 Hack 4
07:56 Hack 5
08:38 Hack 6

[PSNoScopezz]

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.

[WoodymC]

_"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.

[stevengonzalez]

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

[uifry]

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.

[alanmurray]

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 😎

[suncre]

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 :)

[ronymansor]

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

[florentguillamet]

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 !

[rafalimao]

I have seen TONS of UI and UX videos/ courses. None of them were so straight to the point like you did for free. Thank you so much :)

[muttyta]

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

[phembl]

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%.

[tenzingyaltshen]

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

[minutes]

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

[davetheglitch_]

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"

[OrensteinDsouza]

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.

[djashawe]

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

[GoddessofWarr]

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

[AlissonBirck]

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

[mondojoey]

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

[Peywan]

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.