Tag Archives: design article

color_glossary_in_design_tubik_blog

Design Glossary: Color. Terms and Definitions.

Color is one of the fundamentals which design is built of. It can be a powerful tool in the expert’s hands affecting numerous factors which are vital for the compelling visual perception. Color has a significant impact on our mind. It changes the way we feel about an object within a few seconds as well as makes people react and even take certain actions.

 

At first sight color science may seem not that difficult to master but diving into the details it’s obvious that there are many peculiarities which demand to be comprehended. In the article Color Theory: Brief Guide For Designers, we touched upon the basics of the science helping designers in their craft. Today we gathered a handy glossary with the essential terms of the color theory which will help graphic and UI designers get the better understanding of how color works.

 

web and app UI design

Add the Color Illustration

 

Color

 

Before we step any further, it’s important to figure out the essence of color itself. The Merriam-Webster dictionary defines it as a phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. Simply put, color is a quality of an object which is caused due to the light being reflected or emitted by this object. Color can be verified visually by measurement of its properties such as hue, saturation, chromaticity, and value. To gain proper awareness of color meaning let’s define its characteristics.

 

Color properties

 

Hue

 

The term hue is often mistaken for the color so it needs to be cleared out. First, we should understand that “color” is a general term which people use to name all the hues, tints, and tones. On the other hand, a hue is exactly the thing we mean asking “what color is it?”. Basically, it is a family of twelve pure and bold colors presented on the color wheel.

 

A hue serves as a basic material which can be transformed in three different ways — tinting, shading and toning. Depending on the applied technique, a hue is modified into tint, shade, or tone.

 

They are easy to distinguish. A tint is created by mixing a hue with white, while a shade is a mix of a hue and black. Toning is a more delicate process because it requires adding both black and white the reason why the results may seem more natural than shades and tints.

 

color-glossary-tints-tones-shades

Source

 

Value

 

As we said above colors have certain characteristics by which they can be recognized. Value is a property telling how light or dark a color is. The characteristic is defined by the level of whiteness. The more white has been added to a hue, the higher value it receives.

 

Chromaticity

 

Chroma, or chromaticity, shows the purity of a hue. The characteristic is measured by the presences of white, grey, or black in a color. Twelve basic hues described above have the highest level of chromaticity since they don’t contain any additional elements. Colors with high chroma usually look bold and vivid.

 

Saturation

 

This characteristic has much in common with value and chroma, so sometimes they may be mistaken. Still, it’s vital to understand the differences. Unlike two previous properties, saturation doesn’t apply mixing hues with any other colors. It is about how a color looks under different lighting conditions. Saturation describes how bold or pale a color is according to its look in the daylight and weak light. The property is also known as the intensity of a color.

 

color theory design tubik

 

Color wheel

 

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel and helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors which are also known as hues.

 

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination.The idea is that the color wheel must be made that way so colors would be mixed appropriately.

 

color theory design tubik

Source

 

Color types

 

Primary colors

 

They are three pigment colors that cannot be formed by any combination of other colors. The primary colors serve as the basis of a whole system.The primary colors vary depending on the type of color system. A subtractive system is based on cyan, magenta, and yellow, while red, green and blue colors form the additive system. And the painting system RYB includes red, yellow and blue.

 

Secondary colors

 

These colors appear by the combination of two primary colors. Since each system has different basic colors, the secondary colors vary too. Here is a schematic explanation of secondary colors appearing in each system.

 
RGB:

  • green+red=yellow
  • red+blue=magenta
  • blue+green=cyan

 

CMYK:

  • yellow +magenta=red
  • magenta+cyan=blue
  • cyan+yellow=green

 

RYB:

  • yellow+red=orange
  • red+blue=purple
  • blue+yellow= green

 

Tertiary colors

 

The mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet or yellow-orange.

 

Cool, warm and neutral colors

 

All the colors we described above can also be divided into three types: cool, warm and neutral.

 

Cool colors are the ones on the green-blue side of the color wheel. They are called cool since they bring the feeling of cold. Warm colors are opposite to the previous due to the warm associations which they possess. Yellow, orange and red are the hues relating to the warm type. Last but not least, neutral colors are absent on the color wheel including gray, brown and beige.

 

weather app design UI

 

Color systems

 

RGB

 

RGB color system considers red, blue, and green as primary colors. The system is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

 

RYB

 

RYB (red, yellow, blue) is also known as painting color system often used in art education, especially in painting. It served as a foundation for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed.

 

CMYK

 

The system CMY has been modified with the appearance of the photomechanical printing. It received the key component meaning black ink and the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown. Today this color system is mostly used in the printed design.

 

color theory design tubik

Source

 

Color schemes

 

The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes, aka color harmony, which work effectively.

 

Monochromatic

 

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create the distasteful color scheme.

 

business cards design

Deetu Business Cards

 

Analogous

 

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

 

binned logo animation design

Binned Logo Animation

 

Complementary

 

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

 

home budget web interface

Home Budget Dashboard

 

Split-Complementary

 

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

 

financial_service_website_tubik

Financial Service Website

 

Triadic

 

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in this scheme, it is recommended to use one color as a dominant, the other as accents.

 

dating_app_landing_page_tubik

Dating App Landing Page

 

Tetradic/Double-Complementary

 

The tetradic color scheme is for the experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.The scheme is hard to harmonize but if you do everything right, the results may be stunning.

 

business_card_app_animation_tubik

Business Card App

 

Let’s sum up with the prosaic quote by RyPaul: “The whole point is to live life and be — to use all the colors in the crayon box.” Learn how to use colors effectively both in your life and work and the results will please you.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.
Color in Design: Influence on Users’ Actions.
Color Matters. 6 Tips on Choosing UI Colors.
3C of Interface Design: Color, Contrast, Content.
Color in UI Design. Look on the Bright Side.


Welcome to see designs by Tubik on Dribbble and Behance

most popular design articles in tubik blog

20 Most-Read Design Articles by Tubik in 2017

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Striking the balance of 2017, today we have collected here the list of posts which were most-read, shared and liked during the year. They are devoted to the variety of design issues in the domains of UI and UX, information architecture, logo and branding, design for business and marketing. So, welcome to review them together to check what themes have been found the most actual.

 

home page design article

 

20 most popular articles

 

Psychology in Design. Principles Helping to Understand Users: the post about general principles of psychology which can help designers know users better and create user-friendly web and mobile interfaces.

 

Best Practices for Website Header Design: the set of insights on the definition, structure, and composition of a website header as a strategic part of the website with a variety of examples and approaches.

 

UI/UX Design Glossary. Navigation Elements: another set of UI/UX Design Glossary, explaining terms in the field of user interface design. Focused on navigation elements: buttons, menus, switches, icons etc.

 

Color Theory: Brief Guide For Designers: the article concentrated on the basics of color theory and color combinations in design. Learn more about the color wheel, RGB, CMYK and models of color harmony.

 

Color in Design: Influence on Users’ Actions: considerations devoted to the issue of using various colors in user interfaces and branding design, associations and the influence of color choice on user behavior.

 

Mobile UI Design: 15 Basic Types of Screens: mobile applications evolve with user’s needs offering new functionality, still, there are screens common for many apps and they are the focus of this article.

 

Gestalt Theory for Efficient UX: Principle of Similarity: the article considering Gestalt theory application in interface design: this time it’s focused on similarity principle of effective content grouping in UI.

 

Gestalt Theory for UX Design: Principle of Proximity: the second post in the series devoted to applying Gestalt principles in design of user-friendly web and mobile interfaces, today about the principle of proximity.

 

How Human Memory Works: Tips for UX Designers: insights into the ways human memory works and the factors of its influence on UX design solutions for websites and mobile apps.

 

Information Architecture. Basics for Designers: the article providing insights into the basics of information architecture for designers and setting the link between IA, UX and UI for websites and applications.

 

Tips on Applying Copy Content in User Interfaces: considerations on some essential points on the effective use of text in web and mobile user interfaces: visual hierarchy principles for copy content.

 

Gamification in UX. Increasing User Engagement: the post is centered on the aspect of gamification applied to mobile applications and websites for engaging UX design and user-friendly interactions.

 

Typography in UI: Guide for Beginners: In design, every layout element plays its role. This post presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.

 

Case Study: Upper App. UI Design for To-Do List: the case study about UI design created by the Tubik team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.

 

Case Study: Vinny’s Bakery. UI Design for E-Commerce: the design case study that looks and feels tasty: check the details of UI/UX and animation for a website presenting a small elite bakery selling home-made bread.

 

Lean and Mean: Power of Minimalism in UI Design: dive into cases when less is more: the definition, history, features and benefits of minimalism applied in UI design for websites and mobile applications.

 

Knock Design into Shape. Psychology of Shapes: the psychology of shapes is helpful for creating user-friendly interfaces. The post features the meanings of different shapes and their influence on design solutions.

 

UX Design for E-Commerce: Principles and Strategies: the general insights on design for e-commerce websites and mobile applications in business, UX and UI perspectives: tips and strategies to consider.

 

Feel Homey. Handy Tips for Home Page Design: the set of effective tips enhancing usability of home pages for various websites. Check the design strategies for information, interaction and appearance.

 

Golden Ratio. Bring Balance in UI Design: The article devoted to golden ratio as an effective technique for web and mobile user interfaces: check how it brings balance and aesthetics into UI design.

 

Bonus: Free ebook and the review of 2017 design trends

 

Problem-Solving Web Design. Free E-Book by Tubik: the free e-book by the Tubik team presents the overview of theory, practices and design cases for user-friendly websites and landing pages.

 

Review of Popular Interface Design Trends in 2017 — traditional year-in-review post observing the most popular trends of 2017 in user interface design for websites and mobile applications: UX approaches and examples.

 

most popular design articles in tubik blog

 

Wishing you great holidays and productive new year, we are already working over a new plan to write content which is helpful and useful for the global design community. Huge thanks to all our readers for support and loyalty and best regards from all the Tubik team!


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

tubik_quotes_design_for_emotion

Design for Emotion: Expert Tips by Aarron Walter.

The highest priority, which the designers set creating a website or mobile application, is functionality and usability of the interface — and for sure, that’s a right direction. However, it shouldn’t be forgotten that one of the crucial conditions of positive user experience is desirability. People aren’t only made of logic and action, they are also full of feelings, intuition, emotions, and memories. That’s what designers have to keep in mind aiming at user-friendly products.

 

Earlier we have already shared numerous expert quotes, tips, video talks and books worth reading to support our readers with useful resources. In particular, you could check the insights into Design Is a Job by Mike Monteiro — the book belongs to the series A Book Apart supporting designers with the diversity of expert tips, case studies, and resources. Today continuing this way, we would like to share a new set of quotes from the book highly recommended for UI/UX designers: Designing for Emotion by Aarron Walter, former Director of User Experience in MailChimp and now the VP of Design Education at InVision. The book offers the reasons why users’ emotional respond means much for setting positive user experience strengthening this idea with references to scientific research works and practical case studies of design for recognized websites. So, here we will save a bunch of 35 useful expert tips from the book for Tubik Quotes Collection — join in and let’s look into the design for emotion together. 

tubik_quotes_design_for_emotion
 

For a user’s needs to be met, an interface must be functional. If the user can’t complete a task, they certainly won’t spend much time with an application.

 

Many websites and applications are creating an even better experience. They’re redrawing the hierarchy of needs to include a new top tier with pleasure, fun, joy, and delight. What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed!That would be an experience you’d recommend to a friend; that would be an idea worth spreading.

 

We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?

 

design_quotes_tubik 02

 

Emotional experiences make a profound imprint on our longterm memory. We generate emotion and record memories in the limbic system, a collection of glands and structures in the brain’s foldy gray matter.

 

When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

 

Certainly, emotional design has risks. If emotional engagement compromises the functionality, reliability, or usability of an interface, the positive experience you wanted will mutate into a rant-inducing disaster for your users. A friendly wager with an upset customer isn’t always going to turn the tide.

design_quotes_tubik 03

 

Our definition of beauty originates in our own image. The human mind is exceptionally skilled at scanning objects and information to discover meaning in abstract forms. We can find traces of ourselves in most anything we see, and we like that. Our ability to find signal and discern patterns in so much noise is a very important trait we use to navigate life, and as you might expect, this ability to recognize patterns greatly affects the way we design.

 

As you increase the number of high contrast elements on a page, you proportionally increase the time needed to perform a task, learn a system, and remember pathways. Adding stuff pushes the human brain to its limits. Have you ever been to a party where everyone is yelling to speak to the person next to them? As the volume increases, everyone must speak louder to be heard, but that makes it even harder to have a conversation. Design works in the same way. If everything yells for your viewer’s attention, nothing is heard.

design_quotes_tubik 04

 

 

Design is too often wrongly taken for the indulgent frosting on a functional interface. Have you ever overheard a colleague declare, “It would be nice if we could have a sexy interface, but people care more about what the site does than how it looks”? Would this person show up to a job interview in their pajamas because people only care about what they can do and not how they look? If they did, I’d bet they’d discover that thinking is flawed.

 

Through our personalities, we express the entire gamut of human emotion. Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design.

 

With personality as the foundation of your designs, you can layer more emotional engagement on top.

design_quotes_tubik 07

 

 

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface. To achieve this goal, we must consider how we interact with one another in real life.

 

In modern web design, we research, plan, and create with our audience’s attitudes and motivations in mind. User experience designers interview their audience, then create personas—a dossier on an archetypal user who represents a larger group. Think of personas as the artifacts of user research. They help a web design team remain aware of their target audience and stay focused on their needs.

 

Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team to construct a unified and consistent result.

 

We know that people using websites and applications navigate and process content quickly and that their attention is limited. Introducing surprise into an interface can break a behavior pattern and force the brain to reassess the situation.

design_quotes_tubik 08

 

Aside from being the right thing to do, surprising people with kindness and individual attention can help a business achieve success.

 

Anticipation is what game designers call an open system. Games designed with an open structure, like The Sims, allow users to wander and shape game play on their own terms. Open systems encourage people to use their imagination to create a personalized experience.

 

Giving users the power to choose changes the tone of their response. When forced to change, people often react negatively. Allow people to change on their own schedule, and you empower them, diffusing animosity. We’d all rather hear “You may …” instead of “You must ….”

 

Surprise, delight, anticipation, elevating perceived status, and limiting access to elicit a feeling of exclusivity can all be effective in getting your audience to fall in love with your brand. But your tactics must be appropriate for your audience and brand experience.

design_quotes_tubik 09

 

As designers, we’re in a unique position to help users follow their gut instincts. Using common design tools like layout, color, line, typography, and contrast, we can help people more easily consume information and make a decision driven by instinct more than reason. Just as you chose the shirt you’re wearing because it felt right, we can help our audience sign up for a service or complete a task because their gut tells them it’s the right thing to do.

 

The way type, color, and layout fit together says a lot about a brand and shapes new users’ perceptions.

design_quotes_tubik 10

 

Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website.

 

Skepticism is not the only obstacle we confront when trying to entice our audience to act. Laziness is just as big a hurdle. In truth, people really aren’t as lazy as we like to think they are. They’re just looking for the path of least resistance to their destination. When people are reluctant to act, sometimes a little incentive gets them moving.

 

Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface.

design_quotes_tubik 05

 

Users react apathetically to websites when the content is irrelevant to their interests, or when content is poorly presented. Content strategy will help you create the right content for your audience.

 

Great content delivered in an emotionally engaging manner is like kryptonite for apathy.

design_quotes_tubik 11

 

Emotional design is not just about creating positive experiences and overcoming obstacles. It can also help us deal with difficult situations like server downtime, lost data, or bugs that affect a user’s workflow. Mistakes happen. Things go wrong. But a well-crafted response, and the cache of trust you accrue with your audience through prolonged emotional engagement, can save you in times of trouble.

 

In fact, when you create a compelling experience, your audience will often forget about the inconveniences they’ve encountered over time and just remember the good things about your brand. So long as the good outweighs the bad, you win.

 

When people are deeply stressed by an outage or a mistake you’ve made, you must explain what happened swiftly, honestly, and clearly. Give people the facts of the event, communicate that you’re doing your best to resolve things, then update users regularly, even if not much has changed.

design_quotes_tubik 06

 

Updates let people know you’re still focusing all of your attention on resolving the problem. They give you another opportunity to apologize for the inconvenience and reassure your users that you’ll fix the problem as quickly as possible.

 

In high-stress situations, your top priority must be to tame negative emotions as best you can and, if possible, shift them back to the positive.

 

Emotional design is your insurance to maintain audience trust when things aren’t going your way. If you’ve ever been emotionally committed to someone who has hurt you, you know that the human response to such situations is driven by gut feeling more than by logic. You don’t add up the good and bad experiences in your mind and do a detailed comparison before deciding whether or not to maintain ties with the person. You simply respond based on the strength of your emotional commitment. We react similarly to products and services.

design_quotes_tubik 12

 

Emotional engagement can help us look past even the most serious infractions, leaving the good more prominent in our mind than the bad. Psychologists call this phenomenon of positive recollection the rosy effect. As time passes, memories of inconveniences and transgressions fade, leaving only positive memories to shape our perceptions. This is good news for designers, as it means that the inevitable imperfections in our work don’t necessarily lead to mass user exodus.

 

Emotional design does more than entice and keep your audience, it helps ensure you’re talking to the right people. Not every customer is right for your business. Some will be so high maintenance that they will cost you more than they contribute. That can be a real morale and financial drag.

 

We’re not just designing pages. We’re designing human experiences. Like the visionaries of the Arts and Crafts movement, we know that preserving the human touch and showing ourselves in our work isn’t optional: it’s essential.

design_quotes_tubik 01

As a bonus, we also add the video talk by Aarron Walter continuing the ideas from the book — it was included in the set of must-see expert speeches for UI/UX designers.

 


 

Welcome to check the quotes by Mike Monteiro from «Design Is a Job» for A Book Apart

Welcome to check issues of Tubik Quotes Collection on brandingusabilityuser-centered design and content strategy

Welcome to read or download Tubik Magazine free books on logo design, design for business and problem-solving web design

Binned case study storyboard

Case Study: Binned. Design for Promo Video Production.

Creating a catchy and stylish promo video for a product or service is a challenging task. However, if realized wisely, it pays itself, becoming another powerful tool for growing brand awareness and promotion. Earlier we already unveiled the creative process of making a year-in-review video for Opera Software designed by Tubik team; today’s case study is going to show you a new story on graphic and motion design for a video introducing Binned, the local cleaning service based in the USA. This time the challenge to participate in animated promo video production was assigned to studio designers Arthur Avakyan and Andrey Drobovich. Let’s have a look at the creative flow.

 

video design animation tubik

 

Task

Graphic and motion design for promotional video production presenting the local trashbin cleaning service.

 

Process

Binned is a service supporting cleaner and healthier environment for the local community by washing and deodorizing the trash bins outdoors. The idea to support the brand promotion with the short, bright and catchy animated video was absolutely logical for this case: trashbins cleaning is not the topic to which people are ready to devote their precious time and read about all the benefits. Meanwhile, the promo video with funny and friendly characters could become a good way to inform the potential users of the service about all its advantages in short seconds.  Moreover, activating multiple directions of perception, video was found impactful in stimulating positive emotional appeal which was to the client’s liking.

 

At the first stage of collaboration with the company, Tubik team created the brand identity for the service including the logo in static and animated versions as well as the pack of branded items — you could have seen the detailed design story in our previous case study. The promo video had to look consistent with the visual style applied to branding and support the idea of the helpful service improving the quality of everyday life for its clients and making the environment healthier for everyone.

 

binned logo animation design

Binned logo

 

 

Storyboarding and graphic design

 

At the first stage, the client and the team agreed upon the visual concept for the video and general story it should transfer. Having got the brief and basic script of the video from the client, the graphic designer started the research and developed the first rough version of a storyboard for the story in the footage. As it usually does in the process of creating promotional videos for a company, storyboard means the illustrations arranged in the sequence of their flow for the video. They featured the images of a bin as a mascot presenting the service and the main character. In general terms, the video presented the story about a dirty and smelly trashbin which was really sad about its condition but then the truck of a cleaning service came and solved the problem quickly: dirt, insects and bad smell are removed and the bin is happy to serve people again. Below you can see the set of sketches for this stage. For this project, the graphic designer applied Adobe Photoshop for both digital sketches and final detailed illustrations.

 

binned video design storyboard

binned video design storyboard

binned video design storyboard

 

After discussing the flow with the client and agreeing upon the final number and sequence of shots for the future video, the next step meant creating a final storyboard for the video showing the scenario scene by scene. In a funny and friendly way, the short story showed the problems, which potential target audience could have, and the ways how Binned solves them easily. The style chosen for the video reflected the idea of the hand-drawn cartoon with a friendly and cute mascot. The color palette was focused on green and blue shades associated with a clean and healthy environment. One by one, the graphic designer made the final version of every part in the storyboard sequence following the consistent style and visual performance.

 

Binned case study storyboard

 

One of the microtasks at this stage was creating the funny images of the rats, insects and harmful bacterias that inhabit dirty trashbins and threaten the healthy lifestyle of the local people. Even being the negative characters of this story, they still supported the general cute and funny look chosen for the video.

Binned video design

 

As we mentioned in our guide to design in promo video production, at this stage it’s vital to set a constructive dialogue between the design team and the client: every single image in the storyboard should be discussed and approved in terms of general idea and goals set for the video. Motion design has many specific features and designers have to be ready to explain them: it can happen that clients express ideas and wishes which technically can overload the footage or look bad in the limited timing. Getting deeper into the goals and results which the client expects, designers looked for the optimal solutions which would make the video both good-looking and effective.

 

Animation

 

When all the storyboard was agreed upon, it was a good time to continue with motion. Here you can see how motion designer worked on visual details in different parts of the video: the magnifier glass featuring the process of a trashbin inspection, the process of loading the bins into the service truck and washing, the bins jumping happily after the wash. The design tool chosen for this type of animation was Adobe After Effects. 

 

binned_promo_video_animation_tubik

 

binned_promo_video_animation_tubik 

binned_promo_video_animation_tubik

 

It was another project for Tubik that proved the benefits of having graphic and motion designers in one team as they work together on all the details and assets from the earliest stages of the creative process and can consult with each other any moment it’s needed. It makes the workflow dynamic and productive enabling the client to get the video without wasting time on trying to bring several teams together.

 

Outcome

 

After the animation of all the shots was finished, it was thoroughly checked along the required timing and harmonic combination with the voice-over.  Here’s the final version of the video.

 

 

Binned project added one more bright page to the Tubik history providing the extensive case of participation in brand strategy for a service company, from creating visual identity elements up to consistent brand style guide and promo video. Don’t miss the updates, new case studies are just around the corner.


Welcome to read a case study on Binned Brand Identity Design

Welcome to check Binned Video project in Tubik Portfolio

Welcome to read a step-by-step guide to design for promo video production

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

tubik studio reading list design

Tubik Weekly Reading List on Design. UI/UX Tips

Taking the time for self-improvement, self-education and inspiration on a regular basis is a sort of thing important for professional growth as well as keeping aware about the latest trends in your trade. However, very often we find ourselves to busy with current problems and tend to miss some news and interesting publications. In this case, recommendations on the most useful things that don’t have to be missed in the constant and fast-pace flow of news can become a helpful way to get updated.

 

Meeting requests from Tubik Blog readers, we are starting Tubik Reading List for designers as well as all the other people who are involved or interested in design process, techniques and secrets. Every week we will share our recommendations on articles and books which we find useful for our readers.

 

This time our set of recommended articles and the book of the week are concentrated on the issues of user experience design.

 

Tubik Studio designer reading

 

Recommended articles

 

Classic Landing Page Mistakes You’re Probably Still Making — the article analyzing the stuff that typically needs improvement to make a landing page bring higher conversions.

 

Key thought: In general, your landing page should absolutely be as minimal as you can make it because distractions (ie. anything that takes users and leads away from your page goal) will cost your site money.

 

Can you Code this UI Concept? Vol. 3 — a fresh set of challenging UI design concepts in there CodePen implementation. We are happy to mention that one of the designs featured in the set belongs to Tubik Studio designers.

 

Key thought: UI concepts do get your inspiration running, are great practice and are not always impossible to code! Kudos to the talented designers and developers behind them!

 

Understanding UX Strategy — a thoughtful article by professional product designer and UX strategist providing basics of strategical thinking applied in user experience design.

 

Key thought: The best-looking design in the world is worthless if you haven’t made an effort to figure out who your users are and what they need.

 

Microinteractions in Mobile Banking — practical tips dealing with importance of correct design of microinteractions in terms of interfaces for e-commerce.

 

Key thought: Easy is good. This can make an annoying and clumsy app, a great app. And this goes from the functionality to the IA.

 

How To Become a Great UX Designer Without a Degree — the flow of stepping into UX career on the basis of practical tips rather than theoretical education.

 

Key thought: Unfortunately, UX design isn’t something you can learn without some work experience. Fortunately, it is something that you can learn without a degree.

 

Microcopy: Tiny Words With A Huge UX Impact — the informative article considering the essence of microcopy and its role in designing positive user experience.

 

Key thought: At a glance, these tiny clusters of words seem insignificant when compared to the overall app design. But surprisingly, those tiny words have a huge impact on conversions.

 

7 UX Tips for Effective Conversion Rate Optimization — the post analyzing good ways of improving conversions via solutions improving usability.

 

Key thought: Drop the assumption that there are any best practices or that they are applicable to everyone. Take every bit of advice given here […] with a grain of salt. Learn, implement, test, and debunk them.

 

Experts Weigh In: What Are Your Non-Negotiables When It Comes to Designing Great User Experiences? — a great bulk of advice from well-known design experts revealing their secrets of creating positive user experience.

 

Key thought: There is something really powerful and often underestimated about beautiful, polished design in the UX world.

 

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce — the article considering various design solutions and their efficiency for positive user experience in e-commerce based on actual usability studies.

 

Key thought: We’ll see how search results need to be implemented differently from category navigation, along with several pitfalls with implementation and examples from leading e-commerce websites.

 

5 ways to get the most out of mobile UX — the post discussing some points essential in the process of creating effective design for user-centered mobile applications.

 

Key thought: Today, designers boast about the “ease of use,” “intuitiveness” and “addictiveness” of their apps, as if these traits were worthy goals in themselves. I’d like to propose a more empathetic goal for mobile UX: earn the user’s respect.

 

 

Design must-read book of the week:

 

UX Strategy: How to Devise Innovative Digital Products that People Want by Jaime Levy

 

UX strategy book

 

The informative book providing comprehensive vision on UX strategy that implies thought-out application of business strategy techniques in the process of user experience design. Contains both theoretic basis and practical examples. Highly recommended for all the representatives of UX design process (UI/UX designers, product designers information architects, user researchers, managers, marketing specialists, strategists) as well as everyone who is interested in UX design theme.

 

Enjoy your reading and get inspired!

Tubik Studio Interface Animation

UI Animation. Microinteraction for Macroresult

Microinteraction is one of the key things to care about in UI/UX design. They are, perhaps, the best proof that attention to small details is able to give a big and powerful result. Most books and articles on UX/UI design are moving around one basic message: what you finally get when the design process is finished should be not only beautiful but also useful and usable. In our previous posts and case studies we also support the idea that UI/UX designers do not create just a piece of art: they create a product that solves the problem of the target audience, preferably in a fast and easy way. The solid ground of carefully thought-out microinteractions is able to give the designed product such key characteristics of the successful product as usability, utility and desirability.

ipad interaction tubik studio

GIF — Portrait vs Landscape 

 

The essence of microinteraction

 

Basically, microinteraction is one particular case of user’s interaction with the product completing one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. So, it’s easy to understand that user experience includes loads of microinteractions and they are those magic seeds that are able to grow into great usability, efficiency and popularity of the product if get looked after properly.

 

Perhaps, the best deeply-professional piece of writing on microinteractions, their idea, structure, mechanism of work, their kinds, features and role in creating effective UX design is the book “Microinteractions” by Dan Saffer. It is highly recommended to people working in the field of UI/UX design as it provides much better understanding of user-centered design solutions.

 

Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear and fast as possible. There are many ways and methods in design how to enable and improve microinteractions, and interface animation is one of them. We have already started this topic in our earlier article Interface Animation. The Force of Motion, based on general ideas of animation use and purposes in interfaces according to practical experience of Tubik Studio design projects and concepts. There we mentioned that animation enabling and improving microinteractions is something like health: people do not notice it when it works properly but realize its importance when something goes wrong. Microinteractions naturally supported with motion are also hardly notable for users until the moment when they face the problem of their absence. So, today we would like to provide you with more detailed thoughts and examples about some kinds of this interface animation type.

 

tubik studio button ui

Tab Bar Concept 

 

Animated microinteractions

 

Animated buttons

Buttons of different kinds and sorts are, obviously, the most popular elements of interaction. What is more, they are easily perceived by users as the elements with which they can activate a screen or a webpage functionality, even for users with low level of computer literacy as buttons actually imitate interaction with common physical objects. So, buttons are among the elements actually influencing the nature of user experience, making it easy and positive or vise versa annoying and confusing. Buttons in a lot of cases are among the most frequently used triggers of the microinteractions and vital elements of navigation. So, they need thorough attention from the designer in deciding on not only color, shape, special effects, textures and placement but also necessity, appropriateness and nature of animation.

 

ipad interactions animation

iPad App Interactions 

 

ui concept animation tubik studio

UI Navigation Concept 

 

ui concept animation design

UI Animation Concept 

 

tubik studio tapbar ui

GIF of the Tapbar Interactions 

 

hamburger_menu tubik studio

Hamburger Menu Animation 

 

add button animation

GIF for the Add Button 

 

Pull-down-to-refresh animation

This type of animation for interfaces is among the most popular now and the customers often mention it from the very first stages of work on UI design for mobile applications. On the one hand, it simultaneously provides two steps of interaction with the app showing that the user has reached the upper limit of content scrolling and that the screen of the app is refreshed. On the other hand, it opens incredibly broad space for creativity at graphic UI design stage as the elements activated in this process could be not only informing but also stylish, good-looking and entertaining. Moreover, this type of interface animation can efficiently use specific branding elements supporting general brand awareness and making logo or mascot of the brand more memorable and recognizable.

pull_to_refresh tubik studio

Pull To Refresh 

 

tubik studio pull down

GIF for Pull Down — Space Ship 

 

pull-down animation tubik studio

GIF for Pull Down — Hourglass 

 

State of process animation

Some kinds of microinteractions happen immediately, the others need some time to finalize. Anyway, for positive experience users need to understand what is going on at every step they take. So, loading processes and the like should be shown to the user clearly and they are also the great space for designers’ creativity. As in the previous case, some standard solutions can be used as well as entertaining and funny details and effects or elements of branding can be promoted here. In this case, designers should analyze core target audience to decide what kind of animation can be supportive here and if it needs either a sort of loading bar or circle or also any additional data like the percentage with numbers shown or any explanatory copy.

preloader animation tubik studio

Preloader 

 

pageindicator tubik studio

Rubber Indicator 

 

pull to refresh animation tubik

Pull to refresh

 

One more thing to mention is the fact that using any kind of digital interactive product, what user really needs is communication via fast feedback from the system. Even if the user has to wait, he/she should be clearly informed about it. It is the basis for all the types of animation featured above. The most important and initial aim of animation is to clarify, ease and speed up the process of interaction, and only after this to beautify and create the so-called “WOW-effect”. Interface animation solutions should be accomplished on the basis of usability rather than pure decoration and entertainment.

 

However, as well as in the previous post on animation, we appeal to common sense in use of animation for microinteractions. Animation should support the users, help them, and be applied where it is really reasoned with usability increase, not distracting or overloading the screen.

 

Points to consider about animation for microinteractions

 

— It shouldn’t overload the page or screen too much causing long and annoying process of loading

— It should be thought-over in perspective of different devices and conditions in which target user can potentially use them

— It shouldn’t create high distraction from the most important features or content on the screen or web-page

— It should correspond with the general stylistic concept of the application or website to support general harmonic perception of the product

juicy player UI Tubik Studio

Juicy Player 

 

Designing solutions for efficient microinteractions, a designer has to act somehow on the crossroads of design, psychology, sometimes linguistics and other spheres of science and human activity. Thorough analysis of the target audience and testing ideas and concepts enabling microinteractions usually open the door to higher usability. Animation used wisely in the interfaces can become one of the ways to effectively speed up interaction and make it more natural when it’s needed at the same time creating pleasant and stylish visual design.


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

Case study Ribbet Designing illustration

Case study: Ribbet. Designing Illustration.

It is not a secret that the fast-paced and dynamic development of web and app design brings new trends into other spheres of creativity in non-stop mode. No doubt, illustration is one of the fields which is constantly and significantly affected by all the numerous changes and currents in the Web. Working on different projects and preparing various shots for Dribbble and Behance, Tubik Studio designers get regularly updated on how multipurpose and versatile can illustration be. So, today we would like to present you the new case study, this time about illustration for a web online editing service.

 

Earlier we have already presented here the case study telling about the creation of a logo for the online editor Ribbet by Tubik Studio designer Arthur Avakyan. This article continues telling about the collaboration with the same customer. This time the assignment was concentrated on illustrations for the site created by the other designer Evgeniy Tomashevsky.

 

Tubik Studio designer

Evgeniy Tomashevsky working on sketches

 

Task

Designing thematic illustrations for the specific feature of online photo editor Ribbet.

 

Tools

Pencil sketching, Adobe Illustrator

 

Process

Undoubtfully, most — if not all — the illustrations in the web fulfill several functions instead of one. They should be not only decorative stuff but can also become important features of the user interface and in cohesion with other elements of the layout help to guide a user and make using the site faster, easier and more enjoyable.

 

The illustrations accomplished by Tubik Studio for Ribbet were no exception. To be more particular, the task for the designer was to create a pack of thematic illustrations that would reflect the ideas of popular annual events. The images were intended to work as fancy cards which could be used for instant creating invitations for birthdays, weddings, parties as well as nice postcards and other pretty stuff.

 

So, given to the task, the whole pack of illustrations needed to have the same format and style providing the feeling of consistency. Moreover, it was important to make it corresponding to the general design of the site. This requirement was eased due to previous studio work: Tubik Studio designers had worked with Ribbet on new design of the site and new logo, which soon are going to be presented on the site itself and are already widely seen in Ribbet social networks accounts. So, starting work on illustrations, the designer had already got the general concept of the editor design. It influenced on the general style of the images as well as a selection of appropriate colors and shades.

 

Case Study Ribbet Tubik Studio

General design of the website and logo for Ribbet by Tubik Studio 

 

In the process, it was also vital to remember that the images had to obtain a high level of adaptability and be recognizable, bright and clear in all sizes possible to be seen at. Moreover, they had to be ready to save their beauty and style in the printed version as well. As you can see, the designer had to keep loads of things in his mind.

 

The first stage of the work required making choice about the general stylistic decision which would satisfy all the parts of the assignment. Although there are numerous stylistic trends for digital illustration nowadays, in this case, a search of the style was not really long and the decision was made to create all the pack of illustrations in flat design stylistics. It matched efficiently with the general stylistic concept of the site and was obviously defined as trendy and diverse.

 

After deciding on the general style, the next stage witnessed the most creative and elaborate part of the process which was classic old-school pencil sketching. The designer worked hard and devoted a lot of soul and passion to creating catchy details, pleasant-looking backgrounds and bright characters that would be easily recognizable, capturing, stylish and fancy.

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

Tiny part of sketching stage

 

When all the ideas were completed and agreed-upon, the sketches were converted into their digital body by means of Adobe Illustrator.

 

One more part of the task included sophisticated and thorough work with color. The reason was that it had to correspond not only with the general design of the site but it was also vital to reflect color associations which users typically have for specific holidays, events and special occasions. This kind of multipurpose solution could make the user experience even more effective and pleasant. So, the designer accomplished this work with a deep research of common color associations about holidays and only afterward selecting the colors that would fulfill both association and general consistency sides of the editor idea.

 

Having processed each image thoroughly, the designer presented bright and catchy images for the pack of thematic fancy cards, some of which you can see below:

 

Independence Day

Independence Day card

 

St_Patrick_s_day

St. Patrick’s Day card

 

Thanksgiving

Thanksgiving Day card

 

Remembrance_day-01

Remembrance Day card

 

NY_eve

New Year card

 

Mother_s_day

Mother’s Day card

 

Father_s_day-01

Father’s Day card

 

Valentine_s_day

Valentine’s Day card

 

Wedding_day-02

Wedding Day card

 

As it can be seen, the images covered the wide range of religious, public and family holidays.

 

The customer, fully satisfied with all the work presented, has already been using the images actively in their social network accounts as the promotional materials for new features of Ribbet service.

 

Case study Ribbet Designing illustration

The set of cards from Ribbet Facebook page

 

This assignment was full of creativity and inspiration. It has become one more case proving how much sophisticated and rigorous work should be done to create the bright multipurpose digital illustration. It also showed that doing preliminary research can help to make the result even more efficient.


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