Tag Archives: design tools

mood boards in UI design tubik article

Design Mood. 7 Motives to Create Mood Boards.

Just imagine you worked hard, spent plenty of time creating a detailed prototype, and then a client rejected it saying that it isn’t even close to what he wanted. Sounds familiar, doesn’t it? Every designer at least once has been through such an unpleasant situation. Probably right now everyone expects some relevant advice how to avoid this kind of situations but truly saying there is no a perfect decision.

 

However, there are several methods helping to reduce risks of clients’ rejects as well as save designers’ time and nerves. Today’s article is devoted to the technique called moodboarding. Let’s see what mood boards are and how they can help in the designer’s workflow.

 

What’s a mood board?

 

The technique of moodboarding is popular not only in design field but among many creative professionals. Mood boards are literally boards (digital or material) which people fill with different kinds of things from photos to various textures so that they could visualize ideas and concepts.

 

Unlike wireframes and prototypes, mood boards don’t show the detailed picture of a future project. They are meant to transfer the right mood and bring the emotions expected from a product.

 

Mood boards are a useful tool helping designers effectively collaborate with clients and team members. Boards can be easily created within a tight time frame and turn an abstract idea into a real one. This way designers can effectively share their ideas with the others because visual material always works better than fluent phrases.

 

mood board UI design

Mood board compiled by Tubik designer Ernest Asanov

 

How to create mood board?

 

Mood boards are a good way to experiment with a color palette, fonts, and style as well as plan visual hierarchy of a project. Everyone decides for themselves what components to include in a mood board. UI/UX designers usually use the various samples so that they could characterize interface elements. There are several common types of mood boards. Let’s see what they are.

 

Free collage

 

Designers often collect free high-resolution photos so that they could use the material in the future projects or elsewhere. These collections may come in handy for the mood board creation. A free collage consisting of beautiful photos is an effective way to transfer a mood of the design concept. Also, collages can be filled with illustrations, fonts, and color examples.

 

This type of mood boards is the fastest and the easiest among the others. However, if a client is detail-oriented, they may not be excited with a free collage as an example of a future project.

 

mood board graphic UI design

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Reference collection

 

Another source of inspiration and a method for idea visualization is quality references. There are plenty resources such as Behance and Dribbble where designers can find inspiring concepts and real projects with a free access. Collection of design works united by a common style or any other feature can easily illustrate an idea for a new project. Moreover, such mood boards help clients effectively comprehend a concept because they can see similar references and imagine what their product will look like.

 

Template board

 

These mood boards are more like prototypes and wireframes. Their aim is to show the structure and visual hierarchy of a product. The difference is that UI elements on a template board are not detailed as in prototypes or schematic as in wireframes. Components are shown via random illustrations and photos presenting a layout of a digital product. In addition, images can be selected that way so it would be easy to recognize corresponding color palette. This method is faster than prototyping because it doesn’t require details.

 

ui moodboard design

 

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Why should UI/UX designers create mood boards?

 

Many of us may notice that wireframing and prototyping are always described as essential stages in design workflow while moodboards are rarely mentioned. Some may consider them as the waste of time or just entertainment. Nevertheless, there are many people who include moodboarding as a part of every creative process. But why do they choose the technique? Here we’ve gathered the list of reasons for designers.

 

1. To save time and effort.

 

The first and a big advantage of moodboarding is that it doesn’t require much time to be done. It means that in a few hours, or maybe less, designers can create a visual guide for clients presenting a concept. A mood board can be easily edited so it saves both time and effort.

 

Such a guideline is a good foundation which allows quickly jumping to the next stage of prototyping. Moreover, designers save their nerves if a client is not satisfied with the outcome and demands a new concept because they don’t spend a whole day to create a detailed presentation.

 

2. To get inspired.

 

Of course, designers can’t always rely on inspiration because they have work to do, still, things are done more effectively if the creator is inspired. Moodboarding is a good way to find ideas and enthusiasm. Beautiful photos and illustrations help to find the right mood and style. In addition, if you can, try to create a material mood board via things surrounding you. It is said that handwork has a powerful impact on creative thinking. So, why don’t take a try?

 

3. To find a right color palette.

 

A collage can include photos, illustrations and color samples forming a compelling composition. By mixing images in different colors on a board designers can experiment with a color palette even if UI elements are not ready yet.

 

4. To enhance communication with customers.

 

When a product is at the stage of an abstract idea, it is sometimes difficult for a designer and a customer to understand each other while discussions. For example, both sides can see the certain style a bit differently so it can cause an argument. That’s why it is always a good idea to have some visual references such as a mood board.

 

5. To talk less and show more.

 

Continuing the point above, it should be said that any long report can’t explain your plans and ideas better than a visual presentation. Words can fail in shaping a picture in a client’s head but the visual material is a reliable guide helping customers to dive deeper into details and understand your ideas correctly.

 

Illustrate your ideas at the early stages so that clients could see what you plan and how their product is shaped up.

 

6. To find a style for a design.

 

If a creative team hasn’t received directives from clients about the style of the design, the task lays on a designer’s shoulders. To see how one or another style works, there is no need to build a detailed prototype for each of them. Add to a mood board different textures, experiment with types of illustration, test fonts, and change colors. It’s faster and more convenient to try options with a mood board than spend time changing prototypes one by one.

 

7. To involve clients in a process.

 

One of the ways of gaining clients’ trust is to let them feel they are deeply involved in a project. So, at this stage, if they wish, they can actively participate in the selection of styles and samples. Moodboarding is an easy technique which can be accomplished if you’re a non-designer.

 

Clients can be suggested to make a collage of photos and pictures, or maybe even references if they are not new at this. This way designers can easily learn clients’ tastes and preferences and see what they expect from the project.

 

Examples of mood boards for digital design projects

 

For more practical presentation of the issue, we would like to show you the set of extended mood board, compiled by Tubik designer Dima Panchenko for his projects on user interface design. He also practices adding the general notes presenting the mood board to the client which has a positive effect on the process of communication and choosing the concept for the project.

 

1. The mood board for setting the client’s preferences about the general stylistic concept of the screen.

 

moodboard for UI project

 

2. The mood board presenting the vision of the style corresponding to the project requirements.

 

moodboard for UI design project

 

3. The moodboard with a variety of concepts for a sport app with football theme.

 

moodboard sport app UI design

 

Moodboarding can become a useful habit for every creative person. Designers can create mood boards to find the inspiration or use them as an additional tool in their workflow. Stay tuned!

 

Recommended reading

 

24 pro tips for creating inspirational mood boards

Creating Better Moodboards for UX Projects

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Animation case study by Tubik Studio

Case Study: Animation. Designing Motion.

This post continues our set of case studies. In addition to previous cases on designing logo and working out user experience and user interface, we would like to present the one on animation design.

 

Nowadays animation has a lot of various functions from highly practical to purely decorative ones. The animation we are analyzing this time is thematically decorative. This is the piece of motion graphics developed by our animation guru Kirill as a rebound on Easter and spring icons created by Arthur Avakyan.

 

Animation by Tubik Studio

Animation based on Easter icons

 

Easter icons

The set of Easter and spring icons by Arthur Avakyan

 

As well as the icons, the animation piece is the product uniquely created by Tubik Studio at all the stages.

 

tubik studio designers brainstorm
Kirill and Arthur Avakyan working together on animation of original images

 

Task:

Creating a piece of animation applying specified tools with the aim of promoting the icons set.

 

Tools:

Adobe Illustrator, Adobe After Effects

 

Process:

The idea of the animated shot was based on the set of Easter icons by Arthur Avakyan.

 

Easter icons

 

Inspired by their style, the designer for Tubik Studio Kirill decided to choose two of them as the material for a motion design sample. The work had not only decorative and entertaining but also promotional aims as it was going to become the animated versions to present the icons as the product for buyers. Somehow, it was not the usual work as the designer wanted to combine the idea with practicing the Shape tool of Adobe After Effects.

 

It should be mentioned that earlier the animations for the studio works were created in Adobe After Effects through the traditional way of splitting up the image into separate elements and than manipulating them in After Effects. Despite a lot of positive features, this way of processing images for motion graphics has an important practical disadvantage for complex projects: the elements, which are being manipulated, are raster and therefore they are badly sensitive to changes of the shape and/or size.

 

Splitiing the lements for animation

Splitting the original images into raster elements for manipulation in Adobe After Effects

 

So, this shot became a kind of an experiment because the designer made it the first serious work using the After Effects tool called Shape. This tool is highly functional and allows to change shapes and transform images and elements in a smooth and fine way with the opportunities of sophisticated adjustment.

tubik studio motion designer

Kirill concentrated on creating animation

 

Animation in process

 

Animation in process

 

Animation in process

Processing the images to create the animated shot

 

One more essential thing about Shape is that it makes possible to create a dynamic shadow which is natural, lively and corresponds to the movements of the objects. This can be seen in the animation presented. This time work with a dynamic shadow was much simpler due to the Shape tool. It provides designers with a higher level of functional abilities for creating more complicated and interesting motion graphic works.

 

Dynamic shadow in animation

Creating dynamic shadow makes animation lively

 

Easter piece of animation was the first work fully based on After Effects Shape and this shot gave the designer a chance to feel all its advantages. Since then, Kirill has been actively applying Shape working with animation for interfaces which nowadays is included in the list of top practically useful motion graphics.

 

Major benefits of the Shape tool to be mentioned are the following:

— it gives more additional features than PNG
— it provides automatic processing and adjustment of changes during manipulations with an image
— it gives the significantly smaller size of the final file and that feature makes it highly attractive for work with customers while sending the files
— it creates one and the single file without tying it up to the elements as in PNG.

 

Processing images for motion design is always creative and full of thorough work on details and nuances. Thus, tools and features providing a motion designer with opportunities to process images faster not losing in efficiency are always highly appreciated by designers. So, they obviously have to be the subject of consideration for developers of designing software. And no doubt, that is all fair to say about the Shape tool of After Effects.

 


 

Welcome to see other works by Tubik Studio on Dribbble and Behance

Welcome to see the Easter Icons Pack by Tubik Studio on Creative Market and Envato