Design Process For Pros
05

Design

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:

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. Visit this link to 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.

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 Guidelines

Apple’s iPhones Human Interface Guidelines

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

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

DOs
DON'Ts

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

DOs
DON'Ts

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

DOs
DON'Ts

5. Prepare your files properly.

DOs
DON'Ts

6. Give feedback and be open to feedback.

DOs
DON'Ts

7. Presenting and defending your ideas.

DOs
DON'Ts

8. Embrace the culture of communication.

DOs
DON'Ts

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:

  1. 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.
  1. 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

Icons

Stock Images

Fonts

Sketch – good practices

Questions your client may ask

Q
Why is designing in teams better?
A
Q
What’s the difference between a design and a wireframe?
A
Q
Why do I have to pay for fonts?
A
Q
Why do I need to have custom icons, why can’t we just buy some?
A
Q
I don’t work in Sketch, how can I see the designs?
A
Q
Where can I find some inspiration?
A
Q
What is a style guide and why do I need one?
A
Q
Why do you want to know the business model?
A
Q
What kind of feedback would you like me to give?
A

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

Additional reading