For beginner UI designers, there are basic visual design skills and usability principles that you need to learn. These skills are what will make your designs look professional, modern, and enjoyable.
Within visual design principles, UI designers need to have a good grasp of color, typography, gestalt principles, and knowledge of how to work with layouts and white space.
Apart from visual skills, good UI Designers also need to be able to able to work with usability in mind.
4.1 Visual Design Principles
UI Design as mentioned in the introduction, leans toward visual design, as opposed to UX research. The best UI designers are often also great visual designers who often have a great eye for aesthetics.
However, you do not need to be an amazing artist or painter to be good at UI design. Many great UI Designers can’t paint gorgeous paintings, but they can create gorgeous UI designs anyway.
Just like any other skill, visual design can be learned and practiced. Many parts of visual design have even been theorized and can be learned through practical guidelines.
Some of these practices can be to learn some standard uses of padding, font sizes, and go-to colors for backgrounds and texts. Even details such as shadows on UI elements can be copied and pasted as CSS code.
By observing other people’s designs you can also learn a lot. Practice noticing what makes something aesthetically pleasing to the eye, and how you can use those principles yourself when creating things.
It can be details such as:
- Layering multiple shadows on top of each other with low opacity and using a grey color or the same color as the main element instead of black
- Always striving for consistency in font sizes, button paddings, and color scheme
- Adding the appropriate whitespace and padding with conscious choice and not just filling up space
- Rounding off corners slightly with border-radius to create softer looks
- Using grids and patterns to make elements properly aligned
- Using paler and lower-opacity versions of main colors to highlight elements
- Choosing fonts that are modern and avoiding fonts that look outdated
Since this book is more of a practical guide on how to start a career in UI design, I won’t be going into too much depth in each of these categories. But, I will give you an overview of the most important visual skills that UI Designers work with.
I would advise you to seek out further sources on these design principles and theories on your own. Many of them can be found in the genres of graphic design, illustration, and web design.
4.1.1. Colors
Colors tell us a lot about the identity of a website or app we’re using. For example, do the colors give a fun and playful vibe, or is it dark and serious?
Colors are an inevitable part of all visual creations and must be considered in every project. Luckily for us, many modern tools help designers create harmonious color palettes such as coolors.co, and various plugins for design software.
You can also find further inspiration on color combinations and palettes through browsing designs on for example Dribbble or Pinterest.
Classic color theory
You can furthermore learn about color theory, as taught to classical artists. These theories can teach you how to choose harmonious color palettes, as well as what meaning colors have had historically and contextually.
However, since digital designers have a wide variety of helpful tools, it is not necessary per se, to become an expert in color theory to create gorgeous UI designs.
Do note though, that there are aspects regarding the psychology of colors, tied to the user’s cultural and social concepts. So, keep in mind cultural differences when picking out colors and other visual icons.
How to choose colors for a project
Different colors send out different messages, and that’s why it’s important to consider the larger vision of the product or design.
Who is the target audience and what is the use context?
- For example, yellow and other bright colors can be more fitting for a website that sells toys to children, while blues and grays may fit better for a bank.
How and when will the product or design be used?
- Dark mode can for example be hard to read while in the sun, while very bright color schemes may be too harsh on the eyes at night.
What image does the company or brand you are designing want to portray?
- For example, a brand may want to seem playful and youthful, or serious and professional. Adjust the colors according to that.
Does the product or company already have an established brand identity?
- Then it’s likely that new digital products or verticals for the business should follow the same guidelines, and perhaps you shouldn’t come up with a new color palette.
4.1.2. Typography
In UI Design, typography is used to organize the content of an interface in a clear way. This means that text needs to be readable, scalable, scannable, and visually appealing.
Some of the basic things UI designers decide regarding typography is
- Font – For example Times New Roman, Roboto, Lato
- Typeface – A family of related fonts
- Letter and line height or spacing – The distance between each letter or between lines of text to make it more legible
- Weight – The thickness of the font such as thin, regular, and bold
- Size – The size of the font such as 16px or 21px
You can find current popular and modern fonts by browsing fonts.google.com, following discussions in forums and social media, as well as inspecting new designs from big companies or popular designers.
In regards to font size, weight, line heights, and so on, there are general guidelines that can be followed.
Quick tips and tricks
- Generally, 16px works well as the base font size for fonts.
- Add more line height to paragraphs to make multiple lines of text more readable.
- Restrict the horizontal length of text lines to create a more comfortable reading experience.
- Make sure there’s a clear visual hierarchy that makes more important text visually dominant. Headings should be visibly larger or bolder than paragraph text.
- Adjust text sizes and placement to make the design more scannable. People in general scan through pages as opposed to reading everything carefully from top to bottom.
- Make sure there’s enough color contrast between the text and its background color.
- Make a consistent typography scale. Decide the font size for text elements such as p, H1, H2, and H3, and be consistent throughout the design.
- Remove unnecessary filler words unless it improves the user experience, especially for buttons and menu items.
4.1.3. Gestalt principles
In psychology, there is a set of design principles referred to as the Gestalt principles or laws. These principles are very important in visual design to make parts look like they either belong together – as a group or entity – or to make them look separated.
Gestalt means “unified whole” in German. The Gestalt laws are based on psychology and describe how we humans perceive visuals around us, such as seeing patterns and connectedness.
UI Designers can use this knowledge and implement it in digital interface design to make interfaces easier to navigate and use.
For example, we recognize that two buttons that are just on top of each other probably concern the same thing, while content that is further apart probably contains very different types of content.
The 6 Gestalt principles are proximity, similarity, figure/ground, continuity, closure, and connectedness. Let’s go through each one, with an example of how they can be implemented in UI design.
Proximity
The principle of proximity states that we group elements that are close together, separating them from other elements.
In UI design this can be applied to keeping elements that belong together close such as a primary and secondary button, as well as adding padding between different groups of elements to separate them.
Similarity
The principle of similarity states that things that look similar get grouped, regardless of their proximity. This similarity can be based on color, size, and shape.
In UI design, elements can be made to look like they belong together by using the same background color, shape, or size.
Elements can further be differentiated by the same principle. For example, make the primary call-to-action button a different color than the secondary button.
Figure and ground
The principle of figure and ground states that our brains distinguish between elements that are considered to be in the foreground and the background.
In UI design, distinguish elements such as a modal pop-up with the rest of the site by adding a blurred background, a shadow, or overlaying everything else with a darker or lighter color.
Continuity
The principle of continuity states that we see things that follow a smooth line as belonging together.
In UI design, elements that are placed in a line after each other naturally draw the eye from one element to the next, such as a horizontal slider or tab.
Closure
The principle or law of closure states that the human brain fills in missing parts to create a whole image. So for example, even if lines or shapes are not closed, our minds can still follow the overall shape.
In UI design, show only a part of an image or button on the edge of a screen to allow users to understand that there’s more to see.
In addition, there’s the classic trick of making sure content is visible “above the fold”, to make it clear that there’s more to see if you scroll.
Connectedness
The principle of connectedness says that elements that are connected are perceived as one unit.
In UI design, you can connect elements by adding a colored background or border around them.
4.1.4. Space & Layout
Space
Space in UI design layouts is very important. It’s everywhere and you don’t think about it until it’s missing – that’s when you feel that something looks off.
Using space in your layout can improve visual hierarchy, readability, and scannability, and help highlight the most important parts of the design. It’s a way to organize the content without adding a bunch of clutter.
Space in digital design is often referred to as “whitespace”, and it is created using margins, paddings, line heights, and letter spacings.
When designing with space, keep in mind the gestalt principles we went through in the last chapter. Use space to group or distribute UI components in a way that creates visual hierarchies.
For example, add more space between elements that are more unrelated, and less space between more related elements.
This can mean having 46px padding between big sections, 32px padding between the border of the section and its contents, and only 16px between the items inside the sections.
Another easy spacing trick is to add more line height in paragraph texts, which will immediately make it more legible. Not too much, but around 140-170% can often work wonders.
Layout
Space inevitably also affects the layout of a design, so they go hand-in-hand. Layouts are the overall visual structure of the UI components and contents and also build upon the Gestalt principles.
Items that belong together will for example have the same size, color, and shape, and be ordered in the same direction (vertical or horizontal). Different groups of items can be separated by space, color, or size.
When designing the layout, think about the visual journey, and manipulate it in a way that benefits the user. Use size and space to highlight the most important elements.
One traditional way to create consistency in layouts and spacings is to use grids and place out components according to the grid lines.
A newer method is to use functions such as auto-layouts to set an automated amount of padding or margin to groups of elements.
Whichever method you choose, make sure that the spacing is consistent and helps communicate a clear visual hierarchy.
4.2 Usability
Usability in design refers to designing things that are easy to use, efficient, and intuitive.
To do so, designers need to emphasize the end user’s needs and goals, so that the design and product can meet those needs. It’s one of the core components of UX design.
As mentioned, UI design is inseparable from UX design, which means that UI Designers also need to keep usability in mind at all times.
For UI Designers, it’s important to design for inclusivity & accessibility, have an awareness of cultural differences, and understand some basics of human-technology interaction.
In practice, when designing UIs, usability can take the form of:
- Providing clear buttons and labels
- Creating intuitive navigation
- Following conventions on how things usually function and look
- Making sure there’s enough color contrast for the text
- Making sure the text is legible and big enough
- Providing explanations and guides to complex systems
- Placing error messages in the correct places
- Signaling messages with a visual aid such as icons and colors
As you can see, when discussing the topic of usability, it’s clear how even visual UI designers need to take usability and user experience in mind. Even if one isn’t responsible for UX Research, all of the above considerations are important.
4.3. Learn how a business makes money
It is not talked about much by UI Designers, but the design is not isolated. Designers need to understand how the whole of the business functions and how the design value of design is evaluated by most companies.
The reason why a designer benefits from learning this is that can help both you and the company earn more, as well as improve the respect and value of designers in the market. This is especially true for consultants, freelancers, and Product Designers.
The most well-paid UI Designers do not only deal with creating pretty components, they deal with helping businesses reach their goals and improve their income. They use design as a tool for business success, which is why they get paid more.
One way of implementing business knowledge with design is for example by using your skills as a UI Designer to suggest changes in design to better meet KPIs, improve conversion rates, and promote more sales.
If you in the future want to start your own company or design and create your products or apps, you will without a doubt benefit from having practiced using design as a means to improve revenue. It’s a skill best learned by doing.
4.3.1. Design for business needs
To learn how companies and products bring in revenue, you need to think in a business-oriented way. This does not mean that you should abandon human-centered design, which you should not, but rather add another layer of thinking.
For every project you work on, ask the questions of:
- What are the main business objectives with this new product or feature?
- What are the different ways we can monetize this product or new feature?
- What are the costs of designing and developing various functionalities, and which should we prioritize to cut costs and increase ROI (return on investment)?
- How are our biggest competitors doing this, and how can we improve our design and product to become even better than theirs?
- How can we present the unique value of this product in marketing and advertising?
- Is there a way we can track the impact of new designs based on the key objectives and KPIs (conversions, revenue, sign-ups)?
Apply your answers and reflections in the UI design, and examine how you can use design to answer those business needs.
If you succeed in this, you can specialize as a Product Designer with strong UI and visual design skills. This is a very valuable skill set to have.
Let’s not forget, that of course a gorgeous, useful, efficient, and visually pleasing design also sells.
So, thinking in a business-oriented way doesn’t take away the importance and value of great visual and experience design, it just adds even more value.