Tag Archives: graphic design

typography in UI design web mobile

Typography in UI: Guide for Beginners.

People read all the time. It’s not only books or magazines but various info on the Internet, adverts in the streets, in public transport or outside shops. However, only minority of readers may know how much time and effort often stand behind a single line. When we easily read a copy feeling comfortable and relaxed, many thanks go to a designer. Text arrangement and the aesthetic look of fonts are among designers’ top priorities. To create effective UI and clear UX designers learn basics of typography science. Today’s article covers basic points in typography which every professional designer should comprehend and apply in work.

 

What’s typography?

 

Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.

 

Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11-12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as Textualis (Textura) and Schwabacher.

 

Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now the science is applied in different spheres and plays a significant role in design.

 

The role of typography in design

 

Can you think of at least one example of web or mobile design without copy elements? It’s difficult, right? Still, just a presence of copy in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it’s too difficult to understand so it isn’t worth spending much time. However, typography is an essential part of the effective design. Let’s see why.

 

People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users perception.

 

The effective copy is a key to the powerful design. Its effectiveness depends not only on its content but also on how it is presented. Font size, width, color, and text structure — all of that matter. Designers can transfer certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps design to communicate with people. Visual performance and readability of copy in digital products have the great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can’t use it at all. Today poor user experience in digital products is unforgiven since users can easily find the better alternative.

 

In addition, bad typography significantly affects the first impression because even when users don’t read copy, they scan it. In case fonts look inappropriate people may not want to learn about your offer or use your product.

 

home page design strategy

 

Essential typography elements

 

To create profound typography, you need to learn its anatomy and the processes typography building requires. Let’s see.

 

Font and Typeface

 

Nowadays, many designers use terms “font” and “typeface” as the synonyms but that’s not quite right. Let’s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers.

 

Mean line and baseline

 

Typically, type characters are placed in a straight line creating a neat visual presentation. Main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.

 

tubik typography baseline

 

Character measurement (size, weight, and height)

 

To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called “x-height” because the body of every character in one size is based on the letter “x”. This approach makes them look even. It’s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.

 

tubik typography x_height

 

Ascender and Descender

 

The ascender is a part of a letter that goes above the mean line like in a letter “b” or “d”. The descender is opposite to ascender. It’s a segment that extends below the baseline like in “q” or “g”.

 

tubik typography ascender

 

White space

 

White space, also known as negative space, is the area between elements in a design composition. Readers aren’t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, copy will be hard to read. That’s why negative space matters as much as any other typography element.

 

tubik_typography_whitespace

 

Alignment

 

Creating effective typography is not that easy and it includes many processes. For example, alignment is an action of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.

 

tubik_typography_alignment

 

Tracking

 

The process of tracking involves adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.

 

tubik_typography_tracking

 

Kerning

 

Kerning is a bit similar to tracking still they aren’t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.

 

tubik_typography_kerning

 

Leading

 

Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.

 

tubik_typography_leading

 

Typographic hierarchy

 

As any other design element, typography should be structured. Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of typefaces and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating typography elements including typefaces, fonts, sizes, and colors as well as their alignment.

 

web design UI tubik studio

The Gourmet Website

 

Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.

 

The primary level of copy content includes the biggest type like in headlines. It strives at drawing user’s attention to the product. The secondary level consists of copy elements which can be easily scanned. Those are subheaders and captions which allow users quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough.The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

web design UI concept tubik studio

The Big Landscape

 

Typography cannot be learned in one day. It requires constant studying and persistence. Follow Tubik blog updates and learn more about typography in design.

 

Recommended reading

 

Robert Bringhurst “The Elements of Typographic Style Paperback”

 

Erik Spiekermann “FontBook”

 

Simon Garfield “Just My Type: A Book About Fonts”

 

Tips on Applying Copy Content in User Interfaces

 

Every Design Needs Three Levels of Typographic Hierarchy


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

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

Simple doesn’t primitive. Less isn’t vague. Short doesn’t say little. Air doesn’t equal emptiness. Today we are talking about minimalism.

 

In the book «The More of Less», Joshua Becker said: «You don’t need more space. You need less stuff.» Minimalism is often discussed nowadays in different spheres of life and work, and diverse directions of design are not the exception. Let’s see what are its benefits and points to consider.

 

web design tubik studio

 

What is minimalism?

 

Actually, minimalism is a word of broad meaning used in various spheres of human activity. Merriam-Webster dictionary defines it as «a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity». Being applied to more and more fields, it saves its core traits: meaningful and simple.

 

Minimalism as a direction of visual design got especially popular in the 1960s in New York when new and older artists moved toward geometric abstraction in painting and sculpture. The movement found its impression in the artworks associated with Bauhaus, De Stijl, Constructivism and so on. In diverse spheres of visual arts, key principle of minimalism was leaving only essential part of features to focus the recipient’s attention as well as support general elegance. Lines, shapes, dots, colors, spare space, composition — everything should serve its function being thoughtfully organized. Today we can meet minimalism in a variety of life spheres: architecture, arts, photography, all kinds of design, literature, music and even food presentation.

 

«A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context», said Donald Judd, an American artist associated with minimalism. Working in this style, designers seek to make the interfaces simple but not empty, stylish but not overloaded. They tend to use negative space, bold color and font combinations, and multifunctional details making the simplicity elegant. The line dividing simple and primitive is very thin. That is why not all the designers take the risk of trying this direction: some may think it looks too decent, the others don’t find enough ways to show much with fewer elements.

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers include:

  • Simplicity
  • Clarity
  • Expressive visual hierarchy
  • High attention to proportions and composition
  • Functionality of every element
  • Big amount of spare space
  • High attention ratio to core details
  • Typography as a significant design element
  • Eliminating non-functional decorative elements

 

Surely, the list can be continued but even the given positions show that minimalism in UI sounds like user-friendly trend. Applied wisely, it helps users to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

Today minimalism is one of the wide-spread trends in the design of websites and mobile applications. Main points to consider can be described with the following practices.

 

Flat design

 

As we mentioned in one of our previous articles, flat design became a great supporter of minimalism in modern digital products. The most prominent feature of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat images usually use fewer elements and curves, avoid highlights, shadows, gradients, or textures. This approach allows creating images, buttons, icons and illustrations which look neat in different resolutions and sizes. It lets designers enhance usability and visual harmony of user interfaces.

 

However, the terms «flat» and «minimalist» shouldn’t replace each other which often happens today. They are not the same. «Flat» deals with the style of icons, illustration, buttons and other visual elements of the interface in the aspect of gradients, textures, shadows etc. «Minimalist» has much broader meaning and deals with the layout in general, its composition, color palette, contrast and all the techniques of visual performance applied to it. So, flat can be described as one of the design techniques applied in the minimalist approach to creating interfaces.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

Color is a feature of a great potential in design of interfaces as it can set both informative and emotional links between the product and the user. Designers working in minimalism tend to take the maximum from color choices, and in most cases, they limit color palette to monochrome or minimal set of colors. This strengthens the chosen colors and doesn’t distract users with too much variety. Such an approach is efficient in interfaces concentrating users’ attention on particular actions like buying, subscribing, donating, starting to use etc. Moreover, in the psychological perspective, the colors usually transfer particular associations and emotions perceived by users, so limited palette makes chosen colors stronger in this aspect.

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

Typography in minimalistic design is seen as one of the core visual elements of not only informing users about the content but also setting the style and enhancing visual performance. Choosing the way of concise use for graphics, designers usually pay much attention to the choice of typography and never hurry in testing the pairs, sizes and combinations. As well as color, fonts and typefaces are seen as a strong graphic element contributing into general elegance and the emotional message it sends. On the other hand, readability and legibility do not lose their leading positions in the matter of choice.

 

upper app UI design case study

Upper App

 

Choice limitation

 

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

Working on minimalist UI, designers do not apply many images, but those which are chosen to be used are really prominent, catchy and informative. This approach results in the long and thorough search of the «right» image which would cover all those functions and set the required mood instantly. The photo or illustration itself has to follow the principles of minimalism, otherwise, the choice of the wrong image can ruin all the layout integrity.

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

Navigation in minimalist interfaces presents another challenge: designers have to prioritize the elements rigorously in order to show only the elements of the highest importance. There are different techniques to hide the part of navigation, but doing this, it’s vital to ensure that users will find what they need easily. That is one of the reasons why minimalist approach can be criticized: not being presented properly and tested enough, solutions like hamburger menus and hidden layout elements can leave some users lost in the journey around the website. Obviously, it is not the good ground for positive user experience, therefore every solution about navigation should follow the philosophy «measure thrice and cut once».

 

Adding air and using negative space

 

White space (also called negative) in digital design is the term which is more about space rather than color. In minimalism, it is one more effective way of adding elegance and marking out the core elements. Also, in terms of monochromatic or limited color palette, white or negative space plays the big role in creating enough contrast and supporting legibility.

 

tubik studio ice ui website

Ice Website

 

Grids

 

Grid system in minimalist interfaces can be effective for making the layout look highly-organized, especially if the website presents a lot of homogenous content. Another benefit is that grids are responsive-friendly.

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

Following the philosophy of limits and simplicity, minimalism depends much on contrast as a tool of good visual performance. The choice of colors, shapes and placement are often based on the contrast as the key feature.

 

tubikstudio ui animation website design

Bjorn Website

 

Well, it’s easy to see that minimalism has a great number of benefits and presents a good approach in creating user-friendly interfaces. However, it doesn’t mean that minimalism should be applied everywhere: every goal should be achieved by the proper means. One thing is for sure: the more minimalistic is the interface, the more time and effort the designer should invest to make it clear and functional. Elegance and beauty of minimalism should support the global aim of providing positive user experience.

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

These days e-commerce is evolving by leaps and bounds presenting new interesting challenges to designers of user interfaces. Websites and mobile applications enabling users to buy and sell need constant attention and improvement to correspond to the current concerns. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the strategies and practices of UX design for e-commerce. Welcome to listen and follow the updates!

 

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

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

tubik studio lettering design

Get Original: Benefits of Handcrafted Lettering in Design.

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

 

lettering designer

 

What is lettering?

 

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

 

tubik studio lettering design

 

Lettering vs Calligraphy

 

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

 

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

 

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

 

team_work_tubik_studio_lettering

 

Hand-drawn lettering in design

 

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

 

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

 

slogan_lettering_tubik_graphic_design

 

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

 

Hand lettering in branding

 

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

 

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

 

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

 

toonie-photo-lettering

Logo lettering handcrafted for Toonie Alarm

 

Pitfalls lettering may bring

 

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

 

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

 

Points to consider

 

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

 

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

design_for_business_tubik_studio

 

Recommended reading

 

Drawing Type: An Introduction to Illustrating Letterforms

 

The Art Of Hand Lettering

 

Creating a Hand-Lettered Logo Design

 

Understanding The Difference Between Type And Lettering

 

Hand Lettering for Responsive Web Design


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

tubik free podcast design business terms

Tubik Podcast #5. Design for Business: Know Your Target.

Having set the potential users of the website or app and researching this group of users, designers are able to create the solutions which will get close to the users and will be more precise in solving their problems. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the phenomenon of the target audience and diverse types of targeting in the design perspective. Welcome to listen and follow the updates!

 

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

 

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

opera video graphic design case study tubik

Design for Web: Promotional Video. Benefits and Pitfalls.

A video is an effective marketing tool which never gets old. People got used to watching video adverts on TV since the beginning of the past century. Now is an era of the Internet and a big part of the marketing and advertising is concentrated on the web. Internet users are in love with videos and joyfully spend hours watching them. Marketing community couldn’t ignore such an opportunity and many companies already use a promotional video as a creative and effective way of product marketing. In this article, we’ll dive deeper into details of custom promotional videos covering their essence and profitability.

 

What’s a promotional video?

 

Don’t want to sound obvious still there is no better explanation than to define a promo video as the one created to promote a company or its product. This type of videos is made that way so it could encourage people to buy a certain product or use the services of a company. They are usually small catchy videos showing all facets of a promoted object in the best way to prove people it’s worth of their time and money. Since promotional videos are popular and widely-used, everyone tries to find ways to make their videos original and creative. That’s why designers offer businesses promo videos created in different styles which stand out among thousands of the others because they are unique and catchy.

 

Animation case study by Tubik Studio

 

Types of promo video

 

Promo videos can serve many business purposes so there are different types each created to achieve certain objectives. For example, one of the most commonly used types of promotional videos is an introduction video. Their aim is to tell people about a business, its offers and reasons why someone should care about it. An intro promo video works best for startups willing to present themselves and interest their potential clients. This type of video needs to be informative still short and entertaining so that it could catch viewer’s attention.

 

Next type having popularity among companies is a product presentation video. Many businesses are looking for creative ways to tell about their products and a custom promo video is a trending tool now. The video can shortly present product features and tell about its value for users. Another type combines features of the two previous. These are landing page videos which aim at driving users to take expected actions such as purchasing or signing up. They usually are meant to present some unique offers which people can get by taking certain action like leaving contacts or else.

 

To gain people’s trust, companies often share the testimonials from the satisfied clients on their websites. Video testimonials are an effective way to show that a company is trustworthy and can bring values. One more approach to product promoting is short entertaining videos. This type usually doesn’t seem like promo videos because it isn’t centered on a product or a company. The videos are meant to catch people on the emotional level by showing funny, heart-moving, or thoughtful video pieces having a short plot and a promoted product can appear as a secondary element. Quite often, if done and introduced originally, the videos of this sort get viral and present additional support to the brand.

 

All the types of promo videos can serve as efficient marketing tools. However, a company needs to choose the type accurately according to business tasks which the video is meant to accomplish.

 

Product presentation video for Toonie Alarm

 

Is a custom promo video profitable for businesses?

 

Custom promotional video creation requires time, money, and effort to spend, so obviously many companies are concerned with the question “What benefits will we receive from it?”. Here is the answer.

 

People perceive video faster than copy. Psychological research shows that human brain processes video material much faster than text. It means that people need take more effort to read a copy about company’s offers rather than watch a video. That’s why, by placing a presentation promo video on a website, a company increases chances that more people will know about their product. Also, a quality video can accurately transfer the message which a company wants to tell to its possible customers.

 

Video increases conversion rates. Since people perceive video better than text, they are more likely to be influenced by it. It easier to gain users’ trust when they are able to see how the product works in a real time. If people trust a company and are interested in their offers, they more willingly take an action such as signing up or trying a demo. What’s more, a powerful promo video is an effective way to retain users longer rather than a great amount of copy.

 

Good search engine results. A major part of the Internet content consists of text data. Video content has less competition so the users searching keywords are more likely to find a video on the first page. To achieve even better results, a promo video needs to have well-thought SEO with the appropriate keywords in the headline, tags, description, etc.

 

Better social sharing. People are crazy about nice videos and the thing they like even more is sharing these videos with their friends. Videos are mobile and easy to share, the reason why it can be easily spread across social networks. Businesses should keep in mind that buyers are the best marketers they have, so it’s vital to encourage users to share the links.

 

Video receives real-time feedback. Internet users like commenting videos and discussing it with the others. It allows a company to see what people say about them and their product. Analyzing the feedbacks, a company can make significant improvements.

 

Better branding recognition. If a company creates an interesting and original video, people are more likely to remember them. The thing is that video has the influence on the visual memory as well as the echoic one so the chances that users will recognize a brand increase twice compared to elements that are perceived only visually.

 

Creative video helps to stand out from the competition. Video marketing isn’t a new approach, even more, it’s been a top tool for decades. However, technology is evolving and so do approaches to video creation. Original and quality video can help a company stand out against competitors.

 

Promo video for PassFold project designed and animated by Tubik team

 

Promo video pitfalls to consider

 

Certainly, there is no ideal approach to product marketing: considering video as a promo tool, you need to keep in mind possible pitfalls it may bring. First of all, the creation of a powerful promotional video requires spending money and time. To make an effective video, professionals need to handle many processes: from scripting and video recording to video and sound editing. Original video will need unique graphic material and high-quality animation, so if a company wants a quality video, it must be ready to invest in it.

 

In case a company decided to make a promo video, they need to make sure it’s done right. Bad quality video can affect brand reputation almost as hard as a bad quality product. Also, promotional videos have to be useful and interesting otherwise the users may consider it as disrespect to their time which is also not the best thing for company or brand image.

 

One more thing you need to think about once you’ve applied a promo video is that not all people would like to spend their time watching it. It means that there must be another way for buyers how to learn about a product. It can be a short piece of copy which users could quickly scan and decide whether they’re interested or not.

 

And, finally, we shouldn’t forget about the technical side. High-quality videos can overload server of the website so it works slowly. When you include a video as a content element, it should be thoroughly tested on different devices and conditions. It helps to make sure there will be no technical problems that may make users frustrated.

 

Case Study: Opera custom promo video

 

In the end of 2016, Opera, a web browser developed by Opera Software, presented their promo video devoted to their achievements over the past year. It was a short animated video called «Opera 2016: Year in Review» with illustrations showing their acquirements. To make this project done, Opera Software collaborated with Tubik design team.

 

The main idea of this project was to create a positive and cheerful video presenting the fresh innovative features the company added in the web browser during the past year. It was agreed that the video must consist of illustrations accomplished in the 3D flat style and lush colors. Each illustration would present lifestyle object composition devoted to a specific month when a feature was delivered. The accent was made on the typography since Opera wanted to emphasize useful opportunities their users have now. That’s why designers come up with the decision that animation of the elements should be minimalistic so that it couldn’t distract users. Here is the result.

 

 

Welcome to read a detailed case study on Opera video creation.

 

All in all, videos have taken a big part in our life, the reason why we should take all the benefits from it. Stay tuned!

 

Recommended reading

 

Beginner’s Guide to Online Video Marketing: Making a Video (Part 1)

 

How Ecommerce Businesses Can Generate Organic Traffic with Video Marketing

 

The Top 16 Video Marketing Statistics for 2016

 

27 Video Stats For 2017


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

tubik free podcast design business terms

Tubik Podcast #4. Business Terms for Designers: Sales Basics.

Working on projects and concepts, designers often have to combine creative approaches and solutions with business goals. Effective outcome is based on not only design techniques and knowledge of user psychology but also awareness of sales flows and processes. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. The fourth track presented here continues the set called «Business Terms for Designers» and considers basic notions from business vocabulary like conversion, niche, sales channel and sales funnel. On the ground of practical experience, we review them in design perspective for the sake of usable and useful digital products. Welcome to listen and follow the updates!

 

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

 

 

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

human memory tips on ux design

How Human Memory Works: Tips for UX Designers.

One of the greatest information processors we deal with in our everyday life cannot be seen or touched. It cannot be bought or sold as well as taken from other people; however, it can be developed and strengthened by many ways. It cannot be easily described but belongs to the most precious features of human life and determines perhaps any step we take and any decision we make. It is a wonder we rarely think about that way. It’s human memory.

 

Memory presents an amazing natural complex of data storage and processing. It keeps great loads of information through life and is even able to organize it for the sake of the holder. Moreover, it takes responsibility of setting priorities and keeping some details which could be remembered just off the top of our heads while erasing others which seem not necessary or haven’t been used for a long time. Human memory is one of the mechanisms determining person’s interaction with the outer world.

 

Obviously, this aspect needs to be studied and considered in the sphere of UX design responsible for interfaces of all kinds. Knowing how memory works, designers can create human-centered interfaces which correspond to the natural abilities of the users, save their effort and boost usability.

 

Ui design trends by Tubik Blog

Healthy Food App

 

Basic points about memory

 

In general terms, human memory is the natural storage for the data right in the human brain. It reacts to the outer stimuli, collects the data, processes it and organizes in different ways. Also, it enables a person to access the needed data collected in the memory when it’s needed. However, it doesn’t present the perfect mechanism as it’s influenced by a big number of factors of physical and emotional nature.

 

Basically, psychologists mention three types of memory:

sensory memory holds the data for a short moment when we perceive it with our physical senses like hearing, vision or touch;

— short-term memory (working memory) allows a person to keep some data remembered for a short period of time without repetitions;

— long-term memory presents the storage for big quantities of diverse data which could be saved for long periods of time, potentially up to the whole lifetime.

 

The effective methods of getting the information kept in long-term memory are repetitions and associations. Taking a look at the scheme below, which was provided in the article by Learning Solutions Magazine, we can see the basic flow of data from the first outer stimulus to the long-term memory.

 

memory work

 

Creating the flow of interactions with a website or a mobile application, UX designers have to take this factor into account. Surely, they aim at long-term memory which will keep the core data about the app and will allow using the interface easily again and again. Knowing the steps moving the data to this storage enables designers to set the effective strategy of data perception and necessary repetitions. Also, it helps to organize the data on the screen properly and strengthen information architecture of the product.

 

Basic laws of memory

 

Three core aspects of memorizing which are mentioned by specialists in psychology are very simple:

 

1. Concentration. To remember a thing or chunk of data, a person needs to concentrate on it. Otherwise, the chances are high that the data will be discarded on the level of short-term memory.

2. Association. The memory presents the huge network of links connecting different data. If a person builds the association which links the new data or object with something well-known or kept in long-term memory, the chances of memorizing get higher.

3. Repetition. It is one of the effective ways to activate the data in working memory several times until it moves to the long-term memory storage.

 

Organization of the interface content based on these three points performs with visual hierarchy and perception which can mark important layout elements that should be remembered and make the interaction easier.

 

cinema app interaction ui animation

Cinema App

 

Expert explorations of memory

 

There are also some laws and rules which were concluded from various research, experiments and practical testing. Among them, we would mention Miller’s Law and Hick’s Law.

 

Miller’s Law

 

The number of objects an average person can hold in working memory is about seven.

 

This exploration was offered on the basis of scientific research by George Miller in 1956 psychological review «The magical number seven, plus or minus two: Some limits on our capacity for processing information». In general terms, it states that short-term memory of an average human is able to keep and process about seven objects or chunks of data plus/minus two at once. Obviously, the formulation given here is generalized as the real flow depends on many factors, including the nature of information.

 

Later studies, for example, the review by Richard Shiffrin and Robert Nosofsky called «Seven plus or minus two: A commentary on capacity limitations» provided deeper insights into the work of working memory. In particular, the authors mention that the number of objects which a person can remember at once after they were presented is dependent on the nature of the objects, on average with seven for digits, six for letters and about five for words. It gives the brain abilities to quickly process information, recognize its character and connection to the objects already existing in long-term memory and finalize memorizing.

 

In design perspective, this information plays the vital role in building up the usable and clear layout. Interfaces, which demand to remember too many options at once, can create the tension and get users irritated even if they aren’t able to describe the reason of unpleasant emotions.

 

landing page animation Tubik studio

Magic.co landing page

 

Hick’s Law

 

The more elements people get, the harder it is to make a choice.

 

At the first glance, it seems that this law is not about memory, still, the connection exists. Memory is one of the mechanisms that protects people from negative experience. The more options people get at once, the more distracted they get with numerous associations which can be called — and that’s impossible to predict how good or bad they can be in this particular case. In addition, giving many options for the choice at once, again we can overload users memory with the bigger number then the working memory can process. In particular, this factor needs special attention in cases of platforms for e-commerce, which should keep the hard balance between giving the user all the necessary information and overwhelming him or her with too many options. Finding this harmony is one of the major challenges for UX designers.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Tips for memory-friendly UX

 

On the basis of the factors and explorations given above, let’s consider a set of tips applying this knowledge for the sake of usability.

 

1. Don’t make users memorize many items at once.

 

Definitely, it doesn’t mean that all the screens or pages should be limited to 5-9 elements. Still, the number of elements that present core interaction points would rather be considered in these terms. Making several objects in the layout prominent and attractive, designers can follow the law of concentration which will catch the key zones like menu, call-to-action, an image presenting the product etc. Visual hierarchy is one of the vital strategies that enables to create an interface containing many elements visually grouped and divided in a way which is digestible for human memory.

 

It is also effectively applied to the copy content in the interfaces. In the article, devoted to this issue, we mentioned some investigations: according to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 words work effectively, not less than extensive headlines presenting a full sentence. One of the reasons for that is obviously connected with the ability of the working memory to process such chunks of data faster and more effectively.

website design for photographers

Photography workshops

 

2. Don’t present too many elements for the choice together.

 

It’s important to care about the concentration ratio. If you present several choices, buttons, options at once, you should be ready that it will take more time and effort for user’s short-term memory to work them over and this can distract him or her from making the final decision or interaction. This can be the reason of inefficient landing pages or sales funnels: even if they are stunningly designed, the over-distracted user can go away before the conversion happens. Apply scrolling and transitions based on careful prioritization, dividing the objects on the screen or page into groups of primary, secondary and tertiary importance — this will help users and make navigation through the interface more natural.

 

book swap app tubik studio

Book Swap App

 

3. Save memory effort with recognizable patterns and symbols

 

No secret, people are visually driven creatures, so designers usually master the art of applying images that not only attract attention but also inform users and organize the content. In one of our articles, we gave the details on how users recognize icons and copy. It shows that pictorial elements such as icons and illustrations are perceived faster while copy can be more informative. This can be useful in interface design to apply diverse models and markers which are widely recognizable not only in this particular interface but generally in a variety of them. Magnifier icons for search, shopping cart for the page collecting orders, plus button for creating a new item, flags marking the buttons changing the language — all of them present the elements existing in human memory for a long time and bringing up correct associations without the need to keep and process new information.

 

Moreover, going to a broader perspective, most users expect to see the sign of the brand and the links to core sections of the website in the header while the contacts, privacy policy, terms of use and credits in the footer. Knowing these and other similar patterns of user behavior, designers can save users’ effort making basic operations simple and intuitive. This way it’s easier to focus user’s attention on new data and make its perception quick.

 

tubik studio behance weather app

Weather App

 

4. Apply consistent markers in navigation

 

Navigation is the crucial factor of usability. Enabling to move through the interfaces, it also presents the data which should be kept by users’ memory; therefore, designers apply a variety of techniques making transitions and interactions consistent and clear. For example, color or shape markers sorting out particular sections, icons defining specific groups of items, fonts used consistently for specific names or types of copy, illustrations and mascots uniting different screens — these and similar tricks boost memorability of the layout and often support user in processing new data.

 

Homey app smart home UI

Homey App

 

5. Don’t hide the core elements of navigation

 

The discussions about various menus showing or hiding blocks of content are still hot and popular. It’s vital to remember that the key aim of the interface should be the user clearly understanding what’s going on. So, the decision about hamburger menus, sliders, hidden layers of navigation and content should be based on the careful analysis of the target audience. In most cases, especially for the complex interfaces used by the diverse target audience, hiding core navigation elements can serve badly: users need to find and memorize the patterns of reaching them. Some users can appreciate the techniques saving space for other elements, while the others will be annoyed with the necessity to remember how to find the necessary section. Again, prioritization plays the great role: hiding secondary elements while leaving primary ones always visible, designers focus users’ attention on what is the core for them. User testing helps to evaluate the efficiency of the navigation flow and its impact on conversion rate.

 

bookshop website animation

Bookshop Website

 

6. Stimulate different types of memory

 

Remember the scheme given above? You could see that the first and the quickest stage of absorbing data is the sensory memory. Basically, it is divided into several types of memory which depend on the sensor: it can be visual, audio, kinesthetic, verbal, mechanical etc. Activating them, not only do designers create more memorable interaction flows, but also support broader circles of users. Research and experiments show that different people have different types of memory as the most effective for them. That’s why, for example, icons given with copy in the names of core categories of the menu can boost usability supporting users via both visual and verbal memory. Sounds accompanying interactions also create memorable flows and operations.

 

tubik studio application recipes and cooking

Recipe App

 

7. Remember about emotions

 

Make no mistake, emotional feedback from the interaction is the great factor in retaining or losing users. Bad experience stimulates quicker forgetting the details but tends to leave general negative feeling because in this way brain tries to protect the human. Vice versa, positive emotions, be it fun, aesthetic satisfaction, gratification for the quickly solved problem or accessible communication can bring the person back to feel it again and again. 

 

ui animation design tubik

Night in Berlin App

 

So, the bottom line is simple: creating interfaces for people, designers have to know how people interact with the world and what influences their behavior. Human memory is one of the essential features determining successful and positive user experience on both conscious and unconscious levels, so it needs to be studied, considered and tested for human-centered UX design.

 

Recommended reading

 

Here is a bunch of useful links which could provide further interesting explorations of the topic:

 

Short-Term Memory and Web Usability

 

UX and Memory: Present Information at Relevant Points

 

The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information

 

User Memory Design: How To Design For Experiences That Last

 

Visual Perception. Icons vs Copy in UI.

 

Total (Memory) Recall

 

The Properties of Human Memory and Their Importance for Information Visualization


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

graphic design stickers tubik

State of the Art: 15 Creative Graphic Design Concepts.

Famous graphic designer Stefan Sagmeister said “You can have an art experience in front of a Rembrandt… or in front of a piece of graphic design.” It’s hard to disagree with the expression since there are so many beautiful breathtaking graphic design concepts today. Various modern tools allow designers to create gorgeous graphic concepts that could easily be called artworks. However, graphic design isn’t purely artistic field. In one of our previous articles, we’ve defined graphic design as the sphere of human activity that lies at the crossroads of several directions, first of all, visual arts, communication, and psychology. By means of graphic (visual) elements such as images, types and fonts, pictograms, shapes and sizes, colors and shades, lines and curves graphic designers do the job of communication. Every visual element transfers the message, so it becomes functional.

 

Graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Today’s post presents 15 creative concepts by Tubik which we gathered to show you the diversity of graphic design.

 

Character concepts

 

tubikstudio graphic design

Girl and Flowers

 

The first concept introducing this set is an illustration of a girl with flowers. The work is a representation of flat design which is seen in the simplicity of shapes and visual elements. Despite the minimalist style the illustration accurately transfers bright and warm feeling of the springtime. The designer applied the color palette which shows a little girl’s sensitivity and purity. And, the final accent was made via shadows giving the flat picture more vivid look.

 

tubik_illustration_under_water

Underwater Explorer

 

Next concept is a flat design illustration presenting a character of underwater explorer. The designer applied various techniques combining classic and new approaches to flat design. Along with minimalistic shapes, there are noise textures across the illustration which are unusual for the direction. The dark background and bright elements, including the character’s costume, create deep contrast and enhance visual perception. One more detail complementing the illustration is the light lines which are barely seen still they make the picture complete.

 

Character design is used for different video and mobile games, the reason why designers often need to create more than one character for the particular project. The trick is that all the characters should be made in one original style so that they would be recognizable for gamers. Let’s look at the Wild West set of characters by Tubik.

 

illustration by tubikstudio

Sheriff Foxx

 

The first character created for this set was a sheriff named Jimmy Foxx. The designer has chosen the unique style of drawing putting accents to the details which transfer character traits. Creating the sheriff personality, the designer aimed at illustrating fearless and fair man with the sense of humor. The prominent mustache makes Jimmy look serious still there might be the smile hidden behind it. The main attribute is the big hat with the star signifying sheriff’s power.

 

character illustration tubik studio

Indian Dreamcatcher

 

Good stories require the presence of culture spirit, so the native American character was an obvious choice continuing this set. The designer sticks to the style applied to the first character. The character wears typical attributes such as a feather and painted mask. His eyes are closed which makes a character look wise. The circle around the character, which by the way is shown in the first illustration too, is decorated with a skull of a bird. Such an item usually serves for magical rituals so the character seems mysterious.

 

character design illustration tubik

Wild West Bandit

 

It’s hard to imagine a wild west story without a bandit terrorizing the citizens. The designer presents us a bad guy through the well-thought details. The bandit has a massive chin with a dimple and the dark straight hair. The cigarette and the golden tooth give him a brutal look. The hat and scarf are embellished with the skull signs to show that he’s a dangerous man.

 

City illustrations

 

There are many paintings and drawings illustrating the beautiful sights of various cities. Today designers have an opportunity to show cities from the different perspective — as digital artworks. Here is the set of city illustrations by Tubik.

 

city illustration digital art tubik

Hallo Lofoten

 

The first illustration presents Norwegian city Lofoten. Beautiful colors, nature, bright buildings and amazing mountains of this city have inspired the designer to create the illustration. The unique idea of this set of concepts is that they are framed like post stamps. The illustration is another example of the flat design which is created with simple geometric shapes. Lines on the water presents the reflection of the building so it feels more natural. Bright colors and various tones transfer the atmosphere of the city.

 

city illustration digital art tubik

Buongiorno Roma

 

Next city chosen for this set was Rome. The designer applies the complementary scheme of colors mixing blue and yellow, which makes the illustration full of contrasts similar the bright Italian city. Famous buildings are formed with simple shapes so the viewer can easily recognize the city. The designer creates lights and shadows on the landmark via different tones sticking to the minimalistic style.

 

guten tag bavaria illustration tubik

Guten Tag Bavaria

 

The last concept of the series illustrates Bavaria. The Neuschwanstein Castle, the nineteenth-century palace known all over the world, is presented as a magical place full of spring vibes. The mild color scheme is pleasant for human eyes enhancing visual perception.

 

Posters

 

Nowadays, graphic designers experiment a lot with poster creation following modern design directions such as flat design and applying various techniques. Digital artists design original posters which accurately bring people into the atmosphere of the films, cartoons, and other performances or events.

 

flat illustration

Star Wars Rouge One Illustration

 

No matter if you’re a fan of Star Wars or not, you obviously know what they are. This graphic design concept is devoted to the recent episode of Star Wars (Rogue One) which inspired the designer to create the original poster. The illustration presents main characters of the movie in minimalistic style. They are shown as focused, strong and brave heroes ready to fight for the better. Dark blue background creates the atmosphere of the deep space. Small but bright details such as characters’ clothes make this poster contrasting and interesting for the viewers.

 

pikachu poster tubik studio design

Pikachu Poster

 

Many people will associate last summer with the hype about mobile game Go Pokemon. Designers couldn’t stay unaffected so there are various design concepts devoted to the topic. Here is graphic design poster featuring one of the favorite pokemons Pikachu. The character’s body isn’t highlighted with lines still people can recognize the pokemon’s silhouette due to face parts and the yellow color of the background. Unusual presentation of the character is complemented with white lighting which is the special power of the little creature. Pokemon’s shadow is performed via repeating a word, “Pika” to be more specific. Such a creative idea will definitely strike a fan right in the heart.

 

poster design tubik studio

Suicide Squad Poster

 

Continuing the topic of mainstream, here is the poster for Suicide Squad movie. One of the brightest and deepest characters of a film is Joker who’s well-known for all DC comics fans. Creating this poster, the designer tried to catch and transfer the character’s features by means of digital graphics. The poster is dark transferring character’s mood still with the original lettering which presents laughing. Moreover, if you take a closer look at the poster, you’ll find small Joker’s signs hidden everywhere.

 

Covers

 

The cover illustration is a substantive art direction which deserves great respect. Graphic designers usually work long and hard to create one single composition that will do its function best. Let’s look at the cover designs by Tubik.

 

tubik studio illustration graphic design

Muscles Magazine

 

The first example presents a cover page for the magazine devoted to sports and active life. The issue shown here is about relations of sport and business. The idea behind the central illustration featuring the athlete was to immediately introduce the topic and at the same time add some fun and style. Graphic elements fully replace the photos creating the original look for the magazine.

 

tubik_illustration_jazz_tales_book

Tales of the Jazz

 

Many graphic designers secretly dream to create the cover design for their favorite book. Here is an interpretation of cover page for a collection of short stories by F. Scott Fitzgerald called Tales of the Jazz Age. The girl on the cover looks like a typical lady of the jazz age setting the right mood for the viewers. The mild color scheme and noise texture are nice to the visual perception.

 

Stickers

 

Today stickers are everywhere, printed and digital, especially popular in mobile apps. Tubik designers constantly work on original sticker packs for apps, websites and promotional campaigns.

 

healthy_stickers_shot_tubik_studio

 

stickers_tubik_studio_digital_art

Healthy Stickers

 

This design concept presents stickers of vegetables and fruit. They are meant to stimulate everyone to follow the healthy lifestyle and add energy to people as well. Bright colors make vegetables and fruit look juicy and yummy so it’s hard to resist the desire of tasting one of them in real life which means the stimulation works well. This flat picture is good for both printed and digital use.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Today stickers are popular in various messengers. This concept shows stickers designed for Mood Messenger. Each sticker presents a different emotion so that the users could chat quickly showing their friends how they feel. Detailed faces on this concepts are able to transfer any emotion clearly. Attractive illustrations can make applications interesting and fun for users setting great benefits for the owners.

 

Reviewing creative graphic design artworks is always inspiring. These fifteen concepts are only a few examples but there are much more of them waiting for you to look. Stay tuned and get inspired!


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

ux design for ecommerce tubik blog

UX Design for E-Commerce: Principles and Strategies.

Quite long time ago known British author and scholar Thomas Gray stated: «Commerce changes the fate and genius of nations.» For the last decade, commerce has got hundreds of new ways to reach the customer, especially with the leap of innovation in technology and its growing role in everyday life. More and more buyers are turning to the experience of shopping online, more and more sellers start new channels and methods responding this trend. And this is the sphere in which design of positive user experience directly moves the stakeholders to profits. Today we are talking about UX design for e-commerce.

 

What is E-Commerce?

 

As we mentioned in our free ebook «Design for Business», in general terms, e-commerce (Electronic Commerce) is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

 

The last decade witnessed booming e-commerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

The role of design for e-commerce

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful» says CEO of Amazon Jeff Bezos, and it’s hard to argue. Obviously, the success of e-commerce activity depends on several factors among which:

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogs etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.

 

tubik studio landing page toys

Handmade Toys Landing Page

 

On that ground, let’s check the details in three key perspectives whose combination in design makes success for e-commerce platforms: business aspect, UX aspect and UI aspect.

 

Business Perspective: Branding and Promotion

 

Websites and mobile applications for e-commerce are (well, should be) always the products created within a particular business scheme. It means they are the part of a certain business plan with the specific goals in mind and the planned ways to achieve them. Therefore, design for this sort of products definitely starts much before the first real line appears on the paper or screen. There are several important issues which should be considered and agreed upon before actual design starts.  Among them we would mention the following:

 

USP of the product. It’s essential to set which benefit (or set of benefits) will differ this website or application from the others and make it the core value presented via design.

 

defined target audience. In e-commerce, it’s important to set who your buyers are from the initial stage of the project. Knowing their age and culture, potential problems and wishes, level of tech literacy and trust to the idea of online shopping, the social circles influencing them and aspects forming their habits, designers can be more precise searching for the shortest way to successful purchase.

 

positioning, tone and voice of the brand. How would you describe your brand? Is it friendly? Fun or serious? Mass or luxury? Easily available or exclusive? Does it communicate to potential buyers in formal, informal or semi-formal style? Does it open much or mostly keeps reserved silence creating the mystery around the offered goods? These questions may seem far from business which has to be all about finance, profits, points of sales and other stuff of that kind. Still, these issues present the number of features which will set the future brand image. And design is somehow going to be its face, outfit and make-up.

 

marketing and sales channels. No doubt, it’s hard to immediately set all the channels for selling and promoting the future product; however, effective business planning means thinking over the core of them from the start. It will enable design team track and support the consistent experience of both getting to product and actually interacting with it. Even more, designers take active part in setting and strengthening marketing and sales via variety of means from branded items, landing pages and product videos to exclusive photos, posters and banners attracting customers to the platform where they actually can buy.

 

— type of business relations. Type of business relations based on target customers deeply influences the core aspects of UX design. Set from the start whether it’s B2C, B2B or B2C to create proper layout and predict possible user behavior.

 

typical environment of use. Designers need to know when, where and in which conditions users will typically use the website or app: these factors have a considerable impact on the decisions about layout, color scheme, typography, transitions and interactions, which all need to have the global objective to make the process of shopping easy, quick and enjoyable.

 

gym landing page concept by Tubik

Gym Landing Page

 

It’s easy to see that all the mentioned points directly influence design solutions as well as techniques and approaches for their realization. It means that the best way to go is to involve designers into the discussion together with stakeholders and marketing specialists at early ideation stage if it’s possible; if not, then specification and tasks provided to designer afterward have to include maximum information about those aspects. In case you work in outsource design team, make sure you get this information to be more concentrated on the key aspects of the task, and if not, communicate with the clients as long as it’s needed to get all those points clear. This communication will save many hours of iterations, which happens in cases when design is started out of the thin air without the basis of information and goals.

 

UX perspective

 

Talking about e-commerce, it’s vital to understand that selling the goods once via the website or mobile application is the minimal program of actions. What stakeholders of the business really aim at is having this user buying via their website or app again and again. User retention is the direct condition of growing profits. And we have to admit that this aspect makes e-commerce sphere highly attractive for designers. The objective which should be achieved is clear and simple: people have to reach the e-commerce platform and buy items offered on it.

 

Make no mistake, positive user experience is the key thing for user retention. In case of e-commerce, the four key aspects of UX are quite clear:

  • utility lies in the nature of the product: it helps users to choose and buy things and services they need.
  • usability has to make the customer journey clear and easy, without unnecessary clicks, time lost on loading overloaded pages or inconvenient menu, frustration of not getting feedback from the system etc.
  • accessibility has to bring up design which can be used by different categories of users, for example people with disabilities (dyslexic, color-blind etc.) or low level of tech literacy.
  • desirability means that the app will get the look and feel which will make the experience enjoyable and users will wish to get back again.

 

bookshop website animation

Bookshop Website

 

Among the core aspects dealing with the mentioned issues and considered from the early stages of design like UX-wireframing and user research, we would mention the following.

 

Intuitive navigation

 

You can have an amazing website with stylish and trendy design and breathtaking images, but the success of it will be measured not by the number of «wows» it will bring out. The efficiency is measured 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 is the search and filters

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

 

Bakery website design case study tubik

Bakery Website

 

Every button, link and card can play the crucial role and change the conversion significantly. What’s vital to bear in mind: in terms of intense competition we have in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations. What they demand from e-commerce is the experience which is faster, easier and more convenient comparing to going to the actual store. If you don’t give it to them, they will look for it somewhere else.

 

Sales funnel

 

Sales funnel (in other words — purchase funnel) is a technique that moves the customer through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase. As we described before in the book, basic sales funnel includes the following stages:

 

  • Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.
  • Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.
  • Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.
  • Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.
  • Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.
  • Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

 

In terms of e-commerce, sales funnel is supported with diversity of functions digital products can offer. Awareness of the principles of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source, for example, social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling users to buy.

 

home page landing tubikstudio

Comics Online Shop

 

Effective presentation of the items

 

The layout of the product pages or screens is another core aspect to think over. On the one hand, it’s advisable not to overload the page with too much information which will overwhelm users and can distract their attention from the major goal — to make the purchase. On the other hand, users aren’t ready to go from one page to the other to get different information about the item. Therefore, the designer has to take the time for thorough research of the issue and find the right balance of data given on one screen. The analysis of target audience and user testing can give the clues what information is required by the target audience for the specific categories of items or services.

 

jewellery ecommerce app UI

 

jewellery ecommerce app

Jewellery E-Commerce App

 

UI perspective

 

Being concentrated on not only logic and transitions but also looks and style, UI design stage also contributes much to the success of the e-commerce project. It is the aspect which creates visual performance and sets the solid ground for the desirability of the interface and positive emotional feedback from the buyer. At UI design stage for e-commerce, designers have to find the general stylistic concept which will support UX aspects mentioned before and will give the online point-of-sale the attractive looks. Some aspects, which designers have to take into account in this perspective, are:

 

— choice of colors that correspond to the brand image and strengthen emotional feedback

 

— setting the style corresponding to the nature of the commercial offer: reaching the website, people should instantly understand if it sells household goods, fresh vegetables, trendy clothes, exclusive devices or anything else

 

— visual hierarchy which makes the core zones of interaction instantly noticeable

 

— general harmony of perception which sets the feeling of aesthetic satisfaction supporting positive user experience.

tubikstudio ui animation website design

Design Studio Website

 

Points to consider

 

For the bottom line, here’s a simple check-list for some essential aspects designers would rather consider working on e-commerce projects:

 

— Know the buyers: user research will help to get the needs and wishes of target audience.

 

— Have users informed: make the screens or pages filled with information and functionality users really need for making purchase.

 

— Keep design consistent: not only does the website or app itself need consistency of design for all the screens in terms of general branding, but also social networks, print materials and actual point-of-sales appearance if they exist.

 

— Refresh the experience: minor changes or attractive details added to the interface from time to time without breaking general visual consistency can give the feeling of refreshment, like new looks of mannequins do in the window displays of the shop.

 

— Check your solutions: user testing can have a great impact on understanding the factors that boost conversions. Ideally, it should be applied not only in the process of design but also after the launch of e-commerce platform on the basis of real user interactions and troubles which can arise.

 

— Be careful about revolutions and wow-effect: the power of habit plays the big role in the products of this kind. Choosing layout, menus or icons, which stand too far from the ones users are generally accustomed to, can bring confusion and frustration. For example, usage of any other image instead of the magnifying glass to mark the search field can result in bad user experience as buyers know that visual symbol and will look for it. So, making this sort of experiments, take time to test them well.

 

— Respect the buyers: remember, that they are not abstract metrics — every figure in conversion report is about real people. Look for the interface that will respect their time, effort and needs and it will bring positive experience of shopping for both sides.

 

Landing Page Animation Tubik Studio

Organic Food Shop

 

Recommended reading

 

Here is a bunch of links to the articles and design collections which could provide further interesting explorations of the topic:

 

Two Types of User Motivation: Design to Satisfy.

 

The ultimate guide to designing ecommerce websites

 

Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid

 

Designing for 5 Types of E-Commerce Shoppers

 

20 Common UX Mistakes In Ecommerce Websites

 

Everything You Need to Know About Designing for eCommerce


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

Welcome to read or download the free e-book «Design for Business»