Tips for UI Design: 10 Rules of Thumb in UI Design

In this article, I will share some methods that I think can help you in your daily work, but these methods are not set in stone. In fact, I think design is about thinking outside the box, but you also need to know the rules first, so that you can break the rules.

Design for density, not pixels

If you are not familiar with the concept of dp, let me explain it here: pixel density is the number of pixels per inch, also called ppi. The unit dp is the abbreviation of the word "density-independent pixel", sometimes abbreviated as "dip".

When designing an interface, it is recommended not to design for pixels, but to design for the pixel density of the device. This ensures that the design elements are adapted to different devices.

For example, if we design a button element with a size of 200x 50dp, it will be displayed as 200x50dp on a 160ppi screen and 400x100px on a 320ppi screen, which is twice the size of the original resource.

Some screens have more pixels per inch than others, but your design assets won’t appear smaller on denser screens because they will be rendered at 2, 3, or 4 times their original size. This ensures that all your design assets remain the same size across different densities and devices.

For example, the screen size of the iPhone XS Max is 414×896, but this is not a pixel size but a number of points, which is 1242x2688px in pixels. With this in mind, when designing for the iPhone XS Max, I will design at 414×896 points and then deliver design assets @3x.

Make use of 8dp increments

Why do we use the 8dp increment rule in design? Here is a simple explanation: the reason we use the magic number 8 instead of 5 is that if the device has a 1.5x resolution, it will be difficult to divide it evenly and will cause aliasing.

Furthermore, most screen sizes are divisible by 8, which makes it easy to adapt our designs to these screens.

By designing in increments of 8 on an 8-point grid, the design also becomes more uniform, removing the guesswork and allowing designers to make quick decisions to achieve a perfect fit.

Remove lines and borders

When designing, you should stop and look from time to time to determine whether the designed container will make the UI cluttered. Often, boxes and lines used to separate content can be replaced with white space.

When we were designing in the past, we liked to put elements in boxes. So, just removing these boxes can make the page look less dense, give elements more breathing space, and the entire interface can be upgraded to a higher level.

Focus on contrast

Appropriate contrast not only allows users to see relevant information on the page, but also improves the usability of the product.

Designing a product is similar to building a public building, such as a library or school. It needs to be inclusive to everyone: users who are blind, color blind, or visually impaired.

The Web Content Accessibility Guidelines (WCAG) (https://webaim.org/articles/contrast/) stipulates a contrast ratio of at least 4.5:1.

To ensure that your design meets the standards, it is recommended to download a plug-in called "stark" to check whether the design is OK.

Follow user habits

There are many reasons why certain elements are considered standard.

For example, if you design a button as a circle, the button will take up unnecessary vertical space when the text needs to be “Start Free Trial”.

In addition, users have come to expect similar product experiences. If the website, app, or software you design is different from what users are used to, then it is not intuitive and users may be disappointed with the experience.

Therefore, it is better to innovate within the scope of existing design specifications rather than reinventing the wheel.

Build hierarchy with color shades

Each color has a visual weight, which helps to establish hierarchy within your content. By using shades of color, you can give elements different levels of importance.

The rule of thumb here is that if one element is more important than another, it should have a higher visual weight. This allows users to easily distinguish between important and unimportant information and quickly scan the page.

Larger, more eye-catching information will draw the user's eye first, before the user looks at the secondary information below it.

Avoid using more than two fonts

A generally accepted design consensus is that the number of fonts used in the same interface should be limited. Generally speaking, two different fonts are enough. This does not mean that you can't use more fonts, but it's better to have a reasonable reason, otherwise it's better not to use them.

The solution to this problem is to use font families.

With font families, we can use the same font with different variations in our designs. Fonts from the same family are designed to be used together. They are flexible and consistent.

When choosing a font, give it a preference to choose one that has a variety of weights, such as light, standard, medium bold, bold, extra bold, wide, extended, and italic. This will give you more room to play around without having to add additional fonts.

Be direct instead of making the user think

Being direct is a great strategy for product design because, why should users think?

Checkout pages, email inboxes, search history, back buttons, etc. are all good examples.

On the checkout page (if designed well), I don't need to remember what I'm buying and am able to clearly identify what I'm buying without jogging my memory.

In my Gmail inbox, I can glance at it and determine which emails I have read and which I have not without having to think about it. Or, if I log into Amazon, I can quickly pick up where I left off because it tells me my most recently viewed items.

“Minimize reading stress for users by making objects, actions, and options visible. Users should not have to remember information from one part of the dialog to another. When appropriate, instructions for using the system should be visible or easily searchable.” — Nielsen Norman

Don’t slow down your users

For users, speed and efficiency are the only important things. Users come to an application to solve their problems.

"I want it to be faster" — Ricky Bobby

If you do a lot of rich functionality, that's fine, but don't let your creativity get in the way of my goals as a user.

A good rule of thumb with animations and microinteractions is that if it adds unnecessary time to the experience, then it’s not actually improving it.

Purposeful use of animation can improve the experience, but adding unnecessary distractions and moving elements will not.

I often see landing page designs on Dribbble that animate as the user scrolls on the page. It’s often too active, with everything moving and the content itself being ignored. As a user, it’s hard to tell what to pay attention to when there’s so much going on in the interface. It’s simply a waste of the user’s precious time.

Numerous studies have found that the optimal speed for interface animations is between 200 and 500 milliseconds. These numbers are based on the peculiar qualities of the human brain. Any animation shorter than 100 milliseconds is instantaneous and won’t be recognized at all. And animations longer than 1 second give a sense of delay and can bore users. — The ultimate guide to proper use of animation in UX

So if you are using animations, make sure they have a purpose. If they have a purpose, then don’t make me wait for more than 500 milliseconds. In 2019, it only takes a millisecond to annoy your users.

Less is more

Every time we want to add extra information to a page: buttons, text, images, animations, illustrations, etc., it competes with related information. If there is too much content on the page, the importance of the element decreases.

A perfect example of this is the famous Google homepage. Instead of flooding visitors with information that they may not need, like Yahoo does, the design remains focused on the core task: searching.