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.
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:
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:
- Predefined layouts
- Option to add images, fonts, and attachments
Of course, feel free to choose your own tool!
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.
- 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:
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.
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.
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”).
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).
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.
Something is not right about the component. An error has occurred.
This item has had its requirements satisfied.
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.
3. When a design conflict emerges, bring the discussion back to the business objectives.
4. Be a team player and work to deliver the business objectives.
5. Prepare your files properly.
6. Give feedback and be open to feedback.
7. Presenting and defending your ideas.
8. Embrace the culture of communication.
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.
Questions your client may ask
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
- 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
- Misused mobile UX patterns
- How to Design Native Mobile Apps
- Golden Rules of User Interface
- Design Empty State: Mobile App “Nice-to-Have” Essential