UI/UX design guide with terms, explanations, tips and trends

Iren Korkishko
Jan 17, 2019 · Unlisted

A longread aimed to gather all the theory about UX and UI design processes for creating web and mobile application design

Originally I shared this guide to Syndicode blog to describe UI and UX design processes we use in the agency. Since this material appeared to be quite informative and guide-alike, I decided to share it.

So, you know that design defines the success of most software products. And software development discovers new ways to use the design for various products. I talk about design for websites and applications. There is no great app without stylish elements and usability. The effectiveness of the application is measured by the optimum combination of functionality and attractiveness. Visual communication must be simple, intuitive and engaging.

The role of UI/UX design

Designing applications and websites pose special challenges:

  1. facilitating intricate tasks and workflows,

But that worth it! Because an effective design and implementation of applications can have profound, positive implications for productivity, efficiency, accuracy, and satisfaction in a huge range of environments — from entertainment to healthcare.

You could have heard about UI or UX design before but never actually had a chance to get what, where and why it is used for. And no, UI and UX are not the same things. Read about principle differences between UI and UX before you went further. UX is the overall experience a user has with the product, and UI is the things the user will actually interact with and see.

A value of a great design

The key to successful application design is not a good idea or a good feature — it all comes down to the user experience (UX) and the user interface (UI). It doesn’t matter how great your idea is if the app is looking horrible and impossible to use easily.

If you’re developing a web or mobile application, one of the major things you need to get right is the way your app looks and feels. For example, if your field is eCommerce, a poorly designed app will lose you many potential customers.

For example, what does your application user see first when opening your app? The first thing your user sees is the landing page. What is a landing page? This is a start point from which the user understands if the application or a site will meet his/her requirements and fulfill the needs. It must be attractive and contain some call-to-action buttons for the user to know what to do next.

To add the value to the work of UI and UX designers, here you can find some interesting UI vs UX comparison:

  • UX designer is like an architect. This person takes care of users and helps your business to improve measurable parameters (reduce bounce rate, improve CTR and so on). UX designer understands user behavior and psychology, knows a lot about interface ergonomics and able to analyze business needs to convert it into the user flows.

Sometimes UI and UX designer is the same person who is in charge of the whole design process. But let’s discuss each type of design separately.

What is UX design?

UX (User Experience) design is the process of creating products, systems or services that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function. It also includes the meaningful and valuable aspects of human-computer interaction and product ownership. UX handles the architecture of the content and the sitemap.

As a spoiler, I’d like to say that UI (User Interface) design, we’ll talk about in the next part, is an important aspect of UX design, it is a subset of it. Because UX design covers a vast array of other areas. Information Architecture (IA) is the second most viable aspect of UX design.

UX design helps users accomplish goals. It is not focused only on creating products that are usable, it also covers the other aspects of the user experience, such as:

  • pleasure,

So far, the good user experience is one that meets a particular user’s needs in the specific context where the target audience use the product. UX design is user-centered — the type of user defines the type of design.

That is why UX design is dynamic and constantly modified over time due to changing usage circumstances and changes to individual systems, usage context in which they can be found and so on. Here you can find some UX design trends that are expected in 2019. Also, we can say that user experience is about user-product interaction and experiences.

The main task of UX design is to create products which can be tailored to meet a user’s specific needs, but which provides functionality that is predictable. In other words, UX Design is to study user behavior and understand user motivations with the goal to design better digital experiences.

Let’s talk about the main requirements for the UX design. What should be the perfect User Experience design? The answer to this question can be presented as the list of UX design requirements which should be meet on different levels. These levels form the UX design pyramid.

UX principles and full UX stack

The goals on each level of the UX design pyramid could be reached through following the main UX design principles:

  1. Hierarchy
    Hierarchy is one of the designers’ best tools to help users move through a product easily. It includes:
    a). Information Architecture (the way how content is organized across the app or site) and a
    b). Visual Hierarchy (that help users navigate more easily within a section or a page).

UX design balances business, people and technology. While it is true that a product cannot succeed without a healthy business, a business cannot succeed without a happy customer — and it is the UX Designer’s job to make the customer happy.

The full UX design stack

So, there are many things involved in UX design. The full UX design stack consists of:

  • Surface (here we apply UI design)

But UI part is not going first. UX design begins with the identification of a problem through user research. There is no point in solving problems that users don’t care about.

UX design process

In a nutshell, UX design process steps are the next:

  • User research

Below you can find an overview of the main UX design process approaches.

UX design process can be described within several most popular UX design approaches.

Main approaches of the UX design process

Currently, there are three well-known UX design process approaches:

  1. Classic

A classic UX design process is usually taught in colleges and is built using the waterfall methodology. Here is the Classic UX design process:

  1. Research. Here the main problems should be discovered. Here you can find 10 diagrams for providing effective user research.

Put it simply, as a scheme for describing a classic UX design process you can imagine something like this:

But there’s also the other approach to UX design process appeared in 2013 because the classic UX design process was incompatible with Agile development. The new design process called Lean UX and allowed UX to operate inside of Agile’s cone of uncertainty and rapidly update designs based on user feedback. It brought experience design back into harmony with product development.

In a nutshell, Lean UX is a set of principles based on the agile methods of the ‘Lean Startup’, where the focus is brought to the present. Instead of throwing design deliverables over the wall, teams accept that a final design can’t be created up front, and believe the answers will emerge as hypotheses are tested with MVP (Minimal Viable Product) development. Lean UX design process can be described as ‘build, measure and learn’ loop, or a ‘think, make, check’ cycle.

Later on, Lean UX design process appeared to be inefficient when a product plan wasn’t well defined, resulting in significant waste and rework.

Another great design process was suggested by Google Ventures. This was Design Sprint. It allowed teams to rapidly define and test low-fidelity prototypes. The Design Sprint by Google Ventures can be seen as a combination of the three approaches: Design Thinking, Agile, and Lean. A key component of the sprint is the creation of a prototype, which is one of the best ways to gather data and test ideas out. The schema could be presented the next way:

All the UX design process approaches are based on the same iterations but answer different questions. Read more about how all of the approaches different and what do they have in common in my article Agile UX vs. Lean UX!

UX design parts

To sum up, I’ll cover some more information on each part of what UX design does:

  • Interaction design
    Creating engaging interfaces with well thought out behaviors. Simple and clear communication between users and technology. Interaction design is responsible for functions that enable the interaction between people and individual user interfaces or across multiple interfaces (or systems).

But this is not the whole list of the things UX design include. Find the Key parts of user experience design with their real essence!

This is UX design to decide whether users will turn pages or scroll the content. And to take such responsibility on details and predict their impact UX designers should know a lot about human behavior. UX designers usually come from a variety of backgrounds such as visual design, programming, psychology, and interaction design. Later on, I’ll also talk about UX designers main tasks in details.

What is UI design?

Let’s start with the definition of what an interface is. An interface is a mechanism of the interaction of the two systems. From this point, a User Interface is an interface created for facilitating direct interaction between a system and a user.

On the display device, there are two common types of user interfaces:

  • the command line interface (CLI), that contains text only, and is used mostly by programmers;

In this material, I will stick particularly to the type of user interface that is responsible for visual perception — GUI.

UI or User Interface design is a discipline of designing user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on responsiveness and aesthetics, maximizing usability to foster a good user experience. As a part of UX, UI design focuses more on colors and typography. In a nutshell, UI design is typically a combination of:

  • Visual Design (the look and feel) and

As an example, UX design is focused on where to put the button for the user to find it easily, whereas UI design will think on how to make this button nice-looking to make the user want to press it.

Why do we need a user interface? The product must be visually appealing and beautiful. UI design crafts a common visual language and hierarchy that enhances how users engage with your product.

UI brings together concepts from Interaction Design, Visual Design, and Information Architecture.

User interface elements include buttons, text fields, checkboxes, sliders, icons, tags, message boxes, pagination etc. To understand better what UI design is, you should take a small tour on the main UI design elements.

UI design parts

An appealing user interface design can’t be developed without the using of all the techniques from the next fields:

  • Visual design
    Making the general product’s aesthetics and engaging your audience with user-centered principles as web-oriented design or conceptual art. The main goal of the Visual Design is to shape and improve UX with the help of illustrations, photography, typography, space, layouts, and color. ‘Line, shape, negative space, texture’ — it’s all about visual design. Learn more about it on the Interaction Design Foundation page about Visual Design.

Additionally, nowadays UI design largely depends on motion design which creates instant user feedback crucial for any user interface. Animations, visual effects, and screen transitions have a tremendous impact on how first-time users will engage with the app. Discover the power of motion design in my blog article.

UI software prototyping types

As I mentioned before, prototypes are different from wireframes and from mockups. I previously added prototypes to UX design, but as far as they are usually used for users to test product, prototypes must be high fidelity, interactive and fit the final user interface as much as possible. That is why in the next part I’ll talk of user interface prototypes.

Prototypes simulate the interaction between the user and interface as realistically as possible.

There are 5 common types of UI software prototyping:

  1. Paper prototyping (Sketching) Sketching in the prototyping process to record the main ideas (usually on paper), it is confined to idea generation and communication with the design team.

Every type of prototyping has its own list of digital tools that fit best the process. From Keynote and Google slides to InVision and Adobe XD… Here you can explore the ultimate list of UI prototyping tools used for different types of UI software prototyping.

UI design principles

While creating UI prototype a good designer follows the next 6 User Interface design principles (according to Larry LeRoy Constantine) :

  1. Structure. It is concerned with overall user interface architecture and says that models should be clear, consistent, recognizable and contain related things together, separate unrelated ones, and making similar things resemble one another.

UI techniques

Let’s talk about how to meet all the main UI design principles that are mentioned above. To do this, designers use some simple yet beneficial UI techniques.

First of all, a user interface technique (interaction technique or input technique) is a combination of hardware and software elements that provide a way for users to accomplish a single task. For example clicking a button, pressing a key, performing a mouse gesture or uttering a speech command.

In UI design there are tens of different effective techniques helping the user to accomplish the task. I would like to name the most famous UI techniques.

  • Interaction styles like form filling or menu selection etc.
  1. Hierarchical structure is based on the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.
  • Content organization models:
  1. Single page model.
  • Visualization technique that emphasizes the output and aimed to organize and structure numerical and non-numerical data in a convenient way and clear, visually appealing way.

There are more examples, but most of them can be categorized within the groups above.

After you know all the important UI techniques I must warn you about the most annoying ones. Please, consider them in order to save your user from extinction.

UI design process

There are several phases and processes in the user interface design that I can name. Here are some of the most viable ones:

  1. Functionality requirements gathering. This step covers assembling a list of the functionality required to accomplish the goals of the project and the potential needs of the users. Usually, this stage starts right after the discovery session with the client.

While following the UI design process, don’t forget about the basic rules to create the great User Interface design!

In previous sections, I tried to collect, structure, explain and present you all the main terms and nuances of UI and UX design. But you might want to read more about it and here you can find the list of the best books about UI and UX design.

Web and mobile application design

UX and UI design primarily used to create outstanding websites and designs for mobile applications. Let’s make a brief intro to the web and mobile design.

Web design

Put it simply, web design is a process of creating websites. It involves Information Architecture, website structure, user interface, navigation ergonomics, website layouts, colors, contrasts, fonts and photography or illustrations as well as icons design.

Web designer is a specialist who applies UX and UI skills to a web page design. Originally, a web designer is a UI designer (a subset of UI designers) focused on design and building web user interface. Some of them might know a bit of frontend programming such as HTML/CSS, Javascript to show how the design/prototype would work on screen. Also, they should know more about technical restrictions in web, grids and so on.

A web designer should:

  • Know how to create web layouts and deliverables, plus:

Presentations etc.

  • Be familiar with industry-standard software.

UX design for web enhancing user satisfaction by improving the usability, accessibility, and efficiency of user interaction with websites.

Mobile application design

Application design for mobile (desktop and laptop as well) poses special challenges:

  • facilitating intricate tasks and workflows,

The UX/UI Design of the application improves the user experience and customer satisfaction that ultimately helps increase the number of users of the specific application.

Mobile UX design refers to the design of positive experiences during the use of mobile devices and wearables. Depending on the context, mobile app design places unique requirements on the user experience.

Read about these 8 key principles of mobile UX design that proved their efficiency.

In recent years, such requirements were met by following the next mobile app design trends:

  • Designing for bigger screens;

To understand these trends, I recommend you to read about the key differences between a web application and a website in my material about web app development.
Another thing to consider is mobile interface design myths we used to hear sometimes. To be honest, some of these myths could take place in the past, but nowadays mobile experience went much further.

In 2019, to make your application (web or mobile) appealing and successful, your web or mobile design has to be flexible enough to embrace new technologies and hacks available nowadays. Because progress makes some things that appeared only yesterday a necessary part of our daily routine. Do you want to know what innovations can grow your business and save money?

What UI/UX designers do?

To start with basics of what UX designers do, UX designers consider Why, What and How for the use of the product they work on.

  • Why involves the users’ motivations for adopting a product, whether they relate to a task they wish to perform with it, or to values and views associated with the ownership and use of the product.

UX designers start with the Why before determining the What and then, finally, How in order to create products that users can form meaningful experiences with. In a web or mobile application design, designers must ensure the product’s ‘substance’ comes through an existing device and offers a seamless, fluid experience.

At What stage, UX designer should answer some fundamental questions like:

  • Do users need the product you are making?

The main questions for the How stage are different and relate the implementation:

  • How should the content be organized so that users can easily find it?

A UX designer’s typical tasks vary, but often include user research, creating personas, designing wireframes and interactive prototypes as well as testing designs.

In simple words, UX designers are involved in conducting extensive user research, formulating an information architecture and creating user profiles and stories. UX designer doesn’t necessarily possess visual or graphic design skill set, however, an understanding of psychology and systemic design is a must.

UI designers at the same time try to break down complex structures into simple comprehensible formats for the end user’s convenience. Therefore, both UX/UI and web designers work towards providing an enjoyable and effective experience for the user.

UI/UX designers should be able to understand the need of the users. The objectives and goal of the application are still the first determining factor before they even placed their skills and knowledge in creating web applications, mobile apps, website, and service. Then after understanding the need of the user and the objective of the application, a designer must be able to effectively translate it into functionalities. They must also be able to determine the possible future requirements of the application. In permanent cooperation with other development team members, designers are engaged in the product development stage from the initial phase up to the date of completion. These tasks and obligations make a scope of the main duties of the User Experience designer. But I suggest you read about what UX designers are paid for in details.

Applying to the company I work in (Syndicode), we simplify the UI/UX design processes a bit. This is explained by the number of projects you work on in parallel. Also, I can say that when the specialist gains a lot of experience, the time for following all the procedure steps is reduced. Skills help you work faster.

How it all starts in Syndicode? Firstly, we are having a Discovery Session with a client to find out as much as possible about the project. The main goal of this session is to gather key project information so we could gain a high-level understanding. Then we will create a plan according to which we’ll work on the UI/UX/web/mobile design solutions and agree on every step of it with the client. Then we go through the nessesary steps of UI and UX design processes according to Lean UX.

Additional resources

  1. A great list of resources for UI and UX designers to find tools, blogs, hacks and inspiration.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +412,714 people.

Subscribe to receive our top stories here.

The Startup

Get smarter at building your thing. Join The Startup’s +742K followers.