Tag Archives: graphic design

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»

home budget app case study

Case Study: Home Budget App. UI for Finance.

Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves. 

 

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

 

Task

 

UI/UX design for the web and mobile versions of a personal budget manager

 

Process

 

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily. 

 

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers. 

 

Dashboard

 

The web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

 

Dashboard_home_budget UI

 

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in. 

 

The cards present such information blocks of data:

— the menu with quick access to popular categories of expenses

— information on total expenses and frequency of transactions

— the list of popular transactions

— the cloud of expenses and weekly average rate in comparison to the previous period

— the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis

— the map with the pins marking the most frequent locations of spending money

— the block of recommendations based on financial operations of the period.

 

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance navigation and make interactions intuitive. 

 

Home_budget_app_dashboard_animation_tubik

 

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

 

Mobile UI

 

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

 

home budget app mobile screen

 

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

 

home budget app mobile notifications

 

To get the access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders. 

 

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

 

Home Budget app interactions motion tubik

 

The mobile interface was also supported with animations. The one above shows the interaction with the hamburger menu divided into three sections.

 

home budget app interaction animation tubik

 

Another piece of animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

 

home budget app case study

 

This project has started the deeper immersion into the world of digital products for finance management for Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.


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

tubikstudio homepage design

Best Practices for Website Header Design

Everyone knows: there is not the second chance to make the first impression. In the sphere of digital products, this eternal truth works in terms of high competition and incredible diversity. No doubt, some zones of the webpage or mobile screen are particularly important and effective in this aspect. Today we are going to discuss one of them in deeper focus: the header of the website.

 

In the issue of UI/UX glossary devoted to the web design terms, we have already provided the brief overview of what is a header. Today let’s look a bit closer at the topic and discuss what are the functions of a header and recommendations for its design. In addition, we will show a bunch of web design concepts applying different approaches to header design.

 

What is a header?

 

In web page layout, header is the upper (top) part of the web page. It is definitely a strategic part of the page as the area which people see before scrolling the page in the first seconds of introduction to the website. Being somehow a sign of invitation, header should provide the core information about the digital product so that users could scan it in split seconds. In design perspective, header is also the area making the broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in the website layout.

 

tubikstudio ui webdesign

 

The presented concept shows the home page for the online bookshop selling comics. The top horizontal area aka header presents the logo lettering showing the name of the website and the core navigation around: links to the catalog of items, fresh and special offers, blog, action figures, an icon of the shopping cart typical e-commerce websites and the icon of search.

 

What can a header include?

 

Headers can include a variety of meaningful layout elements, for example:

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

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

 

Let’s have a look at a couple of examples to see which of the mentioned elements designers placed in the header for particular websites.

 

tubikstudio ui animation website design

 

This is the website of an interior design studio. The upper part of the page presents the sticky header which stays in the zone of visual perception all the time in the process of scrolling. It is divided into two blocks: the left part features brand logo while the right part presents the interactive area with links to several information blocks like «Product», «Studio» and «Press» and call-to-action button «Shop» marked out with a shape. The central part of the header uses negative space for visual separation of these two blocks.

 

tubikstudio homepage design

 

Here is another sample of the webpage with a bit different approach to the header design. This time the composition is built around the center featuring the logo and brand name. Left and right side are balanced around it with two links each allowing users to scan quickly and move to the information blocks they are interested in.

 

Why is header important?

 

There are several issues why the header is a vital element of many websites.

 

The first thing to consider is eye-scanning models which show how users interact with a webpage in the first seconds. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions.

 

In brief, when people visit the website, especially the first time, they do not explore everything on the page carefully and in detail: they scan it to find a hook which would catch their attention and convince them to spend some time on the website. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern. Let’s check what are the schemes provided for them in the research.

reading pattern

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As it can be seen from the scheme we found in Steven Bradley’s research, it marks out four active zones — and two of them go across the typical header area.

 

reading pattern zig-zag

Another scheme features Z-pattern and the presented zig-zag version is typical for pages with visually divided content blocks. Again, the reader’s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.

 

f_reading_pattern_eyetracking

 

One more model is F-pattern presented in the explorations by Nielsen Norman Group and showing that users often demonstrate the following flow of interaction:
 

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

 

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

 

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind: «People judge the quality of a website in just a few seconds and a second impression is something absent on the Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure».

 

Another thing to consider is that the header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service.

 

Design practices

 

Readability and visual hierarchy

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays a vital role. The user has to be able to scan and perceive this basic information as fast as possible without any sort of additional effort. Otherwise, you risk providing the non-user-friendly interface.

 

online magazine design tubik studio

 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

web design UI concept tubik studio

 

Here is another website whose layout is built on the broken grid, so the header corresponds to this approach. The left part of the header is visually longer and consists of four elements: the logo and the links to three data blocks, while the right part is shorter and includes only two layout elements: search and call-to-action button market out with the shape and colored for the high level of contrast.

 

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the core elements of the layout active and available during all the process of interaction.

 

Hamburger menu

 

Another design solution which is quite popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of horizontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

 

This button is usually placed in the header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as save the place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

 

tubik studio ice ui website

The presented web design concept shows the version of hamburger menu. As the menu of the website contains many positions, the designer uses this technique placing the hamburger button in the area of initial interaction — top left corner. It allows creating the header supporting general minimalistic style of the website. The horizontal area of the header is divided into two zones: the left zone presents branding and a short introduction of the website colored in red and keeping visual consistency with visual performance of the headline and call-to-action element of the page; the right zone features icons of social networks and search icon. The central part of the header is left empty which adds some air and balance to its design and works as a negative space separating two different functional blocks.

 

tubik studio web UI design

 

This design concept presents the website with an original structure of the page, leaving the wide light margin in the left part of the page, with the brand name and logo in the top left part which is the first point of scanning. The other part presents interactive zone and has its own header composition: hamburger button to the left and four core links of transition to the right. As this example of interaction shows, hamburger menu allows the designer to organize numerous theme blocks of information and provide effective visual hierarchy. 

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based on the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

Fixed (Sticky) header

 

Sticky headers present another trend able to boost usability is applied effectively. Actually, it enables to provide users with navigation area available at any point of interactions, which can be helpful in terms of content-heavy pages with long scrolling.

 

Tubik studio UI design

 

The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalism principles featuring brand name lettering as a center of the composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

website design for photographers

 

Here is one more design concept featuring creative approach to the header design. The initial view of the home page includes the extremely minimalistic header: it shows only social icons and the search. However, scrolling down users get the sticky header with quite a traditional set of navigation items: the first element to see on the top left part is hamburger button hiding the extended menu, then branding sign followed by the links to thematic information blocks. The composition is finished with the search placed in the top-right part of the page in all the process of interaction with the page and supporting the feeling of consistency.

 

Double menu

 

Double menu in the header can present two layers of navigation. We have shown the example of such trick in one of the recent case studies for a bakery website.

 

Bakery website design case study tubik

 

As you can see, the website also uses a sticky header which consists of two levels of navigation. The upper menu shows the links to social networks, the logo, search, shopping cart and hamburger button hiding the extended menu. The second line of navigation gives instant connection to the core interaction areas:  products catalog, locations for the point-of-sales, news and special offers, information about the service and contact section. Visual and typographic hierarchy makes all the elements clear and easily scanned providing solid ground for positive user experience.

 

The bottom line is simple here: header of any website is the strategically vital zone of interaction for any website. Each particular case requires its own approach which will be informative and usable for the specific target audience. User research can provide the good basis for the design solutions which can follow quite traditional forms of header organization or require totally new perspective.

 

Recommended reading

 

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

 

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

 

F-Shaped Pattern For Reading Web Content

 

Sticky Header Usability: Making Menus Part of a Great User Experience

 

30 Interesting Examples Of Headers In Web Design

 

Headerlove: curated collection of headers design


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

Welcome to read the UI/UX Glossary: Web Design

badges_illustration_tubik_design

Gamification in UX. Increasing User Engagement.

The user-centered approach, which strives for creating products highly responding to the user’s needs, has become the major philosophy behind many projects. Following this method designers constantly search for the new techniques improving user experience which depends on various aspects including emotions. The thing is that users expect a product to be simple and enjoyable in use, so the idea to add a “fun” element to the UX came as it is. But how to make the product fun and enjoyable in use? The technique called gamification was created to solve the problem. Let’s find out what’s the method of gamification in design and how it can improve UX.

 

What is gamification?

 

When we say word “gamification” in the context of design, it can be easily mistaken with the game design. Still, these terms hardly relate to each other, even more, they are opposite in many aspects. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. For example, if you want to encourage the users to interact more with your application, you can add the game element such as a challenge. They can be challenged to check-in every day during a week and be rewarded if they do so.The thing is that people like having a clear goal and even more to be rewarded after it’s achieved, so such a challenge would doubtfully pass unnoticed among the users. This way, designers are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

toonie alarm stickers ios tubik

Toonie Alarm

 

Types of game mechanics for UX improvement

 

Gamification is a complicated design technique which requires using various game mechanics referring to the interactive UI elements. The main task for designers applying gamification is not to turn the product fully into a game. For this reason, there have been distinguished the effective game mechanics that are commonly used in design. Let’s see what they are.

 

Challenge

 

Human nature always makes us take the challenges and prove that we are able to handle them. So, a challenge is thought to be one of the most compelling game elements motivating people to take an action which can be a great tool on the way for UX improvement. In order to enhance the challenge effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

upper app UI design case study

Upper Streak Challenge in Upper App

 

Points

 

To measure the players’ success, many games use the points system. The gamified product can apply the same scheme that helps both users and stakeholders: the first sees their achievements and the others can estimate user engagement of the website or application. It is not necessary to make the count of points in the rating form. It may be just the number of check-ins or video views.

 

Badges and stickers

 

When users complete the challenge or gather a certain number of points, they can be awarded the badges or stickers. This kind of virtual rewards is often used in video games, so people are familiar with them. Stickers have gained people’s love long ago, therefore this kind of rewards will be appreciated. Besides, the badges and stickers give much room for the creative experimentations since they can be designed in various ways. Such rewards can become the additional drivers of motivation.

 

badges_illustration_tubik_design

PukaPal Badges

 

ui animation design tubik

Toonie Alarm Stickers

 

Leaderboards

 

The thing making the challenge even more interesting for people is the competition. Not many things can motivate users better than the desire to be the leader. The list of the “players” ranked in the order “Who’s got more badges” can increase users’ enthusiasm. However, in some cases, it may work contrarily demotivating people due to high ranks of the others. That’s why this game element is recommended to be applied carefully.

 

snake battle app UI design

Snake Battle

 

Journey

 

This game mechanic aims to make the process of interaction with the product as easy and understandable as possible. The user should feel as the real player starting the personal journey of the product usage. For example, on the onboarding page from which the user starts, they can be offered an introduction to the features, so that users won’t be afraid to make a mistake. When the journey continues, it is recommended to use the method of “scaffolding”. It means to disclose features progressively as the users become more experienced in using the product. Such an approach allows people to avoid errors and makes the product pleasing to use. Also, the journey element may be supplemented with the progress feature. Providing the information about the progress of the user’s journey, we can inspire them to continue.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Constraints

 

Many of us may think that it is not funny at all, still, there is a game element constraining players’ time. For example, the task in the games are often needed to be complete in the limited time, otherwise, players lose. The same approach can be applied to the gamified product. Users may be offered to do something which is available only today. The constraints make people react faster and somehow motivate them to take an action right here and now.

 

night in berlin tubik design case study

Night in Berlin App

 

These are some common examples of game elements in design but there is a room for the innovative game mechanics that can be applied in UX design. The major point to consider is that the product shouldn’t become too playful if it’s not expected according to general stylistic strategy and brand image.

 

The role of gamification in UX design

 

Today the method of gamification is widely used in design since it is thought to help to solve many problems in UX. The appropriate use of gamification and well-chosen game mechanics can become a valuable tool for UX designers on the way to increasing user engagement of the product as well as conversion rates. So how does it work? First of all, the gamification brings the element of fun to the websites and applications. People enjoy the interactive process full of fun, challenges, and competitive spirit similar to video games, so they are encouraged to go back. Furthermore, the game mechanics are the powerful motivators for the users. The game elements set the tasks and the awards are promised to those who accomplish them. The curiosity and excitement drive people to continue performing various the tasks and spend more time on the app or the website.

 

In addition, today gamification already goes as one of the major design approaches. Plenty of designers have caught the hype and actively apply this method in various projects. That’s why many users might already have an experience of interacting with the gamified products which mean they expect the same from yours.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Summing it up, gamification is quite a new technique which is now on the path of active proving its reliability as an effective design method. Nevertheless, its popularity is growing really fast so it has good chances to become the leading approach in a short time.

 

Recommended reading

 

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

 

Gamification And UX: Where Users Win Or Lose

Gamification: Designing for Motivation

5 examples of great gamification

Introducing Game Mechanics for Gamification


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

Night in Berlin app design case study

Case Study: Night in Berlin. UI for Event App.

Have you ever felt the urge to leave the planned and predictable routine and do something impulsive? Maybe go to the random concert of an unknown band, or visit the exhibition you are walking by? Certainly, you know that feeling. Nowadays, people move in the circle of the everyday drills and the desire to drop everything naturally appears from time to time. But when the moment comes, we often don’t know the places to go or where to find interesting events. Here is how we have come up with the idea for a new mobile app concept called Night in Berlin.

 

Night in Berlin is one of the design projects accomplished in terms of Tubik UI Fridays. In one of previous case studies, we told about our new tradition presenting the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls. Today’s case study describes the creative process of the unusual mobile application design.

 

Task

 

UI\UX and motion design for a mobile event app.

 

UI Design

 

During UI Fridays the designers sometimes receive objectives far from ordinary. In this way, the team has an opportunity to create something absolutely unique. This time, the task given to the designers was to design a mobile application of the future. To specify the task, the art director gave them the background story. The designers had to imagine themselves in Berlin of 2019 where every night is extremely eventful. Their objective was to create the design concept for the mobile application that would come in handy to people who love hanging out at night. When the task was set, Tubik designers Ludmila Shevchenko, Eugene Cameel and Olga Popova started their work with art direction by Sergey Valiukh.

 

After active brainstorming, the designers’ team determined the concept of the app. It should be a simple application which enables people, who love socializing and visiting the latest events, to see the list of all the events, parties, exhibitions and the like taking place in Berlin. In order to add the effect of bright impulsive decisions, the list is shown at a particular time and only for the current day. The core thing the designers were supposed to keep in mind that the application is meant for the users of the future, so the design needs to be absolutely original and extraordinary. Let’s see what the team managed to create.

 

night_in_berlin_onboarding_tubik_ui

 

The first screen featured the onboarding with the countdown to the time when the list becomes available. The chosen gradient colors accurately convey the atmosphere of the night since they are associated with lights in night clubs. The illustration of the Fernsehturm, the famous television tower in central Berlin, is made in the corresponding colors, so the design of the screen looks solid. The app’s name is situated at the left bottom part of the screen. All the functionality is hidden behind the hamburger menu button placed in the top left corner allowing to make the focus on the countdown.

 

night_in_berlin_event_list_tubik

 

The screen above presents the list itself, informing the user about the variety of events. The data is organized along the cards for every event, which users can review scrolling vertically. Each card shows the key details about the event: its type, title and the time when it starts as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the offer.

 

Night in Berlin Event Details

 

When the users tap on the event card, they see the event screen. This concept features the exhibition in the art gallery, which is marked in the top right corner. The name of the artist and the exhibition are situated in the center of the page. The background image presents an actual artwork by the artists so the users are able to quickly catch the style and artistic manner, read the description and see the time when the event starts. All that combination provides the information to the user quickly, in clear and stylish manner.

 

night_in_berlin_app_event_screen_tubik

 

Motion Design

 

When the static variants of the screens were ready, motion designer Kirill Erokhin started working on the animations.

 

night_in_berlin_animation_tubik

 

Here is the animated version of the onboarding screen. The major element is the countdown numbers which are smoothly animated. The background is moving similar to haze changing the colors.

 

ui animation design tubik

 

This animation presents the screen with the list of events showing the user interactions. The data is organized along the cards for every event, which users can review scrolling vertically. The user can tap on the card and see more details about the event. The arrow button on the top of the screen brings the user back to the list.

 

Work over the design concepts of this kinds gives designers the prominent chances to think out of the box. It stimulates their creativity which beams brighter when given regular practice. Follow our blog and check out our Dribbble page not to miss the updates on the Tubik UI Fridays. More concepts and case studies are coming very soon. Meanwhile, you can be interested in reviewing another case study for the creative design concept called Big City Guide. Stay tuned!


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

design for business

Business-Oriented Design. Know Your Target.

Successful business in never a simple game: it is the complex mechanism and to make it work, we have to know the factors of influence and methods of their effective combination. Design is definitely one of those secrets which can have a great impact on profits and promotion. Moreover, this is the coin of two sides, because real design is not only about the nice skin and stylish look but also about functionality and utility. So, today we continue the series of posts devoted to design for business goals. 

 

Earlier we have already published the glossary posts with key notions for the topics of business terms and abbreviations useful for designers as well as highlighted some aspects in more details in the free ebook «Design for Business». This time let’s add some deeper insights into the essence of setting and exploring the target of the product and the mutual influence of design and marketing have on each other.

 

design process

 

Marketing

 

«Marketing is a contest for people’s attention». Seth Godin

 

Definition. In general terms, marketing is the set of studies and methods devoted to the management of exchange relations. Basically, it is the multi-layered process whose aim is to connect the products with the customers. It can involve the variety of advertising and promotional activities, market and customer research, organization of sales, direct and indirect communication with the target audience. In terms of tough and diverse competition on most markets nowadays, marketing is the strategy and the trophy to achieve is users’ and customers’ attention.

 

Design aspect. Design and marketing have been supporting each other for many decades, so there are two basic directions of their connection.

 

The direction from marketing to design means involving techniques of marketing into the design process from the early stages of product creation or updates. The cases when marketing strategy is thought out from the stage of ideation on the future product makes design even more meaningful: not only do designers create the product solving users’ problems or satisfying needs, but also set the channels and ways how product can be noticed by the customer, how it can get interesting for target user and what are the ways to show its benefits effectively. Knowing all that stuff, the designers can find the appropriate UX — the logic of the product and UI — visual presentation of its features. Each tiny element or aspect like the color or shape of a button to the global approach to color palette, the choice of fonts and the space between elements on the page or screen, every transition and microinteraction designed properly and applied wisely can have a huge impact on the success of the product and its ability to fulfill the business goals.

 

web design tubik

Web design for e-commerce: Vinny’s Bakery

 

Moreover, it must be said: the high-quality user-friendly product is the best marketing strategy. That is why design plays the crucial role as it creates the features and the wrapping able to attract users’ and engage them, spark the wish to use it again and make it helpful so that users could have the solid reason to love it.

 

The reverse direction from design to marketing means that design itself becomes a powerful way to present the product or even the person on the market. Design solutions applied for creating commercial, corporate or personal identity through branding become the foundation for the marketing strategy, in most cases starting from the moment when the product gets its sign of distinction such as logo or icon. Designers create visual support of the promotional campaigns from posters, leaflets, and brochures to complex sets of branded items and corporate interior style of point-of-sales. As long as people are the creatures of not only physical but also social and aesthetic nature, design is going to take a big part of any business success.

 

business cards design

Corporate branding: design of business cards

 

Anyway, marketing is the point where people who create the product and those who build the bridge between the product and the customer should have the same goals: to provide users/customers with something that will be helpful and satisfying their needs. To do that, first of all, it’s important to set the group for which it is created and analyze what its preferences are.

 

Target audience

 

«In sales there are going to be times when you can’t make everyone happy. Don’t expect to and you won’t be disappointed. Just do your best for each client in each situation as it arises. Then, learn from each situation how to do it better the next time.» Tom Hopkins

 

Definition. The term «target audience» comes from the spheres of publishing, in which it means the readers intended for the particular book or edition, and marketing, in which it sets behind the group of customers potentially interested in the particular product or service. The quickly developing sphere of digital products such as websites or applications absorbed this term immediately meaning the audience which presents the potential users of the specific app or website. 

 

Certainly, for many creators, it can be hard initially to find out what their target audience is: they would like this product to be used and loved by everyone. Still, in real life, it’s a sort of utopia which can become a death knell for the product. Selecting the core target audience and then, if needed and possible, broaden the abilities of the product to make it attractive and useful for the broader circle of users in many cases proves itself as much more successful and effective strategy. Setting the priorities, it’s easier to concentrate on key functionality and make it faster than trying to satisfy everyone at once.

 

wedding planner app UI design

App design for wedding planner

 

Design aspect. As we mentioned in the ultimate guide to creating a mobile application, user research and market research are highly advisable to be done at the start of the creative process to provide the designer or the creative team with understanding what their target audience is:

— what their interests and wishes are

— what kind of communication and lifestyle is convenient and common for them

— what problems they have and which of them the designed product solves

— what are the typical environments when they use this kind of products

— where they could get the information about the product

— what could stimulate them to try the product

— what could engage them to get back to it again after the first experience

— what could involve them into using the product on the regular basis

— what could make this product different from the others on the market for the target users.

 

Joel Anderson said, “You can’t just open a website and expect people to flood in. If you really want to succeed you have to create traffic.” Design is one of the powerful methods to do it, especially in cases when it’s strengthened with appropriate copy and general content selection. Creating custom graphics, supporting microinteractions with motion, writing clear, concise and informative copy, choosing readable fonts and nice color combinations, setting landing pages for specific purposes instead of sending the user to the tons of information on the home page of the website, you can directly attract and create traffic that will give profits and support the thriving business.

 

toonie alarm UI design

Funny and bright design for Toonie Alarm

 

upper app UI design case study

Minimalistic and elegant design for Upper App

 

Targeting

 

«You can’t wait for customers to come to you. You have to figure out where they are, go there and drag them back to your store.» (Paul Graham)

 

Definition. Briefly, targeting is another term from marketing widely applied in the sphere of digital design. It is usually associated with the strategy and techniques of the particular target audience to find the best and the shortest ways to attract their attention to the particular product.  

 

Design aspect. The scheme is very simple: when you shoot without seeing your target, the chance that you will score exists but its miserably slim. If you shoot seeing the target, the chances grow. The closer you come to your target, the higher becomes the possibility of hitting the mark. 

 

This metaphor successfully works in both marketing and design. Having set who the potential user of the designed website or app is and researching the basic and extended data about this group of users, designers are able to create the solutions which will get close to the user along one or several factors. Let’s briefly review what aspects and factors can influence this process setting the directions of targeting.

 

Geographic targeting. Location of the person is important to set the cultural background as well as the natural environment of using the product. It means that even one product can be different in some visual features or operational performance to satisfy users from the particular country or region, up to having different names to sound more catchy or informative on the local market.

 

Gender targeting. If you know that your target audience is mostly man or mostly women, this kind of data can have a great impact on design solutions based on the psychological and perceptional difference. Even such a basic aspect as color choice can be highly influenced by the gender of core target audience. 

 

Psychographic targeting is grounded on knowledge of motives which move the user to try this type of product. It is based on deep knowledge of the typical lifestyle, interests etc.

 

Demographic targeting happens when creators and marketers are focused on catching attention and involving a particular demographic group, for example, based on age, ethnicity, income, qualification, marital status, having kids etc.

 

Behavioral targeting is based on defining the target audience along the particular models of behavior, for example, young adults regularly visiting night clubs or people buying coffee and drinking it on the go. 

 

ui animation design tubik

Night in Berlin App

 

Understanding the process and methods of targeting and getting this sort of knowledge enables designers to choose the shortcuts to users’ needs and wishes. That is why in cases of outsourcing design it’s highly advisable to take all the chances of getting maximum possible information about the potential users and business goals from the customer. One of the good methods is creating user personas, user stories and user cases, on which we will give more details in our next posts.

 

Recommended reading

 

Hopefully, these insights will somehow help designers to get closer to the market creating goal-centered products for various businesses. Before soon, we will definitely provide you with new posts and thoughts on this theme, meanwhile here is the list of recommended articles which could be helpful.

 

Personas Make Users Memorable for Product Team Members

5 ways design and marketing can work together better

One Persona to Rule Them All

Designing for your target audience

Matching site design to your target demographic

Short but Vital. Key Abbreviations in Design for Business.

The Importance of Design in All Marketing Campaigns


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

Welcome to read or download the free ebook «Design for Business»