What is worth paying attention to when designing intuitive and attractive interfaces? Below are some tips from UI / UX Designer from Overlap Studio, who deals with designing useful websites and applications on a daily basis.
1. Consistency of graphic elements
It is worth taking care of it at the very beginning, because later it will be difficult to control stylistic chaos. I would recommend choosing one color palette limited to e.g. five colors, including two main colors.
It is important to use colors consistently and not to multiply successive shades that are similar to each other, but have different values. It is best to add some of them to the color palette in the program you are using. The icons should also be as stylistically similar as possible. It is a good practice to select a simple icon pack, be it linear or filled, and then apply them consistently. You also have to pay attention to the even stroke, i.e. the thickness of the strokes.
It is also worth paying attention to the so-called containers (tiles, blocks, frames). For example, if we decide to round the corners, let’s take it as the rule for most elements. We should also avoid situations in which one element of a group, e.g. a teaser of a product description on a product list, will have a distance of 8 px in one place and a distance of 16 px in another (e.g. a product name or price).
Design consistency is very important not only at the design stage, but also at the mockup level. Inconsistency may unnecessarily draw the user’s attention and make them slightly anxious or confused.
2. Correct distances and dimensions.
This is one of the key issues that can completely transform a project. There are certain rules that apply to grouping elements, content, and to compensate for optical illusions.
In order for the project to be readable, it should be properly structured. Elements related to a given section (texts, buttons, headings, visualizations) should be close to each other. Avoid situations in which one element of a given group is closer to elements from a group other than its own (e.g. a product description teaser on the product list will be 16px away from the product name, and 8px away from the image of another product that it does not apply to). If we do not know the distance between the elements of two different groups and we are concerned that the elements may merge with each other, let us use separating lines or separate such groups visually with a frame or place them in a tile.
Mathematical precision in the use of distances between elements might seem right – it gives the designs order and harmony. Remember, however, not to follow this path completely thoughtlessly. Although two elements next to each other have the same dimensions, they may visually differ from each other, e.g. due to their visual edge gravity. A good example is a square and a circle – they can geometrically have the same dimensions, but a 20x20px circle will be optically smaller than a 20x20px square. It is then a good idea to slightly increase the wheel size to compensate for this optical difference. Of course, the project does not only consist of circles and squares, but this knowledge will help us in case of problems that we may encounter, for example, with the optical balancing of icons and smaller UI elements and aligning the shapes of the visualization.
3. Adoption of one grid for the entire project
For example, if you are designing a website with several subpages or a mobile application that has many screens, you should ensure that these design elements (unless there are other indications) have a similar layout / framework. The grid system can help. It consists of lines that help position graphic elements and texts on the page. Depending on the purpose, the mock-up should have an adjusted number of columns. On the desktop, a system of 12 columns is often used (12 are well divided into 12,6,4,3,2,1), which gives great flexibility. Of course, let’s not be afraid to use even 8 columns, if the project requires it. Sometimes it is also worth getting away from the grid to draw the user’s attention to something.
4. Ensuring relevant content
The use of content that makes sense in the context of a given project greatly increases the value of mockups. Lorem ipsum is a language that unfortunately neither the client nor the test user were taught in school
If we cannot work with real text, I encourage you to use Craft plugins from InVision, which generates sample content on a selected topic.
5. White space
When designing pages, unlike, for example, printing, you use more space and “breath”. When correcting distances and dimensions, remember about the so-called white space. Beginning designers are very afraid of empty space, so they want to pack as many elements as possible on the smallest surface. The user may feel uneasy and confused by the inability to focus on any particular item. Let’s add some space to our projects – it will certainly make the interface more pleasant for users, and the content posted there will be more readable.
