Tag Archives: tubik

design for business tubik blog

UX Design for B2B: Businesslike Strategies and Tips.

User experience design for business is getting more and more expressions today. A great diversity of companies make an important decision to come into play and fight for online presence. Various services are now available and executed online. In these conditions, designers working on the projects in this perspective, have to keep in mind the variety of business relations to offer the solutions corresponding the specific client’s goals. Continuing the theme of creating web and mobile products, today we suggest discussing the issues of design for the sphere of B2B services.

 

What is B2B?

 

B2B is the term used in business, marketing and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at the other companies’ business activities. The target audience of the offer is not individual customers but businesses. The nature of relations has a direct impact on business process, strategy, promotion and therefore any design stages involved in this scope. Not going far, if we are talking about outsourced design and development services, they are a direct example of B2B.

 

To get this example deeper, let’s imagine the company which sells physical goods to end consumers, let’s say, casual clothes. They need a website which will provide quite broad functionality for a big amount of users. The stakeholders monitor the market for web services and find out that hiring an outsource company for design and development is cheaper and more convenient for them than creating an in-company department for this purpose. This is the start of B2B relations as a digital agency provides their services for another business — a clothes shop — so that it could start e-commerce activity.

 

People involved in the design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines the target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation which are different from the one presented directly to end users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.

 

Neglecting the aspect of business relations increases the risk of creating the design which will not provide high conversion rate even being sophisticated, stylish and attractive visually. The psychological background behind design solutions has to support a particular business schemes or strategy. Here in Tubik, we have had broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.

 

design for business

 

Aspects to consider in design for B2B

 

Designing for B2B, it’s important to remember that:

— design solutions should consistently strengthen branding and company policy. The quality of design says much to the potential clients which the interface has to attract. A good dress is a card of invitation, a good mind is a letter of recommendation — it worked years ago and it still works now. Quality of design created for a website of B2B service is actually an integral part of their image and therefore profits. Remember, that B2B differs from B2C: the stakes, as well as the expenses, are higher, the number of leads can be limited with the specific nature of services, the decisions about the deal may take weeks and even month before they are agreed upon. The website or app design must present the company or service as highly-professional from the first seconds of the interaction and visual perception.  It should build a reliable bridge between the sides looking for collaboration. That’s why businessmen in this sphere are recommended to involve professional designers into the process while designers have to do their best to understand the business goals and research target audience.

 

— people become more and more open and sociable, not only in personal but also in professional aspects, and social networks present the great ground for that aim. Implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors and graphics, specially designed branded items and the like is one more way to strengthen brand awareness by means of design. Design has to be consistent whenever the B2B company is presented: headers and banners, logos, style of photos in social network account and on the website need to feature the same stylistic approach. In this way, design makes branding more recognizable, comprehensive and solid.

 

— consistent and a thought-out content strategy combining visual and textual material with the careful selection of visuals and copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;

 

— concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. The effective variant of scenario can take place when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Certainly, this solution should be based on thorough user research, but it has a high potential to make user experience positive;

 

— business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making a considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally unacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;

 

— the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to the target audience and are potentially open to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers, in this case, plays not less role than involving them in the game.

ux_design_practices_article

 

Design strategies for B2B

 

The strategies mentioned below may work not only for B2B but for any kind of interfaces aimed at business. Still, in B2B their role in getting profit may be more significant.

 

Get CTA elements seen instantly. Call-to-action buttons should be perfectly visible. Doesn’t it work that way for any kind of website, not only B2B? Yes, you are right. But in B2B the price of a click is much higher while visitors are often horribly busy and don’t tend to spend much time looking for a button on the page. Apply color, shape or orientation contrast, test the most effective placement and think over the copy on it — all that stuff may have a crucial effect on conversion rates.

 

Make value proposition noticeable. Getting to the website, the visitors should immediately understand why it is beneficial to them. Don’t make them search for the reason to cooperate with this B2B service — they won’t do it. Use the catchy slogan or tagline which will express the value proposition briefly and clearly, and take care of its visual performance. Typographic hierarchy will help user’s eye to catch it first, appropriate fonts will add the mood and style to the message.

 

Don’t overwhelm users with information: prioritize content. There is a big temptation for a business to show all its strong sides at maximum. However, it may lead to the website with a huge amount of data which might get the visitor confused, annoyed or frightened. It is especially hard in the cases when visual hierarchy isn’t thought-out and tested properly: the pages risk transforming into a mess which cannot be scanned quickly. So, prioritization is both designer’s and user’s friend here: apply design techniques and layout which will strengthen the visual performance of the core information.

 

Make copy blocks digestible. The debates around the theme of copy blocks are still hot and actual: which copy is better, long or short? Actually, both may be effective. As we mentioned in the article devoted to landing pages, a decision on the amount of copy has to be based on thorough research and testing as it directly and highly influences conversions.  For example, if it presents a famous company product or service or informs about special offers, sometimes short and concise copy is enough to encourage users to buy or know more. However, if a new unknown product or service is presented, it may be important to provide users with more information persuading them to follow the call to action. Whatever is the decision, the copy content should be given in scannable blocks which aren’t too big so that the user didn’t think reading will take too much time. Scanning the blocks allows for faster understanding if the copy brings useful information.

 

Keep core data available from the pre-scroll area. Users usually decide on staying on the website or leaving it very quickly. It is really a matter of minutes or even seconds. That is why all the key information would better be seen in the pre-scroll area, including the value proposition and ability to contact the duty holders. 

 

Activate the power of color psychology. Colors present the great support in sending the right message. Being attentive to target audience’s preferences, designers can select the colors not only on the basis of their nice looks but also color psychology which explains associations people have with colors.

 

Apply catchy visuals sending a message. A picture is worth a thousand words — and that’s not just because it’s more appealing or beautiful but also because in the vast majority of cases, it is perceived faster than words. Moreover, the attractive visual content, be it a photo, illustration or poster may become another source of informing the user about the value proposition provided by the company.

 

Consider promo video content. Promo videos present the popular trend in business schemes now as they enable to inform users about the value propositions and benefits in the fast and original way. However, it may influence the loading speed of the page so this decision needs to be well-weighed.

 

Apply landing pages for special offers. Landing pages allow for focusing user’s attention on the specific information instead of making them search for it around the website. It is especially important is the sales funnel starts out of the website.

 

Don’t forget about the testimonials and signs of trust. Word-of-mouth is the best advertising, especially in the B2B sphere. Making a decision on collaboration, people tend to consider references, testimonials and other signs of trust from the previous clients as positive factors. So, make sure they are available and easily found.

 

Let users contact duty holders from any point of their journey. Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them. 

 

usability_interfaces_ux_design_tubik

 

Hopefully, the mentioned strategies will help not only designers but also entrepreneurs who want to know more about design issues influencing profitability. Soon, we will share more posts devoted to other numerous aspects of design for business.

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics.

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.

11 Profitable Strategies for E-commerce UI Design


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

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

CTA_buttons_design_tips_tubik_blog

Call for Attention. Powerful CTA Button Design.

An effective interaction system of a digital product consists of small elements which have their tasks and functions. To make the sufficient system, it’s vital to pay attention to all the details.

 

Buttons are core interactive components of user interfaces which play a significant role in the quality UX as well as conversion rates of websites and applications. UI buttons vary according to their features and can be divided into different types. A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals. Let’s see what makes CTA buttons stand out from the crowd learning from the best practices.

 

mobile interaction design tubik blog

 

What’s a CTA button and why is it important?

 

A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example purchase, contact, subscribe etc.

 

Traditionally, CTA buttons are easy to notice, even more, designers intentionally create them that way so that people couldn’t resist to clicking it. That’s why they are usually bold buttons containing microcopy with a particular call-to-action (e.g. “Learn more” or “Buy it now”) which encourages us to push it.

 

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

 

ux_design_practices_article

 

This way website visitors and app users can be led through a sales funnel from one stage to another helping them to learn the details about the product or service. Even professionally worked out content may not guarantee the high level of user engagement. Without CTA buttons people are more likely to scan content quickly and just leave it untouched.

 

Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are much more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.

 

choice of color in UI design

 

What makes a powerful CTA button?

 

Size

 

Size is one of the most common tools helping to divide UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

 

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

 

burger_app_ui_animation_tubik

 

Color and shape

 

Visually attractive size is only one aspect of a powerful CTA. To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The thing is that human mood and behavior highly relates to the visual surroundings. Our mind reacts to colors and shapes while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted the influence of different colors and shapes on our consciousness. In our previous articles, we described the role of this impact on the design solution. Here are brief guides on the common meaning which colors and shapes have.

 
Color meanings:
 

  • 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.

 
Shape meanings:
 

  • 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.
  • Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.

 

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

 

dating_app_landing_page_tubik

 

 

Placement

 

The placement of CTA buttons is crucial for their capability. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. But how to understand what placement is more prosperous?

 

Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path.

 

According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is the most common for web pages with big amount of content such as blogs, news platforms. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences.

 

Z-pattern is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right.

 

These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

 

gourmet_herbs_website_design_tubik

 

Microcopy

 

Microcopy plays a significant role for the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

 

bright_vibe_calendar_app_ui_tubik

 

Call-to-action buttons are one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. Designers need to understand the importance of CTAs and pay deep attention to all the details having an impact on their performance. Follow Tubik Blog to get more tips on CTA design.


Welcome to see designs by Tubik on Dribbble and Behance

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

design_review_tubik_studio

Tubik 2017. Bright Year in a Big Review.

Full of productive work and a wide variety of creative challenges, the year 2017 is almost over. For Tubik it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. And again, we start the new stage of our workflow remembering the most significant points of what has already been done, so today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked the year 2017 for our team.

 

Keeping our active position on Dribbble, we published over 120 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Ten UI shots

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

financial_service_website_tubik

Financial Service Website

 

dating_app_landing_page_tubik

Dating App Landing Page

 

design agency landing page

Digital Agency Landing Page

 

web ui design city guide

Big City Guide

 

home budget app mobile interface

Home Budget App

 

bikers website blog

StarDust Biker Website

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia

 

music streaming app design

BeatSync Music Streaming App

 

Homey app smart home UI

Homey App

 

Top Twenty Animated shots

 

watering_tracker_app_ui_tubik

Watering Tracker App

 

jewellery ecommerce app

Jewellery E-commerce App

 

loading_animation_iphonex_tubik

Loading Animation for iPhoneX

 

home budget web interface

Home Budget Dashboard Animation

 

burger_app_ui_animation_tubik

Tasty Burger App

 

californication_bus_animation_tubik

Californication Bus Animation

 

dance academy landing page animation

Dance Academy Landing Page

 

cinema app interaction UI

Cinema App

 

upper_app_ui_design_tubik_studio

Upper App

 

Upper App Animation

Upper App Landing Animation

 

business_card_app_animation_tubik

Business Card App

 

gourmet_website_interactions_tubik

The Gourmet Website

 

bookshop website animation

Bookshop Website

 

car app interface

Car Stats Animation

 

mood messenger landing page

Mood Messenger Landing Page

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

navigation_in_ui_animation_tubik

Navigation in UI

 

mobile_game_interactions_tubik

Mobile Game Interactions

 

tubik_photo_app

Photo App Interactions

 

menu_interactions_ui_animation_tubik

Menu Interactions Concept

 

Top Ten Illustration shots

 

design_party_graphic_design_tubik

Design Party

 

star_wars_stickers_fanart_tubik

Star Wars Fan Art Stickers

 

creative_ux_design_illustration_tubik

Creative UX

 

halloween_pumpkin_animation_tubik

Creative Pumpkin

 

opera video animation case study

Opera Video: Summer Heat Illustration

 

illustration_design_in_progress_tubik

Design in Progress

 

add_color_illustration_tubik

Add the Color

 

building_ui_illustration_tubik

Building UI

 

business_graphic_design_tubik

Business Teamwork

 

golden_ratio_ui_design_illustration_tubik

Golden Ratio in UI Design

 

Top Five Branding Shots

 

binned logo animation design

Binned Logo Animation

 

logo_animation_tubik_design

Whizzly Logo Animation

 

brand identity design case study

Reborn Business Cards

 

lunnscape_branding_case_study_tubik

LunnScape Branding

 

forcecop_logo_design_tubik

ForceCop Logo

 

Top 5 tubik.arts shots

 

tubik_arts_character_animation_hagrid

Character Animation: Rubeus Hagrid

 

tubik_arts_flickids_pirates_character_animation

Character Animation: Flickids Pirates

 

tubik_arts_orks_vs_aliens_nagari_cg_design

Character Design: Sorceress Nagari

 

tubik_arts_orks_vs_aliens_nazmordul_illustration

Character Design: Orc Nazmordul

 

tubik_arts_thorin_character_illustration

Character Design: Thorin Oakenshield

 

Top Ten Articles in Tubik Blog

 

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Here’s the top ten of them (the extended list of the most popular articles can be found here).

 

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.

 

most popular design articles in tubik blog

 

Top Six Tubik News

 

Upper App Launch

 

At the beginning of 2017, following the successful launch of Toonie Alarm, Tubik team we rolled out another iOS application for everyday use called Upper App. It is a simple and elegant to-do list designed in minimalistic manned and aimed at easy task tracking. The application got itself the App of the Day on Product Hunt and once again allowed us to go through all the process from the initial idea of the product to branding, design, development and marketing of our own product. No doubt, this kind of experience was highly helpful for our work on outsourcing project.

 

upper app UI design case study

 

tubik.arts launch

 

One more big news was establishing tubik.arts department focused on creating CG, characters and environment for various games, book illustrations and complex motion design.

 

tubik_arts_cg_orc_nazmordul_animation

 

Behance Portfolio Reviews

 

In 2017 Tubik hosted Behance Portfolio Reviews events twice in Dnipro, Ukraine. These creative meetups let the local design community get one more platform for communication on professional issues and allowed novice designers to get useful tips and recommendations from experts.

 

behance portfolio reviews

behance portfolio reviews dnipro

behance portfolio reviews dnipro tubik

 

Full Cycle for Product Creation

 

This year our team has grown to add not only the designers but also web and mobile developers, therefore the range of services which we can offer to our clients has broadened significantly. At the moment we are able to accomplish the creation of any digital product from scratch. Research, branding, graphic design, UI/UX design, motion design and video production, iOS, front-end and back-end development as well as copywriting for slogans and brand names — in 2017 we successfully dealt with all those positions and even more custom ones.

 

Tubik Academy

 

The year has also been marked with the first group of UI/UX designers who have completed the intensive course of UI/UX design in Tubik Academy — and two of them are already going through their internship in the studio.

 

tubik academy ui ux designers

 

Problem-Solving Web Design — Free Ebook

 

In 2017 we shared one more issue of Tubik Magazine: a free ebook Problem-Solving Web Design devoted to design of user-friendly and goal-oriented websites and landing pages.

 

problem solving web design free book

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. And as usual, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora at which we got the positions of top writers in the domains devoted to design. Also, we kept everyone updated with studio news via TwitterFacebookTumblr and Flipboard.

 

new year tubik studio team

 

Even this quite concise review makes obvious that 2017 was full of everything for us. And we are ready for new challenges, perspectives and projects which will definitely open many new unforgettable creative pages.

Warm greetings for everyone from the Tubik team, we wish you the amazing and successful year 2018!


Welcome to read the Review of Popular Interface Design Trends in 2017

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

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

strategies for ecommerce ui design

11 Profitable Strategies for E-Commerce UI Design

Ratings of e-commerce are booming and rocketing. People are getting more and more confident in buying things online. The report by BigCommerce on customers buying habits in 2016-2017 shows really interesting stats about online shopping:

 

  • 51% of Americans prefer to shop online
  • 96% of Americans with internet access have made an online purchase in their life, 80% in the past month alone
  • E-commerce is growing 23% year-over-year, yet 46% of American small businesses do not have a website
  • Online orders increase 8.9% in Q3 2016, but average order value (AOV) increased only 0.2% — indicating that transactional growth is outpacing total revenue.

 

The numbers above still haven’t stopped their increasing. That wouldn’t be reasonable for any business to ignore such global trends having a great impact on profits and reaching customers. For the last couple of years here in Tubik we see the obvious and logical growth of interest from big and small businesses in establishing their presence online via websites and/or mobile applications. Based on our experience and the research of the sphere, today we offer you the article telling a bit more about strategies and best practices in UI design for e-commerce.

 

So, let’s start with the 11 points which are important to consider when you are designing e-commerce user interfaces.

 

ux design for ecommerce tubik blog

 

1. Make the branding instantly visible

 

From the business perspective, branding is a crucial thing: it enables to provide a product, company or service with a recognizable face and personality.  In general terms, branding 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.

 

Branding tends to be essential in an e-commerce user interface design, especially if stakeholders want to use the digital product as the additional flow of customer attraction. Moreover, identity integrated thoughtfully into the interface is the effective way to increase brand awareness. The time taken for proper market and user research, target audience definition, competition analysis and development of brand identity on the basis of all that data by a professional designer is a worthy investment. If that’s done before launching the process of UI design, the product gets higher chances of becoming recognizable faster and easier.

 

In this case, UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand.

 

There are numerous ways to add branding to the interface, still some layout zones and elements which have the highest potential in this issue:

 

Headers. In the article about website header design, we showed in detail that headers present the area of high visibility. So putting strategically important elements of branding in it is a good way to strengthen its memorability.

 

Splash screens. In mobile applications, splash screen or welcome screen is the first screen seen by a user while the application is loading and starting. It’s a good idea to use a logo, mascot or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it’s easy to make the sign even more attractive and memorable.

 

Preloaders and pull-to-refresh indicators. These are the elements which show the flow of the current loading process on the app or website. Branding applied elegantly in them can add much into the consistency of both UI and identity design.

 

MascotsMascots are images, usually personified, which often represent the brand, product or service identity and can be its symbolic convention in all the application or website. Mascots push the limits of personification and give the chance to create the unexpected combinations of elements or make fantastic and non-existing characters alive. A mascot becomes the element of identity and inter-connector between the user and the product. In many cases, it is the basic element of communication and interaction delivering the necessary message to the user.

 

jewellery ecommerce app UI

 

2. Set clear and easy navigation as the core task

 

In the article on UX design for ecommerce, we stated: whatever an amazing website or app is, whatever the stylish and trendy design and breathtaking images it features, its success will be measured not by the number of «wows». The efficiency is analyzed simply — by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

  • what company or brand they are dealing with
  • what page they are at
  • where the menu is
  • how they can get back to home page or catalog
  • where the search and filters are
  • how long the page-loading process is going to take
  • how they can see the detailed information about the item
  • how they can choose between the option for the same item (color, size etc.)
  • how they can pay for the item
  • how they can save the items they would like to get back to later
  • how they can contact the seller
  • how they can see the rating and reviews of previous buyers etc.

 

gourmet_website_interactions_tubik

 

3. Check the scannability of the page or screen

 

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. Knowing the eye-tracking models, Gestalt principles and laws of visual hierarchy, designers and information architects can put the core data and interaction elements to the zones of high and natural visibility.

 

Calls to action (CTA), in particular, should be instantly seen in the first seconds on the page or screen. In the interfaces for e-commerce, CTA elements are the core factor of effective interaction with the product playing the crucial role in usability and navigability and therefore in getting profits. 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 increases the risk of poor conversion rate and general user experience.

 

4. Minimize user’s efforts whenever its possible

 

The respect to the customer lies not in pouring out your thanks. The real respect is in saving users’ time and effort day in and day out. Here are some design practices which can make the interface effort-saving:

 

Show related products. Seen on the item page as recommendations close to the features of this particular product can make the process of search and browsing much faster for users. However, it’s vital to check together with developers that this section really works according to the algorithm which shows suitable items, not random ones.

 

Strive for a minimal number of clicks. If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every users’ click possible. Too many operations are tiring and annoying which is a kind of negative emotion. And emotions have a huge influence on user experience and make retaining users much harder.  Minimize the number of clicks on the way of choosing and buying whenever it’s possible — this way you respect user’s time better than politest words of thanks.

 

Simplify the sign-in process. Imagine the situation when you got to the amazing website selling the goods of your dream, and they are presented in such a stylish way that you want to buy them at once. But when you click the button «Buy», you are taken to the huge long from which you have to fill in to register on that website. That will cool down your hot wish to buy everything right here, right now, isn’t it? You change from the state «Take my money, give me that» to «Really? 20 points to fill in before I can buy?» in split seconds. Not all the users will survive that transformation and the website or app will lose a part of buyers. So, it’s necessary to make the sign-in/log-in process as simple as possible.

 

User shape and color marking to group the items or types of content. Color and shape codes enable designers to apply Gestalt principle of similarity not only on one screen or page but on the whole app or website. Color or shape markers simplify navigation and keep the consistency of design enabling users to remember the prompts and find the content they want easily. For e-commerce platforms which are usually full of numerous items, it can make the interface much more user-friendly.

 

Check that perception of the layout is natural and harmonic for the human eye. There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds or pages loading for ages — any point of that stuff can spoil the experience quickly and move users away.

 

Bakery website design case study tubik

 

5. Don’t go too far experimenting

 

There are many articles and videos calling creative people to hear their heart, trust their guts and think out-of-the-box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it the way to solve the problem and make users happier. So, it’s vital to look at the interface from user’s perspective and find the way to make interactions that will provide the smooth and easy way to conversion. In the article on home page design strategies we mentioned: the website is made not for creative contests or gallery of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of revolution might confuse and scare: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning. Strive for the balance between innovation and traditions.

 

6. Use landing pages for specific purposes

 

For business aims and profits rate, this tip may bring crucial changes. E-commerce UI design principles are usually based on dealing complex websites or apps which are filled in with a variety of information. So, the approach of directing all the traffic from outer sources to the home page can be a step killing profitability and reducing conversion rates. Users might get overwhelmed, distracted or even annoyed with the amount of data they have to process finding what they need, especially if they are focused on a particular narrow goal presented in the source they come from. Using landing pages when you need to concentrate user’s attention on something specific can solve this problem efficiently. Landing page is focused on one item, to make it quickly found and reduce delays when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

 

web design UI tubik studio

 

7. Make the homepage informative

 

Home page can satisfy multiple functions: it’s a card of invitation, a starting point of the journey around the website, a storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is the first visual and emotional touch to the website. Certainly, design is one of the core ways to make this touch gentle, smart and helpful. With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website, not only by beauty and style but first of all by information which is looked for. Making it accessible, noticeable and clear, designers grow the chances of positive user experience.

 

In general, home page can include the following data:

  • the nature of the website
  • brand or company identity elements
  • internal search
  • links to the core interaction zones
  • contact data and links to social networks
  • signs of trust (testimonials, reviews, big numbers of presence in social networks etc)
  • for e-commerce websites, it can be visual presentation of bestselling and/or exclusive items, for example, specific books, toys, clothing, equipment etc.

 

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals set for the website and the research of target audience.

 

bookshop website animation

 

8. Apply high-quality images giving the message

 

Images take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. They present the part of the content which is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which:

 

— photos: theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items, title photos for blog articles and pages of special offers etc.

— illustrations: custom illustrations in graphic interface design can look both informative and original allowing the design to stand out of the competition.

— hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource.

— icons: these are small but meaningful pictograms which are informative and support data exchange between the informer and addressee. Icons play the key role in providing clear and intuitive navigation, but they should be checked on proper clarity and the absence of double meanings.

— mascots: images, usually personified, representing the brand, product or service identity.

— visual identity elements: various visual signs of branding like logos, custom lettering for brand name and/or slogan etc.

florist shop website design

 

 

9. Think about promotional videos of different kinds

 

There are several common types of promotional videos:

 

  • introduction video (the first insights on the company, product, or brand showing its benefits for users)
  • product presentation videos (details about product’s features and advantages, special steps of interactions and the problem-solving potential of the product)
  • landing page videos (strengthening the message driving users to a particular call-to-action offered on the page)
  • video testimonials (the reasons and signs of trust and loyalty to the company, brand or product)
  • entertaining and educational videos (rising emotional appeal and often presenting the material for viral marketing).

 

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative and attractive. However, the technical side should be double-checked so that the video was integrated correctly and didn’t overload the page.

 

10. Let the user contact the duty holders from any point of interaction

 

The most popular placement for contact information is footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, on an e-commerce website, presents the online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Anyway, the contact data should be available at any point users may need it. Among others, it is one of the factors influencing the level of trust to the website.

 

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

 

11. Add gamification

 

Gamification integrated into digital products is a great way to stimulate users’ extrinsic motivation, which is mostly a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). So, challenges, leaderboards, rewards for loyalty and big orders, discounts, badges, coupons, stickers and all the other stuff of that kind can become great stimuli for users to not only start interaction with a website or app but also stay there and buy regularly.

 

badges illustration tubik studio

 

The offered e-commerce UI design examples and strategies, for sure, do not cover the whole scope of issues to consider in this fields. However, they can serve as a useful checklist or a source of UI design inspiration for those who aim at creating user-friendly platforms supporting business goals. No doubt, best UI design for e-commerce website is the one which leaves a buyer happy and brings profits to the stakeholders. 

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics.

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.


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

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design