14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

Designing user interfaces is no easy task. With countless choices around layout, spacing, typography, and colour, it’s easy to feel overwhelmed. And when you layer in considerations like usability, accessibility, and human psychology, the challenge only grows.

But here’s the good news, UI design doesn’t have to feel so complex. After more than 20 years as a product designer, I’ve found that most of my visual and interaction design decisions are guided by a clear set of logical guidelines. Not by artistic genius or gut instinct, but by straightforward guidelines.

Of course, creative flair comes in handy, but much of what makes an interface intuitive, inclusive, and visually pleasing can absolutely be learned. Having a structured approach allows you to make smart, consistent design choices. Without it, you’re essentially relying on trial and error to make things “look right.”

And the best way to learn? By doing. So let’s start applying some UI design tips. All design tips are from my Practical UI design book and the example interface was created using my Figma design system.

UI design tips to fix an example interface

The following design is for the profile page of a community blogging platform. The first example is the original design. The second is the result of quickly applying some logic-driven UI design tips.

Even if you don’t have much experience with UI design, you can probably tell that the original design just doesn’t feel “right”. That’s because it contains a bunch of design flaws that can negatively impact usability. You might already have spotted some of them.

Now, let’s walk through the process of improving the original design, addressing each issue step by step with these UI design tips:

1. Space elements based on how closely related they are
2. Ensure interface elements have a 3:1 contrast ratio
3. Use a single primary button for the most important action
4. Ensure buttons have a sufficient target size
5. Make sure important content is visible
6. Decrease letter spacing for large text
7. Don’t rely on colour alone as an indicator
8. Try to avoid using multiple alignments
9. Ensure text has a 4.5:1 contrast ratio
10. Consider removing containers to simplify an interface
11. Use regular and bold font weights only
12. Be consistent
13. Don’t confuse minimalism with simplicity
14. Balance icon and text pairs

1. Space elements based on how closely related they are

The amount of spacing between interface elements should depend on how closely related the elements are. More closely related elements should generally be closer together to show that they’re related. Unrelated elements should be separated by placing more space between them.

Using spacing in this way is one of the most powerful methods of breaking up information into smaller groups. If you think of each group as a rectangle, you’ll start to notice that interfaces are made up of many small rectangles within larger ones. Start by applying small spacing to the innermost rectangles and gradually increase the spacing between rectangles as you move outwards. 

Deciding on the ideal spacing between interface elements can be a frustrating and time consuming task. There are endless options to choose from. Rather than using trial and error, one pixel at a time, create a simple set of predefined spacing options to make decisions faster.

Set simple t-shirt sized spacing options based on increments of 8 points. This is also known as using an 8 point grid, as all interface elements will end up aligning to a series of vertical and horizontal guidelines separated by 8 points. For more detailed interfaces, you could use 4 point increments for a bit more control.

Much like a typography scale, your spacing options should grow by larger amounts as they get bigger. This ensures that spacing is proportional for larger interface elements.

In our example, only the extra small (8pt) and small (16pt) predefined spacing options are used between rectangles, regardless of how closely related they are. This results in a design that looks cluttered, squashed, and difficult to understand. Increasing the spacing between elements based on how closely related they are helps to clearly separate and group content.

Here’s what our example looks like before and after the predefined spacing options are applied.

2. Ensure interface elements have a 3:1 contrast ratio

Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are lots of tools and Figma plugins to help you measure colour contrast, my favourites are the Web AIM online contrast check tool and the Contrast Figma plugin.

In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields and buttons, need to have at least a 3:1 contrast ratio. 

In our example, the contrast of the icons and buttons is too low. The risk with the low contrast buttons is that people with low vision might not identify them as buttons, as they can’t see the button shape. Adding a border with sufficient contrast to the buttons makes them accessible. The light grey background fill is also removed from the buttons, so people don’t mistake them for being disabled or inactive. The low contrast of the icons is easily fixed by using a darker shade of grey.

3. Use a single primary button for the most important action

For most website or app projects, you’ll need 3 button weights to indicate the importance of actions: primary, secondary, and tertiary. You may also require smaller and/or larger button sizes depending on the complexity of the interface.

The following button styles are familiar, accessible, and have a clear visual hierarchy that isn’t dependent on colour alone. They’re not the only way to style buttons, but they’re a safe option. Learn more button design tips to avoid common mistakes.

The purpose of a primary button is to highlight the most important action on an interface. This helps people understand what to do next in order to complete their task. 

Guidelines for using primary buttons:

• If there isn’t a single most important action on an interface, use secondary or tertiary buttons for those actions.
• Avoid using multiple primary buttons on a screen. They can compete for attention and cause confusion around what to do next.

In our example, let’s assume that the “follow” action is the most important and make it a primary button.

4. Ensure buttons have a sufficient target size

Small targets are more difficult to click or touch than large ones. This is especially true for those with impaired motor control, or even someone holding their phone with one hand and using their thumb.

Try and stick to the following guidelines to ensure buttons (and other interactive elements) have a sufficient target size:

• Make buttons at least 48pt by 48pt in size. This aligns with an 8pt grid and is slightly larger than the WCAG recommendation of 44pt by 44pt. 
• Make frequently used buttons even larger to improve efficiency and to help avoid them being missed.
• Separate buttons by at least 8pt to help prevent people mistakenly pressing the wrong one.

In our example, the target size of the 2 buttons is already sufficient, but there’s plenty of room to make the buttons wider. Since there’s room, you can widen the buttons to increase their target size.

5. Make sure important content is visible

People don’t use what they can’t see. Hiding things behind interactive menus is a convenient way to keep an interface clean and minimal, but it’s risky, as some people might miss those things. If there’s space, try to ensure important content and actions are visible when they’re needed.

In our example, actions are hidden inside an interactive menu to help declutter the design. While it looks clean and minimal, there’s a risk that some might miss the actions. Since there’s space to display the 2 actions, “share” and “bookmark”, make them visible to help ensure they’re not missed.

6. Decrease letter spacing for large text

A small trick to make large headings look better is to decrease their letter spacing (space between letters). How much you decrease letter spacing depends on the typeface and size, but generally, you’ll want to decrease letter spacing more as text gets bigger.

This is because many typefaces were designed to be read at small sizes in long body text. They’re known as “text type” typefaces and have wide letter spacing to make them more legible at small sizes. You probably won’t need to decrease letter spacing for “display type” typefaces, as they were designed to be used at large sizes and generally have closer letter spacing.

In our example, the letter spacing of the person’s name is decreased to improve aesthetics.

7. Don’t rely on colour alone as an indicator

Don’t rely on colour alone to convey meaning or distinguish visual elements, as those with low vision or colour blindness might not be able to see the indicator. Use additional visual cues to differentiate interface elements.

In our example, there are 2 areas that could be confusing. Let’s make them clearer.

If you look at the 3 tabs above the article list, it might not be obvious that “articles” is the selected tab. This is because a very subtle difference in colour is being used to indicate that a tab is selected. Adding an underline to the selected tab helps to make it clearer. 

Similarly, in the bottom navigation, a subtle colour change is being used to differentiate the selected icon from others. To make it more obvious, the selected icon is filled.

8. Try to avoid using multiple alignments

The more different types of alignment you use (left, right, or centre), the more complex and messy an interface can look. Our eyes are forced to work harder as they move around to try and follow each alignment. This is highlighted when multiple different alignments are used within a small component or section of an interface.

Sticking with a single alignment (or as few as possible) helps to simplify an interface, making it look neater and tidier. 

In our example, the tabs are centre aligned, while most of the other elements on the page are left aligned. The mixture of alignments adds unnecessary complexity, resulting in a slightly increased cognitive load (the amount of brain power required to use an interface). Left aligning the tabs helps to tidy things up.

9. Ensure text has a 4.5:1 contrast ratio

In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:

• Small text (18px and under) needs a minimum contrast of 4.5:1.
• Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1.

In our example, the small text on the unselected tabs has insufficient contrast. Using a darker grey gives us sufficient contrast.

10. Consider removing containers to simplify an interface

Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.

You can group related elements using the following methods:

1. Place related elements in the same container
2. Space related elements close together
3. Make related elements look similar
4. Align related elements in a continuous line

Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.

In our example, the containers around each article are unnecessary, as multiple other grouping methods are already being used. Removing the containers also creates more room for the content.

11. Use regular and bold font weights only

Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.

Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.

Quick usage tips:

• Use bold font weight for headings to emphasise them.
• Use regular font weight for other smaller text.
• If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.

In our example, 3 different font weights are used for the article details. Even though the contrast of the “extra light” and “thin” font weights is above the required 4.5:1 contrast ratio, the characters could still be difficult for some people to read. Increasing the font weight to “regular” helps improve readability and simplifies the design. Using “semi-bold” for the article title helps it stand out.

Using only 2 font weights results in the following design. We’re making good progress applying the UI design tips, but we’ve still got a few more issues to fix. 

12. Be consistent

Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.

In our example, the photos for each article have sharp corners, which doesn’t match the soft rounded corners of the buttons and icons. Rounding the corners of the photos helps to create a more consistent visual language. You might not think that tiny details like this make much difference, but they all add up to make a design feel “right”.

13. Don’t confuse minimalism with simplicity

Minimal doesn’t mean simple. Designers have a tendency to favour minimal interfaces, as they can look beautiful and clean. A minimal interface has fewer elements and styles, but isn’t necessarily simple to understand and use.

Minimal interfaces can often be vague or confusing as they lack crucial details needed for good usability. Simplification isn’t just about reduction. Removing or hiding too much can harm usability. You need to make sure that you’re not removing critical information or details.

In our example, the bottom navigation icons look clean and minimal, but is it clear what they mean? It might not be to everyone. Adding text labels to the icons helps ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).

14. Balance icon and text pairs

When pairing icons with text, try to ensure they have a similar visual prominence for a more balanced and cohesive look.

In our example, the icon and text pairs in the bottom navigation are slightly imbalanced. The icons and text are the same colour, but the icons are thicker and larger, which gives them more prominence. Darkening the text increases its prominence, so it’s balanced with the icons. Increasing the text contrast to at least 4.5:1 also ensures it’s accessible to those with low vision. 

We did it!

With just a few straightforward UI design tips, we were able to identify and resolve a range of issues in our example interface. Of course, you could take things further by adapting the visual style to suit a particular brand personality if needed. For this example though, we were focused on getting the fundamentals right.

I hope you’re starting to see that UI design doesn’t need to feel overwhelming. While it can sometimes seem like a mysterious art reserved for the naturally talented, much of great interface design is rooted in clear, logical guidelines like the ones you’ve learned here.

Relying on objective guidelines, rather than subjective opinion, makes it far easier (and faster) to design interfaces that are intuitive, accessible, and visually polished. The more you practise using these UI design tips, the more naturally they’ll become part of your design process. Use them as a foundation and don’t be afraid to explore, experiment, and push your creativity from there.

Want more UI design tips?

These are just a few of the logic-driven UI design tips from my UI design book. You’ll find hundreds more with detailed examples in the book. The example interface was created using my Figma design system. You can also take a behind the scenes look at the making of the book if you’re interested.

PS If you found this article helpful, share it with others and follow me on X and LinkedIn for daily design tips, tools, resources, and inspiration.

14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.

Luckily, UI design doesn’t have to be so hard. Over 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical guidelines. Not artistic flair or magical intuition, just simple guidelines.

Sure, artistic talent helps, but a lot of what makes up an intuitive, accessible, and beautiful interface design can be learned. Having a system of logical UI design guidelines helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.

The quickest way to learn is by doing, so let’s get started with the UI design tips. All design tips are from my Practical UI design book and the example interface was created using my Figma design system.

UI design tips to fix an example interface

The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some quick UI design tips.

Even without much visual or interaction design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?

Let’s fix the problems with the original design one at a time using the following UI design tips:

1. Use space to group related elements
2. Be consistent
3. Ensure similar looking elements function similarly
4. Create a clear visual hierarchy
5. Remove unnecessary styles
6. Use colour purposefully
7. Ensure interface elements have a 3:1 contrast ratio
8. Ensure text has a 4.5:1 contrast ratio
9. Don’t rely on colour alone as an indicator
10. Use a single sans serif typeface
11. Use a typeface with taller lower case letters
12. Limit the use of uppercase
13. Use regular and bold font weights only
14. Avoid pure black text
15. Left align text
16. Use at least 1.5 line height for body text

1. Use space to group related elements

Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.

You can group related elements using the following methods:

1. Place related elements in the same container
2. Space related elements close together
3. Make related elements look similar
4. Align related elements in a continuous line

Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.

Using space in particular is a very effective and simple UI design tip to group related elements. You can also combine grouping methods to help display groupings more clearly.

In our example, the lack of space between content makes the design look cluttered and difficult to understand. Increasing spacing helps to clearly group content, making it more organised and easier to understand.

2. Be consistent

Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.

In our example, the icon styles are inconsistent, as some are filled and others aren’t. This could confuse some people, as filled icons often indicate that an element is selected. Outlining all icons with a 2pt stroke weight and rounded corners improves consistency and gives each icon a similar visual weight. If you use a quality free icon set you generally won’t need to worry about this issue.

Text labels are also added to the icons to help ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).

3. Ensure similar looking elements function similarly

If elements look similar, people will expect them to work in a similar way. So try to ensure that you use a consistent visual treatment for elements with the same functionality. Conversely, try to ensure elements with different functionality look different.

In our example, the icon containers have a similar visual style to the “book now” button. This makes them seem interactive, even though they’re not. Removing the blue colour and button styling from the icons helps to avoid them being mistaken for interactive elements.

4. Create a clear visual hierarchy

Not all information in an interface has the same level of importance. Aim to present information in order of importance by making more important elements look more prominent.

A clear order of importance, or visual hierarchy, helps people scan information quickly and focus on areas of interest. It also improves aesthetics by creating a sense of order. You can create a clear visual hierarchy using variations in size, colour, contrast, spacing, position, and depth.

Here’s an example of a website hero banner without a clear visual hierarchy, followed by one with elements clearly presented in order of importance.

A quick and easy UI design tip to test whether your visual hierarchy is clear is to use The Squint Test. Simply squint your eyes and look at your design. Alternatively you can move further away from the screen or blur your design. You should still be able to tell what the most important elements are and recognise what the interface is for.

Let’s apply the Squint Test to our example. We can see that there are multiple elements with similarly strong prominence competing for attention. Meanwhile, the primary action in the bottom left doesn’t stand out at all.

The primary action should generally be the most prominent element on an interface. Giving it a high contrast background colour and bold font weight helps achieve this. This also fixes an accessibility issue with the low contrast button, which we’ll look at later.

Applying the Squint Test to the updated design, the primary action is clearly the most prominent element.

The visual hierarchy is now clearer, but there’s still room for improvement. For example, the block of body text is still too prominent relative to its level of importance. We’ll learn some quick typography guidelines shortly, which will help correct the visual hierarchy.

5. Remove unnecessary styles

Unnecessary information and visual styles can be distracting and can increase cognitive load (the amount of brain power required to use an interface). Avoid unnecessary lines, colours, backgrounds, and animations to create a simpler, more focused interface.

In our example, the white space and borders around the image add unnecessary visual complexity. They’re not needed to convey information or group elements, so we can safely remove them to simplify the design.

6. Use colour purposefully

Use colour sparingly and with purpose. Try to avoid using colour purely for decoration, as it can be confusing and distracting. Start with black and white and introduce colour where it conveys meaning.

A simple and effective approach is to apply the brand colour to interactive elements like text links and buttons. This helps teach people what’s interactive and what’s not. Try to avoid using the brand colour on non-interactive elements.

You don’t need to add colour to all interactive elements, as some already have visual cues that indicate they’re interactive. For example, the cards in the following example still feel interactive, with or without the blue coloured link.

In our original example, the blue heading might look nice, but it makes the text seem interactive. To help avoid confusion, we remove the blue colour from the heading as it’s not interactive.

We also remove the blue colour from other non-interactive elements like the star rating. This makes it much easier to see what’s interactive and what’s not.

7. Ensure interface elements have a 3:1 contrast ratio

Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are lots of tools and Figma plugins to help you measure colour contrast, my favourites are the Web AIM online contrast check tool and the Contrast Figma plugin.

In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields, icons, and buttons, need to have at least a 3:1 contrast ratio.

In our example, the contrast of the arrow icon sitting on the photo is too low. Using a grey colour for the icon and adding a solid white background give it sufficient 3:1 contrast, regardless of the photo it sits on. This also reduces the interaction cost, as the tap area of the icon is now larger and clearly visible.

The primary button contrast in the original example was also too low. We fixed it previously when addressing the visual hierarchy, but it’s also worth mentioning here.

The risk with the low contrast button is that people with low vision might not identify it as a button, as they can’t see the button shape. Increasing the button contrast ratio above 3:1 makes the button accessible and also helps correct the visual hierarchy. Learn more button design tips to avoid common mistakes.

Increasing the arrow icon and button contrast to a ratio above 3:1 gives us the following design. We’re getting there bit by bit, but we’ve still got more issues to fix.

8. Ensure text has a 4.5:1 contrast ratio

In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:

• Small text (18px and under) needs a minimum contrast of 4.5:1.
• Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1.

In our example, the small text in the photo count element has insufficient contrast. We increase the contrast ratio above 4.5:1 by increasing the opacity of the grey container and also adding a text shadow.

The contrast of the location text is also too low. The thin font weight makes it even harder to read. Using a darker shade of grey helps make the text more accessible. We’ll make further updates to the text to improve it shortly.

9. Don’t rely on colour alone as an indicator

There are many different types of colour blindness and they mainly affect men. Commonly, people who are colour blind have difficulty distinguishing between red and green, but some aren’t able to see any colour at all.

To ensure an interface is accessible to those who are colour blind, you can’t rely on colour alone to convey meaning or distinguish visual elements. You need to use additional visual cues to differentiate interface elements.

In our example, the colour blue is used on the “reviews” text to indicate that it’s a link. If colour is removed, the link text looks the same as other text, so those who are colour blind won’t be able to tell it’s a link. Underlining the link text clearly differentiates it from other text in the absence of colour.

10. Use a single sans serif typeface

A typeface is a set of related fonts with a similar style or aesthetic. Helvetica is an example of a typeface. Fonts are variations within a typeface, like weights or sizes. For example, Helvetica bold and Helvetica regular are 2 different fonts within the Helvetica typeface.

It’s safest to use a single sans serif typeface for interface design, as they’re generally the most legible, neutral, and simple. Here are my 10 favourite free typefaces for UI design.

In our example, the heading uses a detailed serif typeface that’s a bit difficult to read and could be distracting to some. It also has a personality that might not match some of the photos in this property rental app. Simplifying it to a sans serif typeface, like the one being used for the body text, can help improve usability and aesthetics.

11. Use a typeface with taller lower case letters

Look for typefaces with taller lower case letters and greater letter spacing, as they’re generally more legible at small sizes. The height of lowercase letters in a typeface is known as the x-height.

Our example uses the League Spartan typeface, which has a relatively low x-height. Changing the typeface to one with a larger x-height, like Inter, helps to improve readability.

Here’s what our example looks like after the typeface is updated from League Spartan to Inter. We’re making good progress applying the UI design tips, but we’ve still got a few more issues to fix. 

12. Limit the use of uppercase

Unless you’re shouting at people, there aren’t many valid reasons to use uppercase. IT’S LOUD AND DIFFICULT TO READ.

When you read, you look at the shape of a word, rather than looking at each letter. The shape helps you recognise the word more quickly. Uppercase words all have the same rectangular shape. This forces you to read each letter one by one.

In our example, the location text uses uppercase. Changing it to sentence case, where only the first word and proper nouns (names of people, places or things) are capitalised, helps to improve readability.

13. Use regular and bold font weights only

Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.

Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.

Quick usage tips:

• Use bold font weight for headings to emphasise them.
• Use regular font weight for other smaller text.
• If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.

In our example, the location text uses a light font weight. Even though we’ve increased the contrast above the required 4.5:1 contrast ratio, the thin characters could still be difficult for some people to read. Increasing the font weight to regular helps improve readability and simplifies the design.

14. Avoid pure black text

For UI design, it’s generally safest to avoid pure black, as it has a very high contrast against white. This high contrast can cause eye strain and fatigue when reading text.

Black has 0% colour brightness and white has 100% colour brightness. The large difference in colour brightness causes our eyes to work harder. It’s safest to avoid pure black against white and opt for a dark grey instead.

In our example, pure black is used on multiple elements. Changing it to a dark grey helps to improve readability. Previously when looking at visual hierarchy, we noted that the property description text was too prominent. To make sure interface elements are presented in order of importance, we use a lighter grey for the property description text to decrease its prominence.

15. Left align text

English is read from left to right, downwards in an F-shaped pattern. So it’s best to keep text left aligned for optimal readability. For long body text, it’s safest to avoid centre aligned or justified text. It’s more difficult to read, especially for those with cognitive disabilities.

Centre alignment can work for headings and short text, as it can be quickly read. However, centre alignment makes longer body text harder to read, because the starting point of each line constantly changes. Your eyes need to work harder to find the starting point of each line.

In our example, the property description text is centre aligned. Left aligning the text improves readability and is also consistent with the left aligned text above it.

16. Use at least 1.5 line height for body text

Line height is the vertical distance between two lines of text. The space between lines helps prevent people from rereading the same line of text. It also makes text look and feel more comfortable to read.

For accessibility and readability, especially for long body text, ensure that line height is at least 1.5 (150%). Keeping line height between 1.5 and 2 generally works well.

In our example, the line height of the body text is only 1 (100%). Increasing it to 1.5 (150%) helps to improve readability and looks nicer too.

We fixed it!

With a handful of simple but powerful UI design tips, we quickly found and fixed a whole bunch of problems with our example UI design. You could further customise the decorative visual styles to match a specific brand vibe if needed. For this example though, we were focused on getting the basics right. 

I hope you’re starting to see that UI design doesn’t have to be so hard. It might appear to be a magical art form, but a lot of it is made up from logical guidelines like the ones we just learned. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces. 

The more you apply these UI design tips, the more naturally they’ll become part of your design workflow. Think of them as a solid base that you can build on as you explore new ideas, experiment with different approaches, and stretch your creativity.

Want more UI design tips?

These are just a few of the logic-driven UI design tips from my UI design book. You’ll find hundreds more with detailed examples in the book. The example interface was created using my Figma design system. You can also take a behind the scenes look at the making of the book if you’re interested.

PS If you found this article helpful, share it with others and follow me on X and LinkedIn for daily design tips, tools, resources, and inspiration. 

14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

Contrary to popular belief, user interface design isn’t just about creating pretty pixels. Of course, making an interface look great is important, but there’s much more to it than that. Learning the how and why behind interface design will ensure that every design detail has a logical purpose behind it. (more…)

14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

I’ve been a designer for nearly 2 decades now (here’s how I became a product designer) and I’ve used buttons in many website design projects, but I haven’t ever taken the time to think about button design in great detail. It wasn’t until recently that I realised I’d been making some common button design mistakes (and I’m not the only one).

If you pull out your phone, open a few apps and browse a some websites, I’ll bet you come across quite a few buttons. I’ll also bet that many of those buttons have issues that pose a potential risk to usability and accessibility. There are a lot of problematic buttons out there, even from large companies and experienced designers, so I put together some quick and practical button design tips to avoid these problems and design better buttons.

Firstly, I’ll go through some popular button designs and highlight their problems using objective UI design principles. I’ll avoid any subjective thoughts based on aesthetics, “gut feeling”, or what looks pretty. I also won’t go into code here, as there’s a lot we can do on the design side of things first. I’ll finish up with some button design tips and suggestions for best practice button design.

The purpose of buttons in UI design

In UI design, buttons serve as interactive elements that allow users to perform actions or make choices within a website or application. They are fundamental components that guide user interactions and help achieve various tasks.

For most projects, your design system will need 3 button weights to indicate the relative importance of actions:

• Primary buttons are the most prominent button used to highlight the most important action.
• Secondary buttons are usually the alternative to the primary action. Use secondary buttons for less important actions or for multiple actions that have equal importance.
• Tertiary buttons are especially good for displaying multiple actions or destructive actions that you want to make less prominent.

In this article, we’ll compare groups of these 3 button weights.

Common button design mistakes

I’ve highlighted the issues with some popular button designs below. These issues pose a potential risk to usability, so it’s safest to avoid them if possible. We’re aiming to at least meet WCAG 2.0 level AA accessibility requirements as this is the most common standard and a good place to start.

Button group 1

User interface components like form fields, buttons, and tabs, need to have a colour contrast ratio of at least 3:1. Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. High contrast helps people with vision impairment tell the difference between different interface components. Decorative styles that aren’t required to distinguish interface components don’t need high contrast. There are lots of tools and Figma plugins to help you measure colour contrast, my favourites are the Web AIM online contrast check tool and the Contrast Figma plugin.

In this example, the secondary button fill contrast ratio against the background is less than 3:1, which is too low to clearly indicate the button shape to the vision impaired.

Some may argue that the secondary button fill is decorative and doesn’t need to have a contrast ratio of 3:1 to be accessible. The fill is needed to identify the secondary button as a button. Without the fill, it’s just plain blue text with no indicator of interactivity but colour. You could add a high contrast border to the secondary button to fix this issue.

Button group 2

The button styles in group 2 have the following issues:

• The secondary button could be mistaken as being unavailable or in a disabled state due to its light grey colour. It’s safest to avoid light grey buttons to reduce potential confusion.
• The secondary button text contrast ratio is less than the required 4.5:1 WCAG guideline, making it difficult to read for some.
• The secondary button border is also less than the required 3:1 ratio.

Button group 3

To ensure that a wider audience can read small text (18px and under), it should have a colour contrast ratio of at least 4.5:1. The button styles in this example have the following issues:

• The primary and secondary buttons conflict due to their similarity. This confuses the visual hierarchy, making it unclear which is more important.
• Since both buttons have the same style, the only way to tell the difference between them is via their colour. This means people who are colour blind may not be able to differentiate between them.
• The contrast ratio between the buttons is also less than the required 3:1. This means that people who are vision impaired may not be able to clearly distinguish between them.

Button group 4

These button styles have similar issues to the previous example:

• The primary and secondary buttons conflict due to their similar style and lack of contrast.
• The secondary button text contrast ratio is too low and should be at least 4.5:1 to ensure it’s accessible.

Button group 5

These button styles are too similar for the vision impaired to distinguish between them. The contrast ratio between buttons is the only way to tell the difference between them and it’s too low (contrast needs to be at least 3:1). Buttons should have a clear visual hierarchy that doesn’t rely on colour alone.

Button group 6

These button styles have similar issues to the example above:

• Button styles are too similar in contrast and style for the vision impaired to tell the difference between them.
• The contrast ratio of the tertiary button border must be at least 3:1 to be accessible and clearly identify it as an interactive element.

Button group 7

When it comes to accessibility, it’s important that we don’t rely on colour alone to distinguish interface elements. Those who are colour blind won’t be able to tell the difference between elements.

In this example, the tertiary button isn’t accessible because colour is the only indicator that it’s interactive. This means that those who are colour blind may not be able to distinguish it from plain text.

The context, position and close proximity of the tertiary button to other buttons may help distinguish it from plain text in some cases, but there’s still a risk that it may cause confusion.

Button group 8

Every detail of an interface design should have a logical purpose. Why are the primary and secondary button shapes different in example 8? Do they function differently? Elements that function the same should look the same. Avoid inconsistent button shapes as they can cause confusion.

Button group 9

Visual hierarchy is how we communicate the relative importance of interface elements. The purpose of the 3 button styles is to indicate the importance of actions. This helps people make decisions. The button styles in this example have the following issues:

• The visual hierarchy is unclear as the primary and secondary buttons have similar visual weight or prominence.
• The secondary button background contrast ratio is below 3:1, which is too low to clearly indicate the button shape to the vision impaired.

Button design tips

Based on the previous button design mistakes, here are some quick and practical tips to keep in mind to design user-friendly and accessible buttons:

• Buttons should have a clear visual hierarchy that doesn’t depend on colour alone.
• The contrast ratio of the button shape must be at least 3:1 to ensure people who are vision impaired can identify it as an interactive element.
• Button text contrast ratio must be at least 4.5:1 to meet WCAG 2.1 level AA accessibility requirements.
• If buttons have identical styles, the contrast ratio between them must be at least 3:1 to ensure they’re distinguishable to the vision impaired.
• Use a large target area (at least 48pt by 48pt) to ensure people can easily select buttons.
• Make sure there’s sufficient space between buttons so people don’t mistakenly select the wrong one. I usually use 16pt to be safe.

These button design tips are from my UI design book.

A safe option for better buttons

The following button styles are familiar, accessible, and have a clear visual hierarchy that isn’t dependent on colour alone. I’ve used them in many projects including my Figma design system UI kit.

You might have noticed that the tertiary button looks identical to a text link, but is that really an issue? Traditionally text links were designed to go somewhere and buttons were designed to perform an action. These days, many are unaware of this interaction pattern and certainly wouldn’t expect it, so I don’t think we need to stick to it. 

In the following hero banner example, links are used to take people to another page. The problem is that links aren’t prominent enough to indicate that they’re the most important actions on the page.

Changing the links to look like buttons helps make them more prominent and create a clearer visual hierarchy. The fact that they’re taking you somewhere, rather than performing an action doesn’t matter.

In the below message dialog box example, we can see our 3 button styles in action. Even though the tertiary button looks like a link, it’s clear in this context that clicking it will perform an action rather than take you to another page. Again, the line between links and buttons is blurred.

Just ensure buttons are coded as buttons and links are coded as links, regardless of what they look like. This will help you avoid accessibility issues with screen readers.

These button styles aren’t the only way to design buttons, but they’re free of the many usability and accessibility risks mentioned above, so they’re a pretty safe option. I hope you found these button design tips helpful and I’d love to hear your feedback via Twitter.

Learn more practical UI design tips

These are just a few of over 100 logic-driven design guidelines from my UI design book. If you found this article helpful, check out the book and follow me on Twitter and LinkedIn for daily design tips.

To get a better idea of what to expect in the book, check out this UI design case study to redesign an example user interface using logical rules.

14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

Website and app interfaces can quickly get cluttered. An easy way to declutter them is by simplifying the thing that takes up the most space, the text. Removing complexity helps to decrease cognitive load (the amount of brain power required to use an interface), improve legibility, and it looks a lot neater too. Over the years, I’ve tried and tested hundreds of typefaces and selected my top free typefaces for UI design.

What is a typeface?

A typeface is a set of related fonts with a similar style or aesthetic. Helvetica is an example of a san serif typeface. Fonts are variations within a typeface, like weights or sizes. For example, Helvetica Bold and Helvetica Regular are 2 different fonts within the Helvetica typeface.

There are 5 main classifications of typefaces: serif, sans serif, script, display, and monospaced. It’s safest to use a single sans serif typeface for most interface designs. To see why, let’s learn a bit about typefaces.

Serif typefaces 

Serif typefaces include decorative tails or feet at the ends of letters (highlighted below). They’re suitable for use at large sizes for headings and often convey a traditional, classic, or formal mood. Serifs with wider letter spacing are more legible at small sizes, making them suitable to be used for body text. 

Sans serif typefaces

Sans serif typefaces don’t include decorative tails or feet at the ends of letters. They generally look more modern due to their simplicity. Sans serif typefaces are highly legible, making them suitable for use at small sizes for body text and large sizes for headings. Due to their lack of character, sans serif typefaces are a neutral option that suits most interface designs.

Script typefaces

Script typefaces are based on handwriting. Their low legibility means that they’re not suitable for use at small sizes for body text. Script typefaces can be effective at conveying a formal or casual mood at large sizes in headings.

Display typefaces

Display typefaces come in a wide range of varied styles. They’re decorative typefaces specifically designed to be read at large sizes. Due to their strong character and detail, they can be especially good at conveying a range of different moods. Display typefaces aren’t suitable for use at small sizes due to their visual complexity.

Monospaced typefaces

In most typefaces, the horizontal space that a character takes up depends on its natural width. For example, an “i” takes up less space than a “w”. In a monospaced typeface, every character takes up the same amount of horizontal space. For this reason, they’re often used for displaying code. They’re also useful for displaying numbers to make them easier and faster to compare.

Tips to choose a typeface

With so many free typefaces to choose from, it can be difficult to know where to start. Here are a few tips to help you choose a suitable free typeface for UI design:

• Sans serif, as they’re generally the most legible, neutral, and simple. This makes them a safe option for UI design.
• Relatively tall lower case letters (x-height) and comfortable letter spacing for optimal legibility.
• ‘Variable’ fonts to allow for more style customisation using a single font file. Non-variable fonts have a limited set of weights and styles separated out into different font files. This takes up more space and can affect site performance.
• Modern geometric style for a contemporary vibe.
• Constant stroke thickness (low contrast) for a clean and minimal feel.

The typefaces on this list have most of these characteristics. A typeface for UI design doesn’t need to have all of these characteristics, but they generally help.

My top 3 free typefaces for UI design

Here are my go-to free typefaces for UI design. They’re all sans serif typefaces with a tall x-height geared for optimal legibility and simplicity.

1. Figtree

By Erik Kennedy

Figtree is one of my favourite all-round typefaces for modern UI design. Recently released, it’s like Erik combined all the nicest parts of the top typefaces. It’s very versatile too, as it has a simple and friendly vibe.

Get Figtree typeface

2. Satoshi

By Indian Type Foundry

You can’t go wrong with this modern and minimal sans serif. It’s neat, distraction-free, and comes with lots of OpenType features to allow for more customisation. Less curves make it feel a bit more sharp/serious.

Get Satoshi typeface

3. DM Sans

By Jonny Pinhorn

Round letters with a nearly constant stroke thickness (low contrast) help make it neat and tidy. Tall lower case letters make it great for use in small text. It’s not a variable font, but I still love it anyway.

Get DM Sans typeface

Other great free typefaces for UI design

With so many amazing free typefaces for UI design, it’s tough to limit it to just 3 typefaces. The following are some of my other favourite typefaces for interface design.

4. Plus Jakarta Sans

By Tokotype

Extra tall lower case letters (x-height) help make it legible and friendly. The almost constant stroke thickness (low contrast) helps to simplify this typeface and give it a minimal vibe.

Get Plus Jakarta Sans typeface

5. Inter

By Rasmus Andersson

A favourite amongst designers. It’s great out of the box, but also comes with some really clever OpenType features under the hood. This allows you to tailor functionality and aesthetics to your specific needs.

Get Inter typeface

6. Manrope

By Mikhail Sharanda

Manrope is a beautiful modern combination of different font types:

• Slightly condensed, so you can fit more text on a line.
• Tall rather than rounded (semi-geometric).
• Din/Grotesque Numbers are super clean too.

Get Manrope typeface

7. Open Sans

By Steve Matteson

A humanist san serif typeface that’s clean, modern, neutral, and friendly. It looks familiar as it was commissioned by Google in 2011. A relatively tall x-height makes it highly legible on screen at small sizes.

Get Open Sans typeface

8. Urbanist

By Corey Hu

Modern and neutral, this geometric sans-serif will give your interface a clean and contemporary vibe. Its almost constant stroke thickness (low-contrast) and lack of curves makes it sharp and minimal.

Get Urbanist typeface

9. Lato

By Łukasz Dziedzic

Lato is a very popular and clever typeface. It looks neutral at a small size, but shows its character at a large size. Curved corners add warmth and friendliness, while its condensed width helps reduce line wrapping.

Get Lato typeface

10. Quicksand

By Andrew Paglinawan

Quicksand has a lot more personality than the other more neutral typefaces on the list. Its rounded ends make it soft and friendly, while its geometric shapes keep it modern and minimal.

Get Quicksand typeface

I hope these simple sans serif typefaces come in handy for your next design project. They’re safe and neutral free typefaces for UI design, so they should work for most projects. I’m not saying that you shouldn’t use serif typefaces for interface design. They can work really well in lots of cases, but it’s generally safest to use simple sans serifs until you gain more experience.

Want more UI design tips?

Choosing the right typeface is just the first step in making interface text beautiful and easy to read. Learn about typography, colour, layout, and much more from my logic-driven UI design book.

To get a better idea of what to expect in the book, check out this UI design case study to redesign an example user interface using logical rules.

PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration. 

Need more inspiration?

I’ve searched through hundreds of different design resources over the years so you don’t have to. If you’re looking for more inspiration, I’ve also picked out my favourite free icon sets, free web design inspiration sites, Figma plugins, UI design books, and design system examples. Hope you find them helpful.

14 logic-driven UI design tips to improve any interface

By Adham Dannaway on January 1, 2026

Some very clever developers on Reddit have put their creative minds to the test to come up with some crazy ideas for the worst volume control UI design in history.

Obviously, there isn’t anything wrong with the standard volume control slider, it’s been around for ages and does its job well. As per Jakob’s Law, it’s safest to stick with common, tried and tested UI patterns that people are familiar with. If you’re not reinventing the wheel, there’s usually very little risk that there will be usability issues with your UI design. 

Playing it safe might sound a bit boring, but you can save a lot of time and money on user testing by sticking with what people are used to. It will also give you more time to focus on solving more important problems that will make a larger impact.

That being said, I love these crazy ideas on how we might reinvent the volume control to make it super complicated to use. Check them out below and let me know your favourite via Twitter.

I hope you enjoyed these as much as I did, let me know your favourite via Twitter. You can also find more examples on Reddit.

If you’re looking to improve your UI design skills by applying practical, objective UI design principles, feel free to check out my UI design book and follow me for more tips.