Categories
Uncategorized

10x your UI/UX design skills by learning the 6 key UI elements

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. When designing for large scale you need to makes ure you tick all the important boxes.

why part is 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 researchers and ux designers spend hours upon hours in the earlier parts of our careers to really understand but are all of those hours really needed? Can we learn a thing or two from the brave designers who put in the work before us?

Article In Short

  • Line height
  • Spacing
  • Alignment
  • Pixel width
  • Hierarchy
  • Spacing

We’ll look at six practical tips that you can use to improve your layouts with text and spacing. Typography is one of the fundamental skills of user experience design.

Typography is not just about about the font you choose it’s how you use the font you choose.

Line height

Hack #1 : 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.

Heading is now when looking at body text on the same web sites we see a pattern of 1.4 to 1.5x 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
usability issues would be to adjust your letter spacing

Spacing

Hack #2 : spacing is the distance between characters in your text. You might not think that this does a whole lot but it makes a big difference you’ll notice that headings that have this quality crispness to them usually use negative letter spacing. You might wonder if these quality headings have negative letter spacing and it looks so good. why don’t fonts come with negative letter spacing out of the box?

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.

I use somewhere around -1 to -2 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.

Alignment

Hack #3 : 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. This decreases your reading speed because you have to spend time finding the next line of text instead of reading. This doesn’t mean that you never use Center align 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

Also as I just mentioned don’t mix and match alignments between headings and body text.

Hack 4 : Pixel width

Hack #4 : In a ux study conducted by baymard s research it was revealed that “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 Baymard Institute goes on to conclude this as well

Baymard Institute research

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

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. 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 width 600 pixels for a desktop screen is a very good number to stick with.

Hack 5 : Hierarchy

Hack #5 : In typography 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. 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

Hack 6 : Spacing

Hack #6: 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

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

FAQ –

Which line height does Google use?

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.

How to make text look more professional

Make sure you check these 6 typography elements while working with text to make it look more professional.

What does Baymard Institute research on UX state?

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.

Why does my text look bad in design

When it comes to working with text always remember – Typography is not just about about the font you choose it’s how you use the font you choose’. Make sure you follow fundamentals of typography while working with text.

What are the important elements of typography?

Line height
Spacing
Alignment
Pixel width
Hierarchy
Spacing

What is an Ideal Pixel width for text in design

Try to stay within 50 to 75 characters and when it comes to pixel width 600 pixels for a desktop screen is a very good number to stick with.

What is the best spacing for headlines in typography?

I use somewhere around -1 to -2 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.

How many font sizes i can use in a design?

Try your absolute hard as to stick with just two different font sizes and use Font weight and subtle color changes to indicate hierarchy

By Hrushikesh Paygavhan

UX designer at Customer Capital. With 7+ years of Design experience, I belive in passing the knowledge to everyone. I help UX designers upskill themselves, and stay updated in the design field.

Leave a Reply

Your email address will not be published. Required fields are marked *