Chapter 7

Design Process for Pros — Design | Comprehensive Guide 2023

Introduction

In this section, you will learn

Where to look for inspiration
How to collect inspirations and prepare moodboards
How to prepare style guides
Specific design states and how to prepare one
Tips for designing for specific devices
Best practices for working in teams
Where to find design resources
Sketch tips

We design something to give a form to a function and to solve a problem with a set of available resources. Good design is solving a problem so that it seems as if there had never been a problem in the first place. Well designed interfaces, communication processes, or objects shouldn’t require too much effort from their users. Good design often makes you think: Gosh, I could have done that myself!
And yes, well-designed things are often a pleasure to look at or experience. In some cases, the form will precede the function.

Stakeholders

Designer
Client
QA
Developers
PM

Inspiration

Find an accurate style for the project
Remember that the inspiration process is critical when you start designing a new project. The overall feeling of an application/website depends on the colors, fonts, or photos you use. Remember: Do not copy, just get inspired!

You can look for inspiration here:

Awwwards
Dribbble
Behance
Designspiration
Pinterest
or on DesignRush - Best App Designs of 2023

Preparing moodboards

This step is essential for you and your client. There will, of course, be situations when you finish your design, and the client is thrilled – but this will not always be the case. We recommend that you prepare a board with a lot of photos and pictures that will show to your client what you would like to do with the future app, what “feelings” your designs will evoke, and finally, what the client can expect. Thanks to this approach, you will increase the chances that the client likes your solutions, and you will show that you appreciate the client’s feedback. Approximate time: 4h. See an example of a moodboard.

How to prepare a moodboard?
We use Boards by InVision for the following reasons:

Flexibility
Predefined layouts
Option to add images, fonts, and attachments

Of course, feel free to choose your own tool!

Style guide

It’s good to start creating a style guide right after the research stage. The initial version of the style guide should at least contain the colors and typography. During the visual design phase, you should update your style guide to a full version.

What should a good style guide contain?

Color (the main colors and shade variations for each of them)
Useful tools: Coolors, Color Adobe
Typography (font family and type scale)
Limit the number of typefaces and sizes you use in order to keep your designs simple. As a general rule of thumb, start with two fonts at most – one for your headers, and another one for your bodies. Most of the time, you won’t need any more than that.
We highly recommend using free fonts. If you want to use a paid font, check the licence carefully. Your client might be reluctant to pay extra money for fonts, so make sure they do want to spend money on fonts.
Free fonts: Google Fonts
Paid fonts: MyFonts and Typekit
Having troubles with pairing fonts? Try Typewolf or FontPairs
Component library (states of design)
Component-based thinking helps engineers. Design components can translate neatly into code. From the engineering perspective, components are like Lego blocks that you can put together.
For example:
- Buttons (normal, hover, active, disabled)
- Inputs (empty, selected, typing, error, success)
Grids and spacing
It’s important to establish a grid system that works for every use case. In the section on grids, include information on the number of columns and rows, margins, and example uses.
- Bootstrap grid

States of design

During the design process, you have to keep in mind that your UI can be in different states:

1. Nothing

Maybe it’s the first time a user sees a view, interface element, or status. Maybe it hasn't been activated yet. Essentially, the component exists but hasn’t started working yet.

2. Loading

The dreaded state. In a perfect world, no one would ever see this. Alas, here we find ourselves. There are plenty of ways to keep your loading state subtle and unobtrusive.

3. None

Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this!”), or to reward them (“Good job, everything has been taken care of”).

4. One

You have some data. On input, this might come after the first keystroke. In a list, it might be when you have one item (or only one item left).

5. Some

This is usually what you think of first. What is the ideal state for this component? Your data is loaded, you have input, and the user is familiar with it.

6. Too many

The user has overdone it in some way. Too many results (maybe you paginate them now), too many characters (maybe ellipses?), and so on.

7. Incorrect

Something is not right about the component. An error has occurred.

8. Correct

This item has had its requirements satisfied.

9. Done

The user’s correct input has been received by the application. The user doesn’t have to worry about it anymore.

These states will recur based on the page, user interaction, updated data, and pretty much any change to your application’s state. By thoughtfully designing these changes, you can create a polished experience for users no matter which situation they find themselves in.

Designing specifics for native mobile apps

If you are only starting to design native apps, the best thing to do is to read the official guidelines for the Android (Material Design) and iOS (Human Interface Guidelines) operating systems.

Android devices Material Design Guideline

Apple’s iPhones Human Interface Guideline

Designing for gestures in general

Use the most popular gestures to make application even more interactive. Remember that when using your phone, there is no “right click” as would be the case with browsing websites on a computer. Try to put the most popular and intuitive gestures in areas where users might expect them.

Mobile app interactions matter
Read: Microinteractions: The Secret of Great App Design

Designing in Teams: Best Practices

1. Start every project with a brainstorming session.

DOs	DON'Ts
Debate and encourage wild ideas. Capture the ideas in a tool available for the whole group Number your ideas and go for quantity. Having a non-designer present during brainstorming brings diversity to the table.	Do not criticize. Suspend any judgment until the end of the session.

2. Be sure to know your responsibilities and the overall team hierarchy.

DOs	DON'Ts
Make sure you clearly understand your role and the tasks you’re responsible for. When responsible for task distribution, be sure to balance skill sets and eliminate gaps.	Don’t forget about the project timeline and task deadlines.

3. When a design conflict emerges, bring the discussion back to the business objectives.

DOs	DON'Ts
When a conflict arises, collect all arguments from the team and choose the solution that serves your product’s business objectives better. Support your ideas with real-life examples and surveys.	Don’t let aesthetics or personal preferences be your primary guide when searching for solutions. Do not try to reinvent the wheel: always make sure that your problem hasn’t already been solved by someone else. Don’t forget about the project timeline and task deadlines.

4. Be a team player and work to deliver the business objectives.

DOs	DON'Ts
Be responsive and helpful: if a team member asks you for urgent feedback, give it a high priority. Solve conflicts and misunderstandings within the team quickly: personal conflicts tend to escalate.	Don’t take credit for the final design on your own. Don’t get too attached to your designs – your teammates’ solutions might be better than yours.

5. Prepare your files properly.

DOs	DON'Ts
Use consistent naming conventions; standardize the folder naming within your design software. Tools as Sketch, Adobe XD, or Invision Studio work best when all layers have proper naming and a consistent hierarchy. Use shared text styles and shared colors wherever possible. Create symbols and instances for recurrent patterns. Try to split your designs using artboards or pages.	Don’t scatter files around: use one location for all the project’s assets – ideally a shared folder. Be on the lookout for bad layer or file naming. Don’t leave your layers ungrouped and unnamed: your team member might need to pick up from your file.

6. Give feedback and be open to feedback.

DOs	DON'Ts
Ask your team for feedback on every step. Have regular design reviews. Before presenting your work to the client, be sure to get feedback from the whole design team via a messaging app or in person.	Don’t be stubborn and accept constructive criticism – you won’t grow without feedback.

7. Presenting and defending your ideas.

DOs	DON'Ts
Knowing why your design works is the key to explaining and defending it well. Do research on the ideas you try to convince the client to. Know the numbers behind your solutions.	Don’t use jargon when presenting your work – the client doesn’t have to know what persona or above-the-fold mean.

8. Embrace the culture of communication.

DOs	DON'Ts
Communicate clearly, early and often. It’s a good idea to have a live call with the client when presenting the designs for the first time – this way you will have an opportunity to answer all questions and avoid misunderstandings.	Don’t be afraid to ask – remember that there are no stupid questions. Don’t assume your client knows how to use collaboration tools. Don’t leave designs of complicated processes without any comments.

Nice-to-haves when designing

Prepare interactive designs

If there is enough time, try to search for ready transitions between the elements of your designed interface. This will greatly enhance the experience of users, as animations in your project can do magic. To prepare such interactions, you can use:

Principle. Use Principle when you need to animate interface elements, especially in a multi-screen project; the built-in transitions and element-based animations will help create quick and easily clickable prototypes. Principle should be your go-to tool if:

you need to build a quick prototype to check if a UI solution works;
you want to make sure the developer knows how to code the interaction;
you want to enrich the experience by creating meaningful animations;
you want to showcase your design on social media.

Adobe After Effects. AE is a true workhorse – it can do almost everything related to animation. While versatile and powerful, After Effects could be better when it comes to working with Sketch files. AE also won’t allow you to test your interactions on a prototype. After Effects is your go-to tool if:

you need custom transitions or animation effects;
you need to use perspective or other video effects;
you want to animate icons and illustrations.

Craft your own icons

If there is enough time, you can create your own icon set. We use Nucleo for our designs, but creating your own icons will add a more individual feeling to the application.

Resources

Questions your client may ask

Q: Why is designing in teams better?
A: You get a broader skillset and the team’s collective experience (complementary teams have members with unique skills such as UX, visual design, or illustration). Problems are solved more efficiently because team members instantly verify each other’s incorrect assumptions and bad solutions. The work efficiency also increases, because tasks are distributed in a smart way (certain designers work faster on certain tasks). The chances of the product’s success increase, because teams offer more idea-creation power and instant second opinion with full-context feedback.

Q: What’s the difference between a design and a wireframe?
A: A wireframe is a basic visual guide that serves as a blueprint that defines each project’s structure, content, and functionality. By using very simple elements without paying attention to visuals, we can focus on finding the best user experience solutions and creating iterations faster and more cost-efficiently.

Q: Why do I have to pay for fonts?
A: Paid fonts are usually of higher quality and contain a broader range of styles and weights (which will give the designers more freedom in hierarchy design), additional glyphs and ligatures, and a decent kerning table. A paid font also helps to build a unique visual voice by making the product easier to stand out from the crowd. This seems to be of small importance, but keep in mind that web and mobile products are based on typography in 95%. By using a quality font, you make sure your product design will also be of the highest possible quality.

Q: Why do I need to have custom icons, why can’t we just buy some?
A: Icons and illustrations are not just about pretty pictures – they convey a message. By using custom-made images, you can be sure that they illustrate the concept accurately. Just as brands use corporate colors and fonts, a unique visual style can help to differentiate you from your competition and will speak a consistent visual language.

Q: I don’t work in Sketch, how can I see the designs?
A: We can provide you with many different file types: flattened PNGs, multi-layer PDFs, or comprehensive documentation in an HTML file with all the necessary information for your developer. For feedback, we use InVision, which is a browser-based prototyping tool with conversation-like commenting.

Q: Where can I find some inspiration?
A: The best sources of inspiration would be Behance (behance.net) and Dribbble (dribbble.com).

Q:What is a style guide and why do I need one?
A: A style guide is a type of template that contains colors, fonts and commonly used interface elements, which will standardize the look and feel of the whole product. It helps to keep a consistent visual style across all screens and devices and during the whole design process. It is especially useful on multi-designer projects, where every team member is responsible for a different part of the product.

Q: Why do you want to know the business model?
A: A style guide is a type of template that contains colors, fonts, and commonly used interface elements, which will standardize the look and feel of the whole product. It helps to keep a consistent visual style across all screens and devices and during the whole design process. It is especially useful in multi-designer projects, where every team member is responsible for a different part of the product.

Q:What kind of feedback would you like me to give?
A: Designers always try to deliver solutions that serve both the user and the business itself – you can try to check if the designs serve the business objectives and fit the industry. Remember that the aesthetics are often a matter of personal taste, and your esthetics might not converge on the universal esthetics for your product’s potential users.

Questions to ask yourself at this stage

Do I have a moodboard?
Do I have a style guide?
Have I designed for all target devices and design states?
Have I collected feedback from client and the team?

Desired outcomes of this stage

Moodboard (example here and here)
Style guide (check an example of short article about color)