Today, let's look at what tasks a UX/UI designer usually performs, what programs are used for this. Let's touch on graphic design in the context of UI design. I will introduce you to new words that you will encounter daily at work. A lot of information resonates with the last lesson, but today we delve into the details and learn professional terms.
You only need to know Figma to get started, but over time you will develop and try new software. After reading, you will be able to navigate and figure out what to learn next.
Having mastered one graphics editor, you can quickly switch to another - the differences are minimal. For example, the programs Figma and Adobe Xd almost exactly copy Sketch.
And, of course, we will understand the difference between vector and raster graphics.
- The Tasks of a UX Designer
- Creating a user flow
- Task Flow
- Wireflow
- Screenflow
- Rendering Wireframes
- Low-fidelity wireframes
- High-fidelity wireframes
- Prototyping
- Usability testing
- UX Designer Tools
- UI Designer Tasks
- Selecting a color palette
- Working with typography
- Selection, processing of icons and images
- Create a UI set
- Page rendering
- Creating Responsive and Responsive Design
- UI Designer Tools
- Graphics
- Vector Graphics
- Raster graphics
- Graphic Designer Tasks
- Graphic Designer Tools
- Homework
- Conclusions
Let's say we were hired by a company at a very early stage of the site's creation. There is nothing yet, no sketches of screens, no design, only technical documentation is ready. The project manager explains that the new service is for buying and selling all sorts of things. We are given the task of coming up with a user flow to buy a product.
User flow (read user flow) — this is a step-by-step scheme of interaction with a website to solve a task set by the user. Includes actions and transitions between screens that the user goes through to achieve their goal.
Let's get a little more specific and imagine that our imaginary user wants to buy a bike.
The flow user must answer these questions:
- Who is the user? We have a buyer (user role);
- What is his purpose? Wants to buy a bike. The answer follows from the manager's task;
- What steps do you need to take to complete the goal? What exactly does a user need to do to buy a bike. Which buttons to press and which screens to go through?
Now the UX designer gets to work. Answering the last question, we can assume that the user will start from the main page, where he will write bike in the search form. Then it will go to the search results page with photos and prices of bicycles. Having chosen the appropriate one, it will go to the next screen with more detailed information and the buy button. Clicking on it will take you to the payment form. After confirmation, the buyer will see the message thank you for your purchase.
This answer is oversimplified, but should give you an idea of what kind of information a user flow carries. In practice, you must draw the circuit. Depending on the level of detail, there are 3 types: task flow, wireflow, screenflow.
Task flow (read task flow) — task sequence. This scheme includes only the names of the screens and actions. Often you don't even need to touch the computer, you sketch with a marker in a notebook or on a whiteboard. Schemes can branch depending on user actions:
Remember the key points when compiling a task flow:
- The rectangles contain the name of the screen (main page, search results, product details, shopping cart, payment method selection, and so on);
- Under the screen (rectangle) it is sometimes useful to describe the possible actions of the user, but only if it is necessary – avoid over-development (this is done at the stage of drawing wireframes);
- The arrow indicates the transition between screens. For clarity, they can be signed (click the buy button, click on the search result, click on the card)
After drawing and editing on paper, you can redraw the diagram in a graphics editor, sometimes this is done right away:
Wireflow (written together, read wireflow) — it is a sequence of sketches of screens (wireframes). This scheme includes rough sketches of screens with important interface elements (buttons, input fields, places for pictures) and actions. They are also often drawn by hand:
Detailing and elaboration depends on the situation. In this example, everything is simplified to the maximum, but the main interface elements on each screen are clearly distinguished. For clarification, all the details are written in text:
Screenflow (written together, read screenflow) — a sequence of screens with a finished UI part. This view is used in later stages of development. Here, the design of each screen is made with maximum (final) detail. It is performed only in graphic editors and specialized applications (for example, Overflow helps to draw arrows between screens):
Wireframe (pronounced wireframe) – it is a static sketch of a particular screen that determines the location and size of UI elements. The visual part is always limited to a black and white palette and simple shapes.
If we continue our assumption with working in the company, then after discussions we may be asked to draw wireframes for the main screen and the user flow of the buyer.
Depending on the task, it can be used both in technical documentation for developers and as a basis for a UI designer. They can be performed similarly to user flows in a notepad, on a whiteboard or in a graphical editor. There are even special programs for simulating hand-drawn sketches on a computer (Balsamiq Wireframes).
Drawed to determine or at least suggest how to arrange interface elements so that the user can use the site as conveniently as possible, perform specific tasks.
The image above shows a wireframe on the top left, and the finished design on the right (UI designer tried). According to the level of detail, wireframes can be divided into two types.
Low-fidelity wireframes
Low-fidelity wireframes (pronounced low-fidelity wireframes) – very rough and quick sketches of the screens. Usually contain a minimum of text, in most cases it is replaced by horizontal lines, all buttons and images are shown as rectangles (circles are sometimes used). Often the location and size of the elements are approximate.
High-fidelity wireframes
High-fidelity wireframes (pronounced high-fidelity wireframes) – accurately executed sketches of screens. Contain all text; the location, size of buttons and other elements is as close as possible to the final design. They require much more time to render, contain more details.
Prototype (read prototype) or interactive prototype – it is a screen design that reacts to user actions. That is, this is not a static picture, as is the case with wireframes or user flows. Prototypes allow you to understand how the website will work before programming, to identify problematic and inconvenient screens. Often used for testing on real users.
Interactive prototypes run in a browser on a computer or in dedicated apps on a smartphone and can look and behave like real finished products. But in fact, these are just fakes, no serious calculations or data processing can be performed there.
Our interactive prototype based on previous sketches can be used for further testing. For one function, sometimes several prototypes can be developed, and based on usability testing reports, a decision is made which option to approve.
Usability testing (usability) or ergonomics testing – this study is to test how convenient it is to use the interface to perform a specific task. Such tests are performed on real people using interactive prototypes.
In most cases, the UX designer will hand over the device with the prototype running, explain what needs to be done, and observe the user. Further, everything is carefully outlined and further analyzed. Sometimes a voice recorder is used for commentary. After running a lot of tests, you can draw conclusions about how successful the selected interaction experience is or which hypothesis worked better.
There are also special services for remote usability testing. There, prototypes run on users' computers and a video recording of the screen is made with the voice comments of the test subjects (sometimes a video is recorded from a webcam, so you can even see the user's facial expressions and emotions).
- Notepad and highlighter – allows you to quickly create rough sketches of wireframes, make sketches of user flow. An indispensable tool in the early stages;
- Figma — ideal for all tasks. It even allows you to create interactive prototypes with simple animation and run them on your smartphone. Works on all platforms (Windows, macOs, Linux) and in the browser. Comes with free wireframe pack Competitors are also pretty good – Sketch and Xd – has everything you need;
- Moqups — a specialized application for creating wireframes and a user flow with components for all occasions (for websites, mobile and desktop applications). It will come in handy if you don’t want to draw everything manually or if you don’t have time to search for ready-made libraries for Figma. Works directly in the browser. Registration is required, but the features of the free version are not bad;
- Axure — advanced work with interactive prototypes. It is possible to generate HTML, which then allows you to embed Google Analytics (or any other service for tracking user behavior) and conduct complex remote usability tests.
UI design includes the visual part and determines the look and feel of the site. This is one of the final steps in the UI development process where we are working on a very precise version. The scope of tasks is very wide and can compete with the design of the user experience.
Color Palette or Color Scheme — this is a set of basic colors that are used as the basis in design. It helps to create complete pages, simplifies and greatly speeds up the work, since the selection needs to be done only once.
Usually, a ready-made palette is used, which is based on the corporate identity or promotional materials. If there are none, then you can use the logo to get a few basic colors, and pick the rest yourself. If the client has nothing, then you do the entire color scheme yourself. It is better to create a color palette after creating wireframes in order to understand what interface elements and colors you need accordingly.
When creating a color set yourself, pay attention to competitor colors and adjacent areas. Find as many existing examples as possible, make a moodboard.
There are many services for creating color schemes (Adobe Color, Coolors, Colormind, Colorhunt , Palettr) that generate a new set based on just one base color or an image you upload.
Working with typography
Typography — these are the rules, principles and techniques of text design. Typography is one of the branches of graphic design. Allows you to present the text in the most understandable way for the reader to understand. The UI designer is engaged in the selection of fonts, determines the size, style, spacing between lines and characters. Specifies styles for headings, paragraphs, lists, and other page elements. Here are some key terms from typography.
Font — it is a set of characters designed in the same style and making up a single system.
Typeface — this is a set of fonts combined into one family.
Size — this is the height of the font letter.
Leading – this is the line spacing or distance between lines.
Let's get acquainted with typography and its basic principles in more detail through the lesson. In the meantime, you can appreciate how difficult this discipline is in the figure below.
Selection, processing of icons and images
Icons – these are simple and clear images (images) to speed up the understanding and perception of information. UI designers often use ready-made icon sets, of which there are a great many (Fontawesome, Lineicons). Sometimes icons need to be edited or recolored. The UI designer must ensure that all icons are in the same style.
Images are used to enhance presentation and complement text. Photos and illustrations are cropped, resized, color corrected.
There are free and paid sites for selecting illustrations and photos (Freepik, Unsplash, Shutterstock). UI designers rarely draw icons themselves, let alone illustrations. This is the job of a graphic designer.
Create a set of interface elements
UI-kit (pronounced yu-kit) or User Interface Kit — this is a set of interface elements for further development of site pages. The set will be different for a startup, a blog, and a social network. The most common elements are buttons, navigation elements, input fields, dropdowns, radio buttons, forms, and so on.
UI-kit in modern graphic editors is based on components. This allows you to significantly speed up the introduction of edits. Imagine the situation. You have 20 rendered screens. Suddenly, the customer wanted to change the rounding of the buttons despite all the persuasion of the designers. Using a component-based UI kit, you only have to make changes in one place, changes on all pages will be made automatically and instantly. Is this not magic? Without components (for example, if you use Photoshop) you will have to go through all the pages and redo each button manually.
Page rendering
Based on the created color scheme, typography, grid, UI kit, rendering of the main pages begins. If the customer approves the design, then all other pages of the site are taken into work.
A little about the process itself. Let me dispel a common myth. UI designers rarely come up with everything themselves from scratch. Most often, they look for inspiration on sites such as Behance and Dribbble, where the best colleagues from all over the world share their work. This does not mean that everything is just copied, no. But the designer can peep some detail, a good combination of colors, fonts, grid, layout of elements. Thus, the new design is gradually synthesized from the worldview and your 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 will take a lot of time and effort.
Mockup (read mockup) — this is the design of the rendered page. Also, mockup is the design of a page or screen that is inserted into a photo or illustration with a device on which it is supposed to be used. When you see a photo with a laptop and a running website, then know that this is a mockup.
Creating Responsive and Responsive Design
Adaptive design (pronounced responsive design) or responsive design — it is designing a site that changes its layout depending on the device (screen size), based on several fixed-width layouts.
When developing this type of design, key display options are highlighted, between which there is a sharp transition. When resizing the browser window, the site will change "jerky"; when switching from one display to another. Each display can have a unique layout.
For example, a display for desktop computers (where large monitors are commonly used) the design might include a right column with additional information. The display for a smartphone will simply hide this side column, since the screen is narrow.
Responsive design (read responsive design) or responsive design — this is a subset of responsive design, where the transitions between display options are smooth. When the browser window is resized, the design adjusts like a rubber band. At the same time, the layout structure is static (side columns do not disappear).
All three programs do a great job with all the tasks of a UI designer. After learning Figma, you will quickly master the rest to get more customers.
- Figma – clear favorite of the list. Provides the widest possibilities for the UI designer and works on all platforms (Windows, macOS, Linux) and even in the browser. At the same time, it does it very quickly and for free;
- Sketch – paid ($99 with annual updates) graphical editor for macOS only. It was he who served as inspiration for Figma and Xd. It is the most popular of the three due to its age. At the same time, Figma is inferior in some functions (for example, there are no color styles);
- Xd – A free graphics editor for Windows and macOS from Adobe. It has a good feature set and is a great fit, as are the other two on the list.
Types of graphics
Graphic resources are divided into raster and vector. As you begin to practice, you will see how this affects performance. Now I can only explain it in theory.
Vector Graphics
Vector Graphics describes an image using mathematical formulas, or rather bezier curves. Such an image does not lose quality when enlarged compared to a raster. This is its main advantage. Used mainly for logos, icons, illustrations. By the way, Figma, Sketch and Xd are mostly vector editors, but have a minimal set of functions for working with raster.
Raster graphics
Bitmap Graphics describes an image using a set of colored dots. When you zoom in on such an image, you can see pixels — the smallest elements of a square shape. Used for photographs and illustrations with a lot of color. Photoshop is the most powerful bitmap editor, although it can work with vector shapes.
If we open bitmap and vector images in their respective editors and enlarge them, we will see that:
- The enlarged raster is a grid of pixels;
- The enlarged vector is drawn with the same quality and consists of points and levers that define the curvature of the lines.
Graphic Designer Tasks
This includes a wide range of tasks, but I have highlighted only the main ones that intersect with UX / UI design:
- Logo drawing and branding;
- Rendering icons;
- Render illustrations;
- Render banners, marketing materials, packaging.
Unlike a UX/UI designer, a graphic designer sometimes uses additional equipment, such as a graphics tablet. In addition, art education can greatly help in the profession.
Depending on the preferences and style of the graphic designer, both raster and vector editors can be used.
- Illustrator – powerful paid ($21 per month) vector graphics editor for Windows and macOS platforms from Adobe. Used for drawing and editing icons and illustrations;
- Photoshop – powerful paid raster editor from the same company. Perhaps this is the most functional raster editor in existence. Allows you to prepare, retouch and change photos beyond recognition;
- Gimp – free raster graphics editor with a wide range of features, which is inferior to Photoshop only because of its youth.
The list does not include Figma, Sketch and Xd, although they also allow you to work with vector graphics, draw icons and illustrations (which will be quite enough for us to start). But when working with a raster, these programs have very serious limitations. You only have access to photo cropping, basic color correction and masks.
Homework
- Select the site you visit daily. Draw tax flow in notepad for two typical use cases for this site.
- Come up with a new feature for a site you've used at least once (not necessarily your favorite from the first task). Draw a task flow for this new feature.
- Draw a wireflow for the scenarios from the first task. You can use a pencil or wiping pen to make edits. Try to approximate the proportions of the original.
- The last task of increased difficulty. Draw a wireflow for the scenario from the second task. You have to be very observant here, as you don't yet know what interface elements exist at all. But you can peek at other sites.
Take a photo of your user flow and send it to Instagram direct to @frusia.pro (do not forget to indicate that this is for the third lesson) or leave links here in the comments below the lesson (I will later replace the links with pictures right in the comments).
For each answer, I will give feedback, so you make sure that you have learned the material correctly.
Conclusions
So we got an idea of what a UX / UI designer has to deal with in their daily work. It was the longest and most difficult lesson with a lot of new terms. Please study it thoroughly and do your homework. All this is just a theory, next time (the lesson will be released in a week) we move on to practice, namely to the study of Figma. I promise it will be even more interesting!
Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.
Stay tuned!
