Tag Archives: product design

logo_design_tips_tubik_blog

Shape and Color in Logo Design. Practical Cases.

Paul Rand said that design is the silent ambassador of your brand. Continuing his thought we can add that a logo design is a heart of a brand identity which presents a personality of a company or a product. If you want to set the connection with the target audience and tell the story of a brand, starting with a logo would be a good choice.

 

Today we describe visual components of a logo which are vital for compelling visual perception and also show practical cases of applying psychology of color and shapes in design for branding.

 

Psychology in logo design

 

To make an effective logo, designers have to consider the tiniest components which it is built of and think about the influence they will have on potential clients. The science studying the impact of various factors on human’s mind and behavior is known as psychology. Knowledge of psychological principles helps to understand human aspirations and motivations which means designers can predict the possible users’ reactions to the certain solutions.

 

People may not notice but mind often reacts to visual objects affecting the emotions and behavior. In our previous articles, we described two psychology branches which study the impact of shapes and colors on people’s visual perception. In short, each color and shape tends to be perceived with its own meaning, so when we look at a visual object our brain receives the certain message and reacts according to what we see.

 

Comprehending the role of the color and shape psychology, design expert can control the meaning a logo contributes. Each component chosen thoughtfully helps people read the meaning of the logo right.

 

logo design

 

Color in logo design

 

The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. That’s why the success of the brand strategy depends largely upon the colors chosen for the logo design.

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. In the article Color in Design: Influence on Users’ Actions we described the meanings of common colors in branding and here is a short sum up.

 

Red. Confidence, youth, and power.
Orange. Friendly, warm, and energetic.
Yellow. Happiness, optimism, and warmth.
Green. Peace, growth, and health.
Blue. Trust, security, and stability.
Purple. Luxurious, creative, and wise.
Black. Reliable, sophisticated, and experienced.
White. Simple, calm, and clean.

 

The color choice shouldn’t be based on the common meaning alone. Visual perception is quite individual for everyone so the color effects may be different because of the factors such as age, culture, and gender. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Moreover, there are many cultural differences in color definition. To make sure the color will work effectively for a brand strategy, it’s vital to consider the preferences of the target audience.

 

andre logo design by tubik

 

Shape in logo design

 

As we already mentioned in the article devoted to the psychology of shapes, all the visual objects can be analyzed in terms of shape. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. 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.

 

Squares and rectangles meanings: discipline, strength, courage, security, reliability.
Triangles meanings: excitement, risk, danger, balance, stability.
Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery
Spirals meanings: growth, creativity, calmness, intelligence
Natural shapes meanings: originality, organic, balance, refreshment
Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Creating a logo, designers should work on the shapes applied as well as pay attention to the typeface chosen for the wordmark.

 

passfold-logo-tubikstudio

 

Practical cases

 

Tubik designers have great experience in creating compelling brand signs. Let’s see the logo design examples applying color and shape psychology.

 

LunnScape

 

The logo was created for LunnScape company specializing in landscaping services to commercial properties like office and courtyard spaces, parks etc. A brand sign is presented with a mascot of a dragonfly. LunnScape company is based in Florida and the creature is a perfect representative of a regional fauna. Moreover, a logo with an insect helps customers understand the nature of the services.

 

The dragonfly illustration has a simplified style so its wings look like flower leaves. The logo consists of several colors. Turquoise circle with a dragonfly gives a solid stamp effect and brings calming feelings. Also, the color is associated with refreshment and energy, so it creates the right mood around the brand. The wings of the dragonfly combine yellow and pink colors. Together these colors symbolize joy, warmth and a bit of sensitivity making a dragonfly look playful. The wordmark typography complements and also unveils the core brand services of the company due to the thin and elegant font.

 

lunnscape_logo_final-version

 

Andre

 

One more identity design project connected to the theme of landscape and nature was logo for Andre Landscape. The final choice was made on the combination mark presenting the mascot in clear simple forms and elegant lettering echoing the rounded shapes. Symbol resulted in a new shape combining the visual concept of a bird and of a leaf in one image based on the circle. The rounded shape is easily associated with universe and eternity, quite positive stuff to transfer the idea of professional land care. Color combination is also connected with the nature of the offered services with vibes of green and natural background.

andre logo design by Tubik

 

Binned

 

This is the brand sign for trash bin cleaning service called Binned. A logo is presented with a lettermark featuring capital B as it associates with the brand name. The lines in the letter take the shape of waves evoking a sense of water and cleanliness. The logo is followed by the wordmark of the entire brand name. The chosen font is simple yet bold which makes it look neat and reflecting the mood of a brand.

 

The color palette includes tints of blue and green which give string associations of cleanness and refreshment. In addition, the blue color often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings.

 

binned logo animation design

 

Reborn

 

The logo presents a self-service Chinese restaurant Reborn. The major philosophy of a brand is bringing in the modern way of automated ordering food in the restaurant industry and setting the link between traditions of healthy food and innovations. To transfer all these ideas and create the effective brand image, the red silk ribbon was featured as the initial letter in the wordmark.

 

The ribbon creates spiral shapes which bring the feeling of creativity and innovation. Moreover, it features the slight movement showing the restaurant as a modern business which moves with times.

 

Red is a traditional Chinese color so a logo lets customers understand the specifics of cuisine served at the restaurant. Also, red color demonstrates the confidence and youth of the service as well as contributes to better brand awareness due to its brightness.

brand identity design case study

 

Motion

 

This is a logo concept for modern dance studio called Motion. The company participates in multiple directions of the dancing sphere like organizing classes and workshops, events and tournaments.

 

The brand sign has a shape of a circle. Originally, this shape symbolizes eternity since it has no beginning or end. This way, a logo highlights the diversity of company services. Moreover, one of the common meanings for circles is motion so it perfectly reflects the brand’s name.

 

This logo concept provides the variety of color performance showing the flexibility of general brand strategy. The presented options include yellow, green, and blue colors. Yellow is a principal color which brings the warm and playful emotions. Green and blue colors symbolize balance and harmony.

 

motion_tubik_studio_icon_logo_branding

 

OrBeat

 

Another round logo was designed for OrBeat, the online platform for sharing digitized sound material like music, speech and specific sound sets on the Internet. In addition, the service has the functionality of a social network so the shape sets the association with the circle of friends. Users can create their unique playlists, leave comments, listen to the tracks online and share their sound collection with friends from other social networks.

 

So, setting the connection with the themes of music adding dynamics to everyday life, communication and expressing the metaphor of orbit, the logo is based on rounded shapes and features the variety of shades associated with diverse content on the platform.

 

Logo design by Tubik

 

Whizzly

 

The logo is made for the social network Whizzly showcasing talents and sharing creative projects. The mascot is a monkey which looks quite pretentious because of the sunglasses. The choice of the character can be explained by the common associations connected with this animal. Monkeys are energetic funny representatives of fauna and they know how to draw attention. Rounded forms make the image dynamic and friendly.

 

As the brand’s target audience are talented people, the monkey displays their eccentricity. The colors include the gradient of violet and blue. They are easily associated with the lights which are often used on the stage. Also, we can see the reflection of the brand’s name in the sunglasses. It ensures better brand recognition.

 

whizzly_mascot_logo_design_tubik

 

fOxygenic

 

Here’s the concept applying branding symbol for an app icon. It features a logo for fOxygenic, a mobile application which represents a social network for people loving the active life, open-air sports and events. As you see, the mascot is based on round shape. It may set different levels of association by the resemblance with “O” letter for the word «oxygen» applied in the brand name, motion and active life and the circle of friends as well as in OrBeat logo. Bright warm orange color reflects not only the traditional vision of a fox coloring but also the idea of dynamic life, joy, and great mood. Moreover, the color has high visibility potential which strengthens the icon’s recognizability.

 

logo design tubik studio

 

SwitchUp

 

This is a branding sign for a music app SwitchUp with broad functionality on generating and sharing playlists. A logo features a wordmark and the form of a play button. This shape helps to set the link with the nature of the application. In addition, the keywords behind its branding are “bright”, “dynamic”, “fun” and “positive”, the reason why the triangle is an accurate choice. The thing is that triangle is an energetic and dynamic shape which is associated with motion and direction. The color palette supplements the brand image bringing the feeling of energy and freshness.

logo design music app tubik studio

 

Meditrack

 

The logo concept was designed for a medical app Meditrack used by doctors for planning and organizing the flow of appointments as well as tracking and saving health data for patients. It features the stylized track sign where straight lines go up and down similar to heart rating graph. The combination of blue, light blue and red colors is often associated with health care industry so creates a professional image for a brand.

meditrack_tubik_studio_icon_logo

 

The success of branding highly relates to a logo design. Considering the influence of colors and shape on human psychology, you can create compelling brand signs which set the connection with the target audience by transferring accurate messages and emotions.

 

animated logo design

 

Recommended reading

 

Knock Design Into Shape. Psychology of Shapes.

Color in Design: Influence on Users’ Actions.

Don’t Stay Still. Why Brand Needs an Animated Logo.

Psychology in Design. Principles Helping to Understand Users.

Logo Design: Creative Stages.

6 Creative Stages of Branding Design: Step-by-Step Guide.


If you want to know more about creative stages of the design process for logos, welcome to read our free e-book «Logo Design».

Welcome to see designs by Tubik on Dribbble and Behance

UI design for photo editor

Picture Perfect. UI Screens for Photo Editors.

Designers know so much about graphic editing art, so it seems like a pleasure and honor for them to take part in the creation of photo editing services. There are many photo editors both web and mobile but all of them stand for the quality photos. They can be not only an independent digital product but also a part of the applications or websites with the wide functionality such as Instagram. Realizing how complicated the process of image edition can be, design experts try to create an effective instrument which would make things easier. The article describes common UI screens for photo editing services. For graphic support, we used here some screens from our design project for Ribbet

 

photo editor interface design

 

Home screen

 

Home screen, or main screen, is a core part of any user interface since it’s a place where users start to interact with a product. Its content and structure can vary depending on the type of a photo editing service.

 

Web photo editors along with desktop applications usually apply home screen as one and major page where users can reach all the features. Traditionally, a photo is placed at the center of the layout so that users could see it in the details. Due to the size of web and desktop page, designers can put the key functionality into a single page. They are often placed into the left sidebar which allows controlling the space effectively and makes the interactions easier and faster. Moreover, if a photo editor isn’t oriented to the professional designers or photographers and provides only the essential features, the instruments can be presented as minimalistic icons.

 

Mobile photo editing apps are not that simple to create and require deep attention to the structure planning. Considering the fact that mobile devices have small screens, a mobile photo editor can’t include all the tools together, so designers need to separate them.

 

Ribbet ui by Tubik studio

 

Let’s see the detailed description of the interfaces introducing the major tools.

 

Photo editing

 

The number of features in photo editors varies depending on the target audience. Some of them are created for experts in this field which means the services need to provide a wide range of instruments so that professionals could do complicated transformations. On the other hand, there are many digital products which allow making photographs beautiful even if you don’t have special skills.

 

Traditionally, mobile editors are oriented to the non-expert audience so they usually don’t provide many tools at once. There is a list of image editing tools which are essential for this kind of application. Let’s look at the common functions and UI solution helping to represent them effectively.

 

photo editor interface design screens

 

Cropping

 

One of the basic features is cropping. It often happens that there is too much unwanted space around the object on a photo and we need to remove it. Cropping is a quick way to get rid of unnecessary space on the photo which takes minimum efforts. Designers usually present a tool in a shape of a rectangle which users can scale and move. The spare area is darkened so that it could be easy to distinguish. Even if an app is oriented to users with a very basic level of tech literacy, it may be a good idea to add the information about the size of a photo on the screen. It can be shown in pixels or inches allowing users to see the size the image after the operation. The action of cropping, as well as the other functionality, should be confirmed to avoid accidental changes.

 

Alignment and rotating

 

Taking photos we don’t always have a chance to build a perfect composition since we often need to catch some important moments immediately and an image may look not as good as we wish. That’s why photo editing apps need to provide the possibility to align images. The alignment screen requires some guides assisting to see if visual elements are placed even so it usually contains a grid. To make the process effortless, designers place the horizontal scale with a slider in the middle of it. Users can move the slider to the left or right to bring the balance into a composition. In addition, a slider can be followed by the degree showing how much you inclined a picture.

 

If a photo is taken in a hurry, there is a chance it would be upside-down. Rotation feature may not always be presented as a separate screen. The tool can be combined with another one in a single layout since its functionality doesn’t take much place. It usually takes one or two icons in a shape of a rounded arrow which indicates the direction. Commonly, it’s combined with alignment or cropping screen.

 

photo editor interactions UI design

 

Saturation and exposure settings

 

Color is a major factor influencing visual perception. To make photos more pleasant for the eyes, it’s vital to set the colors appropriately. The settings UI usually includes several horizontal scales with sliders. Each scale is responsible for a particular aspect which includes brightness, contrast, highlights, shadows, and lights. Also, photo editors often allow enhancing or decreasing certain colors. There are three common ways to present saturation settings. First is a long horizontal scale which applies all basic colors and can be chosen with a slider. Another option includes applying color wheel with a wide range of colors. It helps users accurately choose proper shades. And the third way is presenting several horizontal scales which consist of two colors each. The color pair applies two opposite colors so that users could easily decrease the unnecessary dominating colors.

 

case study ribbet logo branding design

 

Filters and effects

 

Some users can’t stand bothering with color settings because it may take some time before they reach the desired outcome. That’s why photo editing apps provide a great spectrum of filters and effects. People can make a black and white or vintage photo within a tap and it makes the process effortless even for the most impatient users. Filters and effects UI is simple. A photo is placed at the center of the layout and the filters are presented via miniatures at the bottom of the screen. Miniatures give an idea of how the filters and effects look so that users wouldn’t be forced to check all of them.

 

Frames

 

Photo frames existed long before the digital photography and they don’t lose the actuality. However, today people mostly use them as the decoration for digital images. The layout of frames interface is similar to filters and effects — the example of frames are shown as miniatures at the bottom. Also, the screen requires a tool which will help to regulate the width of frames such as scale.

 

Collage

 

Collage is known as a collection of photos that are combined to make a single picture. Along with photos, a collage can usually include frames, stickers, text or custom background. This screen differs from the others because it applies several photos. Photo editor apps need to help users quickly create a pretty collage so the key part of the layout is different templates.

 

Collage samples vary by the number of photos as well as the structure. Users can choose the perfect template and then download chosen pictures. The templates can be shown differently. Web photo editing services often apply a sidebar showing samples via clickable icons. As for mobile applications, the templates can be put on a separate screen so that users could see them well. When people choose a collage sample the application leads them to the editing interface where the creative process starts.

 

ribbet-collage

 

Effective UI for photo editing services helps non-designers make beautiful photos without significant efforts. Designers’ task is to organize and present all the features that way so that everyone could do the editing intuitively.

 

Recommended reading

 

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

Keep Fit. UI Design for Fitness Apps.

UX Design for E-Commerce: Principles and Strategies.


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

watering tracker app design tubik

Case Study: Watering Tracker. UI Design for Home Needs.

In all the diversity of applications fulfilling different personal, social and business needs, the special place will always belong to the ones that become our everyday helpers in sometimes basic but necessary operations. Calendars, calculators, to-do lists or fitness timers, apps saving our menus and reminding to take medicine along the schedule — all this simple stuff makes users’ lives much easier. The apps of this kind increase productivity as well as save time and effort for multiple challenges life prepares for us on a daily basis. Designers creating such interfaces become a sort of magicians activating problem-solving potential of modern technology. Today we would like to share a new design case study telling about that kind of UI: welcome to check the creative flow for Watering Tracker App.

 

Project

 

User interface and interaction design for an iOS application tracking plants watering.

 

Process

 

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

 

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

  • usability: the app is convenient, clear, logical and easy to use
  • utility: the app provides useful content and solves users’ problems
  • accessibility: the app is convenient for different categories of users
  • desirability: the app is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat.

 

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

 

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

— adding plants to the app

— reminders and notifications about watering

— getting information and recommendations about conditions and care for particular kinds of plants

— tracking stats of watering and plans for next week.

 

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

 

water_tracking_application_ui_tubik

 

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items which were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

 

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

 

watering tracker interaction design

 

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. «My Plants» opens the directory of the ones tracked for watering, «Add New» allows to create a new item and «My Profile» goes to all the history and stats data.

 

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

 

watering tracker app interactions

 

Here’s the animation showing the interactions described above.

 

watering_tracker_app_interactions_tubik

 

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

 

— the name and the background picture of the plant in the upper part of the screen,

— the interactive zone with the tabs of other plants ready for watering,

— the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

 

watering tracker UI design

 

The interactive zone with the tabs of other plants ready for watering can also be extended. In this case, it opens the graph showing the progress  — aka watering workload — for the current week.  This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides high readability level and contributes much to the effective visual hierarchy of the layout.

 

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

 

watering tracker user interface design

 

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

 

watering_tracker_app_ui_tubik

 

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks,  landscape firms and services — all those who are in charge of taking care of plants and supporting the beauty of nature around us.

 

watering tracker app design tubik

 

Recommended reading

 

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

 

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

mobile interaction design tubik blog

7 Tips to Enhance Mobile Interactions

The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it.

 

Mobile apps are expected to be clear and easy to operate so that they could be effectively used anytime and anyplace. Designers’ task is to create an intuitive interface which will guide users within the app helping them operate its functionality without problems. In this article, we describe the essential aspects of the effective mobile interaction system along with the tips helping designers to create intuitive design.

UI navigation elements

 

Increase learnability

 

Every designer strives at creating a unique product with original interactions and navigation systems. Such an approach allows standing out a crowd and being noticeable on the market. However, creating absolutely new environment designers have to think how users will adjust to it.

 

If the interaction system of a mobile application has no logic and sequence or it doesn’t respond to needs of the target audience, it may be frustrating and annoying. That condition is critical for UX, so people will simply give up on trying to decipher an app and quit it.

 

To avoid this kind of outcome, designers need to care about learnability of the interactive elements. Learnability stands for how easy tasks can be attained during the first usage and how quickly users learn from the previous experience. To increase learnability, designers need to keep it simple and clear helping quickly adjust to it. Also, the system should be consistent and logical so that users could identify the repeating patterns and use a mobile app intuitively.

 

Consider multiple holds

 

We all are different in many ways, even how we hold smartphones. The way of holding smartphones depends on various factors including the situation and conditions in which the app is used as well as the task we need to accomplish.

 

There are three common types of holding a mobile. The first is when we take it with one hand and navigate it with a thumb. Another way is to hold a smartphone in one hand and interact with it with the forefinger of the other hand. Also, the type which is common for chatting people is holding a phone in two hands using both thumbs for actions. Of course, there are other types of holds but these three are thought to be the most common.

 

interaction_models_mobile_interfaces

Source

 

thumb-zone-mapping_UI_design

Source

 

Considering this fact, designers have to figure out if the layout elements placed effectively for different holds. One-handed hold requires special attention since it has the most limited space of reach. To make the interaction process within a mobile app effortless it may be a good idea to put the key components at the bottom of the screen so that users would be able to reach tap areas easily. In addition, the interactive elements should be big enough so there would be no chance for a mistap.

 

user motivation design

 

Apply recognition patterns

 

When a new app can be used intuitively it means that the designer did a good job. To provide intuitive interactions, UI design has to contain recognition patterns. They are the elements which users are already familiar with and those which give slight hints on how an app works. The thing is that using an application we are expecting to see certain things associated with the definite kind of product. For example, working with e-commerce apps we are used to seeing cart icons along with CTA buttons “Buy”. Familiar elements in a new app make people feel more confident in their actions.

 

Users become accustomed to things quickly and their absence makes them feel uncomfortable. That’s why, if you plan to use custom interactive elements, don’t forget to add some standard components. This way a new application won’t overwhelm with an absolutely unfamiliar environment and will help to learn quickly.

 

ux design for ecommerce tubik blog

 

Make a clean UI

 

A big pitfall of mobile UI design is small screens of the devices. Designers have to figure out how to include all content in a short space without turning user interface into clutter. Clean UI design helps effectively interact with a product since all the core elements can be easily reached.

 

To create neat mobile UI it is recommended to use icons as interactive components. Copy elements often can be too big for the small screen, so icons are a sufficient alternative. They can explain a function visualizing it with simple shapes and it helps to save the space on the screen. However, during usability testing, it should be thoroughly checked if the icons are perceived appropriately and transfer the right message.

 

Decrease the number of actions

 

Probably, many of us have the experience of using an annoying mobile app which made us take a long way before we could finally accomplish the task. It may often be caused by ineffective interaction system which employs too many actions and the unnecessary functionality.

 

Mobile apps usually serve as problem-solving assistants, so it’s vital for them to be designed ergonomically. It means that designers have to apply only core functional elements which will get the users right to the point they needed. Minimum of actions won’t make your product look primitive. It will help a mobile app be effective and pleasing in usage. Remember that people mostly rate the quality of an application not by extraordinary features but how helpful it is.

 

tubik_photo_app

 

Add game mechanics

 

Based on the facts described above, we can say that an effective mobile interaction system should be simple and clear to use so that it could be operated without problems.

 

However, simplifying the interface it’s vital not make it boring. Apps which seem ordinary have fewer chances to gain users’ attention. That’s why it’s important to bring some emotional aspects into applications that look standard at the first glance.

 

To make the process interesting and catchy, it may be a good idea to use gamification. It is the technique of exerting game mechanics into the non-game environment like mobile applications. Various challenges and leaderboards along with the awards and stickers motivate users to interact with a product more and come back to it constantly.

 

What’s more, implementing a game mechanic called a user journey is an effective way to create clear layout and transitions. A journey is user’s progression stages at the time of usage. Designers create UX that way so that people could go step-by-step through the various features which gradually change depending on needs of the target audience. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Last but not least, gamification adds the element of fun. Users enjoy entertainment, challenges, and competitive spirit similar to video games, so they are encouraged to go back. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual application, you help to reduce some stress and relax for a moment.

 

toonie alarm UI design

 

Don’t forget about testing

 

Mobile interaction design aims at creating a user-friendly product which will be pleasant to use under different circumstances. But how can a designer define if an app is usable enough and distinguish possible problems in UX? This is when usability testing comes into play.

 

Usability testing is an essential stage in creating mobile apps helping to evaluate it by testing on the potential audience. It is usually conducted at the UX building stage before a project goes to the development team so that inefficient solutions could be changed easier and faster.

 

Various usability testing methods allow identifying problems and bugs and quickly eliminate them. This way designers can improve all the aspects of UX ensuring user satisfaction.

 

So, before you deliver a project to the development team remember to handle testing. Test it by yourself, on your colleagues, on the potential users and then you’ll get the desired outcome.

 

choice of color in UI design

 

A simple mobile interaction system is not that easy to create. It requires hard work, concentration and lots of practice before you receive sufficient results. Stay tuned!

 

Recommended reading

 

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

Gamification in UX. Increasing User Engagement.

Color Matters. 6 Tips on Choosing UI Colors.

Mobile Typography: 8 Steps Toward Powerful UI.

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

Tests Go First. Usability Testing in Design.

Gamification Mechanics in UX: Smart User Journey.

Mobile UI Design: 15 Basic Types of Screens.


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

fitness_app_ui_design_article

Keep Fit. UI Design for Fitness Apps.

A professional athlete Billie Jean King once said: “Sports teaches you character, it teaches you to play by the rules, it teaches you to know what it feels like to win and lose — it teaches you about life.” Sports has become a part of our routine a long time ago. Even more, today a healthy lifestyle is a top trend which constantly grows its popularity across the world.

 

Fitness apps are the key helpers for people who strive to get fit. Their functionality gives a lot of opportunities and makes keeping fit easier. Understanding the significant impact of these applications on users’ everyday life, designers do their best to activate the problem-solving potential of fitness apps. Today’s article describes common screens and essential UI elements for fitness apps.

 

sport app motion ui tubik studio

Sports App Interactions

 

Sign-in and profile screen

 

Fitness app is something like a pocket instructor telling you what to do and gives a feedback on your achievements. To make it more comfortable and personalized, designers need to create an effective profile UI.

 

Before users obtain their profiles they usually go through the sign-in process. Fitness apps, as well as the other ones, can allow logging in via social networks still there are some aspects which users have to fill in to create a personalized profile. The applications usually require the personal data including age, gender, weight, and height which helps to define users’ physical condition. Profile creation is often similar to filling in an application form. This way users can easily provide the needed information to make a profile more personalized.

 

The major objective of a fitness app is to help users in their self-improvement, the reason why profiles should contain not only the personal data but also the user’s achievements such as the number of burnt calories or personal records in sports. It’s important to not to overload the profile screen with the unnecessary information otherwise user interface may look chaotic.

 

Home screen

 

It’s a core element for any type of apps. Home screens serve as the main point where users start the journey within a product. Creating UI for home screen designers need to think of it as a center of navigation and make sure users will be able to operate it easily. 

 

First of all, home screen should provide access to the other parts of the app. Designers can choose various ways of the presentation from a sidebar with minimalistic icons to the clickable subheaders leading to the different sections of app content. The choice often depends on the number of features provided by the product as well as the platform which it is meant for.

 

Activity screen

 

People who aim at getting fit always have to do various physical activities. Fitness apps provide users with the feature which helps to track how active they are during a day. To make a sufficient UI for activity screen, designers include different kinds of activities and sports. Traditionally, fitness apps provide tracking time spent on sports as well as measuring the distance which users cover during a day. The distance can be calculated in two ways: walking is measured by the number of steps and running is usually measured in miles (kilometers).

 

The information about users’ activity is often presented via diagrams of various forms. Such presentation contributes the effective visual perception of the data which includes many numerals. Also, designers often apply custom icons representing each kind of activity. This way the screen looks clean and neat even if users have a really active life.

 

fitness_app_ui_landscape_tubik

Fitness App

 

Heart rate screen

 

The heart is an engine which lets our body live and function, so it’s important to follow its condition daily. Many fitness apps can be connected to the various devices such as fitness wearables which allow measuring pulse. The applications usually transfer the data gathered with devices on a heart rate screen.

 

User interface representing the feature should be simple with the minimum of elements so that it could be easily operated. Since the process of pulse measuring takes some time it may be a good idea to supply the UI with sufficient animation which will show the loading process. For example, motion designers can animate an illustration of the heart showing it beats. Custom illustrations along with motion design can make UI look more proficient and make the process of the pulse measuring more interactive.

 

Sleep tracking screen

 

Nice sleep is a guarantee of the human health. Sportspeople know it better than anyone else and always try to control the time and quality of their sleep. Fitness apps show the gathered information during a night which includes the time and stages of sleep. There are four stages of sleep: the first and the second are called light sleep, the third is deep sleep and the fourth is rem sleep. The applications track these stages and in the morning users can see the statistics. The data on sleep is often shown as graphs.

 

Calories screen

 

They say that fitness people are obsessed with calories. Well, there is truth in the words because if you want to get fit it’s vital to control what and how much you eat. As we said above, fitness applications show the information on the number of burnt calories based on the activity results. The calories data can be displayed on the activity screen as well as on the personal profile. However, it may be an effective solution to create a separate screen to provide users with the expanded information on the lost calories.

 

Sport app UI design

Sports App

 

Progress screen

 

To stay motivated and continue self-improvement, it’s important to know that the hard work gives results. The progress screen shows the statistics about users achievements along with failures. Here the graphs will be the best choice. If people have the progress, they see that their results are getting better and the scales on the graphs go higher.

 

Schedule screen

 

There can be many sports activities in different time and different places so the schedule seems to be essential in this situation. The screen of schedule is standardized, but to make it unique and original, designers can add some interesting icons representing various sports directions.

 

Goals screen

 

Goals move us to achieve more and more, especially if we talk about fitness. People start doing sport because they have some goals like losing weight or shaping up. In fitness applications, users set maybe a bit less radical goals but easier to achieve on a regular basis. They often include walking a certain number of steps per day or week along with burning the fixed amount of calories.

 

The screen of goals can be presented as a sheet divided into categories: to do, doing, done. This way users will see how much they have managed to achieve and what they need to strive for. In addition, designers can settle the system of awards which will help users be even more motivated. We’ve already described awards as effective gamification tools which contribute increasing user engagement. You can find detailed info in our previous articles.

 

tubik_studio_bebright_app

BeBright App

 

The sport requires persistence and fortitude and so does the creation of sufficient UI design. Learn the basics, add some inspiration and you can surprise yourself. Stay tuned!

 

Recommended reading

 

If you want to learn more about common screens for various mobile apps, here is the list of helpful articles revealing tips on mobile UI design and its components.

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

 

fitness_app_ui_design_article


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

tips on visual hierarchy in design

9 Effective Tips on Visual Hierarchy

Sufficient visual hierarchy is a foundation of a successful digital product. It helps to organize UI elements in an effective way so that content would be easy to comprehend and pleasant to see. The presentation of visual elements has a great impact on user experience. If the components are organized wisely, users navigate and interact with a product without efforts and enjoy the process.

 

So, what makes powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating the compelling visual hierarchy for web and mobile products.

 

Keep business goals in mind

 

There are often business goals standing behind a digital product. To achieve them, creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out the crowd.

 

design agency landing page

Design Agency Landing Page

 

Consider scanning patterns

 

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

 

F-pattern appears mainly on digital pages or screens with the big amount of content such as blogs, news platforms etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

 

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

 

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

 

Functionality first

 

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider functions of UI elements and a role they play in the navigation process.

 

landing page UI design tubik studio

Seafood Recipes Landing Page

 

White space is a visual element

 

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create the effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating visual hierarchy so designers need to work on its balanced usage.

 

landing page web design

Colony Landing Page

 

Apply the golden ratio

 

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

 

Designers often apply golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

 

golden ratio in ui design

Tracking Widget

 

Use a grid

 

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

 

Add some colors

 

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

 

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a red color for purchase buttons so that people could intuitively find them when they need.

 

financial_service_website_tubik

Financial Service Website

 

Pay attention to the fonts

 

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

 

Three levels for web, two for mobile

 

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via relatively small type.

 

In many cases, web products include all three levels since they are more likely to provide the big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

 

UI animation wine app

WineYard App

 

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

 

Useful articles

 

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

 

Visual Hierarchy: Effective UI Content Organization.

Golden Ratio. Bring Balance in UI Design.

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

Tips on Applying Copy Content in User Interfaces

Information Architecture. Basics for Designers.

Typography in UI: Guide for Beginners.

 


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

golden ration for UI UX design article

Golden Ratio. Bring Balance in UI Design.

One of the major characteristics of effective design is a clear user interface. All the elements need to be well-balanced and placed in the harmony so that users could easily perceive the information on the screen and interact with a product without efforts.

 

To create an efficient design composition, professionals apply various techniques and methods from the art science as well as the basic mathematical theories. One of the common tools helping to build pleasing design compositions is a mathematical proportion called the golden ratio. In the article, we’ll define the essence of this technique and see how it can be used in design.

 

What’s the golden ratio?

 

Everything in the world strives to the harmony and balance. Even mother nature brings things in the forms close to the perfect. People enjoy everything which has natural touch and they always aim at implementing these patterns and forms into their outcome. In pursuit of discovering the secrets of creation, mathematicians calculated a formula which appears in the majority of things on the Earth.

 

The golden ratio is a mathematical proportion between the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The golden ratio equals 1:1.618 and it is often illustrated with seashell-shaped spirals which you could have probably seen on the Internet.

 

golden ratio for designers

Source

 

So, how exactly the perfect asymmetry is calculated? First, you need to decide the length of the small element. Then multiply it by a golden ratio which is 1.618 and the result will be the perfect length of the bigger element.

 

Golden ratio formula for designers

Source

 

Golden ratio theory is believed to exist for more than 4000 years. Scientists discovered that the majority of the ancient buildings, as well as famous artworks, obey to the golden ratio. Leonardo Da Vinci and Salvador Dali were known as the followers of the golden ratio theory and they used it as a key tool for their amazing artworks. Today the golden ratio is applied in various fields including architecture, art, photography, and design.

 

Golden ratio in design

 

An effective composition is a core part of design. All the elements need to work together to maximize the pleasant experience. Moreover, each separate element, even the small one like an icon, has to be created in a harmony within itself. The golden ratio has a positive influence on the visual perception the reason why many graphic and UI designers apply it at their workflow.

 

Graphic designers are more keen to apply golden ratio. The thing is that the art teachers often explain the theory of golden ratio to help students figure out how to work with proportions. That’s why many designers continue to apply this tool while creating various graphics, especially for the small but meaningful design elements such as a logo.

 

Logo and icon design requires deep attention to the details. The golden ratio allows creating illustrations where each element is placed in a harmony and appropriate proportion to the others. Moreover, logo design is a heart of the brand so designers strive at presenting it in the most compelling way. Golden proportion can add aesthetic appeal to a logo and increase the popularity of the brand.

 

User interface needs to have the clear visual presentation of the components so that people could use a product without problems. The golden ratio is often applied to place UI elements effectively. First of all, it can be used at the stage of wireframing. This way you can plan a structure for the layout placing and sizing user interface components according to golden proportion. In addition, golden ratio scheme can help professionals to crop images for web design so that it could make sure the composition of the photo remains balanced.

 

graphic design golden ratio illustration

Graphic design for Opera Software promo video

 

How does golden ratio improve UI design?

 

Mathematical calculations may seem boring and time-consuming, so a question may arise if it’s worth the effort. Let’s see what golden ratio can bring into design.

 

Well-balanced content

 

Designers often face the situation when a product needs to contain a great amount of various content and each part of it is vital and cannot be replaced. To unite all the components in a pleasant composition, the golden ratio can be applied. Divide the layout into different sections using a proportion of 1:1.618 and put the content in the sectors according to their importance. Such a content composition is sufficient for users’ perception and it helps to organize all the components.

 

Effective visual hierarchy

 

Speaking of the content organization, we can’t forget about visual hierarchy. As we mentioned in our previous articles, it’s a technique of efficient structuring content components. Combining principles of these two techniques designers maximize chances of building a powerful design composition.

 

golden ratio in ui design

Tracking Widget

 

Powerful typography levels

 

To create efficient typography, designers need to divide copy content into different levels. They usually include various kinds of copy including headers, subheadings, body copy, caption etc. Applying golden ratio professionals can quickly define an appropriate proportion between the typographic levels, for example, you can choose a certain size for the header and then divide it by 1.618. The result will show you the most appropriate size for subheaders.

 

Pleasing first impression

 

When users try a product for the first time, they scan user interface to understand if they like it or not. The psychology principle known as a visceral reaction states that people decide whether they like something or not within a few seconds of looking at something. This reaction goes faster than our consciousness so we don’t even realize it. That’s is why it’s vital to make sure the first impression of a product will be pleasing. Design created by using the golden ratio has a positive influence on users’ mind and their visual perception and it works from the first sight at a product.

 

Appropriate white space

 

White space is the area between elements in a design composition. Designers always need to care about the amount of the white space in the UI since the unity of composition highly relies on it. The golden ratio can make the process of spacing much easier and faster. Applying golden proportions you will be able to define the right white space which will work well for the design.

 

golden ratio in web design

Digital Agency Landing Page

 

Design presenting the natural balance of the components cannot be unnoticed. The well-structured layout is one of the core parts of powerful UI. The golden ratio brings the harmony into design and makes the product pleasant for users. Don’t be afraid of the mathematical formula. It’s not that difficult as it may seem. Even more, the golden ratio can help creating user-friendly digital products which will combine utility and aesthetics.

 

Recommended reading

 

The Golden Ratio — Principles of form and layout

Golden Ratio in UI design

 


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

choice of color in UI design

Color Matters. 6 Tips on Choosing UI Colors.

User experience design involves many processes which need to be done thoughtfully so that an interface would meet the needs of the target audience. Each step requires deep attention to details, even if it doesn’t seem too complicated.

 

One of the time-consuming still vital stages in UI creation is color choice. Designers sometimes can spend hours to pick up the right color palette. In this article, we’ll describe six useful tips helping designers choose powerful colors for UI and make this process easier and more productive.

 

Tip 1. Learn 60–30–10 rule

 

This rule, or technique, came from the interior design, so it is often applied for house decorating. The idea is simple. To bring the balance into the composition, the colors should be combined in the proportion of 60%–30%–10%. The biggest part should go to the dominant hue, the third of the composition takes secondary color and 10% percent goes to the color which helps to make the accents.

 

Such a proportion is thought to be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing the appropriate proportion designers can successfully combine the colors without risks of turning UI into a colorful mess.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Tip 2. Contrast is a friend

 

Color contrast is a key part of any visual composition. It brings the individuality for each UI element and makes all of them noticeable. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. Moreover, copy content in this UI will look illegible which make the interactions with a product almost impossible.

 

Designers control the level of contrast depending on the goals it is supposed to accomplish. For example, if you need users to pay special attention to the specific UI elements, it’s a good idea to apply two highly contrasting colors such as blue and red. High contrast is often used for CTA buttons design.

 

However, speaking of UI as a whole composition, high level of color contrast may not always work well. If copy content and the background colors contrast each other too much, it will be difficult to read or scan the text. That’s why designers are recommended to create a mild level of contrast and apply high contrasting colors only for highlighting elements. User-testing on various devices can help designers to make sure of the effectiveness of their solutions.

 

choice of color in UI design

Urban Sketcher App

 

Tip 3. Consider psychology of colors

 

As we’ve mentioned in our previous articles, psychology is one of the basic studies helping in design workflow. There is a branch of psychology showing the influence of colors on human mood and behavior called color psychology. It states that our mind reacts to colors while we usually do not notice it. When human eyes perceive a color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions.

 

Each color has its own influence on our mind and the knowledge of the possible reactions can help designers to transfer the right message and call users to make the expected action. Here is a short list of color meanings.

 

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness, the sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.

 

In addition, designers need to remember that visual perception is quite individual for everyone. Such factors as age and gender have a great impact on color preferences, so it’s vital to know the target audience peculiarities. You can find the detailed description of color meanings and preferences in our previous article.

dance academy landing page

Dance Academy Website

 

Tip 4. Don’t forget cultural differences

 

Each culture has its own traditions and beliefs, so before you choose the colors, you need to make sure that they will be interpreted the way you mean. The thing is that sometimes one color may have absolutely opposite meanings in different countries. For example, in European countries white color signifies purity and it is often used at the weddings while in many Asian countries this color means death and sorrow. Incorrect usage may lead to misunderstandings which could be fatal for a product. By acknowledging the specialties of culture’s color perception designers decrease risks of being misconceived.

 

Tip 5. Strive to color harmony

Harmony is what UI design strives to. To make users feel pleased and comfortable, designers try to bring the balance into user interface design. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. Harmonic colors contribute to a nice first impression from the website or application.

 

After years of searching, designers distinguished the basic color schemes that work effectively. Let’s see what they are.

Monochromatic. Color harmony is based on one color with various tones and shades of it.

Analogous. The scheme applies colors located right next to each other on the color wheel.

Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.

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.

Triadic. It is based on three separate colors which are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.

Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.

 

color theory design tubik

Source

 

Detailed information and examples of color harmony can be found in our article Color Theory: Brief Guide for Designers.

 

Tip 6. Steal ideas from nature

 

Mother nature is the best artist and designer in the world. Color combinations which we can see in the natural environment are always close to perfect. People enjoy watching sunsets and dawns, autumn forests and winter mountains since they are full of natural color combinations.

 

So, why don’t you try to borrow a few ideas? Go for a walk or search for beautiful nature photos and you will definitely find the inspiration.

 

web ui design city guide

Big City Guide

 

The success of a digital product depends largely upon the colors chosen for its UI. The right colors help users feel comfortable with a product. Designers can put people in the frame of mind that compels them to take action just by applying the appropriate color palette. Make your choices wisely.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.

Color in Design: Influence on Users’ Actions.

Color in UI Design. Look on the Bright Side.

Dark Side of UI. Benefits of Dark Background.

3C of Interface Design: Color, Contrast, Content.


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

usability_interfaces_ux_design_tubik

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

«Simplicity is the ultimate sophistication,» said genius Leonardo da Vinci, and this eternal truth is as fair now as it was several centuries ago. Such an approach in design for web and mobile interfaces results in human-centered products which are pleasant and easy in use. Make no mistake, simple doesn’t mean empty, primitive or monofunctional. Instead, it means clear, intuitive and helpful. Really simple products not only solve user’s problems but also do it in an optimal way in the aspects of times and effort.

 

We aren’t often thinking in terms of love and respect when it comes to digital products. We can describe them in tons of other words featuring appearance (like beautiful, elegant, interesting etc.) or functionality (like intuitive, easy-to-use, confusing etc.) or content (like informative, consistent etc.) but you rarely can hear that someone names a website or app respectful. However, respect for user’s time and energy is one of the vital goals which designers should strive to achieve in the product they work on. This approach is a great factor of usability and desirability. Today we would like to share some advice and techniques which could become supportive of this aim. These tips aren’t reinventing the wheel but present a helpful checklist for design outcome. So, let’s check what designers can do to save time and effort for users.

visual hierarchy in UI design

 

1. Put the core data into header

 

Talking about websites, it is an extremely helpful idea for quick and easy navigation. The only problem is to decide on what core data is, especially for websites with a huge amount of various data, like big e-commerce websites, news platforms or multi-theme blogs. Header is a strategic part as people see it before scrolling the page in the first seconds of introduction to the website. Being a sign of invitation, header should provide the key information about the digital product so that users could scan it in split seconds.

 

In our article telling about web headers design in detail, we provided the typical kinds of content which can be included into headers:

 

  • basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.
  • copy block setting the theme of the product or service presented
  • links to basic categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • switcher of the languages in case of multi-lingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

 

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. Here designers, preferably together with marketing specialists and stakeholders, need to decide on the strategically important options and pick them up from the list or add the others.

Why is header so essential? Eye-tracking investigations show that whichever scanning model a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

gourmet_website_interactions_tubik

 

2. Make branding highly visual

 

In terms of the discussed topic, brand means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. This image can be created in tons of diverse ways — visual, verbal, touchable etc. In web and mobile design, branding supposedly means a set of visual elements defining the brand style, which can be applied in the interfaces such as logo, typography, brand colors and the like. All of them together are a powerful tool for creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays the vital role in product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech. Moreover, if the brand is already well-established, its signs observed in the first seconds of seeing a website or app increase the level of trust.

Bakery website design case study tubik

 

3. Use numbers, not words

 

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes and distance — something potentially useful for them. So they are hooked with the numbers included in copy while words representing numerals can be missed in the bulk of text. Even more, whatever numbers represent, they are more compact than their textual variant, which enables to make the content more concise and time-saving for skimming the data.

 

4. Make the call-to-action (CTA) instantly noticeable

 

A call to action (CTA) is actually a word of phrase stimulating users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Common types of such interactive elements in the layout are buttons, tabs, or links. In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

bookshop website animation

 

5. Care about general page scannability

 

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern.

reading pattern

Gutenberg Diagram

 

reading pattern zig-zag

Z-Pattern

 

f_reading_pattern_eyetracking

F-Pattern

 

Knowing these models, designers and information architects can build navigation and important data in the points where they have the highest chances to be seen and get the user interested. The well-thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.

design for users copy in UI

 

6. Check the icons perception

 

Icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction. It’s hard to overestimate their role in UI navigation: they make it much quicker as most users perceive images faster than words. Usage of recognizable and clear icons has a great potential for boosting usability. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested and if needed supported with the appropriate copy content.

 

7. Strengthen the message with theme images and hero banners

 

No secret, in many cases an image is worth a thousand words. In web and mobile UI it often works that way: images become highly supportive and effective in setting the mood or transferring the message. In addition, images present the part of the content which is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can satisfy multiple goals: 

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

dance academy landing page animation

 

8. Talk to users in their language

 

Copy content plays the crucial role for communication with the user. Not only is its effective visual presentation significant for high page performance: the style, structure, and vocabulary should also correspond to user’s expectation from a page. Usage of too formal or business-like style in an entertainment app for teenagers, or vice versa too informal style on the luxury website selling elite real estate — there can be hundreds of cases when copy doesn’t follow business goals as well as habits and needs of a target audience. That kind of content inconsistency can be confusing and move the users away from the website or app. User research will be effective for this issue to see what way users want to communicate while a professional copywriter will help to strengthen design with the power of words.

web_ui_design_tubik

 

9. Use the power of Gestalt principles

 

Gestalt is the term meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. It helps understand the psychology of the app or website users better. When designers know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way.

gestalt-theory-grouping_principles

Source
 

For example, applying the principles of similarity and proximity, designers can group the layout elements according to human cognitive abilities, so that users could perceive them in the most natural and convenient way.

bright_vibe_calendar_app_ui_tubik

 

10. Optimize visual content

 

Whatever interesting, attractive and informative is the interface, there is the invisible factor which can erase all the benefits — the loading speed. If the visual content — images, animations, video — applied to an interface is too heavy or doesn’t perform well on different devices, the risks are high to lose users before they will understand the strong points of the product. In terms of high competition, with loads of websites and application, be sure: users aren’t going to wait, they will head for the more convenient and quick alternative even if it loses in a number of points. Optimization and persistent testing of visual content is the real sign of respect to the user boosting less time-consuming flow of interaction.

website design UI

 

Hopefully, this list will be helpful for those who are aimed at creating positive user experience. Don’t miss the updates — new practical tips and inspiration are coming very soon.

 

Useful articles

 

This set of articles can be useful to dive deeper into the points mentioned above

 

Best Practices for Website Header Design

The Role of Branding in UI Design

Visual Hierarchy: Effective UI Content Organization.

Gestalt Theory for Efficient UX: Principle of Similarity.

Gestalt Theory for UX Design: Principle of Proximity.

Copywriting in UI. Words that Make Design Go Round.

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

Tips on Applying Copy Content in User Interfaces.


Welcome to see designs by Tubik Studio on Dribbble and Behance