Table of Contents
Improved UI or user interface
This article will be most useful for UI design beginners, however, all designers can keep these important points in mind regardless of previous experience. These tips are less about user interface design trends and more about design principles and basics that are often forgotten. So stay with us to introduce you to a list of important principles to help improve your designs.
Typography
It’s good to start by saying that you shouldn’t use more than 2 fonts and their multiple styles in a single project, although I believe this has become very clear and I hope all designers follow this principle. So let’s talk about more specific issues.
Capital letters
Whenever you use text that consists entirely of uppercase letters, don’t forget the space between the letters. This makes the letters not stick to each other and makes your text more readable.
Narrow and pale fonts
You should be careful when using this style of font.
Light and pale colors may be used, but it depends on your font type. If you are designing a product that users will see on screens, it is better to forget about narrow and pale fonts. They are very hard to read and can cause broken half pixels on some screens.
The font size of headlines and main text
Let’s talk about web typography.
There are six headings (h1 to h6). First, you need to make sure that you don’t have more than four modes in your project and control their order.
The largest heading (may be placed in the first section of the home page) of a website or landing page can be as large as you like. But make sure you don’t get too far away from the rest of your headings, as the text will be too long to read. The reading size of the text is too short.
For the original text. Your browser’s default settings (let’s use Google Chrome as a reference) will display any text at 16px.
This size is very comfortable to read, although I tend not to go below 17px and 14px for body text.
Consider 12px as the smallest possible size. Smaller sizes cannot be read due to vision problems or bad monitors. Remember not to use sizes close to each other in the same text. For example, from 16px and 17px in one section. This causes confusion and disorder in the appearance of a product, and this work is completely unreasonable.
Line height
However, it is rare to change the line height setting from the default. But it is not bad to increase it a little to improve readability. This will work especially well with large blocks of text, such as blogs, articles, and blocks of information on websites or mobile apps.
The same approach is recommended for titles: make sure that the ends of the letters do not overlap.
Hierarchy of text and headings
Bold text should be used to highlight important parts of a text, which include titles, links, and buttons, and sometimes highlighted parts of a text. But if the bold text is used for the whole text, it is not clear what you are looking for in the text and which parts are more important, so leave the Bold text correct. All parts may not be equally important.
Text Color
Pay special attention to the color of the text in your design. The colors should have enough contrast so that the text can be read on any type of monitor.
This is especially important for form elements that often use light gray.
Distance and margins
Negative spaces (empty spaces between elements) are essential for a good design. Space helps clarify the relationships between elements and provides overall rhythm and balance.
Drop extra frames and lines
The easiest way to separate one semantic block from another is to use a frame or a 1px line.
I have seen pieces of design where there is a box inside another box and several other boxes inside the same box, each box has a 1px border. In such cases, you should think if these boxes are appropriate and necessary. Sometimes it makes more sense to use a 1px frame.
There are other ways to distinguish elements such as shadows or distance. The main thing is that the margin between the elements should be more than the padding inside them. Clearing the frame on each element creates more space for content.
Content is the most important part of any product, so don’t saturate your overall space with unnecessary spaces.
Margins
Margins help visually determine whether an element belongs to another element. Let’s consider the layout of an article on a news site.
Consider including an image, title, 3-4 lines of preview text, and release date.
The date should have a margin slightly larger than the margin between the title and the text. And the image should be placed at the greatest distance from the date.
Less use of elements
There is always a customer or manager who wants to put all the information in one section or one page of the mobile app. For example, a title, phone, menu, a special offer, and a large logo.
Do not forget that the less information the user receives at the same time, the easier it is for him to act (for example, making a phone call).
Receiving information incrementally makes the customer experience easier and more enjoyable. The customer should never have to struggle to decipher your UI design. Do not forget that some perfectly beautiful and flawless elements together will not be beautiful in the end.
Different side borders on the screen
In the image below, pay attention to the borders placed on the edges. If you classically place the content, from the upper left corner to the lower right corner, make the upper right margin slightly larger than the left side, because in this attractive case, the edge margins on both sides are equal.
Colors and images
Images, icons, and backgrounds set the overall mood of a product. Images should represent exactly what a company, an app, or a website has to offer.
Logos
Creating a good logo is very difficult. Nevertheless, surely a designer can create a proper logo just by following the basic rules and principles. For example, observing the exact choice of color.
If it is difficult to put an image (symbol) on the logo – don’t do it. Try to turn it into a logo consisting of fonts. Of course, a simple but professional design is more valuable.
Shadows
The shadow under an object should never be black. It will always cast a shade darker than the surface. Objects usually have several shadows: one is small and bright, directly under it (if it is standing or lying on something), and the second is blurry and large. Avoid dirty and unnatural shadows in your project.
Icons and images
Any file that can be a vector must be a vector. All icons, arrows, and logos must be provided to developers in SVG format (PDF for iOS developers).
PNG icons have blurry edges and will look bad, especially on retina and LED displays. In addition, vector images take up less memory.
If you are working on a set of icons for websites or apps, make sure they all belong to the same “family”. This means equal width and equal border-radius. Check to make sure the icons are placed in an equal-sized square and have equal volume. If some icons have rings, make sure that these rings have the same diameter. The overall image should have a consistent style.