Tag Archives: design process

home page design article

Feel Homey. Handy Tips for Home Page Design.

There’s no place like home, they say. And in the growing world of websites for all the needs and aims, it actually works the same. Home page has multiple functions: it’s a card of invitation, a starting point of the journey around the website, a storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is often the first visual and emotional touch to the website. No doubt, design is one of the core ways to make this touch gentle, smart and helpful. Today we are discussing some effective tips for creating user-friendly home pages.

 

One of our previous articles has already given the insights into the definition, types of content such a page usually includes and basic design strategies increasing home page usability. Continuing the topic, today we are adding more recommendations organized around three essential aspects: information, interaction, and appearance.

usability_interfaces_ux_design_tubik

 

Information

 

To use or not to use? That is the question. In the vast majority of cases, home page is the point of user’s decision. In the early 2000s guru of usability Jacob Nielsen mentioned in his article: «Your homepage is often your first — and possibly your last — chance to attract and retain each customer, rather like the front page of a newspaper.» With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website. And it is done not only by beauty and style but first of all by information which is looked for by visitors to the resource. Making it accessible, noticeable and clear, designers grow the chances of positive user experience.

 

In general, home page can include the following data:

  • the nature of the website: the page has to instantly inform users if it’s a company website, blog, e-commerce website, social network, educational platform or anything else;
  • brand or company identity elements: home page requires a recognizable visual presentation distinguishing the website from its competitors. If there is a product, company or brand behind it, webpage design should consistently reflect its identity. In other cases, the website itself should be seen as a brand and apply strategies of identity design for better brand awareness.
  • benefits of the website: it should quickly inform users why the website can be helpful or interesting for them.
  • internal search: many users come to the websites with clear goals, so functionality to search right from the homepage will make interaction highly productive
  • links to the core interaction zones
  • contact data and links to social networks
  • signs of trust: testimonials, reviews, big numbers of presence in social networks etc.

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals of the website and the research of target audience. Let’s check some tips effective in this aspect.

 

Fill the header with core data

 

As we mentioned in the article about web header design, it is the top part of the webpage, which people see before scrolling the page in the first seconds of introduction to the website. Headers can include a variety of meaningful layout elements, for example:

  • basic elements of brand identity: logo, slogan etc.
  • tagline setting the theme of the website
  • links to the core categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • a language switch in case of multilingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

 

Obviously, it’s impossible to put all the list into one header. Moreover, it’s not a good idea to put everything because the header overloaded with diverse information will distract users’ attention. As Aarron Walter said in his book, «If everything yells for your viewer’s attention, nothing is heard». That is why the choice which information goes to the header and what it looks like arises on the solid ground of communication between a designer, a stakeholder and a marketing specialist. Header is the top zone of early interaction: eye-tracking studies show that the web page is mostly scanned starting from it. So decide, which elements are primary to achieve website goals and use the limited space of header for them. For example, on a news website or a big e-commerce platform search field is crucial for positive UX while on a small company website it may be not needed at all.

 

tubik_studio_structure

 

Apply informative tagline

 

Don’t think the users are going to wander around the website trying to set why it’s useful for them. Being surrounded by the thousands of websites, they may get away at the first seconds if they don’t see a clear reason to stay. So, give it to them — it’s the time for a tagline. In marketing terms, it is the name of a short and catchy phrase that summarizes the benefits or gives the description of the website. Including the keywords setting the proper theme and taking the place on the first level of visual hierarchy for the page, the tagline will quickly inform users why the website is worth their attention.

 

booking_service_ui_tubik

 

Enable users to contact with duty holders

 

Home page is usually the place where people expect to find the contact info any time they need it. The most popular placement for it is footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, if the website presents the delivery service or online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Meanwhile, for an entertainment or news resource, it may be not that crucial so it’s placed in zones of less active interaction. However, in any case, the contact data should be available from home. Among other reasons, it is one of the factors influencing the level of trust to the website.

 

Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them. For instance, if your target audience is teenagers, just giving the phone number may be not effective as they really stick to messengers and social networks. At the same time, if your users are elderly people, social networks may not work in comparison to a phone number.

 

Make call-to-action element instantly visible

 

Unlike the landing pages, focused on narrow and concise goals, home page contents are quite diverse. That’s why it’s important for a UX designer to care how users will see what they really need to see in all that mass of data. No doubt, it cannot happen that all, let’s say, fifty available links on the home page are equally important. So, to make the page usable, all the interactive elements in the layout should be prioritized. Visually, it can be done via the rules of visual hierarchy so that users could see the key things first. And among them, call-to-action elements should be noticed instantly. Otherwise, there will be loss in conversion not because users didn’t want to do the action but because they didn’t find how to do it.

web design UI concept tubik studio

 

Interaction

 

The next aspect to consider is interaction — the way how users perceive, process and interact with the information they find on the home page as well as the website in general. The next set of tips is all about that.

 

Check scannability and mind eye-tracking models

 

It’s not a secret that users first scan pages and only then make a decision if they want to get dip into details. Interface designers are highly recommended to study eye-tracking models which are now described in numerous publications, with the most prominent contribution by Nielsen Norman Blog sharing the results of actual experiments in that sphere for a couple of decades. In brief, researchers mention three typical models of scanning: Gutenberg Diagram, Z-Pattern, And F-Pattern. In case you want to get more, we have given detailed descriptions in an earlier article, so now let’s just check them on schemes.

reading pattern

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy.

reading pattern zig-zag

Z-pattern and the presented zig-zag version is typical for pages with visually divided content blocks. 

 

f_reading_pattern_eyetracking

F-pattern natural for pages with massive presence of copy content

 

Scannability of web pages is enhanced with visual hierarchy that enables designers to show the content in terms of its priority and navigates user from the core zones to the secondary ones. Scannability is one of the parameters to be carefully tested all the time as it has a great impact on usability of the page and its problem-solving potential.

 

Remember that patterns are user’s friends

 

Every creative person feels the urge to apply the original and unique solutions and think out-of-the-box all the time. However, make not to go too far on that way. Remember that the website is made not for creative contests or gallery of fame but for real users. As we mentioned in the post about social networks design, the power of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of wow-effect is needed, but not so much to knock down the user. On home page, too much of design revolution might confuse and scare: if the first page is so hard to understand, user thinks, what’s going to be next? Study the habits of interaction and typical products for that particular target audience to make their habits their power. Strive for the balance between innovation and traditions.

 

bookshop website animation

 

Make the search field easily accessible

 

As we said above, search means much, especially for the users coming to the resource with a clear understanding what they want. A/B testing can support the analysis of its most productive placement on the page layout. It can be a small search field, an icon in the header, a long horizontal field across the page as we have here in Tubik Blog. The main thing is to make it noticeable and clear so that users didn’t waste their time.

 

Use different menus and interaction zones

 

As home pages can provide a variety of links, tabs, fields and buttons, they should be grouped in different menus and zones instead of being given as the list of links. For example, double menu in the header can present two layers of navigation. We have shown the example of such a trick in the case study for a bakery website design. The website uses a sticky header which has two levels of navigation. The upper menu shows the links to social networks, the logo, search, shopping cart and hamburger button hiding the extended menu. The second line of navigation gives instant connection to the core interaction areas: products catalog, locations for the point-of-sales, news and special offers, information about the service and contact section. Visual and typographic hierarchy makes all the elements clear and easily scanned providing solid ground for quick interaction right from home page.

Bakery website design case study tubik

 

 

Make the home page accessible from any point of the website

 

Home is usually the foundation of the website structure. So, users need to have a chance to get back home from any page they are on. Check it when all the pages are designed not to miss this obvious still vital interaction.

 

Don’t direct all the outer traffic to home page

 

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home is not overloaded with diverse links and navigation elements, so conversion can be reached right from it while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

 

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the amount of information they have to get through to find what they need, especially if focused on a particular narrow goal. Using landing pages in the case when you need to concentrate user’s attention on something specific can be the efficient way of solving this problem. Landing page is focused on one item, to make it quickly found and reduce delays when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

 

design agency landing page

 

Appearance

 

The third set of tips is concentrated on the page looks. No doubt, the recommendations are applicable for any kind of webpage, still, on home page, they tend to be more influential.

 

Be stringent in color choice

 

Color is power which can either strengthen or ruin other design decisions. Choosing the color palette, remember that colors influence user perception. Studying color psychology is helpful to make choices that transfer the right message. Attention to traditional color theory will help to find the color combinations that will look elegant and harmonic. One more popular issue is choosing between light or dark background: the solution is mostly based on the type of content website presents. Text-based websites usually use light and airy interfaces while visual-based ones can apply dark background to make the images look deeper and more stylish.

 

Apply recognizable visual prompts and associations

 

Being full of data, home pages usually include the variety of icons and illustrations. Choosing them, always test their recognizability and check if they build right associations. If there is the risk of double meaning or culture differences of target audience, supporting the icons or illustrations with a short copy might be helpful.

 

web design florist store ecommerce

 

Mind the typography issues and readability

 

Choice of fonts and their combination determine not only style but also readability of the home page. Even more, fonts, as well as colors, are also powerful in forming the mood of the page, from entertaining to business-like. So take your time to test various combinations and find the one which corresponds to the nature of the website as well as other design elements.

 

Strengthen the page with a prominent visual

 

Most users are visually driven and perceive messages given in images faster than words. That is why applying custom theme illustrations, high-quality photos or hero banners is a profitable step for a home page. The image of that kind will work as a quick hook catching users attention and transferring the necessary idea. However, overloading home page with images will make none of them effective.

 

financial_service_website_tubik

 

Think about motion and video

 

Another way to support interesting experience on home page is applying videos and animations. On the one hand, motion breathes life into the page, makes it more dynamic and lively, always draws attention. On the other hand, it can increase loading time. Moreover, too much animation annoys users. So, motion should be added in unobtrusive way and thoroughly check in terms of its effect on page functionality.

 

Test the loading speed

 

Whatever brilliant, stylish and breathtaking the page is designed, whatever cool and intuitive is navigation and information architecture — all those things won’t work if users have to wait while it’s loading. For the home page filled with various data, too long time of loading means losing the part of target audience. So, check the speed, optimize the images, make sure video and animation loads up correctly. Caring about this aspect, you respect your users’ time and effort and lay the ground for positive user experience.

 

tubik studio ice ui website

 

Obviously, not all the list of mentioned tips is actual for every single project: approaches can differ as well as audience and goals of the created websites. Yet, it may become a helpful checklist for web designers striving for home page usability.

 

Useful articles

 

Small Elements, Big Impact: Types and Functions of UI Icons.

Best Practices for Website Header Design

Home Sweet Home. Strategies of Home Page Design.

9 Effective Tips on Visual Hierarchy

Color Matters. 6 Tips on Choosing UI Colors.

Take It Easy: Tips for Effort-Saving User Interfaces.

8 Typography Tips For Designers: How to Make Fonts Speak.


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

psychology of shapes in design tubik article

Knock Design Into Shape. Psychology of Shapes.

The success of any visual composition highly relates to how people perceive it. There are many factors influencing human perception and the significant part goes to psychology. In one of our articles, we’ve already discussed the role of psychological principles in design and described how useful they can be on the way to understanding users.

 

The aspect which we want to cover in today’s article is called the psychology of shapes. Let’s see what this direction studies and how it can help designers in the creative process.

 

Psychology of shapes

 

All the visual objects can be analyzed in terms of shape. For example, an average house may be perceived as a rectangle with a triangle on the top and the sun is often presented like a circle with lines around it. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. The science studying the influence of shapes on people is known as the psychology of shapes.

 

The study claims that each shape has its own meaning and influences our mind and reactions differently. There are many psychological tests which are used to define the personality or mental condition via shapes. For example, a favorite figure can tell about person’s character traits, a quickly chosen shape can show what’s on the mind.

 

Many years of research and tests have helped professionals to define what meaning each shape typically brings and how it can influence human perception. Let’s take a closer look.

 

animated tutorial

Social network tutorial animation

 

Geometric shapes meaning

 

Hearing the word shape most people think about geometric figures first. There are plenty of geometric shapes which people see daily including squares, circles, rectangles and others. But what do they mean? Let’s see.

 

Squares and Rectangles

 

These two shapes are thought to be the most commonly used. We see them many and many times per a day. The walls and furniture, books or monitors, cell phones and cameras as well as many other everyday things have square or rectangular shape. Straight lines and right angles of these two shapes give a sense of reliability and security. People strongly associate squares and rectangles with buildings the reason why they bring the feeling of trust and authority.

 

Common meanings:

  • discipline
  • strength
  • courage
  • security
  • reliability

 

tubik_photo_app

Photo App

 

Triangles

Triangle is an energetic and dynamic shape which is always associated with motion and direction. The lines are placed that way so our eyes automatically move to the top of a triangle or in the direction it is placed. Triangles can have different meanings. An upright triangle brings the feelings of stability and balance but the reversed one looks risky and ready to fall giving people a sense of tense.

 

Common meanings:

  • excitement
  • risk
  • danger
  • balance
  • stability

 

Circles, ovals, and ellipses

 

The first and foremost meaning of this shape is the eternity since they have no beginning or end. The circle has a long association with the sun and Earth as well as other cosmic objects while ellipse is similar to the whole universe. That’s why round shapes may give the feeling of magic and mystery. In addition, unlike the previous shapes circles don’t have angles so it makes them softer and milder.

 

Common meanings:

  • eternity
  • female
  • universe
  • magic
  • mystery

 

tubik_art_courses_app

Art Courses App

 

Spirals

 

These shapes can be often seen in nature, for example, shells and some flowers, the reason why it’s often associated with the circle of life and growth. Also, in some cultures, spirals may represent the knowledge or information. In modern society, they are seen as a sign of creativity and a fresh mind.

 

Common meanings:

  • growth
  • creativity
  • calmness
  • intelligence

 

Big City Guide Madrid tubik

Big City Guide

 

Natural shapes meaning

 

All the things created by mother nature have their unique shape. Leaves, flowers, trees, animals, and many other representatives of flora and fauna become the source of inspiration for artists and designers. Natural shapes have clear meanings of the plants and animals which they symbolize. They often bring the feeling of refreshment and unity with the natural environment. In addition, animals and plants can also have their own characteristics and symbols. For example, a rose is a flower of love and passion, while a lion is a symbol of pride and bravery but this is another topic to discuss.

 

Common meanings:

  • originality
  • organic
  • balance
  • refreshment

 

andre landscape tubik studio logo design

Andre landscape logo option

 

Abstract shapes meaning

 

They are usually visual symbols of abstract ideas or simplified versions of natural shapes. Some abstract shapes can be too difficult to recognize because they are stylized and only small details give a hint to what it is. One abstract shape often has both direct and figurative meanings.It is often used in graphic design, especially for logos and icons. Abstract shapes are an effective way to transfer a message quickly without text.

 

Common meanings:

  • the duality of meaning
  • uniqueness
  • elaborate.

 

wedding_theme_website_ui_design_tubik

Wedding theme

 

How designers use psychology of shapes

 

Shapes are essential elements in all design directions. They can serve as components of a visual composition as well as a content organizing tool which divides or connects design elements into groups. To make the sophisticated design, experts need to consider the meaning of shapes and the impact which they have on users’ mind.

 

Graphic designers often deal with small but meaningful elements such as logo and icons. A powerful logo needs to convey the right message which would serve as the brand voice. If the shapes are chosen appropriately for a logo, they will assist to convey the right mood without additional words. For example, in case of a logo for a financial company, one of the approaches can be applying to apply the shapes which convey the feeling of trust and balance such as square or triangle.

 

Various shapes are often found in user interfaces of digital products. They can be used as buttons or icons as well as applied to organize the content on the layout. For instance, text blocks are often gathered in a rectangular or square shape which allows users to quickly scan copy. Using different shapes designers can create effective information architecture for a product. The elements of the layout may be structured in certain shapes so that make users’ eyes easily find core information. For example, if we place the content in a triangular shape placing the vital component on its top, people’ eyes will automatically go to the peak.

web design UI concept tubik studio

The Big Landscape

 

Psychology of shapes plays a big role in typography. There is a great number of typefaces and all of them have their individual impact on visual perception. Some kinds apply round shapes as a dominant and they seem more feminine and mild unlike those with straight lines and sharp angles which are more formal and sometimes aggressive. That’s why it’s important to pay attention what shapes are dominant in a chosen font to avoid a conflict between the context and visual presentation.

 

The human mind is full of secrets and it’s often hard to predict possible reactions. However, the science of psychology helps designers be prepared and comprehend how our brain works, at least at some basic level. Knowing psychology of shapes designers are able to create proficient logos along with problem-solving user interfaces for web and mobile products.

 

Recommended reading

 

Color in Design: Influence on Users’ Actions.

Psychology in Design. Principles Helping to Understand Users.


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

ux writing tubik article

UX Writing. Let User Interface Speak.

During the last two years digital design community has been discussing a brand new trend called UX writing. The term appeared suddenly confusing many people, even some design professionals. Some think it’s a new name for UX design, others see it as copywriting related to the UX topic. In this article, we’ll figure out the meaning of UX writing and why tech world talks so much about it. Also, we’ll provide some practical tips on effective UX writing.

 

What’s UX writing?

 

The term may be new but the process has existed for a long time. UX writing is the practice of crafting copy which is directly used in user interfaces to guide users within a product and help them interact with it. The major aim of UX writing is to settle communication between users and a digital product.

 

Copy created by UX writers is also known as microcopy. The name tells for itself and stands for the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

tubik studio page 404

Page 404

 

Why is UX writing needed?

 

Microcopy has always been a part of digital products, so why have people started to call the process of its creation UX writing? Let’s get it straight.

 

One of the first reasons leading to UX writing appearance is growing attention to the role of copy in UI. Marketing and design specialists have agreed that copy content is a significant element influencing both UI and UX. Bad-written copy can ruin even a really good-looking user interface. As for the microcopy, various user tests have shown that it affects user experience as well as the information architecture and navigation system do.

 

If we look at a product from users’ perspective, we’ll see how useful small copy hints are for them. When people start their journey in new software, short text tips make the process of adaptation fast and easy. Moreover, if menu copy is written professionally, the navigation system is much more clear to use.

 

Considering the positive impact of microcopy on user experience, the new direction appeared in copywriting. At this point, we can expand the essence of UX writing and say that it’s a process of building microcopy elements which aim at improving user experience of a website or app.

 

tutorial_design_tubik_studio

Shauts App Tutorial

 

Who has to do UX writing?

 

We defined the essence of UX writing still one question remains open. Whose duty is it?

 

The direction couldn’t be formed by itself, so, obviously, there are specialists standing behind it. A job of UX writer grows its potential and today we can see more and more offers from companies. They are writers specializing in creating microcopy which aims at boosting pleasant user experience and improving navigation system.

 

UX writing is still a green direction, the reason why the task of microcopy creation often lays upon marketers and copywriters. These professionals have been writing microcopy long before a term of UX writing appeared and they continue doing it as one of the parts of their work.

 

However, it’s not only writers who can create copy for UX. Designers also often try themselves in UX writing. They may not be the specialists in copy creation still they know everything about the information architecture and navigation system of a product. Moreover, UI/UX designers research the target audience peculiarities, so they know how to present visual information for user perception.

 

Copywriters and designers can do UX writing separately but to improve outcome it’s always a good idea to collaborate and share the experience. Together IA professionals, designers and copywriters can successfully create UX copy content and this is how it is often done by many companies today. However, if a company handles many projects which involve much of UX writing, it is reasonable to consider hiring a UX writer to gain maximum productivity for all the team.

 

gourmet_website_interactions_tubik

The Gourmet Website

 

What makes efficient UX writing

 

Some may think that UX writing takes a few minutes to be done since it includes only small pieces of text. However, creation of a powerful phrase for a CTA button sometimes can take much more time and effort than writing of a whole body copy.

 

Microcopy usually can vary from one word to short sentences which should perform numerous functions. So, if we say that in UX writing every word counts, it won’t be an hyperbola. A single word should both help users to get oriented as well as encourage them to stick around. Moreover, there is often a business goal standing behind CTA buttons, so this factor should also be considered during UX writing.

 

The sufficient UX copy needs to be clear and consistent. Users don’t have to figure out what you mean. Copy should be simple so that people could interact with product intuitively. If users don’t notice they’ve been guided, UX writing has been done well. In addition, UX writing, as any other copy content, should be based on the context and the target audience.

 

In addition, we need to say that copy is a design element the reason why its effectiveness highly depends on the visual presentation. UX writers need to make sure it looks good and fits the design composition. Such a condition creates constraints for a writer about the amount of copy and its appearance.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Practical tips on UX writing

 

The experts are still working on developing the direction to set the best techniques and methods of the effective UX writing. However, there are some sufficient tips helping to make sure UX copy will work well.

 

Step into users’ shoes. If you want to create useful copy, you need to understand where users need help. User research assists to learn the target audience and knowing their specialties you can assume what hints people need.

 

Don’t use complicated vocabulary. As we said above, one of the major characteristics of effective UX writing is clarity and simplicity. Copy should be easy to perceive that’s why difficult words may not work well.

 

Write short and then cut it into half. Microcopy received its name not by coincidence. It has to be short but meaningful so that it wouldn’t draw too much attention, only slightly guiding people from one point to another.

 

Test the copy on various users. You can be a guru of writing and UX design still user testing never hurts. If you don’t have anyone who would match the target audience, at least test copy on your co-workers or friends and ask them what they feel about it.

 

Be creative. Microcopy typically includes only short informative messages but it doesn’t mean you have to make it boring. Try to be creative and bring some positive emotions. For example, writing an error message you can use some polite jokes. It breaks tension which may appear if users do something wrong and encourage them to stick around. Just remember to make sure your creativity doesn’t go too far and the target audience will react appropriately.

 

Add images. In case of error messages or onboarding instructions, it can be a good idea to supplement them with funny and pretty images. You can use photos as well as custom illustrations which will strengthen the right message of a copy.

 

Reflect brand voice. Don’t forget that instructions which a product gives to users are always perceived as a voice of a brand. So, before you write copy you need to learn about brand nature so that microcopy would sound accordingly to the brand image.

 

web design tubik studio

Page 404

 

UX writing is a new direction which is full of potential. UX professionals need to consider it as an another essential tool on the way to the improved user interaction and boosted satisfaction from a product.

 

Recommended reading

 

10 UX copywriting tips for designers

5 Ideas for Better UX Writing

UX Writing: How to do it like Google with this powerful checklist

Copywriting in UI. Words that Make Design Go Round.


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

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

tubik studio lettering design

Get Original: Benefits of Handcrafted Lettering in Design.

Nowadays, people try to be discernible and unique among thousands similar ones. Business owners strive at the uniqueness of their brand and often demand something special from designers. The majority of original things are made by hands. Custom hand lettering took its place among other design techniques a long time ago and it never gets old. All the advanced digital tools still couldn’t replace it and even more, they only supplemented it with new opportunities. Today’s article reveals the essence of lettering and shows its role in the design industry.

 

lettering designer

 

What is lettering?

 

The essence of the term “lettering” is already hidden within its name. To be specific, lettering is the art of letter drawing when a word or phrase is presented as an artwork. Each letter is drawn in an original way and together they form a unique composition. Lettering masters usually work by hands using various pencils, brushes, ink, or chalk. Some may prefer applying graphic tablets and stylus but it can be more challenging because it requires advanced skills in special programs like Adobe Illustrator. A distinctive characteristic of hand lettering is that an artwork can be carefully developed as well as absolutely spontaneous.

 

tubik studio lettering design

 

Lettering vs Calligraphy

 

People seeing decorative letters may think “ A calligrapher did a stunning work!”. It happens because not everyone knows that lettering and calligraphy are not the same things. Let’s clear this out.

 

As we said above, lettering is the art of letter drawing while calligraphy is the art of beautiful letter writing. A dip pen and ink are the main tools of calligraphy masters. Calligraphers follow certain rules to create a perfect construction with the letters made in one style. They regulate the width of lines by changing degrees of pressure on the pen. Calligraphy masters usually write one letter and even one word with one stroke.

 

One of the biggest differences is that calligraphy aims at the perfection of style while lettering is popular due to the freedom of the presentation. Lettering is more like an individual illustration. Each letter is an original unit and together they form a unique picture. Masters of lettering are not constrained by the certain style, so they can create something really special which isn’t similar to anything else.

 

team_work_tubik_studio_lettering

 

Hand-drawn lettering in design

 

Being an expert means non-stop improving and expanding professional skills. Today a proficient designer is expected to be an artist, architect, psychologist, and illustrator all in one face. So, the lettering skills will definitely be a huge benefit for a designer’s status. However, some may ask how lettering can be applied in web design. Let’s see.

 

Nowadays, a designer can choose from a great assortment of various fonts perfectly suiting different digital products. Nevertheless, it may happen that a client’s product has a wide range of competitors and to stand out, it needs something extraordinary so that the product could attract the attention of the potential customers. Many designers offer to create slogan lettering. It is drawn in an absolutely original way which characterizes the product and the company principles. This way people may memorize the slogan quicker and associate it with the certain product. Design with custom lettering can increase brand awareness and make sure people will be able to distinguish the company from the others.

 

slogan_lettering_tubik_graphic_design

 

In addition, beautiful original lettering can guarantee the pleasant first impression from the company. People always appreciate things which go from hand craftsmanship, so handmade lettering will give clients strong associations with the trust and painstaking. Also, decorative letters give the feeling of aesthetic pleasure which is significant for the delightful first impression too.

 

Hand lettering in branding

 

Building strong brand identity is as vital as providing excellent services to your customers: a business just can’t survive without the brand awareness and loyalty.

 

A logo is one of the key parts creating brand’s image. Well-thought logo design can tell about the personality of a company to the potential clients. A designer’s task is to create a powerful extraordinary logo that would represent the business image and transfer the message of the company.

 

Hand lettering is an effective way to design unique, aesthetic, and recognizable brand identity. A designer creates custom letters fully based on company’s features and peculiarities. The professional will take into account the smallest details paying deep attention to every letter and line because it’s known that the devil is in the details. Moreover, today everyone strives at uniqueness so a great benefit logo with the hand lettering brings to a business is that everything made by hands can never be repeated once again. It means a company receives an original logo that will be hard to plagiarize so people will associate it strongly with your company.

 

toonie-photo-lettering

Logo lettering handcrafted for Toonie Alarm

 

Pitfalls lettering may bring

 

Despite all the pleasant emotions and benefits hand lettering brings, it isn’t perfect as well as any other technique. First of all, considering hand lettering as a design element, you need to think if it suits the brand. For example, it’s hard to imagine a website of a law firm with decorative letters say “We’ll protect your rights”. Hand lettering looks artistic and sometimes even playful. A designer needs to understand the target audience and their requirements before taking decisions.

 

Another point to keep in mind is legibility of letters. Sometimes, it may be difficult to see the line between beautiful and usable. Designers may go too far with the letter decorating turning them into the illegible mess. Badly readable letters may ruin the transferred message so a company risks falling into disrepute or losing the reach.

 

Points to consider

 

Hand lettering is an old craft requiring discipline, knowledge, and talent. Not every designer will choose to spend time and effort to lettering learning. However, for those who want to learn and for the companies thinking about applying hand lettering, we present the list of possible benefits it may bring.

 

  • Hand lettering is fully original so it makes the design feel fresh and special.
  • Custom letters always look extraordinary and attract customers’ attention.
  • Beautiful decorative letters influence visual perception bringing the feeling of aesthetic pleasure.
  • Powerful hand lettering increases brand recognition.
  • It’s sometimes easier to transfer the right message of a product via custom letters than with the help of digital fonts.
  • Original lettering assists a company to stand out against competitors.
  • Hand lettering can guarantee a pleasing first impression.

design_for_business_tubik_studio

 

Recommended reading

 

Drawing Type: An Introduction to Illustrating Letterforms

 

The Art Of Hand Lettering

 

Creating a Hand-Lettered Logo Design

 

Understanding The Difference Between Type And Lettering

 

Hand Lettering for Responsive Web Design


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

tubik free podcast design business terms

Tubik Podcast #3. Design Workstyles: Freelance VS Teamwork. In-house VS Outsourcing.

New technologies showing dynamic progress have brought numerous approaches to creative processes of all kinds. Being one of the most diverse and flexible spheres, design quickly absorbs all the innovations and evolves into new work styles. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. The third track presented here continues the set called «Business Terms for Designers» and gives insights on the variety of workstyles. On the ground of practical experience, we review the benefits, responsibilities, and pitfalls for those who are choosing between freelancing and teamwork, outsource or in-house design. Welcome to listen and follow the updates!

 

If you want to get the set of three episodes devoted to the theme of business terms and processes in the design aspect, subscribe here and get them right into your inbox.

 

To learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

UI design Upper App

Time-Management Tips for Creative People

People often say that 24 hours are not enough to do everything they need. However, we can’t add a few more hours no matter how everyone wants. What we really can do is to use time properly. The process of organizing and planning your time is called time management. Today the appropriate use of time is more significant than ever before because we live in the world of strict deadlines and great demands. Time management helps us to be more productive and work smarter.

 

When you work in a creative industry, time management seems to be something far and impossible to do. Loads of work, lack of inspiration never allow you to feel free in controlling your time. Nevertheless, our bosses and clients expect us to be highly productive, so we cannot afford delays and mistakes and have to use our time in the most effective way. Today our article presents some practical tips on time management for creative workers.

 

faq set by Tubik Studio

 

Plan your day

 

Many of us coming at work may spend the whole morning surfing the social networks up till the lunchtime and then wonder where the morning hours have gone. The problem is that we rarely plan the day ahead so we don’t know which task, among hundreds needed to be done, to start with. The daily plan helps to organize the tasks and gives the review on how your day will come to pass. With the plan on hands, all you need to do for having a productive day is stick to the plan as close as you can.

 

It is useful to form your daily strategy in the evening before you sleep or in the morning before the workday begins. There are many ways to creating an effective daily plan. For example, you can write a to-do list in your datebook or take some notes on your smartphone. Moreover, today many apps make this process even easier. Here in Tubik, we know the value of time and how crucial the daily plan is for the efficient day. Recently, we launched our to-do list app Upper motivating users and boosting productivity. And it’s absolutely free for everyone.

 

upper app UI design case study

 

Prioritize the tasks

 

Creating your personal to-do list may become a problem when you have loads of tasks to accomplish. Of course, all the assignments given to us by our clients or bosses are urgent and all of them are usually marked as “to do as soon as possible” but we’re humans and it’s impossible for us to do lots of tasks at once. That’s why you need to think out the details and prioritize the important assignments. To set the priorities effectively, it can be good to answer to yourself objectively which project needs to be finished today and which can wait a bit more.

 

However, if you have a creative job, it’s not always possible to stick to your plan and accomplish the tasks in the right order. The artistic job heavily depends on inspiration and its absence can stop the whole process. In this case, creative people are recommended to have a fallback meaning the next project in the priorities. Switching to another kind of work can have the positive effect to your mind and creativity.

 

Eliminate distractions

 

If you’re a designer, a writer or an illustrator, your job includes using the Internet, full-time or partly. Of course, the net is the major source of useful information, but on the other hand, it is also the spring of distractions such as social networks and entertaining websites. Interfering the creative process, you can’t concentrate completely on the task meaning you are not able to do the job properly. Certainly, it is hard to eliminate all the web distractions since we need to check our emails or contact the clients, still, we don’t need to be online for 24 hours. In most cases, you can choose the certain time for this part of daily routine like 10 a.m and 6 p.m. and that is enough to keep up with the things going on and stay in touch with the customers.

 

copywriting for digital products

 

Track the time

 

It is said that happiness takes no account of time. Nevertheless, any project has its deadline and we have to fit it, so the count of time does matter here. To be more productive, it’s advisable to establish your own mini-deadlines for the tasks. For example, the task number one should be ready at 11.20 a.m, the next should be done at 13.00 p.m. Try to estimate the time needed for the specific assignment more objectively, do not overestimate yourself. Having a detailed schedule, you organize your time in the most efficient way and prevent your work from dragging on. Also, this helps your mind stay focused on what should be done right here and now.

 

Stop procrastinating

 

The majority of us constantly postpone our duties for a particular reason. However, sometimes it may turn into the chronic procrastinating when we do anything but work. This can’t bring any good to either you or your clients, so something has to be done about it. Here are several pieces of advice on how to reduce the procrastination in the workflow.

 

Don’t push yourself. Negative emotions never help. While you’re biting yourself for the moments of procrastination, you are not able to start work. So, the first step to take is to calm down and understand that everyone is keen to procrastinate. There’s nothing wrong with you.

 

Find out the reason. Every time we postpone tasks there is a reason standing behind it. So, when you feel like procrastinating you need to ask yourself why you are doing it. Is the task too boring, or complicated, or unclear for you? Finding a reason, you’ll be able to find the solution.

 

Split big projects into small steps. Consistently, when we have a big project ahead, it may seem a heavy burden which cannot be accomplished anytime soon. That’s why, it is always a good idea to split the project into small, clear, and simple tasks. You can also talk this through with the client and set the mini-deadlines which will definitely improve your workflow.

 

Stay focused. Multi-tasking has become a part of the routine for many of us a long time ago, but only a few people learned how to deal with it effectively. We often switch from one task to another, and as a result, nothing is done properly. Try to stay focused on one task at the time, so you could perform it as good as you can. Shifting to the other activity is effective only in case you are totally stuck and have no idea where to move next.

 

tubik studio design business

 

Be good, not perfect

 

Someone may say that perfectionism never hurts but it’s not completely true. When you constantly work under deadlines, the desire to make everything perfect may play a joke with you. Trying to avoid the smallest mistakes at the certain stage of your work, you lose the time reserved for the next steps. And when the deadline comes, you realize that you have 80% of a perfect design, while the client expected the fully accomplished work. To avoid such a situation, try not to get obsessed with the smallest details that are not vital for the task. Remember that you can always polish everything later if you need.

 

Don’t forget to enjoy your life

 

Creative job demands the creative energy, but the endless projects, meetings, brainstorming, and other work routines can make us tired no matter how much we love our job. It’s necessary to include time for relaxing into your schedule. An evening with your friends or in the gym can charge you with the positive energy and inspire you to do something new and wonderful. So, don’t forget to find the opportunity of having a good time.

 

tubik studio sketch photo

 

Using at least some of these tips, you can improve not only your workflow but everyday lifestyle too. Value your time and the others will do the same.
 

Recommended reading

 

Why Being A Perfectionist May Not Be So Perfect

 

19 Productivity and Time Management Apps for 2016

 

Deep Work: Rules for Focused Success in a Distracted World by Cal Newport

 

First Things First by Stephen R. Covey, A. Roger Merrill, and Rebecca R. Merrill

 

30 Time Management Tips For Work-Life Balance


Welcome to read Seven simple tips for beginners in digital design

UI design product management

Managing Success. The Role of Product Manager.

In our user-centered world, people’s requirements are extremely high and companies have no other option than trying to give only the best products to them. But how can the companies define if their product responds to the requirements of its target audience and make sure it’ll be successful? Who’s responsible for this key part of the workflow? The answer is a product manager.

 

Even though product management is a core part of the workflow in many companies, meaning behind this position can get people confused. First of all, it may be difficult to understand the essence of the “product” part. We are used to seeing “products” as something that is sold to people, so product managers may be confused with merchandiser, sales manager or other person responsible for purchases. Moreover, it may be mistaken for a job of project manager because sometimes they do have similar responsibilities. Today, in our article, we’ll clear up the essence of a product manager and their role in the workflow of web and mobile development and design companies.

 

wordpress theme design tubik

 

Who’s a product manager?

 

Typically, it is a person who is in charge of the general success of the product. A product manager makes sure that all aspects including business model, positioning, branding, and marketing of the product come together and, what’s more importantly, they ensure it meets users’ needs. Their primary concern is the target audience of the product, the business needs and measurement of the future success.

 

However, the role of product management varies depending on a size and a type of a company. For the web and mobile companies, a product manager is the one who builds the extensive network of relationships between customers and all the parts of the team including development, design and marketing departments to identify the goals, roadmaps and the requirements for the product. Their responsibilities include setting the strategy, the communication with customers, and defining the set of basic features. The main objective of a product manager is to create a product that users will love.

 

Product manager vs Project manager

 

It is sometimes thought that these two jobs are identical: they can be mistaken because people don’t see the differences between a product and a project. Let’s figure it out. A product is what a company provides to the users and it doesn’t matter if it’s a tangible thing or a service that they provide such as design. And, speaking of a project we usually mean a plan that includes work stages, expected outcome, responsible parties, fixed terms and budget. The project is accomplished when the outcome is provided, while the product keeps existing (hopefully) far long after the project is complete. In many cases, product is the result obtained from a particular project.

 

tubik studio manager designer

 

According to this, we can say that the prior objective of a project manager is managing the team of specialists to complete all the stages of the project on time and under budget, while a product manager aims at managing and creating the competitive product that will work after the project is complete.

 

You can find more detailed information about a job of project manager in our article Project Management. Design Process Backstage.

 

Why do IT companies need a product manager?

 

Today the importance of product management is higher than it’s been ever before because of the focus on creating user-centered products. Nevertheless, many companies doubt whether they need to hire a product manager or it would be enough to have a project manager who will lead the team. For better understanding of the key role of a product manager in a workflow, we suggest looking closer at the tasks and responsibilities that a product manager usually takes on.

 

User/market research and analysis

 

In one of our previous articles, we’ve already discussed the role of user and market research in the process of mobile application development. User research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors and creative performance ways which could engage users and make them active. Marketing research means exploring the market segment, primarily in the perspective of creative solutions used by competitors. The success of final result depends on how these stages were worked out, so it may be useful and beneficial if they are accomplished by the professional product manager.

 

tubik studio design business

 

Product strategy

 

Product strategy is a plan that organizations follow to achieve desired outcomes.It helps to structure the goals and the ways to achieving them. The product strategy usually consists of a set of chosen activities and milestones to be complete which are typically illustrated as a phased timeline that starts with the current stage and goes to the specific point in the future. The aim of a product manager is to create a solid product strategy that will help organize activities, establish the connection between the product and the company strategy, and clearly identify the steps that should be taken to achieve the business goals.

 

Features for MVP

 

Just to remember, MVP is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations solving target audience’s problems, is created as live and starts real functioning as soon as possible.

 

Product manager’s responsibilities include setting priorities in all the processes of creating a product. Based on the research results, they need to choose only necessary features that respond to the actual needs of core target audience at the moment.

 

design navigation UI UX tubik studio

 

Communication with clients

 

At the early stages, product managers build communication with the clients in order to identify their goals for the future business. When the product is being created, product managers usually write short reports daily which may be filled with graphs, charts, or updated suggestions. In this way, you can build trustworthy relationships with your clients and create the competitive product. Certainly, in some companies, these are the responsibilities of project managers. Nevertheless, a product manager knows more about the specific features of the product, that’s why it may be more effective if the reports on the product development (not a project’s progress) are made by product managers.

 

Presentation

 

Research and analysis process aren’t over after a product has been developed. Product managers keep searching for new ideas and the updates on the target market. That’s why regular meetings and presentations about the findings may be quite useful for the successful outcome.

 

Design Studio Tubik

 

We should note that in many digital agencies, UI/UX designers carry out user and market research by themselves to get deeper understanding what they need to do. Nevertheless, global product strategy planning can be hardly related to the field of designers’ specializations. Marketing, business strategies, economics and communications are forte of a product manager who may know little about design but be able to maintain the product presentation and promotion effectively.

 

As you can see, product management can make the connection of the product to the clients and users tight and efficient from the earliest stages of its creation. However, in any case the decision on involving a product manager into the process is highly individual. It depends on numerous factors, including the budget, complexity of the product and the goals behind it.

 

Recommended reading

 

Here are some more articles we could recommend for those who would like to get deeper into the topic:
 

Behind Every Great Product. The Role of the Product Manager
 

Who Needs Product Management?
 

Why Companies Need Full-Time Product Managers (And What They Do All Day)
 

Transitioning from User Experience to Product Management
 

The User Experience Guide Book For Product Managers


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

upper app UI design case study

Case Study: Upper App. UI Design for To-Do List.

Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely. 

 

Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating app is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of the to-do list design and functionality with our readers.

 

Upper App to-do list tubik

 

Task

 

Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.

 

Process

 

Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the to-do list UI of totally different look and functionality deeply focused on personal and professional motivation.

 

 upper app UI design

 

In UX perspective, the to-do list design was concentrated on extremely simple interactions and intuitive navigation, while in UI aspect the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working on the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.

 

Functionality

 

When our team made a decision to design to-do list, the basic idea set behind Upper was creating a helpful list app design, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.

 

Functions and features provide the following:

  • All the features of the app are free for everyone
  • Upper Streak Challenge motivate users to complete all the tasks for the day
  • Statistics of tasks completion
  • Simple and clear navigation
  • Easy adding, deleting and marking tasks
  • Eye-pleasing slight animation
  • Instant sharing achievements with friends

 

upper app UI design case study

 

Design and Layout

 

Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

 

upper app UI design case study

 

Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in the uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.

 

Upper App to-do list 7

 

Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential. The app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement of being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with the bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.

 

upper app UI design case study

 

Color and style: The task list design is performed in the minimalist and elegant style of the layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will enable to activate any of the three palettes.

 

upper app UI design case study

 

User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks.  No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.

 

upper app UI design case study

 

To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

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