I hope you have already familiarized yourself with the tasks that a UX designer faces, and for many of you, they may have been a revelation. If you haven't done so yet, I recommend going back to the third lesson. Now we will move on to the tasks of a UI designer. I'm sure in your mind this will be something more obvious and understandable. These tasks usually have a clear physical result – ready mockups in a graphic editor.
UI design is about the constant search for a balance between creativity and functionality. It is an industry where new trends emerge and gain popularity every year, which must be taken into account in your work.
- Who is a UI designer?
- Typography
- Color in design
- Composition and spacing
- Design principles
- Grids
- Working with icons and images
- Where to find ideas?
- Creating the final design of pages
- Creating adaptive and responsive design
- UI Kits and design systems
- A typical day of a UI designer
- Animation of elements. The work of a motion designer
- Tasks of a graphic designer
- Homework
- Conclusions
UI Designer is a creative specialist who transforms ideas, research, and functional requirements into visual solutions in the form of website, application, or any other interface mock-ups. He is also referred to as a visual designer.
The main task of a UI designer is to make the interaction between a person and the product as intuitive and pleasant as possible. He carefully selects colors, fonts, icons, and the arrangement of elements, considering both aesthetics and usability. As a result, each pixel of the interface takes on its important role in creating a harmonious and functional product.
An important factor for the effective work of a visual designer is the development of one's own taste, inspiration, knowledge of the rules and principles of design theory. It is to these topics that we will turn below.
Typography — is the rules, principles, and methods of formatting text. Typography is one of the sections of graphic design. It allows the text to be presented in the most understandable way for the reader's perception. The UI designer is engaged in selecting the font, determining sizes, spacing between lines and characters. It defines the styles of headings, paragraphs, lists, and other text elements of the page. Let's get acquainted with the key terms.
Font — is a set of characters formatted in one style, forming a single system.
Typeface — is a set of fonts grouped into one family.
Point size — is the height of the letter of the font.
Leading – is the line spacing or distance between lines.
Evaluate the complexity of this discipline by looking at the picture below.
The font has the ability to create mood and overall style just as well as photographs and colors. That’s why it is important to learn how to select fonts for each project. Every UI designer faces numerous obstacles on this path.
The first obstacle is learning to distinguish good, high-quality, and stylish fonts among all the others. The second is that a large number of beautiful fonts are paid and require additional financial resources. The third obstacle will be relevant for designers working with Cyrillic, as the number of good fonts for this market decreases dramatically. There are also other minor obstacles.
If you are interested in learning more about typography in detail, you can purchase my guide dedicated to this topic.
Pay attention to the example below (the website design for a coffee shop). An experienced designer would hardly choose fonts for the site like those in the upper example. They look a bit crooked, and their readability sharply decreases with smaller letter sizes. But to be fair, I suspect that to a person without a design education or without relevant exposure, such fonts seem quite decent. In reality, adding handwritten fonts to modern web design should be done with great caution. For interfaces, it is generally a taboo.
On the other hand, the combination of fonts in the lower example is more familiar and appropriate for a modern approach to website typography.
Color in Design
Color in UI Design – is much more than just choosing pleasant shades. It is a powerful communication tool that can convey emotions, influence the user's mood, and shape their interaction with the product.
Palette or color scheme — is a set of base colors used as the foundation for identifying your interface. It helps create cohesive pages, simplifies and significantly speeds up work, as the selection only needs to be done once.
Usually, a ready-made palette is used, which is based on the corporate style or promotional materials. If there are none, you can use the logo to get a few basic colors, and choose the rest yourself. If the client has nothing, then you create the entire color scheme yourself. It is better to work on creating the color palette after creating wireframes, to understand which interface elements and corresponding colors you will need.
When selecting a palette yourself, pay attention to the colors of competitors and adjacent areas. It would also be good to familiarize yourself with color psychology. Find as many existing examples as possible and create a mood board.
If you want to delve into the topic of color in UI design, I recommend purchasing my guide on color.
There are many services for creating color schemes (Adobe Color, Coolors, Colormind, Colorhunt, Palettr), which generate a new set based on just one base color or an uploaded image.
Composition and Margins
Composition is the way of organizing all interface elements so that the user immediately understands where to go and what to do next. A well-thought-out composition establishes a visual hierarchy: primary elements stand out due to size, color, or placement, while secondary ones are organically integrated into the overall scheme.
Among the main approaches to composition, one can distinguish symmetrical, asymmetrical, grid, diagonal, and radial. Each of these variants has its own characteristics and allows achieving a certain emotional and functional effect, depending on the project's tasks.
Symmetrical balance implies the reflection of elements relative to a central axis. This approach creates a sense of harmony, stability, and order, which is especially useful for projects where it is important to convey reliability and confidence. Users find it easier to navigate a symmetrical interface, as all elements are organized and predictably placed.
Asymmetrical balance is based on the uneven arrangement of elements, where equilibrium is achieved through variations in size, weight, color, or shape of components. This approach allows for a dynamic, modern look that attracts attention through interesting visual accents. However, asymmetry requires careful selection of elements to maintain the overall harmony of the composition.
UI designers actively use grid structures to organize space, as well as diagonal compositions that add a sense of movement and dynamics.
Margins are the space between individual elements that helps avoid interface overload and contributes to better readability. Clearly defined margins separate content into logical blocks, emphasize the connection between elements, and create a visual "breathing" zone. This allows the user to quickly orient themselves, highlight important parts of the page, and focus on key actions.
By observing whether the designer adheres to proper hierarchy and approach in creating margins, one can learn a lot about their experience in creating visuals.
Design Principles – are the foundation upon which every effective interface is built. They help create a clear visual language that facilitates intuitive perception of information by the user.
The main design principles include:
- Balance: an even distribution of visual weight creates a harmonious and stable interface, making it easier to perceive information.
- Contrast: using different colors, sizes, and shapes allows key elements to stand out, providing a clear visual hierarchy.
- Hierarchy: variations in sizes, colors, and positioning of elements help the user quickly determine the priority of information and the logic of the interface structure.
- Consistency: consistency in the use of styles, fonts, and other visual elements creates a unified, recognizable look for the product.
- Air: using free space around elements makes the design cleaner and easier to perceive, allowing important components to "breathe".
Selection, Processing of Icons and Images
Icons are simple and clear images for accelerating understanding and perception of information. UI designers often use ready-made icon sets, of which there are many (Fontawesome, Lineicons). Sometimes icons need to be edited or recolored. The UI designer must ensure that all icons are consistent in style.
Images are used to enhance presentation and complement text. Photographs and illustrations are cropped, resized, and color corrected.
There are free and paid websites for selecting illustrations and photographs (Freepik, Unsplash, Shutterstock). UI designers do not often draw icons and illustrations themselves. This is more the work of a graphic designer.
Selection, Processing of Icons and Images
Icons are simple and clear images for accelerating understanding and perception of information. UI designers often use ready-made icon sets, of which there are many (Fontawesome, Lineicons). Sometimes icons need to be edited or recolored. The UI designer must ensure that all icons are consistent in style.
Images are used to enhance presentation and complement text. Photographs and illustrations are cropped, resized, and color corrected.
There are free and paid websites for selecting illustrations and photographs (Freepik, Unsplash, Shutterstock). UI designers do not often draw icons and illustrations themselves. This is more the work of a graphic designer.
Applying gestalt principles in UI design allows for the creation of interfaces that users perceive logically and naturally. Mastering the topic of design principles requires separate material, where detailed examples will be provided.
Grids in UI Design – are a tool that helps to structurally organize space on the screen by breaking it into logical blocks. They provide consistency in the placement of elements, simplify responsive layout, and promote unity in the visual design of the product.
Column grids are one of the most common options and are based on dividing space into vertical columns with fixed or adaptive gutters. This approach allows for easy management of block widths, creating a clear and balanced layout that automatically adjusts to different screen sizes. The use of column grids significantly simplifies working with responsive designs, ensuring the preservation of proportions and clarity of structure when changing display sizes.
An example of using a column grid in real design:
Basic grids are used to organize elements both horizontally and vertically. They allow for the establishment of a unified system of rows and columns, which creates a clear hierarchy of information and determines the order of content placement. Such a grid often includes a baseline grid, which ensures consistency in spacing and alignment of text elements.
Modular grids are an extension of traditional grids, combining both columns and rows to form a grid composed of numerous modules. Each module can be used as a separate unit for placing content or combined to create larger blocks, making the layout more flexible and adaptive.
The use of grids in UI design helps reduce chaos in the arrangement of elements and provides a technical basis for building user-friendly, adaptive, and consistent interfaces. By utilizing different types of grids, a designer can achieve an optimal balance between creative freedom and structure, which is critically important for modern digital products.
Icons – are simple and clear images (pictures) for speeding up the understanding and perception of information.
The main rule that a designer should remember when working with them is that the icon must convey the meaning of the text it is linked to or replaces. If the image is not readable, it is better to remove the icon or replace it with another one.
An important part is the style. Icons should match well with each other and, of course, with the interface they are added to. Ready-made solutions can help with this.
UI designers often use ready-made icon sets, of which there are many (Fontawesome, Lineicons). Sometimes icons need to be edited or repainted. A UI designer must ensure that all icons are consistent in a single style.
Images are used to enhance the presentation and complement the text. Photographs and illustrations are cropped, resized, and color-corrected.
There are free and paid websites for finding illustrations and photographs (Freepik, Unsplash, Shutterstock). UI designers do not often draw icons and illustrations themselves. This is more the work of a graphic designer.
Where to Find Ideas?
Inspiration in the field of UI design can be found practically everywhere – the main thing is to be able to pay attention to details and analyze what exactly makes a product successful. Ideas often arise during the observation of the work of other designers, so it is important to constantly update your knowledge and familiarize yourself with new trends.
It is important not just to browse everything randomly, but to learn how to formulate targeted queries and search for the references that you really need. Also, create folders to save various ideas, so that in moments of acute need or a crisis of ideas, you can quickly return to what you have saved.
Before starting the work on a specific project, the UI designer also creates a mood board, that is, a board of mood. We will return to discussing the mood board in the upcoming lessons. There is even an option for collaboration with the client, where you first agree on the mood board. This is the idea stage. Then, based on it, you develop the design.
Imagine that you are a UI designer and today you are tasked with creating an interface for a new mobile application. First, you meet with the client and/or team to discuss the project goals, the needs of the target audience, and the key features of the product. This initial stage helps you to clearly understand the tasks and form the overall concept of the future interface.
Before diving into work in the graphic editor, you start collecting references for inspiration. You review the works of competitors, search for modern and trendy solutions, and analyze successful cases from various fields. This stage helps you determine the visual direction that will harmoniously align with the project's goals.
A little about the process itself. I will dispel a common myth. UI designers rarely come up with everything from scratch. Most often, they look for examples of work on sites like Behance and Dribbble, where the best colleagues from around the world share their work. This does not mean that everything is simply copied, no. But a designer can take note of some detail, a successful combination of colors, fonts, layout, arrangement of elements. Thus, a new design is gradually synthesized from your worldview and experience, as well as from already existing successful solutions. With the development of projects, you will gradually form your own unique style with unique features. But remember, this takes a lot of time and effort.
You may already have wireframes ready from a UX designer who has worked on the logical structure of the interface. Or you are that designer, as you perform both roles, UX and UI simultaneously. The wireframes contain the main blocks and the arrangement of elements, allowing you to focus on the visual design without spending time developing the structure from scratch. They become your foundation for further work on details and styling.
In some cases, wireframes are ignored and the design is jumped straight to. But if we are talking about a mobile application, then such an approach is not the best solution. It can be quite reasonable if you are developing, for example, a small creative website.
In the next step, you start creating the visual concept. Using the collected references, you choose the color palette, typography, icons, and other graphic elements that will help make the interface not only attractive but also intuitive. You carefully work on proportions, spacing, and composition so that each element aligns with the overall concept of the product.
At the final stage, you organize a testing session, showcasing your design to colleagues and potential users. The feedback received allows for adjustments, enhances the visual hierarchy, and improves the usability of the interface. Thus, through a systematic approach – from gathering references to the final presentation to clients – you transform ideas into a real, modern interface that meets high UI design standards.
Mockup (read as mockup) — is a design of a rendered page. Also, mockup refers to the design of a page or screen that is placed in a photograph or illustration with a device on which it is intended to be used. When you see a photo with a laptop and an open website, know that this is also a mockup.
Now let's take another task as an example, namely creating a website. Usually, the process begins with sketching layouts for the desktop version (that is, the version for monitors and laptops). However, for the development team to effectively implement your design, these layouts alone will not be sufficient.
Statistics from recent years indicate that more and more users are visiting websites from mobile devices. This is facilitated by significant improvements in mobile internet speed. Web pages on a phone load as quickly as on a PC or laptop. Therefore, the designer must think in advance about how the site will look and function on a smartphone.
Let's understand the difference between adaptive and responsive design.
The approach of adaptive design involves developing separate, predefined layouts for different screen sizes. You create fixed versions of the interface for smartphones, tablets, and desktops, each optimized for a specific category of devices. This allows for clear control over how your design will look at each breakpoint, but requires more resources to maintain multiple layout variants.
When developing this type of design, key display variants are highlighted, between which there is a sharp transition. These points are also called breakpoints. When resizing the browser window, the site will adapt in "jumps" when switching from one display to another. Each display can have a unique layout.
For example, the display for desktop computers (where large monitors are typically used) may include a right column with additional information. In the smartphone display of the same site, this sidebar will be hidden since the screen is narrow.
Responsive design, on the other hand, is based on flexible grids and relative units of measurement, which allows the interface to smoothly adapt to any screen size. You set rules for elements that scale depending on the space, thus ensuring continuous layout transformation regardless of specific breakpoints. This approach provides greater versatility but may require careful testing to achieve optimal usability across all devices.
When resizing the browser window, the design adjusts as if it were made of rubber. That is, the layout structure is static and the side columns do not disappear.
From my experience, I can say that responsive design works well with simple layouts where there are many similar elements: sliders, cards, simple texts. However, if we want to achieve greater creativity or demonstrate approaches to users that differ from the desktop version, it is better to work with adaptive design.
Creating layouts for separate versions of a site requires the following skills from a designer:
- Audience and Device Analysis: identifying the main screen sizes and breakpoints used by your users.
- Flexible Grid: using responsive grids for logical content distribution on the page.
- Content Optimization: scaling images and icons, using modern formats for fast loading.
- Responsive Typography: ensuring usability of buttons, menus, and forms on various devices, including touch screens.
- Interactive Elements and Device Features: ensuring usability of buttons, menus, and forms on various devices, including touch screens. Remember common gestures (taps, swipes, etc.).
- Accessibility: using high contrast and clear navigation to ensure comfortable use for all user groups.
UI Kits and Design Systems
UI kit (pronounced you-eye-kit) or User Interface Kit — is a set of interface elements for further designing web pages. The set will differ for a startup, a blog, and a social network. The most common elements include buttons, navigation elements, input fields, lists, switches, forms, and so on.
UI kits in modern graphic editors are made based on components. This significantly speeds up the process of making changes. Imagine the situation. You have 20 depicted screens. Suddenly, the client wants to change the button rounding despite all the designers' pleas. Using a component-based UI kit, you will only need to make changes in one place, and edits will automatically and instantly apply to all pages. Isn't it magic? Without components (for example, if you are using Photoshop), you would have to go through all the pages and redo each button manually.
Design System – is a more comprehensive tool that includes not only visual components but also a set of rules, principles, documented templates, as well as recommendations for the use of colors, fonts, spacing, and even code. The design system is created to provide a single standard for the entire team, including both designers and developers, and to ensure consistency across all company products.
The difference between UI Kits and Design Systems lies in the scale and depth of information. UI Kits are typically static collections of graphic elements used for quickly generating prototypes or as a base for visual design. The design system, however, is much broader: it includes both visual elements and principles that govern their use, allowing for the creation of not only beautiful but also functional interfaces that are easy to maintain and scale.
The former helps to quickly generate ideas and create prototypes, while the latter supports long-term unity, efficiency, and scalability of the product.
Also, remember that both the design system and UI Kit aim to assist not only the design team but also significantly ease and accelerate the development of the interface.
A Typical Day of a UI Designer
Like a UX designer, the morning begins with checking emails, planning tasks, or having joint calls with the team or clients. Next is the direct work with search engines, stock resources, technical specifications, conducted research, and of course, graphic editing software.
Most of a UI designer's time is dedicated to searching. We look for ideas and specific references for mood boards and layouts. We search for good, often free, fonts. We look for colors and compositional techniques. Sometimes we also look for content. This can include temporary photos, videos, icons, as well as those that will be used in the final product.
Since searching can take quite a lot of time, it's important to optimize the speed of working with graphic editing software. This allows you to quickly implement ideas, sketch several options, etc. Working with components, variants, and auto layouts will assist you.
UI designers create interface screens from scratch or visualize existing wireframes.
As you can see, a UI designer communicates less with people and draws more. However, communication skills must be developed in any case. After all, there is a presentation stage when the designer must defend their ideas. And when we talk about visuals, there may be an irrational factor of tastes and preferences from others. This is why a designer needs the ability to explain and advocate for their solutions.
Animation of Elements. The Work of a Motion Designer
In UI design, animations are used to direct attention, explain changes in states, create smooth transitions, and provide a wow effect. The main goal of animation is to ensure intuitive interaction: it helps the user understand what is happening and creates a sense of continuity in the process of using the product.
Microanimations are short, subtle effects that confirm user actions, signal active elements, or facilitate the perception of the interface. They can be displayed when buttons are pressed, content is loaded, or states of elements change, making interaction clearer and more enjoyable. Such animations are easy to create while working in Figma. For complex animations, Adobe After Effects or Adobe Animate is usually used.
In fact, a UI designer should not concentrate all their attention on working with animations. Because this is a separate direction with a separate specialist – a motion designer. Main tasks of a motion designer:
- Development of concepts and ideas for animations.
- Creation of storyboards and movement prototypes.
- Integration of animations into the final product. For example, using Lottie technology.
- Testing and optimizing animations for different devices.
- Collaboration with UI/UX designers and developers to align movements with the overall design.
It is also worth noting that a large part of the animations implemented in modern web products is created by developers using special ready-made css and js libraries. By working in a team with front-end developers, one can try to implement animations without the help of a motion designer.
Graphic Designer Tasks
This includes a wide range of tasks, but I have highlighted only the main ones that intersect with UX/UI design:
- Creating logos and branding;
- Illustration and icon drawing;
- Creating banners, marketing materials, packaging.
Unlike a UX/UI designer, a graphic designer sometimes uses additional equipment, such as a graphics tablet. In addition, an artistic education and the ability to draw can be very helpful in the profession.
Homework
From now on, this course is designed for independent study and completion of homework assignments. I understand that some tasks may be challenging for you.
For additional support, use the chat in Telegram. Here you can ask questions related to the lessons or review examples of correct completion from other students.
The chat is not available for citizens of Russia.
1. Go to the website Behance and save the portfolio options of three different designers: a UX/UI designer, a graphic designer, and a motion designer. One more condition – you should like the portfolios. You can share the links in the Telegram chat.
2. Imagine a situation: you are working in a team and have agreed with the client on the wireframes of their future application. But they have no idea what the application should look like visually. Now your task is to find 2-3 references for the client that will differ in style. Since this is a fictional task, choose the theme of the application yourself from the list below.
- Mobile application for fitness. Tracking workouts, meal planning, motivational reminders.
- Ready-to-eat food delivery service. Various diets, subscriptions, personalized recommendations.
- Budget (finance) planning application. Expenses, savings, expense diaries, payment reminders.
- Foreign language learning application. Daily lessons, gamification, social interactions between users.
- Online platform for finding tutors or courses. Teacher ratings, class schedules, reviews, specialization search.
- Application for mental health care. Meditations, stress relief tips, mood diary.
Look for references on the same Behance and save them as links.
Conclusions
Hello! This has been another comprehensive lesson in this free course. I hope it has become clearer to you what knowledge is needed for a UI designer and what tasks they face daily. To become a skilled specialist in this field, you need to delve into each of the sections separately. Good luck!
Complete your homework. Only practice will truly bring you closer to the desired profession.
Follow me on Instagram @frusia.pro, so you don't miss announcements of new lessons and receive useful tips for UX/UI designers, particularly about creating a portfolio and job searching. There are many practical posts waiting for you in the feed, which will help you improve your design skills every day. Join and develop your professional expertise with me!
Continue learning