UI / UX Designer - All you need to lean the profession

Grid is a universal standard in application production. It is represented by columns and gutters with equal sizes. We divide the canvas layout into columns that we separate with margins, using white space, between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design. The width of columns and gutters is not important. Designers create their grid based on their design direction for any particular project.

The golden rule of application design is: Measure everything and keep it consistent. It’s up to you as a designer to choose the spacing but it needs to be consistent across all your design files. Once you set the spacing for example between your header and sub-header you should keep it consistent and use the same spacing in all your files.

There are many ways to separate individual user interface blocks or elements in your views. You can use negative space, typography, color, border, drop-shadow. Try to avoid using too many borders or boxes in your views as it makes lots of visual noise. In the case where you decide to use border use light color or dotted line to remove the visual weight. The worst scenarios are when designers use boxes inside of boxes inside of boxes trying to separate elements.

You should do your best to bring the focus into the element that is really important and reduce the visual weight from everything else. You should always ask yourself these questions. Is there anything I could remove to provide better clarity? Is it clear what information is primary and what secondary? Separation of individual elements is great unless it is bringing more attention than the actual content. Remember content is the king.

Keeping user-interface elements balanced brings a high level of quality to your designs. Bringing balance to individual elements or set of elements is crucial but luckily math and symmetry can help. Have a look at example 1 where the text in the button is way too big on the other hand in example 2 where the button is divided into 3 equal parts the text feels just right.

Icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons communicate via the images showing pictorial resemblance with an object of the physical world. They are used in the modern interface to support its usability and provide the successful flow of human-computer interaction. One of the most important benefits is the ability to replace the text especially in interfaces used by users from various countries speaking different languages.

For the purpose of application design, we are only going to explain the core foundation of typography. Working with letter spacing can increase readability, especially on small text sizes where letters might be too close together by default so you need to adjust the settings. There are two types of types: serif and sans serif. A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter. Weight of the text is a very useful tool which you should be using often to bring structure to your designs. Weight refers to the relative thickness of a font’s stroke.

Working with text requires paying attention to hierarchy. The hierarchy is achieved with text size, weight and style. Having a strong hierarchy helps users to understand the structure of the content and quickly scan the content when looking for specific information. As a designer, you will be setting up the structure defining text sizes, weight and style for your project. The most important part is to keep things consistent. All your header 1 should look exactly the same as well as header 2 and so on. The same applies to the body text, button text, form text, label text and so on.

Providing color contrast is a powerful weapon but its absence could make your application unusable. When there is not enough contrast, users will simply not be able use it. There are color contrast checkers on the web which can give you a ratio when comparing two colors trying to find out if there is enough contrast. Using color and color contrast in typography is a great way of building information hierarchy in the view.

When building your color palette for an application you should always start from black, white and greys. These primary colors are the best suited for user interfaces as allow people to concentrate on the actual content. Your secondary set of colors will be based on the actual company branding, design guidelines or you can simply pick two, tree colors which you will use for some of the UI elements like buttons, icons etc. If your project includes multi-color elements like charts you will need to prepare a tercial set of colors, this could require 12, 24 or even more colors depending on the project need. Creating light options from your color is simple. Position the color layer on white layer and adjust the opacity accordingly 80/60/40/20/10 %.

There is no single way to display any type of information. In the example, you can see that the same information can be displayed in many different ways, and they all can work depending on the use case. You should be asking yourself constantly question: What is the importance/priority of the information? How much real estate there is available? How does the element look when there is only one and how does it look when there are more of them? Does it accommodate for longer text?

UI ELEMENTS

UI elements in your UI library of design guide should only be defined once per each element and used across the whole application. Using multiple styles for single elements in different views could cause confusion among users and is not a good sign of great design. As you can see on the examples on the right, both of the UI switches are great switches and could work on any project but you need to choose one style and use it everywhere. It is up to you as a designer which style you choose.

TABLES

Tabular data allows displaying a big amount of information in a relatively small space in a structured way. We are usually dealing with a big amount of information, so we need to be really careful and consistent with all design aspects so the data are easy to read and understand. Consistency in the font, font-sizes, spacing, border sizes, color is crucial to provide a structure when dealing with big data is not painful.

SPACING

Keeping spacing consistent around text blocks, headers, buttons, icons, cards, form elements are something which will become second nature as you gain more experiences. You should never position an element on the canvas without thinking about its effect on all the other elements and structure. Guides are vertical and horizontal lines used in tools like Adobe Xd which will help you to have the consistency of spacing under control. The size of the spacing might be based on the grid you are working with or your personal preferences but you will always need to apply consistency.

ICONS

Working with icons requires some elementary rules. You should be using icons from icon-set produced by a professional designer. All the icons in the application need to be the same style to keep it consistent. It does not mean your icons need to be monochromatic you can use icons with the same style and still use different colors, but visually, they need to be part of the same visual family. You can see on the left image that there are two icons which do not really fit even they might be the same size. They are not only multi-color while the others are monochrome, but they are also representing a totally different style.

FORM ELEMENTS

Consistency in form elements is defined by equal spacing, font and font sizes, border styles and border height, placement of labels, buttons and so on. The application usually deals with lots of forms. Your job is to provide a clear structure where the form does not feel too heavy and discourages users from filling it in. Using consistent label alignments and font styles allows users to scan the form content easily. Having consistent input styles allows users to understand which element needs to be filled in and which one is just description or comment.

FONTS

When applying font variety less is always more, especially when working on application design. In most cases, three types of font-families should be more than enough for your project. Applying a font consistent way is a sign of great design. You should always look for branding guideline of the project first when applying fonts. Font consistency means that all your body text will use the same font, all your labels, numbers, headers, form elements and so on should always use the same font.

COLORS

Color consistency comes down to strict color palette. Any element you design on a project needs to be built by using one of the colors from the color palette. You should not be introducing new colors outside color palette. As you can see in the example on the right, there are only a few colors used to build the interface. The exact same blue color is used on icons, charts and buttons. It is up to you as a designer to decide which color will be used and when but you should always follow rules of consistency.

ICONS

There are various online resources which can provide you with a great set of icons. Font icons are quite often used In the application design as they scale to any size and can easily be used in the design process as well as development.

• Fontawesome

• Google Material

• Thenounproject

FONTS

There are various online resources where you can find fonts for your projects. Make sure you understand the company branding and design guide before choosing fonts for the project.

• Google Fonts

• Adobe Fonts

COLOR

There are various online resources which can help you building color themes, picking interesting colors or creating gradients. Make sure you understand the company branding and design guide before choosing colors for the project.

• Colors

• Colorhunt

• Uigradients

Artboards typically represent each of the screens that you want to design as part of your application. You can have many artboards in a single Adobe XD file. You can choose a preset size for the artboard at the beginning of your project from the Start screen.

By default, each object in your project resides on its own layer. For example, when you draw a rectangle, a new layer for this rectangle is created. When you draw another rectangle, a separate layer is created.

History tool is used heavily in the design process. Not only you can revert any changes you might have done by mistake but also allows you to switch between two historical changes back and forth and see which of those options works better for your project.

Zoom is an absolutely crucial tool for any designer, especially for the application designer To be able to adjust even the smallest details in your mockups you will quite often need to apply maximum zoom which allows you to see every single pixel in full detail. Maximum zoom will scale your canvas into 6400%.

Rectangle Tool is one of the most useful tools for application design. It is used heavily in all types of applications. To list just a few: navigation bar, footer bar, sidebar. cards, background boxes etc. You can create them simply by selecting the rectangle tool and clicking on the point very the top left corner should sit and pulling in diagonal into the point where the bottom right corner will be. You can change the height and width of the rectangle anytime by simply dragging its borders.

Ellipse Tool is used in application design mainly for avatars & icon backgrounds. You can create ellipse by selecting the ellipse tool than drag diagonally. Press Shift on the keyboard to draw a perfect circle. You can change the height and width of the rectangle anytime by simply dragging its borders.

Line Tool is used for separating of UI elements visually but having too many borders and too strong borders bring visual noise which should be avoided. Light borders are great separators as well as dashed borders. It is important to keep consistent spacing around borders to keep the structure clean.

Color can be applied to any visual element. Rectangle, ellipse, line, text. Color can be applied in two ways either as a filler or as a border. Color can be picked from a color picker or eye picker can be used to pick an existing color from the interface. Additionally, you can reduce the opacity of the object to make it transparent those reducing the strength of the color. Please note that reducing opacity will make the object semi-transparent depending on the percentage you set. The layer positioned below the current layer will be partially visible.

A gradient is a tool which allows you to create a visual effect where two or more colors blend smoothly together. You can choose the colors and the direction in which the colors blend. The gradient can be either linear or radial. You can even set the direction for linear gradient: horizontal, vertical, diagonal is the basic but you can choose any angle. In application design, there are often used smooth gradients for elements like buttons or background for big text elements where you use two shades of the same color to provide just a bit of plasticity as it is done on the example on the right.

Drop-shadow is a great tool to provide visual separation of elements or to make an element prominent among other elements. Try to avoid heavy drop-shows which bring lots of visual noise. Applying smooth soft drop-shadow where elements look elevated works the best and do not distract users.

Opacity or reduced transparency can be applied to any element. It mostly used for overlays on top of images to provide better readability. Transparency is often also used when creating color palette. Once the core colors are defined, and we want to create a scale of lighter versions we can place them on top of the white background and gradually reduce the opacity to create full-color palette.

Applying group masking to two or more layers means that you are limiting the visibility of a portion of one layer by another layer object. In the example on the right, you can see an image which is a lot bigger than the rectangle object. Creating a group mask only shows the portion of the image which fits into the rectangle object. None of these changes is destructive, you can come later and move the image around to show a different part to the image.

Working with text requires mastering a few different text properties. Text alignment, line-height, letter-spacing, font-size, font-weight as well as font itself. Additionally, you can set text color, border, opacity and shadow as part of layer settings.

Font icons are very popular in application design due to a couple of reasons. Font icons are great to use in the design process as well as the development process. They can be scaled to any size without losing quality and are easy to install and use. You would install font icons the same way you would install any other font.

Two most popular libraries are:

• Fontawesome

• Google Material

Text fields are an elementary part of any application. Inputs belong to forms and they are used to fill a database with data which are then displayed in views. There are various way text fields can be displayed. Text fields have four different states which need to be designed.

• Default text field - when the view loads

• The text field in focus - when a user clicks on taps into it

• Invalid text field

• Valid text field

There are various button types used in application design.

• Contained Button

• Outlined Button

• Text Button

They all have their place in app. design. Using various button types brings visual hierarchy to the view. A strong contained button can be used for the primary action in the view while text buttons can be used for secondary actions which are not used as often.

Sliders are a great way to provide a better user experience. Rather than letting the user type the values, you can provide slider which can easily be dragged. A slider is not a solution for every scenario though. If you need to specify the exact number, dragging the slider around just to be able to specify number 33 exact could be even more time-consuming then typing the number into a text field. It is up to you as a designer when you believe the slider is the best option for the job. Sliders are often used for setting the volume or video content where you do not have to specify the exact number but rather bring the volume up and down a bit.

There are three types of selection controls used in application forms.

• Checkboxes - are used when there are multiple choices and multiple selections are allowed.

• Radio buttons - are used when there are multiple choices but only one option can be selected at a time.

• Switches - are used as a representation of state ON/OFF.

Chip is a great tool to display information in a clear and visually interesting way. They can be used to replace a simple list of options as an alternative to radio buttons or checkboxes. They are also used as a list of information, tags for example. Chips are used in many different ways.

• Text

• Text with icon, image or avatar

• Text with action button (e.g. “delete”)

Chips could be informational only or selectable with hover & selected state.

Tooltips display informative text when users hover, click or tap an element. Tooltips often display navigation text when the user hovers over the icon in the navigation. They can also display information block which consists of images, icons, chips, text. It is up to you as a designer to decide which information needs to be visible at all times and which can be hidden and show in the tooltip as a reaction on the user’s action.

Cards represent grouped content and actions regarding a single topic. Cards usually consist of media, text, icons, thumbnails and actions. A card is made of content blocks. Separating content blocks creates a clear structure. Cards can appear individually or as a set of cards placed on a grid.

Dialogs inform users about a task which requires user action. It is often used to confirm delete action or in cases where the application is requesting user permissions. It can also be used to as multi-choice dialog where the user is requested to choose from multiple options.

Lists consist of vertical blocks of text or images. The lists are a great way of providing easily scannable content because of its clear and repeating structure. They are often used to list products, features, users etc. The list blocks can consist of text, media, icons, avatars.

Tables are a great tool to display a huge amount of data in a structured way. Keeping tables visually light helps users to work with tables. You should provide enough spacing in table rows and header and avoid using strong heavy lines to avoid visual noise.

There are many ways how navigation can be presented in the application. It can contain text or icons only but it can also contain icons and text together. Navigation is usually placed on the top part of the interface or on a side. In some case, it can also be placed at the bottom. Active state of navigation can be presented with the use of colour, opacity, borders or background colour, but it needs to be always clear which element is the active one.

Charts are used to display tabular data in a way where single glass provide the data sequence, progress or direction. There are many chart types used in applications but the most used and the easiest for a user to understand are:

• Bar charts

• Line charts

• Pie charts

• Doughnut charts

The most common use of charts is dashboards, mainly on financial products.

A menu displays a list of choices. They are hidden by default and get displayed when the user either clicks/taps or hover over a predefined element. They are often used in primary application navigation. Menu elements can consist of text or text with an icon. A simple menu is only one level deep while complex menu can contain cascading menus where parent element in the main menu contains a secondary menu which appears when a user hovers over that element. Triangle is used to indicate there is a secondary menu available.

Steps are a great tool when you need to divide complex flows so the user does not feel overwhelmed. The clear visual indicator of the current step needs to be presented so the user does not feel lost and knows how many more steps he/she need to accomplish.

Snackbars are used to inform the user of the action they need to take or results of actions which has already taken place. Snackbars are often used for confirmation messages such are the creation of new object, removal or update of the existing object. Error messages are often displayed in scnackbars. Snackbar can contain text, text with an icon and or with a button. Some snackers are set to hide automatically others need to be closed by clicking the close button.

Wireframing is a very useful tool used by designers to provide the idea of interface with all its functionality without letting emotions affect decision making. Wireframes typically use white, grey and black colour only. The fonts, sizes, spacing, button styles used in wireframes not representing the final product. Wireframes are concentrating on layout and functionality. They are a great way of communicating how the interface could work rather than look. They are two types of wireframes: Low fidelity & High fidelity

Creating high fidelity wireframe requires using all the standard rules of good design. It provides clients with a clear visual understanding of what the product’s functionality is, what are the interface components, layout. Without wireframes, you are putting your team at risk of repetition and misunderstandings.

User Flows are often used to visualise how users will actually use the application. User flows are presented on a single canvas where designers show how the user gets from one screen into another by providing an action. (Clicking a button, menu item, select an option from menu etc.) Sometimes only the main flows are presented in other cases all possible user flows are shown with all its variations. As you can see in the example on the right. In the first flow, the user logs into an application and is presented with a dashboard. In the second example, a user creates an account and is presented with empty view prompting for action.

Prototyping is a great tool to mimic the behaviour of the application. Prototyping software allows you to connect two static images the way that you can tap on a predefined area on the first image and show another image. A prototype allows your clients to test the user flows the way the application users would but with creation limitations. You can’t enter any text for example. There are various tools you can use to create a prototype. Adobe Xd has already prototyping build in but you could also use web apps like Marvelapp or Invision.

We will be replicating Instagram profile view with a little bit of design direction. We are keeping most of the functionality but changing layout, colours, icons and typography a little bit. The goal of this exercise is to practice spacing, use of basic shapes and icons. Colour theme was inspired by the Instagram icon.

In this exercise will be replicating simplified facebook interface. A web version of Facebook on a large canvas. We will be practising the use of basic shapes, icons, colors, and layout for a web application.

You might be asked to provide several different versions of the same view and work on additional iterations later. In another case, one version could be enough but you usually end up providing iterations based on customer (manager) feedback. Iterations and versions are part of the standard workflow. Your first version represents your idea of how you understand the spec and with every iteration, you are getting closer to the final product.

As an application designer, you will be getting the specification from your clients or managers based on which you will be providing your wireframes and design mockups. The specification is quite often provided in spreadsheet, text document or even hand-drawn image. Take time to study the specification and ask questions. You need to understand the project and all the functionality of the application so you can provide good solutions to those individual challenges.

During the wireframing phase, we will create wireframes for each screen specified in spec. We will connect all the user flows into a clickable prototype.

In this project, we will be mapping up the basic user flows such are:

• Search for a flight

• Book a flight

• View Deal page to select a flight

• View Destination page to select a flight

In this lesson, we will connect all the wireframes we have created in the previous lessons into an interactive prototype.

During the wire-framing phase, we will create wireframes for each screen specified in spec. We will connect all the user flows into a clickable prototype.

In this lesson, we will extract all the UI elements from our design mockups into Design Guide document. Design guide should contain all the aspects of application design:

• Typography

• Iconography

• UI Elements

• Colour palette

When your design work is finished and the client is happy with your work you will have to hand off the files. Normally you would create a shared folder on Google Drive, Dropbox, Microsoft One Drive. If the project is too small email might be good enough. Depending on the client and their workflow you might be asked to provide your mockups in JPG or PDF format. More tech-savvy clients might require uploading the files to web applications such are Zeplin or Invision where their developers can get the assets, colours, sizes directly from the Xd files.

COMMUNICATION

Talk to your client daily. Inform them about your progress. Ask them for feedback. Make them feel they have control over the project.

EGO

Leave your ego at home. Be nice, polite and do not push your opinions on the client. Try to see it from their side and offer solutions, variations, iterations.

YOUR NAME IS THE ONLY THING YOU HAVE

Remember that most of the work is passed by recommendations. Always make a good impression. Be on time. Reach all deadlines and if you can’t overcommunicate.

Your client is paying for the project and he needs to be happy during the process and after the work has been done.

Once you design a few applications you will need to create a portfolio where you will present your work. A portfolio is absolutely crucial for any designer. It is more important than any school degree. There is plenty of option to choose from. If you can code it up yourself that’s great but if not don’t worry there are plenty of ready-made solutions. Here are a few popular at the moment.

• Adobe Portfolio

• Behance

• Squarespace

• Wix