Apart from knowing how to use software and create UI components, you’ll need to learn how to take an idea or concept and translate it into the appropriate UI design. 

You’ll also need to know how to evaluate if your design is a good solution to the idea, concept, or aim. This is the hard part and a skill that can only be improved by experience and practice. 

In the design process, there are a variety of methods and processes that you can use. These have been developed across multiple design fields for different purposes.

In this chapter, we are going to dive into the different methods you can utilize when designing a user interface, their pros and cons, and when you could benefit from incorporating them.

A user interface can be designed through various methods. Ideally, and in most textbooks, designers are taught to strategically go through a long list of methodologies and systems to achieve the best outcome. 

In reality, most designers are working under restrictions due to factors beyond their control and often deviate from best-practice processes. 

So, don’t feel the burden of needing to go through every single step fully in each project, but learn them so that you have them in your arsenal of methods going forward.

3.1. The Design Process & Methods

Before we dive into the different common UI design processes and methods, here’s an overview of them. 

1. Project brief 
2. Competitive analysis 
3. Finding inspiration
4. Visual guidelines 
5. Brainstorming & conceptual models
6. Low-fidelity sketches
7. High-fidelity mockups
8. Prototypes
9. Accessibility
10. Content & Copy
11. Evaluation & feedback 
12. Presentation & argumentation
13. Designer-developer handoff

Note again, that in real life, a design process is seldom done in a strictly systematic way, but more often moves organically through various methods.

Reminder: Great UI cannot be done without UX design

You will notice that to create the best UI designs, you have to consider usability, and product strategy, as well as adopt some research thinking. As a beginner, you don’t need to be an expert in all areas, but to create better designs, you have to have a holistic approach. 

Limiting factors

All projects have limiting factors that affect what you can and cannot do, even if you want to. These factors can be things such as rushed deadlines, limited resources, as well as soft limitations such as stakeholders not seeing the value of certain methods. 

Such limitations often force designers to pick out and prioritize the most essential methods for a project, which may lead to a more organic, but less systematic, design process.

Not following a strict methodology isn’t necessarily bad, as long as you have the needed knowledge to be able to choose wisely between what methods you incorporate.

Because of these common restrictions, a lot of designers choose to create what is called a personal or passion project. These are projects that you choose for yourself, and that you create in your own time as side projects, unrestricted by many of the constraints you’d otherwise encounter in a corporate environment. 

I’d advise you to create your own side projects, especially in the beginning to practice all the different methods and to start building your portfolio.

3.1.1. Project Brief

Design projects often start with a project brief. A project brief is a summary of what a project will entail, to make sure that everyone is on the same page.

Define the project’s purpose

Define why this project is being done, what problems it’s trying to solve, and what the goals are. What are the expectations for the project and how is the end design or product envisioned?

Goals & objectives

What is the goal of the product or design, both for the benefit of the company/organization and the user or the world? Amongst those goals, which ones are the most important?

In addition, are there important KPIs (Key Performance Indicators) that one is creating the design for? What features and functionalities should the design contain?

Target user group or audience

Who is the audience or target user group? Which personas or groups of people are we going to empathize with while designing? What does that target user group want, need, and enjoy?

This can be a company’s ideal customers or the group of people an organization is aiming to help. The information can be found by talking to the intended users themselves, creating digital or physical surveys and interviews, and speaking with people who know the target user group well.

Constraints & ethics

What technical, financial, or other constraints are there? What assumptions do we make about the market, customers, and restrictions?

These restrictions can take the form of a lack of available competencies to carry out certain tasks, a lack of finances, local and international laws and regulations, as well as cultural and social stigmas. Be sensitive to how the outer world might react to the design, and what the unintended consequences may be, and reflect on ethical and moral aspects.

Project duration

How long is this project expected to take? What deadlines or milestones are we working with?

Project scope & deliverables

What form is the end product or design expected to be in? Be specific in determining what the deliverable will be. 

Are you expected to only showcase ideas and concepts, pixel-perfect mockups and prototypes, or perhaps even develop finished websites and apps? 

The expectations should be well established before the work begins. If you are unable to deliver what is asked, you can still do the project but may need to bring in external assistance and expertise. This will affect the budget and possibly the timeline of the deadlines.

Resources

What resources, internal and external, do we need, have, or need to get? This can be anything from employees, external contractors, paid-for services, memberships, networks, physical and digital tools, and so forth.

It can be a good idea to gather all available competencies and resources in a document so that when, and if, you need it during various points of the project, you can quickly find it.

3.1.2. Competitive analysis & research

Before sketching out your first ideas and concepts, it can be a good idea to first find inspiration as well as see what types of similar products and designs already exist. This will help save you time, and energy, and kickstart the creative process. 

When you know what you are to design, according to the project brief, you can now do some research and dig into what other similar products and designs you can find on the internet.

There is almost always someone or many, who have done the same thing already. Find these other designs through search engines, similar businesses, asking people, and browsing design social media such as Dribbble, Behance, or other sites that collect designs.

It can be especially useful to look at your top competitors in the market and reflect on the following:

• What features, functionalities, and conceptual models do other similar products have, and do they seem to work? 
• Look at the reviews and see what other products and designs get praised for, and what feedback they get from their users
• What weaknesses of your competitors can you learn from and do even better? 
• What strengths of your competitors can you also include in your design, and improve on even more?

By using this method, you can make sure that the product or design that you’re creating is at least as good as the other ones on the market, and hopefully even better. This is one way innovation and improvements can be born.

This foundational step is very important, and the ability to do such analysis distinguishes how much impact your designs can make.
You, as a designer, will be able to contribute much more value to the entire product or design if you learn to analyze competitors and the market.

3.1.3. Finding inspiration

Once you’ve got an idea of what features your design will have, the overall conceptual idea, as well as a good grasp of competitors, you can start gathering inspiration.

Inspiration can be visual (e.g. screenshots of competitive products or conceptual designs found on the internet) or text-based (e.g. value propositions, visions, and goals). 

Inspiration does not need to come from similar products or services, it can also be purely visual inspiration from other great designers, artists, illustrators, or even nature.

Gather the inspiration you find either physically or digitally so that you have an overview of the different points of reference you can begin working from. This will speed up your creative process immensely as well as get your creative mindset going.

The inspiration you gather is meant to guide you in the design process, and the point is not to copy other people’s creations straight off, but to gather enough base for you to spin off from, and build on top of. 

Our brains are creative, yes, but they are also limited. By being inspired by other works, you’re essentially feeding your brain with new ideas, perspectives, and reference points.

3.1.4. Visual guidelines & design systems

Does the company or organization you design for have a set of visual guidelines or a design system? If yes, you should learn how to work with them, and if not, you may need to create one yourself.

Following guidelines may hinder how visually creative you can get with each project, but it creates consistency in the design, creates a stronger brand, as well as speeds up the design process, and lowers costs.

Visual guidelines

Visual guidelines are tied to branding and they are guidelines about how a company or brand wants to portray itself to others. 

By following visual guidelines, brands can have a coherent and consistent identity, similar to how a person can have a strong identity. Having a strong identity can help a product or company gain visibility as well as build continuous trust and returning users.

For example, Apple has a strong visual identity and guidelines that make it instantly recognizable. You might glance at someone’s Home Screen on the phone and immediately recognize it as an iPhone because you recognize the layout, font, and UI components – it’s the same with their packaging. 

Visual guidelines contain files and guidelines such as logos and how they should be used, color palettes, fonts, and font pairings, guidelines for graphic design and print work, and so on.

Design system

Design systems are a specific type of visual guidelines aimed specifically towards UI design, and may not contain any guidelines regarding physical print work and graphic design.

A typical design system contains things such as logos, color palettes, layout guides, UI components (e.g. buttons, tabs, controls, input field, dropdowns, shadows, menus, search bars, and cards), guidelines for states such as error messages and feedback indicators, icons, and illustrations. 

Design systems may be created using programs such as Figma and Sketch, which allow you to create libraries of UI components that can be dragged and dropped into new projects. The same components can be created in a code library by developers. 

Using drag-and-drop UI components saves time for each new project since you don’t need to redesign each component from the ground up. In addition, developers can also reuse previous code, knowing that the components will look and act the same each time.

Over time, using an efficient and well-established Design System and component library saves both time, money, and energy.

At the start of a project

If the company or organization you’re working with has visual guidelines, make sure to include them in your design as well. In most cases, you are not only designing according to your tastes but in harmony with the overall bigger brand and vision.

You should find out about these visual guidelines before diving into creating any designs since you may need to relate your design to earlier guidelines. If you do it too late, you may need to go back later and re-do work, which is a waste of time and resources. 

If they do not have any guidelines, however, you may need to create them before or during the project as a part of the deliverable, depending on the scope of the project.

You could explain to stakeholders what a visual style guide is and ask them if they want to invest some time and budget into creating one. You might get an additional fun project to work on.

If there are no prior guidelines

If you have no prior guidelines to work with, you can easily create a basic one by going through and analyzing earlier designs and graphics. 

Put together the material you find from previous designs and identify frequently used visual details such as a color palette, common fonts, and pairings, frequently used border-radius, and the overall visual tone. You can then apply these common elements to the new design to make it fit in better with the overall branding.

Note! If you are creating a proper design system from scratch, do invest adequate time and energy into making it good and efficient. 

Create design systems in collaboration with developers and stakeholders so that the guidelines are technically feasible, as well as set up in a way that is usable by others as well.

3.1.5. Brainstorming & conceptual models

Once it’s time to start creating the actual visual UI design, it’s easiest to start by brainstorming. 

Brainstorming is a method where you allow your brain to flow freely, coming up and sketching down any ideas you may find relevant. 

This stage is all about idea generation, allowing your brain to be creative and come up with ideas, and not stopping too much to reflect on details. Do not judge your ideas at this point.

The ability to come up with good conceptual models and ideas improves with time. A seasoned designer may be able to do it without any external assistance, but as a beginner, it’s very helpful to start from the inspiration you gathered earlier. 

So don’t be afraid to look at other people’s designs to start with.

---

Step by step

1. Get a pen and paper

Get yourself a piece of paper and a pen, or use digital means, since the main point is to sketch out as many relevant ideas and concepts from your mind as you can. 

Doing this first step by hand, on pen and paper, without attention to detail is helpful since it’s a low investment – meaning that you won’t be too attached to a quick sketch or scribbles. 

So, do not sketch your first ideas in detail or invest any time in drawing shadows, putting energy into making every line perfectly straight, or making any pretty illustrations.

If you do this step with too much attention to details or by creating each idea in a pixel-perfect mockup, you will have a much harder time deleting the bad ones. 

This step is just to get ideas out of your mind, and into something a bit more concrete.

2. Mindset of non-judgment

Get in the mindset of not judging anything you sketch down. Let go of any pressure that the first idea you put down needs to be good. 

Think the opposite, your first few ideas probably will not be the best, but you just need to get them out of the way so that better ones can come through.

Allow your mind to flow freely and create concept after concept until you can’t think of any more good concepts.

3. Group features and functionalities

Look at the list of features and functionalities you set up at the beginning of the project brief. How do different features and functionalities relate to each other, which ones should be grouped on the same page or even be combined into one component?

4. Imagine the user journey

Think about what the user journey will be like. For example, which functionalities and contents should be shown at different steps of the user’s journey?

Not all features and content may need or should be cramped into one long page, perhaps they ought to be separated and linked with each other through multiple screens, steps, or sections. How would these screens be linked?

5. Plan the information architecture

Think about how different pages or screens should relate to each other in an architectural plane. How will the menus look and which items should they contain? Which pages are most important, and how will the landing or start page reflect that?

6. Use gathered inspiration

Look at the inspiration you gathered earlier, and start analyzing it. What features do you think are good in them and which are relevant to your project? Is there anything in the inspiration that you can add to your project?

7. Evaluate ideas

When you have come up with multiple sketches and concepts, you can begin to evaluate them. Evaluate each idea by writing the pros (+), cons (-), and possible improvements for each one. 

From your evaluations, go back and strike out the worst ones, and continue improving the better ones. You might find that you can add and blend ideas from multiple concepts.

If you don’t like any of your ideas, start over until you have something to go from.

Following conventions

Remember, there is nothing wrong with following conventions and creating things in a way that users are already familiar with. Following conventions will lessen the learning curve for new users as well as minimize possible confusion.

In the absolute majority of cases, it is more important to design and create something that is highly usable and efficient, rather than entirely ground-breaking and innovative. 

Innovation is good, but if users cannot use the design because it’s too different, it can lead to feelings of frustration, struggle, and confusion. And if users experience negative emotions while using the design, it means that they’re having a negative user experience.

3.1.6. Low-fidelity sketches

When you have your conceptual model down of how the design or product will be laid out and what it will contain, you can start creating your first low-fidelity sketches. 

Low-fidelity wireframes do not need to look perfect or polished, the details are not important. Do not spend any considerable amount of time perfecting shadows, adding colors, or creating perfect shapes. 

You can even work entirely in greyscale and do it by hand with paper and pen.

The focus of low-fi sketches and wireframes is to illustrate:

• The general layout and structure
• The contents
• Functionalities

What are low-fidelity mockups good for?

Low-fidelity sketches and wireframes are great for visualizing multiple ideas quickly and help with brainstorming through different options. It can also help you explore ideas without being too attached to them.

Visualizing ideas is also needed to be able to evaluate them and discuss them with others. It is difficult to present a design idea to others using only words, hence it’s better to show it to them visually. 

These fast sketches and wireframes are also great because they allow you to iterate them without wasting too much time. If you’re going to change large parts of the design multiple times, it’s unnecessary to invest too much time into fixing details that will be removed anyway.

Skipping low-fi sketchesIn some cases, you may not need to begin with low-fi sketches, such as if you’re only improving an already existing design with a Design System or if you’re working under time pressure. You’ll need to judge for yourself if it makes sense first to start with sketches or if you want to jump into creating mockups right away.

3.1.7. High-fidelity mockups

In this step, you start doing what most people think of as UI design, which is the detailed and visual design of the user interface.

What are high-fidelity mockups?

High-fidelity mockups are high-quality and polished versions of the design, including all details such as specific colors, shadows, interactions, and illustrations. 

These mockups have all the content placed out where it should be, exactly how they look, and act as a detailed blueprint for what the developers will create using code.

Depending on the project and need, the high-fidelity mockup can vary in complexity. For example, in the deliverable, you may need to include high-fidelity mockups including:

• Mockups for different screen sizes: desktop, tablet, mobile, TV 
• Copywriting and UX writing
• Detailed UI illustrations
• Interaction design, prototyping, and animation

3.1.8. Prototypes

Once the high-fidelity mockups are finished, or close to being finished, you can begin mapping out interactions. This is called prototyping.

Prototypes are interactive versions of the design, simulating how the finished product, after coding, should look and behave. A prototype is still only a vector based, not yet implemented in code. 

For example, you may have designed:

• One screen with two buttons to “Login” or “Sign up”
• One screen for what you see once you’ve logged in
• One screen for filling in your information to create an account/sign up

Prototyping is when you link the components so that clicking on either buttons “Login” or “Signup” on the first page, takes you to the relevant following page.

3.1.9. Accessibility 

Designing with accessibility in mind is important to make the internet an inclusive space. 

It means designing user interfaces that can be used by a broad number of people including those who might have disabilities.

Examples of edge user cases that can be forgotten are users with bad or non-existent eyesight, people with difficulties using a mouse with precision, and different environmental factors such as using an application in the sun or in a dark room.

There are official government websites with UX guidelines for accessibility, such as accessibility.digital.gov by the U.S. General Services Administration. 

Some of the key questions to ask yourself when designing with accessibility in mind are:

• Is there enough contrast between the text and background color? This can be checked with WebAIM’s Color Contrast Checker or plugins in design software
• Is the font size large enough to be comfortably read? In general, a minimum of 16px is needed for paragraph text
• Is the line height comfortable for reading?
• Is the typeface/font choice clear and legible?
• Are the headings communicating hierarchy effectively?
• Can you add icons to give helpful visual cues?
• If you have text over an image, is it readable or do you need to add a colored overlay or blur the background image to make the text more legible?
• Have form fields been properly labeled and do they support navigation with tabbing? 
• Do form fields have clear and defined boundaries?
• Are error states highly visible and specific?
• Are touch targets big enough? In general, they should be at least 48px
• Can you navigate well using the tab key on the keyboard?

3.1.10. Content & copy

Text is just as important as visuals when it comes to digital products and design. Text can be used to set the tone (branding), sell (copywriting), clarify and explain (UX Writing), and help products gain visibility in search engines (SEO). 

If you want to be a designer who can make a bigger impact through design, then it is necessary to understand the value of the text. 

In most cases, UI Designers are not expected to be experts in forming textual content, but there may come occasions when you’ll be the only one dealing with all the content.

Having a solid understanding of the value of copywriting, UX writing, and SEO, will without a doubt affect the way you design content. 

It can show up in the way you understand business goals, where you place important elements, and how you decide to name buttons and other elements.

You don’t need to be an expert in all three skills, but understanding how the skills impact the results can guide you to ask the right questions.

For example, in UI design

• Knowledge of copywriting can help you decide where to place a call-to-action button to improve conversions. It can also help you design better landing pages and product pages.
• Knowledge of UX Writing can help you with naming buttons, tabs, and menu items to make them as clear as possible. It can also help you decide what information to include in error messages and where to place them.
• Knowledge of SEO can help you use headings (H1, H2, H3, etc.) in the right way. It can also help you in deciding what data to include in strings to make individual pages rank higher on search engines.

Copywriting

Copywriting is the design of text to sell in marketing or advertisement. 

In terms of UI design, copywriting is most prominent in landing pages or product pages where the company wants the user to take action such as creating an account, buying a product, or subscribing to something.

Small tweaks in the copy of UI components such as call-to-action buttons, and their placement on the page, can have big impacts on conversion rates. 

There are UI designers who specialize in the intersection between copywriting and UI design, working exclusively with these types of design tweaks. 

There’s a lot of money to be made both for companies and for independent creatives with a specialized combination of these skills. 

UX Writing

UX writing is used for designing text in a way that improves user experience.

This includes for example making sure there’s a friendly tone, using words that are easy to understand, as well as writing from a user-centered perspective.

In UI design, skills within UX writing can be applied to

• Making sure that error messages and warnings are clear, easily understandable, and delivered with a good tone 
• Writing text for buttons, tabs, menu items, and hyperlinks that are self-explanatory and fit user’s expectations
• Reformatting highly technical content in simpler terms

SEO

SEO stands for Search Engine Optimization and determines how visible a website, application, or product will be in search engines such as Google. 

A website with search-engine-optimized content will rank higher on search results, meaning that it will show up further up in the list of search results.

Websites that rank higher get more traffic, users, and potential customers. For companies, this means more income and sales. This is the part where content design meets marketing, and a knowledge of both is important to create impactful designs.

In UI design, SEO knowledge can be applied to

• Using headings (H1, H2, H3) in the right way. For example in an article, H1 is the main title and there is only one per page, H2 is for headings, H3 for subheadings, and so forth.
• Making sure that the keywords that you want the page to rank for are drizzled in the right headings, paragraphs, page titles, and other components.
• Structuring the URL of a website, such as what you name subpages, and make sure that keywords are in the URL link.
• Making sure that there are separate SEO web pages for content that one wants to rank high for.
• Knowing how to analyze data traffic to identify if design changes can be made to improve user experience. For example, a high bounce rate on a page might mean that users did not get redirected to where they expected. This might be fixed by correcting the text on buttons leading to that page. 

3.1.11. Evaluation & feedback

Receiving feedback on your designs and evaluating ideas, both alone and with others, is a crucial part of the design process. 

Good design is possible to create alone, but even better designs are most likely created by combining multiple people’s competencies. This is the reason why many teams have design feedback sessions and design critiques. 

Nevertheless, it can be a real challenge for beginners to gracefully receive critique and feedback. It is not unusual to experience negative feedback as a personal attack on one’s skills, competencies, and subjective taste. 

To overcome this, one must build a non-fragile ego, lead with humility and openness, as well as build confidence. 

These are true soft skills and personal qualities that cannot be taught theoretically but require continuous exposure and self-regulation.

Try this: 

Be actively willing and encourage others to give you feedback, early and frequently. Take back the personal perception of control over the situation.

Practice this: 

Distance yourself from your work output. Your worth is not tied to your output. If you must grade yourself, measure yourself instead by the amount of effort you put in and your ability to improve over time and learn.

Think about the design output as “our design” and not “mine”. The end product is something created together and for the users, so creating the best design together is the priority.

3.1.12. Presentation & argumentation

To become a designer who makes an impact, you need to learn how to present your work and argue for what you deem as the best solution. 

Presentation is both a matter of communicating your work, as well as persuading stakeholders and other influentials to see the value of your solution and vision. 

Good UX & UI design is not only about art or aesthetics, it is about creating something that solves a problem or provides a need for both business and users. 

In any case, there are an endless amount of possible solutions, and as a high-level designer, one key skill is the ability to argue for your proposed solution.

Fear of presentation

It is common to feel uncomfortable and afraid of giving presentations and public speaking. 

The act of standing on a stage, in front of a group of people, and having all the attention, can leave one feeling exposed and vulnerable. 

If you add the possibility of receiving negative feedback on your own work on top of that, the act of presentation may feel even more threatening. 

All those fears and worries are valid, but you should not let that stop you, because that’s not the only side to presentations. 

Benefits of giving presentations

Even though presentations and public speaking may feel daunting, it is still one of the best ways of communicating to a large group of people in a way that can truly persuade someone.

Even in this digital era of a multitude of digital means of communication, live vocal and visual communications triumph all when it comes to creating a personal connection, trust, persuasion, and building rapport.

Within any company, group, or organization, your ability to influence and impact is highly dependent on your social standing. 

If the people around you do not trust you or have a positive connection with you, you will find yourself in a position of low influential power.

However, if you decide to give frequent and high-quality presentations, you can position yourself as a person of confidence and skill, as well as someone to be considered for decision-making. 

Giving a good presentation means you have something to say, you know how to communicate effectively, and you are not afraid to be seen and make connections with your audience. All these are highly important soft skills to learn and develop.

3.1.13. Designer-developer handoff

After research, design, and presentations, your work has possibly been approved to move to the development phase. But your work doesn’t stop there. The way you hand over designs to the developers is important as well.

A designer needs to hand over the designs in a way that makes it possible for developers to create them properly in code. This means that they will need more than just static screenshots of the designs. 

Developers should be able to inspect the design and get information about details such as specific hex colors as well as paddings and margins. Ideally, they should even be able to interact with the prototypes themselves, so that they can recreate the interaction design as well. 

Luckily for us, most modern software has developed specific designer-developer handoff tools. Designer-developer handoff tools allow inspectors to click and inspect details, and some even generate CSS code from the mockups. 

For this reason, it’s important to choose to work with software from the beginning that has features that are important for aiding designer-developer handoffs. 

Before beginning a project, you can also talk directly with the developers about what type of design handoff they will need from you. Knowing this in advance can save a lot of time.