6 UI Hacks I Wish I Knew As A Beginner

when putting two designs side by side one that just looks bad and one that looks good most people can tell you which one looks better or which one is the well-designed one what most people cannot tell you is why one of them looks better that why part why we should handle text in a certain way why we use space the way we do in our layouts is something that we as designers spend hours upon hours in the earlier parts of our careers to really understand but are all of those hours really needed or can we learn a thing or two from the brave designers who put in the work before us yes we can and that's why in this video we'll look at six practical tips that you can use to improve your layouts with text and spacing when I was in design school I had a teacher who was really into typography he even did University research on it like a whole dissertation dedicated to typography to text and I remember it vividly because I couldn't understand why you would dedicate so much time to something as meaningless as typography as text when you have things like cool animations and amazing illustrations and Vivid colors to play with as a designer so I neglected typography not really realizing that what my teacher was researching is one of the fundamental skills of design one of the most important aspects of good looking design you see typography is not just about about the font you choose it's how you use the font you choose now before we get into the tips since I know that it was hard for me to really grasp the power of this will make it a bit easier for you for each tip we'll make a correction to this layout and by the end of the video you can be the judge of what looks better now the first thing we should look at when it comes to typography in UI design is line height line height is the space between text lines it represents one of the fastest ways for you to go from Bad design to good design if we take a look at the websites for some well-known companies you'll see that all of their headings end up in a similar kind of range when it comes to line height Google generally uses 1.2 x the text size Dropbox is also around 1.2 x the text size and Uber is somewhere around 1.2 to to 1.5 x the text size one thing to keep in mind is that line height generally gets smaller the larger The Heading is now when looking at body text on the same websites we see a pattern of 1.4 to 1.5 x detect size and the same thing applies here the larger the text size the smaller the line height so to level up your designs with line height right now I would suggest that you go for 1.1 to 1.3 X the size for your headings and 1.3 to 1.5 x the size for your body text another very easy fix to bump up your designs a couple of notches would be to adjust your leather spacing letter spacing is the distance between characters in your text and you might not think that this does a whole lot but it makes a big difference you'll notice that headings that have this mwah crispness to them usually use negative letter spacing so you might wonder if these muah headings have negative letter spacing and it looks so good why don't fonts come with negative letter spacing out of the box and there's a simple answer to that when it comes to negative letter spacing it's usually something you just use for headings because if you start using it for your body text too much you're gonna see quickly that the overall readability of your text is gonna be decreased this applies to headings as well but since the text is much bigger it doesn't impact it as much my general rule of thumb when it comes to letter spacing for text and this comes with a caveat that really depends on the font you're using but what I use usually somewhere around -1 to minus two percent for headings and if it looks too tight and you're not sure if it's the right thing to do uh lower number is usually the way to go now on to text alignment another thing that can cause huge problems in your designs if you've ever read a long paragraph that is Center aligned you might have noticed that it takes a bit longer to get through this information this is because for each line you read you constantly have to find the beginning of the next line of text and this decreases your reading speed because you have to spend time finding the next line of text instead of reading but this doesn't mean that you never use Centerline text when it comes to headings and shorter text chunks it's totally fine to use it and you'll even notice that big companies and great looking websites use it a lot one thing that you should avoid at all costs or actually you should never do it is the good old remix having a center aligned heading and a left aligned body text or vice versa don't mix them so a general rule of thumb here for anything that spans more than three lines of text go for left alignment and also as I just mentioned don't mix and match alignments between headings and body text the next point is about text width in a ux study conducted by The baymard Institute it was revealed that quote long lines of text are typically perceived by users as intimidating and overwhelming as a result users faced with overly long lines of text are more likely to avoid reading the text clearly our users avoiding to read the text is not a good thing but the payment Institute goes on to conclude this as well more users will fail to fully understand the products or Services benefits and thus decide that a particular product or service won't meet their needs so not only will long lines of text get our users to not read anything it will also lead to less conversions and that might not mean a lot to you right now you just want to you know design good looking stuff but let me put it like this less conversions equals less money equals unhappy clients and stakeholders no matter how good the design looks so if you know so much to him what is a good text with then well this is not my own opinion this is the baymer Institute recommending and they say that anywhere between 50 to 75 characters is a good range to stay within for your body text so for a normal paragraph around 18 pixels try to stay within 50 to 75 characters and when it comes to pixel with 600 pixels for a desktop screen is a very good number to stick with now let's talk about hierarchy in text a common mistake is to overuse text sizes to indicate hierarchy in your designs this will quickly lead to your designs looking messy and random and just straight up unprofessional and like most things in design less is usually more and we have a rather easy solution to this problem so the next time you're designing something try your absolute hard as to stick with just two different font sizes and use Font weight and subtle color changes to indicate hierarchy next up is spacing related to text elements space is one of the most neglected aspects of design for new designers and in relation to this I found a really good quote by John sorry John I know I totally butchered your name there white space is to be regarded as an active element not a passive background so white space or space should be as carefully considered as your images your buttons or your flashy animations even more considered than those things now there is a very practical way of approaching this when designing and I call it relationship advice in UI design if you have a group of elements and you ask yourself what's their relationship you'll quickly notice that some elements have a closer relationship than others let me give you a practical example in this group of text elements the bottom heading is more closely related to the body text below than it is the body text above because it's the heading for the text below and not the text above so what the first chapter of relationship advice in UI design would tell us here is that since the bottom heading and the body text has a closer relationship they should also be positioned closer to each other and to make it simple let's use a multiplier for this relationship if the distance between the bottom heading and the bottom body is 1x 16 pixels the distance between the bottom heading and the top body should be 2x 32 pixels and this same rule can be applied to a lot of things in your UI distances between call to action elements and hero texts logos and links in navigation menus Etc so the before and after difference best part about this is that you can take all of these things and apply them to your designs today and if it helps you not fall into the same pulse that I fell into when learning design then I did my job today now I have a bunch of content when it comes to UI and ux design including what you see on the screen right now if you're interested check it out until the next one have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 229,722

Keywords: ui, ux, product design, ui design, ux design, figma, figma tutorial, ui design hacks, ux design hacks, ui ux hacks, tips for ui ux design, learn ui ux design for beginners, how to design beautiful ui, how to design beautiful websites, typography in ui design, typography in web design, ui design tricks, ui design tips, web design tricks and tips, design tutorial for beginners, ui design tutorial, best ui practices, how to use white space, design rules and layout

Id: 88XxC0_zs74

Length: 11min 11sec (671 seconds)

Published: Thu Nov 24 2022