# 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:

• Awwwards
• Dribbble
• Behance
• Designspiration
• Pinterest

# 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.
  • 8pt grid system
  • 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 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

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

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

• Nucleo, FlatIcon, IconFinder

# Stock Images

• Paid: iStockPhoto, ShutterStock, GettyImages
• Free: Aggregator for all top free stocks

# Fonts

• Google Fonts, Adobe Typekit, Font Squirrel, MyFonts, DaFont

# Sketch – good practices

• General Sketch good practices, Symbols in Sketch

# Questions your client may ask

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 Taqsim Style Guide and short article about color)
• Designs (check an example here)

# Additional reading

• Psychology behind Product Design – staying efficient in the age of distraction
• How to make Sketch even better
• How NOT To Design An Interface For Your Mobile App
• We Give Meaning to Products – Design Flow at Netguru: the Approach
• Anticipatory Design, pt. 1
• Anticipatory Design, pt. 2
• The Nine States of Design
• Google’s 9 Principles of Material Design
• Misused mobile UX patterns
• How to Design Native Mobile Apps
• Golden Rules of User Interface Design
• Empty State: Mobile App “Nice-to-Have” Essential