6 UI Hacks I Wish I Knew As A Beginner

  Рет қаралды 852,143

Tim Gabe

Tim Gabe

Күн бұрын

Пікірлер: 766
@PS3NoScopezz
@PS3NoScopezz Жыл бұрын
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.
@florians.6402
@florians.6402 Жыл бұрын
Not all heroes wear capes
@hamzamo.7180
@hamzamo.7180 Жыл бұрын
you dropped this 👑
@calimio6
@calimio6 Жыл бұрын
You missed "consistensy". It seem obvious but having a subset of rules means nothing if they are applied ambigously through a site, book or any other material. If an icon is at an odd place is going to look weird but if your design iterates over that, then is a key part of the design language.
@subhamghosh5335
@subhamghosh5335 Жыл бұрын
King!
@evrthng-edts
@evrthng-edts Жыл бұрын
thank you so much man
@geekynerddemon
@geekynerddemon 7 ай бұрын
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!
@geoveres-f8j
@geoveres-f8j 8 ай бұрын
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.
@mondojoey
@mondojoey 10 ай бұрын
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!
@TimGabe
@TimGabe 10 ай бұрын
i did the exaaaact same thing!! happy it was helpful 😃
@CovenantOliver-r9x
@CovenantOliver-r9x 5 ай бұрын
Please what bootcamp did you make use of am just starting out 🥲🙏
@WoodymC
@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.
@devroom8904
@devroom8904 Жыл бұрын
You are totally correct about the readability of code. White space is very much necessary, we learn this in time just like UI/UX designers and the points made in the video.
@antifa_communist
@antifa_communist Жыл бұрын
Not using a code formatter is a crime.
@WoodymC
@WoodymC Жыл бұрын
@@antifa_communist Weeell...not exactly. However, not being able or not willing to properly adhere to a given format is -- regardless of having an automated formatter at hand or not.
@eamax
@eamax Жыл бұрын
I like the term negative space. It feels much more intentional and active than something left "white".
@thomashayes3783
@thomashayes3783 Жыл бұрын
Literally just started learning code a few days ago and I already naturally am trying to do this, I think? It feels natural because of the similarities to writing in paragraphs in normal human language. Blank line above and below a block of text that are probably related to each other functionally. I don't even know if I'm making sense at the moment, I'm so new. Haha!
@uifry
@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.
@TimGabe
@TimGabe Жыл бұрын
right?!
@stevengonzalez8898
@stevengonzalez8898 2 жыл бұрын
Currently in my IxD major we have 3 typography classes, learning typography is so important.
@TimGabe
@TimGabe 2 жыл бұрын
yes... it's so underrated among people (my younger self included) that haven't dabbled in design before. 😅
@VidarrKerr
@VidarrKerr Жыл бұрын
There is a reason why there are so many font styles and how and why people privately own fonts. It is so confusing in the beginning of learning. A watching a video about, reading about, or generally studying the history of typography is worth the time.
@owcaandroid
@owcaandroid Жыл бұрын
@@VidarrKerr yeeah, I absolutely agree but it is not simple. I started to read about that while ago and still have many issues among different apsects in that field. So many questions and in the end all comes to "feeling" when you are watching your piece and just thinking "hmm there is sth wrong BUT I DONT KNOW WHAT IS IT omg mayhe kerning? Nooo, maybe weight?" xD
@awsom3202
@awsom3202 Жыл бұрын
You’re studying computer science?
@Always-gloomy
@Always-gloomy Жыл бұрын
@@awsom3202the major is interaction design
@ChaneLX645
@ChaneLX645 Жыл бұрын
Watch this in 1.5 speed
@TimGabe
@TimGabe Жыл бұрын
haha, slow talker!!
@Dormirnix
@Dormirnix Жыл бұрын
I did it and I love it in 1.5x tnx I'll be doing this for slow talkers now
@namaefumei
@namaefumei Жыл бұрын
Slow is fine. Many of us aren't native English speakers. Thanks for the video!
@gnack420
@gnack420 Жыл бұрын
You're not kidding haha
@ishaansharma654
@ishaansharma654 Жыл бұрын
Thanks, he talking normal now
@Robiu666
@Robiu666 8 ай бұрын
1.5 speed is the normal speed
@modelsbrokenhearts
@modelsbrokenhearts 2 ай бұрын
this video is so slow that 1.5 speed looks normal lmao
@phembl
@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%.
@adamkatsu9795
@adamkatsu9795 Жыл бұрын
Yes, it's also more convenient for devs to use percentage so we don't need to adjust the px in every screen breakpoints.
@mormatus
@mormatus 10 ай бұрын
The use of a multiplier is even simpler, no need to maintain the mental model for percentage
@trevormanhuwa
@trevormanhuwa 10 ай бұрын
Literally the most enlightening design tutorial I have ever come across.
@TimGabe
@TimGabe 10 ай бұрын
that's incredible feedback. thank you trevor, that means a lot!!
@sunc0re
@sunc0re Жыл бұрын
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 :)
@TimGabe
@TimGabe Жыл бұрын
that is so cool to hear. I love it when I’m able to help people who have been in the space for some time 😃
@OkamiWansama
@OkamiWansama 10 ай бұрын
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.
@TimGabe
@TimGabe 10 ай бұрын
you're right, you don't want it to become too separated and feel like it's a completely isolated element generally for me, as long as there aren't other "groups" of elements that could be linked to the CTA (and confuse), i feel it's fine to go a bit overboard with the spacing! 😃 but still, a good point!!
@davetheglitch_
@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"
@TimGabe
@TimGabe Жыл бұрын
me neither - took me a while to realise how much of a difference it really makes 🤩 happy to hear that you found videos like this helpful, my friend!
@trevorsoh2130
@trevorsoh2130 9 ай бұрын
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.
@animaiscool
@animaiscool Жыл бұрын
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
@TimGabe
@TimGabe Жыл бұрын
that's amazing to hear, my friend! 🤩
@cjn2109
@cjn2109 Жыл бұрын
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 !
@TimGabe
@TimGabe Жыл бұрын
so happy to hear it, my friend 🥳💜
@CodingPhase
@CodingPhase Жыл бұрын
This is one of the best tips I've seen on youtube congrats on the channel
@TimGabe
@TimGabe Жыл бұрын
really appreciate those kind words, my friend! 😃
@ronymansor6805
@ronymansor6805 2 жыл бұрын
The video quality is awesome The way the explanation is fun with the application of tips One of the best videos explaining typography ⁦❤️⁩⁦❤️⁩⁦❤️⁩
@TimGabe
@TimGabe 2 жыл бұрын
wow, thank you Rony. I put a lot of time into this one, so I’m very happy to receive feedback like this 😍💜
@herbertpimentel
@herbertpimentel Жыл бұрын
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
@TimGabe
@TimGabe 11 ай бұрын
happy i could be of help, friend 😃
@FluidBlow
@FluidBlow Ай бұрын
Great video, i like how you don't cut too much or speak fast to make a shorter video. Its easy to follow along.
@lamiajoyee
@lamiajoyee 2 жыл бұрын
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.
@TimGabe
@TimGabe 2 жыл бұрын
haha, me too Lamia! now, the trial and error will always be there... but imagine skipping those unnecessary detours though 😅 thanks for commenting and sharing the love! 🥳
@rafalimao
@rafalimao 5 ай бұрын
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 :)
@Szynszula
@Szynszula Ай бұрын
this is soooo important and not trivial video, love it! I will be rewatching it many many times to remember everything well, thank you!
@Dosenwerfer
@Dosenwerfer 9 ай бұрын
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.
@srsh12345
@srsh12345 11 ай бұрын
Thank you so much for helping me understand my own likes and dislikes. I knew what designs I liked more but could never put it into words or communicate it effectively until watching your video.
@TimGabe
@TimGabe 11 ай бұрын
so cool that it was that helpful for you! thanks for sharing!!
@itsmicanoise
@itsmicanoise Жыл бұрын
This is the first video I saw summerising actual guidelines with numbers. Thanks a lot!
@TimGabe
@TimGabe Жыл бұрын
happy you liked the numbers, Mica!
@ramirojoaquin
@ramirojoaquin Жыл бұрын
As a web developer i find this veeeery interesting. Thankyou from Argentina bro!
@TimGabe
@TimGabe Жыл бұрын
that's great to hear!! happy to be of service!
@michaelabanin
@michaelabanin Жыл бұрын
Your narrative, voice and articulation manners sounds really comfortable. Enough to subscribe to your channel right after watching this one video. Cool content🥕
@TimGabe
@TimGabe Жыл бұрын
that's a really nice comment, michael! thank you!!
@MarianoMasuelli
@MarianoMasuelli 9 ай бұрын
I love how you go just to the point and don't waste our time. You sir just got a new suscriber.
@kaii456
@kaii456 Жыл бұрын
Hmm for hack 3, I'd say the "dont mix the heading and body alignment could be taken with a grain of salt, because in my experience for mobile, a centered heading followed by a long left aligned body paragraph for certain content heavy pages is often used out in the wild
@TimGabe
@TimGabe 11 ай бұрын
definitely depends on the case, but i'd say that even for mobile use cases it's better to just stick to left-alignment if you're unsure 😃
@dhruvchaturvedi6343
@dhruvchaturvedi6343 Жыл бұрын
Loved the video and the speed. I actually paused and rewinded the video to take notes. Thanks Tim!
@TimGabe
@TimGabe Жыл бұрын
thank you so much, my friend!
@vanessadesign93
@vanessadesign93 Жыл бұрын
In my opinion, this is the most well-explained explanation of this topic I have heard !!
@TimGabe
@TimGabe Жыл бұрын
wow, thanks a lot vanessa!!
@1Root_
@1Root_ 2 жыл бұрын
Though the whole difference you made to the old design with the guidelines !🔥
@TimGabe
@TimGabe 2 жыл бұрын
really happy you liked it, my friend! 🤩
@edgarr_com
@edgarr_com 11 ай бұрын
Refreshing to see useful technical knowledge, rather than flashy/controversial/clickbaity. Thanks!
@TimGabe
@TimGabe 11 ай бұрын
that's a very nice comment. thanks a lot, edgar!
@OrensteinDsouza
@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.
@TimGabe
@TimGabe Жыл бұрын
exactly my friend!
@AlissonBirck
@AlissonBirck 9 ай бұрын
Another video that put into words what I've been using for years without knowing how to explain it! Thank you so much!
@Dogeek
@Dogeek Жыл бұрын
Not a UI designer, but a web dev. The first few tips were so intuitive for me, there's a reason why Comic Sans is seen as the laughing stock of fonts and that most websites stay clear of Times New Roman and instead go for Garamond or Roboto for their typesetting. Though these rules mostly apply to design of "showcase" websites, and promotional content. For actual web applications, UX should prevail over UI design. You need your actual app to be accessible, to minimize the number of clicks, to minimize the need to interact with it (which is the complete opposite of a website designed to sell a product)
@TimGabe
@TimGabe 11 ай бұрын
i think a fine balance between ux and ui is where it gets to chef's kiss level! but i do agree that ux, in the end, trumps all! 😃
@kmisdone
@kmisdone Жыл бұрын
Nice to see your subscribers has multiplied by 10x. Great content. Subscribed.
@TimGabe
@TimGabe Жыл бұрын
thank you so much! 😃
@ReadyDesignerOne
@ReadyDesignerOne Жыл бұрын
The web is 95% typography. When you improve design with line height, letter spacing, measure you will see the difference.
@TimGabe
@TimGabe Жыл бұрын
definitely! 😃
@slifszyc
@slifszyc Жыл бұрын
First video I watch from you, it appeared to me in my homescreen, I really liked it. Thanks for sharing and cheers from 🇦🇷!
@TimGabe
@TimGabe 11 ай бұрын
always happy to see that the videos spread across the world!! 😃 salut!
@ofjdaz
@ofjdaz Жыл бұрын
I would suggest in your before and after examples in these videos, add more loops to the before and after. Maybe 3. So we can properly see the change.
@TimGabe
@TimGabe Жыл бұрын
good point, thanks!
@djashawe88923
@djashawe88923 Жыл бұрын
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! 🤓👍
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, my friend 🥳 and thanks for the comment!!
@PranayKotapi
@PranayKotapi Жыл бұрын
I like the Mike Shinoda reaction you put in between
@sanjitsaha5000
@sanjitsaha5000 Жыл бұрын
In so glad someone brought this up I'm not alone at last
@BriLaLaah
@BriLaLaah Жыл бұрын
Great lesson and examples. I would have loved to see the original design and updated design side by side.
@SyntekkTeam
@SyntekkTeam Жыл бұрын
I struggled with this too, it was hard to appreciate the before and after when everything was moving
@TimGabe
@TimGabe 10 ай бұрын
heard this a lot (and that it was too fast)... learned from this though, and in an upcoming video that is similar i've made it much more apparent!! 😃
@turaluix
@turaluix 2 жыл бұрын
Your videos getting better and better
@TimGabe
@TimGabe 2 жыл бұрын
really appreciate it, Tural 🙌😃
@muttyta
@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!!
@TimGabe
@TimGabe Жыл бұрын
that's amazing to hear, thank you for the support and the thorough comment!!
@NateBabbel
@NateBabbel Жыл бұрын
Excellent video on typography! Such an underrated area of ux design.
@TimGabe
@TimGabe 11 ай бұрын
thank you for the kind comment, nate!!
@OggyT
@OggyT Жыл бұрын
Letter spacing is usually made the way that it is for people with accessibility issues like dyslexia, to make things more readable for them. Don't just mess with that stuff because it looks good, it's made the way that it is for a reasons and if you do mess with it, you end up making things harder to read for people. Something being prettier doesn't make it better 100% of the time.
@TimGabe
@TimGabe Жыл бұрын
definitely, it's a balance!
@vuufke4327
@vuufke4327 Жыл бұрын
Finally a design channel that actually talks about the sh1t you want to know
@TimGabe
@TimGabe 10 ай бұрын
so cool to hear, thank you!!
@edefexarts3077
@edefexarts3077 Жыл бұрын
For more people and channels like Tim Gabe. cheers!
@DaTruthHurtzzzz
@DaTruthHurtzzzz Жыл бұрын
You have been the most helpful people in my career change thank you for teaching us all this
@TimGabe
@TimGabe Жыл бұрын
that's such a powerful comment!! thanks a lot!
@MrRalphbro
@MrRalphbro Жыл бұрын
Underrated video. Some of these tips took me a way too long to figure out on my own, solid tips
@EvilTim1911
@EvilTim1911 Жыл бұрын
I'm not a designer but as a dev who does some frontend work some of this is really useful
@tecsmith_info
@tecsmith_info Жыл бұрын
Being a full stack dev, I appreciate you. Thanks for the tips, subscribed!
@TimGabe
@TimGabe 11 ай бұрын
appreciate this kind comment, my friend! thank you!!
@RLNDcaST
@RLNDcaST Жыл бұрын
This one was really good. Much more clearer about distances👍🏻
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, friend! 🙏
@MasterBrain182
@MasterBrain182 Жыл бұрын
Astonishing content Tim 🔥🔥🔥 🚀
@TimGabe
@TimGabe Жыл бұрын
really appreciate it, my friend 😀
@rawasmemes2313
@rawasmemes2313 Жыл бұрын
I hope this video of your will get Millions views. Thanks for keeping short and simple.
@TimGabe
@TimGabe Жыл бұрын
thank you so much, i hope so too 😃
@aleksilin1938
@aleksilin1938 10 ай бұрын
Simple yet great pricipals ! Make something ppl take it for granted into valueable fundametals. Many thanks.
@TimGabe
@TimGabe 10 ай бұрын
thank you for the support, aleks 😃
@tenzingyaltshen
@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
@khandakamal9212
@khandakamal9212 2 ай бұрын
That is the most useful video I've ever seen in this career, and it made me subscribe and try to watch all of your videos, Thanks Tim keep going.
@zoet7517
@zoet7517 11 ай бұрын
These were so well thought out that I immediately subscribed!v Looking forward to checking out your older videos!
@TimGabe
@TimGabe 11 ай бұрын
thank you so much, glad you're on the team!!
@florentguillamet6892
@florentguillamet6892 Жыл бұрын
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 !
@abbylynn8872
@abbylynn8872 Жыл бұрын
CodingPhase just recommended your video and channel with high praise. Thanks for the tips❤
@TimGabe
@TimGabe Жыл бұрын
that's great!! thank you for coming here! 💜
@paschalokafor9043
@paschalokafor9043 Жыл бұрын
I love this. This is my first time on this channel and it was a lovely one. Thank you.
@TimGabe
@TimGabe Жыл бұрын
happy you liked it, friend! 🤩
@meowlgmeowmeow
@meowlgmeowmeow Жыл бұрын
This video is super duper useful!!! Wish I found your channel and watched this earlier. Thank you so much for sharing❤❤❤❤
@TimGabe
@TimGabe Жыл бұрын
thanks for all the love, Mona! 🤩💜
@MultiSciGeek
@MultiSciGeek 6 ай бұрын
I know design is supposed to similar to art, as in it has no restrictions... but there definitely are "rules" you should follow. I'd love to see a PDF about this for Figma specifically.
@miralsalah297
@miralsalah297 Жыл бұрын
Incredible explanation, and before and after representation between each hack, Please share more like that, Thanks a lot
@TimGabe
@TimGabe Жыл бұрын
thanks a lot for the feedback, my friend!
@Kozi03
@Kozi03 Жыл бұрын
Some great tips for a small web dev like myself. Thank you!
@TimGabe
@TimGabe Жыл бұрын
thank you, friend!!
@Peywan
@Peywan 11 ай бұрын
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.
@TimGabe
@TimGabe 11 ай бұрын
thanks a lot for sharing this, peywan! appreciate it!!
@immrcurios
@immrcurios Жыл бұрын
Okay this is just genius. Loved it. Learnt a lot!
@TimGabe
@TimGabe Жыл бұрын
that's great to hear!! thank you for commenting 😃
@currenluna
@currenluna 11 ай бұрын
Great video. This helps me understand why I like some designs more than others!
@TimGabe
@TimGabe 11 ай бұрын
that's awesome! thanks a lot for the comment!
@haraseeskaur6655
@haraseeskaur6655 Жыл бұрын
Extremely well explained! These are great tips for junior UI Designers like me. :)
@TimGabe
@TimGabe Жыл бұрын
happy it resonated!!
@noymorgenshtein9191
@noymorgenshtein9191 2 жыл бұрын
your videos really send high quality vibes!
@TimGabe
@TimGabe 2 жыл бұрын
really appreciate this, Noy 🙌☺️ thanks!!
@efebausal
@efebausal 5 ай бұрын
That's the most valuable video that ever i watched about design
@5minutes106
@5minutes106 9 ай бұрын
Subscribed. Love the brief, straight to the point, value packed content. Thank you.
@theMadZakuPilot
@theMadZakuPilot Жыл бұрын
absolutely amazing. thank you so much please make more videos like this.
@TimGabe
@TimGabe 11 ай бұрын
have one upcoming!! thank you for the nice comment 😃
@GoddessofWarr
@GoddessofWarr 2 жыл бұрын
Great video, I love the way you explain things, its super clear, love it !
@TimGabe
@TimGabe 2 жыл бұрын
makes me genuinely glad to hear this. thanks a ton 🙌😃
@SpankIEkzs
@SpankIEkzs Жыл бұрын
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!
@SkylluszYn
@SkylluszYn Жыл бұрын
A lot of improvement from just outright having less copy as well. Which is a good marketing lesson, so long as you aren't a designer forced to work with sales copy from a client - in which case you'd likely want to lay this out differently to accomodate.
@TimGabe
@TimGabe Жыл бұрын
thank you!! definitely does a lot, as well as the length of the copy!! super important aspects for creating beautiful looking stuff 🥳
@maxkosek
@maxkosek Жыл бұрын
Yeah and the text was modified what is no always allowed while designing. Most of the time I am provided with the text which content I you not touch, you can inform client that it looks bad but many of them will refuse to cut and insist on it as important value. So it’s much harder to apply such changes. And in this edit not only colours are used differently in compared samples but also the text was just cut which is often very problematic
@UloakuChikezie
@UloakuChikezie Жыл бұрын
Codingphase made mention of you in his channel, thanks to him. Welldone Tim, thank you for this great insight.
@TimGabe
@TimGabe Жыл бұрын
that's awesome! thank you!!
@oliviademetriou8397
@oliviademetriou8397 Жыл бұрын
Hello. I’m a newbie! I have a few random Qs about your video!! 1) are all the fonts on figma the only ones available to use on there? Or is there somewhere I can access a load more fonts? 2) how do you get that wavy background effect on your demo? Did you draw it yourself or are these things we can use from plugins or another website? Like is it your very own creation or is it an image you downloaded from somewhere? And 3) how do you make the part in the middle blurry? Do you add on a rectangle shape ontop of the background image and simply create a blur effect? Thanks!!!
@TimGabe
@TimGabe Жыл бұрын
thanks man, i will!!
@MinalB1539
@MinalB1539 Жыл бұрын
It was a much-needed video. Thank you very much.
@TimGabe
@TimGabe Жыл бұрын
thanks a lot for commenting, my friend!!
@ikennagibson3933
@ikennagibson3933 2 жыл бұрын
Nice video Tim, my take on this is, it’s not a one size fits all situation for all fonts, there are some fonts that 0 px spacing is just fine. So I would say that we as creatives should tweak the spacing, line height and font size until it looks good and easy to the eyes. What do you think Tim? Making sense?
@TimGabe
@TimGabe 2 жыл бұрын
so true and it makes total sense, Ikenna! cookie cutter solutions don’t exist (if you want top-top quality), but rough guidelines can take you pretty far. 🤩 the problem as a beginner, and even as an experienced junior, is that your eyes haven’t yet gotten used to what’s truly ”crisp” - that comes with years of practice. in those cases, the guidelines are gold 👌
@ikennagibson3933
@ikennagibson3933 2 жыл бұрын
@@TimGabe sure Tim, thanks for the video once again 🫡
@MarkoKozlica
@MarkoKozlica Жыл бұрын
Great video, calm and clear voice and great content :D thx
@TimGabe
@TimGabe Жыл бұрын
thanks a lot Marko!
@afidas9325
@afidas9325 Жыл бұрын
OMG, love your video! Thank you for sharing awesome tips 🙌
@TimGabe
@TimGabe Жыл бұрын
happy to be of help, afidas! 😃
@aynuramamedova1828
@aynuramamedova1828 21 күн бұрын
Well this kind of content is what i was looking for! Subscribed! Just amazing. Thanks
@jonathan3488
@jonathan3488 5 ай бұрын
I think in the case of hierarchy of font sizes, sometimes it is absolutely crucial to include it for readability.
@gabrielfono844
@gabrielfono844 Жыл бұрын
Codingphase sent me here As full stack engineer I have no issues when developing apps for my company but my personal project suck on design. My company has a designer amd it is easy for us to build functionality.
@TimGabe
@TimGabe Жыл бұрын
i heard he mentioned me, that's so cool! thanks man!
@DzakiDwitama
@DzakiDwitama 11 ай бұрын
great video! I should say if people want to really deep dive into this, you can search up gestalt principles or the psychology of perception
@TimGabe
@TimGabe 11 ай бұрын
thanks a lot! yes, design principles are great to study 😃
@JecyCalambro
@JecyCalambro Жыл бұрын
your tutorials becomes my rule of thumb :)
@TimGabe
@TimGabe Жыл бұрын
haha, that's such a cool comment!
@scary8619
@scary8619 5 ай бұрын
This is the best video I've ever seen about ui
@caiosaulnier6574
@caiosaulnier6574 Жыл бұрын
Your videos are awesome, congratulations! The quality is unbelievable
@Peggy-Roses
@Peggy-Roses Жыл бұрын
Great explanation and demonstration … here you are my subscription ;) Thank for sharing
@TimGabe
@TimGabe Жыл бұрын
appreciate it, my friend!!
@Jab7kO
@Jab7kO Жыл бұрын
Hooolyyyy. This is really good video mate ;) Thx a lot for your tips!
@TimGabe
@TimGabe Жыл бұрын
appreciate it a lot, my friend 😃🙏
@adiliqbal7222
@adiliqbal7222 Жыл бұрын
Hey Tim, thank you for sharing this insightful information of ui design. I am a experience UI designer since 2015 and a year and a half ago I came across this "Golden Ratio" number which is 1.618. The concept of using this number is multiplication with the font size. For example 24px is a body font size so the line height would be 24 * 1.618 and you will see the result. I personally use this strategy in all my designs now on headings, sub-headings, and body text. My question is it is a good idea to use a "Golden Ratio" concept on all the type of texts (heading, sub-headings, and body text)?
@thebluriam
@thebluriam Жыл бұрын
Really glad you brought this up. I use the golden ratio between all of my designs, except I take things SUPER far. Here's the thinking. Most people only think of the golden ratio as 1:1.618, but that's only the beginning of the story. The full range set of the golden ratio is [0, 0.382, 0.618, 1, 1.382, 1.618, 2] So to get into the weeds about size choices for text heights or line heights, let's say I have some title text and some subtitle text. If my title text were 55px, I would make my subtitle text 34, because 55 x 0.618 is 34 (approximately). I do the same kind of calculation for line heights too, and for image sizing, container margin space, everything. Basically, everything in my designs are 100% golden ratio'd to itself, and I pick the most important thing in the design, whatever it might be, as the value of 1. Oftentimes, the most important thing to me is the viewport itself, viewport meaning a browser window, card stock size, screen size, whatever the containing unit is. All I do is scale everything up or down through the golden ratio, even down to line height choices. It makes absolutely everything incredibly easy to design, with no guess work, no mucking about with a/b testing, none of the difficulty, and everything always looks naturally beautiful to the human eye without ever being able to tell what I'm doing to make the process easier on myself.
@mohammadabuobaidamullick
@mohammadabuobaidamullick 2 жыл бұрын
This was really a worthy watch! Thanks
@TimGabe
@TimGabe 2 жыл бұрын
thank you so much for the nice comment 🤩💜
@re.liable
@re.liable Жыл бұрын
Nice. Trying to be a fullstack dev. I'm kinda doing some of the things you laid out here when I'm doing my markup. I didn't have concrete guidelines for them though, just feeling it haha. Will definitely try these out on my next project.
@TimGabe
@TimGabe Жыл бұрын
sounds awesome, my friend! let me know how it goes!!
@antistaticagency
@antistaticagency Жыл бұрын
Some great technical tips! Thank you
@TimGabe
@TimGabe Жыл бұрын
appreciate the comment!! thank you!
@tuix
@tuix Жыл бұрын
Amazing Tips. These Hacks are insane level. Thanks a lot. Best wishes for you!
@TimGabe
@TimGabe Жыл бұрын
really really appreciate it, my friend 🤩
Design Better Than 99% of UI Designers
14:52
Tim Gabe
Рет қаралды 216 М.
I Redesigned Discord UI just to make it Cozier
9:49
Juxtopposed
Рет қаралды 421 М.
За кого болели?😂
00:18
МЯТНАЯ ФАНТА
Рет қаралды 2,9 МЛН
How to Design a Logo in Canva for Beginners | Step-by-Step Canva Tutorial
2:32
How I make UI color palettes
8:51
UX Tools
Рет қаралды 434 М.
Are You At Least at Level 4 of UI?
10:57
Malewicz
Рет қаралды 104 М.
Why Beautiful Websites Don’t Convert
12:57
Malewicz
Рет қаралды 224 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 980 М.
The Secret Science of Perfect Spacing
9:40
Chainlift
Рет қаралды 460 М.
18 Hero Section Designs You Can Steal
11:45
Payton Clark Smith
Рет қаралды 699 М.
За кого болели?😂
00:18
МЯТНАЯ ФАНТА
Рет қаралды 2,9 МЛН