UX/UI designers are responsible for transforming system and business requirements into a given design. Designing is not an easy task, as these requirements must be translated in a way that maximizes the usability of the interface and meets the needs of end-users. An interface is a place where people and new technology meet, so it has to facilitate communication in the best way possible and be aesthetically pleasing. In this article, we discuss how to correctly use interface elements to create a design that is both useful and visually attractive.
In general, colors are crucial when it comes to interface elements and brand building - note that brands usually have specific colors that are characteristic for them and that they use consistently in all branding materials. On the macro level, the color attracts users’ attention and helps generate meaning. On the micro-level, it’s important to remember that the color should be used to emphasize meaning. Here’s what color can do when it comes to reinforcing any kind of user interfaces:
The classic example is known to all online users: a text highlighted in blue means it’s a clickable link. This is just one of the many ways in which color supports interactions. Take this invoicing interface design as an example: the user can immediately see which invoices have been paid, which are awaiting payment, and which should be investigated for issues - all that through the appropriate use of green, yellow and red colors. When using colors in UI design this way, always remember that they must work with the semantic meaning.
The choice of colors for your UI design will help you with building a visual hierarchy and navigate the user through information architecture. Vivid colors or high contrasts will draw users’ attention, so they should be used to accentuate the elements we want the user to see or read at first, improving readability and logic.
Using selected colors in a consistent manner is at the core of any design system - it teaches users specific habits. Colors help navigate the user through elements of the interface or a group of interfaces, as long as they are used systematically. For example, marking interactive elements within an application with the same color will emphasize interactivity. Thanks to the consistent use of colors, we can create our own design system and the hierarchy of new elements for our system.
How to choose colors for UI design appropriately? Selecting colors for any user interface project should take into account the Color Theory, which determines which colors go well with each other and what they mean.
Today, we have excellent applications that help us analyze our choice of colors. Adobe Color is one such app; it allows designers to generate an aesthetic color palette, based on the principle of color harmony. Using such applications will allow you to choose a well-harmonized color palette.
Another tool that may be helpful in designing the user interface is Material Color Palette. It helps select matching color combinations with mathematical precision! Material Color Palette applies mathematical principles worked out for Material Design, the design language patented by Google, to suggest colors and shades that work with each other best.
Great UI designers keep it in mind! 👇
Remember that colors in UI design are subjective. They have different emotional and semantic values across the world. When you’re creating an application for multiple markets and intend to communicate something with color, make sure that color doesn’t mean something else in a given culture.
Each of them has its own "character" and unique elements which can help create the right feel of any interface. There are five basic types of typefaces you should know as they are UI design fundamentals:
It’s the one with wedge-shaped endings at the end of the letters. It’s considered the traditional typeface because it comes from ancient Rome and it’s actually the oldest of all font types. If you want to use a typeface that is neutral or isn’t too attention-grabbing, use a serif type with equal width along each part of a letter.
A serif typeface with letter parts of different width/thicknesses, like in e.g. the well-known Vogue logo, is perceived as a more elegant font and usually associated with beauty and fashion industries.
This typeface is without wedge-shaped endings. They were created, or rather popularized, in the twentieth century and at that time seemed simply grotesque. These typefaces are perceived as modern and mechanical - the more so the more geometric they are in shape.
They’re also called display typefaces and are very individual in character - every typeface of this kind is very unique. We use them for artistic means of expression. If you're a beginner User Experience and/or User Interface Designer, use them with caution (remember the principles of UX design!).
Monospace fonts were inspired by how we used to write on a typewriter. Each letter has the same width and occupies equal space in a line of text, which is why such typefaces are perceived as mechanical. You would usually see them in code, to distinguish them from regular text. I recommend them for very specific designs and uses only.
You can find the above categories in Google Fonts. I highly recommend this tool because Google buys the right to use great typefaces created by professional typographers, and makes them available for free. You can implement them in your UI design in a very convenient way by adding a link in the CSS file. Google also suggests which typefaces match together which is also great.
We can distinguish between system and product icons, depending on their purpose. The first one is used for functional purposes, like navigation, marking interactions, or helping to generate meaning in designs of a system or application.
In fact, the division into types is wide and we’re usually talking about families of icons. A good user interface design will make use of a specific family. Within one family, the most important thing is consistency, which should apply to stylistics, weight, elements that are repeated, and the grid, i.e. the square on which it is described or inscribed depending on which families we are talking about.
Based on the appearance, the six types of icons you should know are:
Typical sizes of icons always fit into a regular square grid. All of them used within an application should always have the same size, which is very important. Typical sizes that we use in the UI design of applications fit into the dimensions 16x16, 20x20, 24x24, and 48x48. Other sizes are used for product icons.
You now know the UI design fundamentals. If you’d like to know more about visual design principles and best practices of user interface UI design, read our post about "What is a User Interface? - Analysis" or the post about "The UX Design Strategy in the Software Development Process". Additionally, we are working on a post, which will be a continuation of the topic of UI components.