Tag Archives: webdesign

gamification in UX design

Gamification Mechanics in UX: Smart User Journey.

From the very childhood people start playing games and they never really stop. Game spirit follows us in every sphere of our life revealing its facets such as challenges, achievements, or rewards from time to time. Trying to transfer game features into everyday life is a habit helping people to deal with complicated situations. Such a tendency could possibly cause the appearance of the gamification concept.

 

The word “gamification” stands for the technique of exerting game mechanics into the non-game environment. Designers often use gamification to create effective digital products and secure high level of user engagement. In one of our previous articles, we’ve mentioned common game mechanics such as challenges, points, badges, leaderboards, and journey. Each gamification element serves for certain goals and has a different influence on users. Today’s article is devoted to one of the most commonly used game mechanics called user journey. We’ll define its essence and find out how it works for UX improvements.

 

badges illustration tubik studio

PukaPal Badges

 

What’s user journey?

 

To make pleasing UX design, it’s vital to think out all the stages of user interactions. The thing is that one person may use a product for accomplishing different goals each day, even more, they apprehend the product differently every time. Designers and researchers noticed that experience and user interactions gradually evolve as people gain more skills in using the product. Such characteristics make it similar to a journey which players go through in games.

 

Considering this fact, designers come up with the idea of applying a game mechanic called user (player) journey in digital products. User journey can be defined as user’s progression stages over the time of product usage. Designers create UX that way so that people could go step-by-step through the various features and interactions which gradually change depending on users needs.

 

mobile app design tubik studio

Moneywise App

 

Let’s look at the example. A standard video game always has different levels from the easiest to the most complicated one. This way a player can adapt and easily comprehend how the game works on the easy levels and then constantly learn and make a progress. By the end of the game, a player is usually a skilled competitor who can deal with more complex tasks. If people receive difficult tasks at the beginning, they aren’t able to handle them. Or in case a game only consists of easy challenges, players will soon be bored.

 

The same works with digital goods. A product which has a simple system of interactions often attracts users with its convenience. However, if people use it for a long time and there are no changes at all, they may get bored. In case a product has an enormous amount of features at the start, they may just get lost within it. To avoid such problems, designers need to think of UX as a user journey, guiding them step-by-step to the point of achievement.

 

Stages of a user journey

 

User journey is a game mechanic which aims at making the process of interaction with a product easier and more understandable. A user feels as a real player starting the personal journey of the product usage. Designers plan different stages which a player (user) will gradually go through. Let’s look at the common steps which a user journey includes.

 

Onboarding stage

 

People who only start their journey within a product need to be actually onboarded. It means that users should be offered an introduction to the features so that they wouldn’t be afraid to make a mistake. Also, it is good to present a navigation system if it has some peculiarities.

 

Designers use onboarding tutorials in various digital products. Tutorials appear to users who launch an app or a web product for the first time helping them get oriented within unfamiliar features and controls. One more task designers need to accomplish at the stage of onboarding is user motivation. The product should be presented that way so that people had a motivation to use it more than once. That’s why onboarding tutorials need to contain short but clear info describing the possibilities of a product helping users to understand if a product can be useful for them.

 

tubik_toonie_help_screens_interaction

Toonie Alarm

 

Scaffolding stage

 

When users continue their journey, they go to the next stage of interactions called scaffolding. The step includes disclosing features progressively as the users become more experienced in using the product. Unlike the onboarding stage, users don’t get long instruction. Scaffolding is more like practical part. Users are trained to use a product proficiently, and the more they learn, the more tools (features) they receive. This stage allows users gradually learn more about a product and receive more features as far as they need to use them. Users don’t get a great number of features at once, so the interactions system won’t seem too overloaded or complicated.

 

toonie alarm UI design

Toonie Alarm

 

Progress stage

 

No matter what tasks people do, they always want to know about their progress. Providing the feedback on the results of a user journey, we can inspire them to continue. It’s a core step since people lose the enthusiasm of a beginner pretty soon and they need to be motivated to stay.

 

Some may ask what progress can be in non-game digital products? For example, a social app can notify users when they gained a certain number of new followers or friends. Meanwhile, educational applications can inform users on how much they’ve learned from time to time. All small details matter. Just tell people they achieved something and they get a dose of enthusiasm to continue.

 

blog app design tubik studio

Blog App

 

Endgame stage

 

Designers usually stop at the stage of scaffolding and progress uniting them in the endless loop, where users constantly learn and receive feedback. However, sooner or later people get bored of such patterns and may quit the product. Here is why the endpoint of a journey is also important to be thought out.

 

Endgame stage doesn’t mean that users will receive the message “Thank you for being with us! Bye-bye.” At this stage, proficient users are recognized as experts or veterans and they are usually given some privileges for loyalty. People like to be valued and they often give it right back. It’s not a secret that loyal customers are the best marketing managers for a product. New users willingly follow satisfied users’ testimonials.

 

Why a user journey?

 

User journey is a complex game mechanic which requires deep attention to details. Each stage should be carefully planned and connected to the others. Moreover, it requires long-term plans for future updates, so the process of user journey development may take a long time. Of course, some may ask if it is worth the effort to bring it into a product. Let’s see what user journey can give you back.

 

Clear interaction system. Users receive features gradually at the stage of scaffolding and users learn to utilize a product step-by-step. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Increased user engagement. One of gamification principles is to make users always motivated and involved in “game”. User journey is usually full of different tasks and achievements which people can gain, so users can’t resist game spirit.

 

Customer loyalty. If a product is constantly improved for its users, people really appreciate it. Moreover, if a product has some privileges for loyal customers, people trust it more.

 

Product recognizability. As we said above, satisfied customers are effective marketers for a product. Users willingly share their pleasant experience and it won’t stay unnoticed.

 

The element of fun. As any other game element, user journey is a good way to bring an emotional aspect to a product. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual product, you help people reduce some stress and relax for a moment.

 

Animated stickers mood messenger design tubik

Animated stickers for Mood Messenger

 

All in all, we can say that user journey is an effective method for UX improvement. However, a designer and a client should consider the fact that gamification works well not for every product. It depends on a type of an interface, its target audience, and business goals. For more detailed information, check our previous article where we’ve defined the tasks which gamification helps to accomplish and don’t miss the updates on gamification in UI coming soon.

Recommended reading

 

Gamification by Interaction Design Foundation

42 Rules for Engaging Members Through Gamification: Unlock the Secrets of Motivation, Community, and Fun

Gamification in UX. Increasing User Engagement.

Gamification: Designing for Motivation


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

gourmet_herbs_website_design_tubik

Sell Like Hotcakes: UI Designs for E-Commerce.

In many cases when we are buying something, it’s not just about getting new things. It’s often about feeling and memories, dreams and achievements, changing ourselves inside and outside, sharing and giving, improving and learning… The advent of new technologies opened new perspectives for both shoppers and sellers, and the process of upgrading this type of relations is in active progress. A decade or two ago, buying something on the Internet was not included in a typical daily routine while now getting things and services in a couple of clicks cannot surprise anyone.

 

This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery — and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in e-commerce sphere, the connection between design and profits is tighter than anywhere else.

 

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications and landing pages aimed at selling products and services.

 

Website for a florist shop

 

web design florist store ecommerce

 

Flowers present the popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan and shares some information about the service. The header gives the instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist and shopping cart presented with minimalistic stroke icons. The footer includes the links to important service pages and accounts in social networks.

 

florist shop website design

 

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

 

florist shop website design

 

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

 

Application for the e-commerce jewelry store

 

jewellery ecommerce app UI

 

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting the instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

 

jewellery ecommerce app

 

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

 

Application for a cinema

 

cinema_app_ui_design_tubik

 

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment — a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

 

cinema app interaction ui animation

 

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

 

Landing page for dance academy

 

dance_academy_website_interactions_tubik

 

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is the effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

 

Website for herbs and spices store

 

web design UI tubik studio

 

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while hamburger menu hides the extended catalog. Moreover, here designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

 

Bookshop Website

 

online_bookshop_website_design_tubik

 

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items and reviews from readers. The visual presentation is strengthened with slight scroll animation.

 

bookshop website animation

 

Landing page for selling exhibition tickets

 

museum website

 

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service — a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates and prominent call-to-action for buying a ticket.

 

Landing page for an online travel gear store

 

Travel Gear Landing page by TUBIK

 

Here is the layout of a landing page: the company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

 

Website for a bakery

 

Bakery website design case study tubik

 

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

 

Randomizer for the online furniture store

 

tubik studio design UI

 

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

 

Landing page for online farm grocery

 

Landing Page Animation Tubik Studio

 

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

 

Website for the fashionable clothes shop

 

fashion clothes ecommerce website

 

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

 

Useful articles

 

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful

Hit the Spot: Design Strategies for Profitable Landing Pages.

UX Design for E-Commerce: Principles and Strategies.

Business-Oriented Design. Know Your Target.

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics

Landing Page. Direct Flight to High Conversion.

Case Study: Saily App. Designing C2C E-Commerce App.


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

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

UI design for blog app

Gestalt Theory for Efficient UX: Principle of Similarity.

Many designers can boast of having creative intuition and sharp eye: they add as much passion and feeling into the layout of the future website or app as rational thinking and measurement. In lots of cases, that’s not bragging but the real skill to see all the details together, to feel the possible pitfalls of the user flow, to find the original solutions not ruining usability. Yet, there’s no magic on this way: this skill is based on not only talent but also practical experience and persistence in studying theory, standards, and guidelines which quickly change together with technology and devices. Even creative experiments are based on the knowledge of interaction mechanisms and factors influencing them: to break the rules, you have to know them well.

 

Visual hierarchy in web and mobile interfaces belongs to that domain knowing which designers strengthen their creative potential. Exploring the ways how people perceive information and using them for building good navigation, digestible copy, and effective color choice has a great impact on the usability of the product — and scannability as its important part. So, today we are going back to basics: let’s start revising how Gestalt grouping principles can affect user interfaces positively.

 

What is Gestalt theory?

 

In basic terms, Gestalt is the term that comes from the German word Gestalt [ɡəˈʃtalt] meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. The basic idea behind this movement can be caught through the well-known phrase by Gestalt psychologist Kurt Koffka: «The whole is other than the sum of the parts». When people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces.

 

Why could designers get interested in this issue? Because it helps understanding psychology of the app or website users better. When you know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way. Among the various levels of this approach, principles (or laws) of grouping are probably the most essential for designers to consider. These principles are based on the idea that people arrange what they see along with some patterns organized into five global categories: Proximity, Similarity, Continuity, Closure, and Connectedness. Here’s one of the infographics offered by Vertical Measures blog and visualizing the core description for some principles.

 

gestalt-theory-grouping_principles

Source

 

In user interfaces, principles of grouping applied thoughtfully make the perception of layout elements quicker and easier as well as establish the priorities in different levels of interaction. Today we are going to consider the similarity principle of grouping widely used in design practice.

 

Similarity principle

 

The principle of similarity is grounded on the idea that things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. It means that if a person perceives the set of elements, he or she tends to group the ones which have one or several features alike as the related items.  Therefore, giving different layout elements identic or similar visual features, designers stimulate users to set the appropriate connections and understand the whole scheme faster.

 

Similarity can be based on various visual parameters such as color, shape, size, and orientation. Let’s check some practical examples on interfaces designed by Tubik team.

 

Color

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

Here’s the common example of applying color similarity in the simple calendar app. The letters marking the days of the week on the calendar screen are visually grouped with one color which is different from the colors used for the numbers in the calendar grid. Therefore, the quick glance is enough to separate these types of symbols — color simplifies the process of the first scanning. The next level of color similarity takes place in the field of numbers: the dates on the week which the user has chosen look brighter while the other dates of the month look more faded. The key interactive zones are colored brightly and present the visual accent which is instantly noticeable and cannot be missed. So, color enables the designer to make the easy path of navigation for a user with effective visual hierarchy via the principle of grouping.

 

todo list UI app tubik studio

To-Do App

 

One more example here shows how grouping by color can be applied effectively for the copy in graphical interfaces. You can see the screen of a to-do app on which the position which is already marked as done is featured in different color compared to the tasks that are in progress. It enables the user to scan the list quickly and group the kinds of tasks in split seconds.

 

tubik studio blog app

Blog App

 

More complex application of grouping principle by color is marking categories and blocks of content. It works very well in the interfaces full of various content organized on several levels such as, let’s say, blogs, e-commerce or educational resources etc. Color markers simplify navigation and keep the consistency of design enabling users to remember the color prompts and find the content they want easily. The example above shows the blog app applying this principle: various posts are organized around global categories and marked with colors which you can see on icons, colored tabs on the posts and correspondent quick stats of posts in the user profile. The same principle is applied in the Moneywise App shown below.

 

mobile app design tubik studio

Moneywise App

 

This is the educational app devoted to economics: the content is organized into four global categories. The color used to mark the category is used as the background color for all the cards belonging to it. So, in the process of interaction, it helps users to quickly get oriented where they are.

 

Surely, this way of color grouping goes further as it organizes not just the elements on one screen but different screens or pages within all the digital product. However, it also corresponds to the Gestalt principles: such an approach allows designers to create interfaces which look and feel consistent and support the general integrity of visual perception from screen to screen, from one interaction to the other.

 

Size

 

The principle of similarity grouping the elements by size is another cornerstone in creating intuitive and user-friendly interfaces as it sets the basis for strong visual hierarchy supporting users. This approach helps to set the priorities and make the most important content visible. Grouping the similar content elements by this principle sets the connection between them, often faster than a user can read the copy or see all the details.

 

The good way to present this principle in action is checking the organization of copy content.

 

website design UI

Architecture Firm Website

 

The example features the corporate website of an architecture company. The copy blocks presenting the benefits and approaches of the firm are supported with the keywords applying two grouping principles simultaneously: they use different size and different text orientation. In the process of interaction, they are obviously perceived as the related elements. Also, the extended menu page shows the typographic hierarchy grouping copy elements by size: keywords, categories, and subcategories.

 

tubik studio button ui

Tab bar interaction concept

 

Here’s another example of grouping by size and color. We can see the concept of a tab bar in which interactive elements of equal importance are given in the same size and faded shade while the core interactive element — plus button —  is made prominent via bright color and bigger size. Moreover, trying to add the content via this button the user is offered three options for different types of content: and again, grouping the appearing three buttons which use the same color as the parent button but smaller size, the interface enables the user to set the connections and hierarchy of navigation elements easily based on typical operations of cognitive perception.

 

Shape

 

One more way to group the elements on the web page or screen is marking them by shape. 

 

tubik studio motion design ui

Green Spy app interactions

 

The example shows the app which uses cards of the same shape to simulate the interaction with the physical objects — the base of data cards. This approach allows the user to perceive the set of content blocks as related.

 

Homey app smart home UI

Homey App

 

The interface for Homey app shown above also presents the example of grouping by shape consistently from one screen to another: the buttons marking the rooms use the rounded-square shape while the buttons of various indicators within a particular room screen use the round shape. It sets the clear connections between the related layout elements as well as global navigation in the app.

 

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: proximity, symmetry, continuation and others. 

 

Recommended Reading

 

Design Principles: Visual Perception And The Principles Of Gestalt

Improve Your Designs With The Principles Of Similarity And Proximity

Gestalt Theory of Visual Perception

Gestalt Principles: How Are Your Designs Perceived?


Welcome to see designs by Tubik Studio on Dribbble and Behance

typography tips for designers

8 Typography Tips For Designers: How to Make Fonts Speak.

Typography is a way of communication with users. Visual performance and readability of copy in digital products have the great impact on user experience. One of guru graphic designers, Hoon Kim, once said: » Typographic design is visible as well as audible. If you have a great scenario, now it is time to cast good actors.» Typography can become a voice of design. Appropriate typography speaks for itself setting the right mood and transferring a certain message to users. Today’s article presents tips which will assist you in creating of effective typography.

 

Typographic hierarchy makes things work

 

To create a design pleasant for users’ perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.

 

Visual hierarchy can be divided into different parts. One of them relates only to the copy elements is called typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.

 

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

 

mood messenger landing page

Mood Messenger Landing Page

 

Consider context and audience

 

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.

 

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users get from the product. If the kind of font doesn’t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font which looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.

 

web design florist store ecommerce

Florist E-Commerce Website

 

Deep attention to mobile typography

 

Designers often do the experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from an appropriate size of fonts to compelling tracking and line length.

 

Compared to web design, mobile typography is harder to reach a good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users’ eyes.

 

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can’t press it with a finger and it’s rather annoying.

 

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

 

UI animation wine app

WineYard App

 

Minimalism can’t hurt

 

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.

 

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of a design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.

 

Also, copy content shouldn’t overwhelm users with the unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

 

upper app UI design case study

Upper App

 

Text needs to breath

 

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space is the area between elements in a design composition.

 

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words which are placed too tight to each other. Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

 

dance_academy_website_interactions_tubik

Dance Academy landing page

 

Build typography like a scientist, revise like an artist

 

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

 

Designers should never bury their artistic souls. Imagination and the sense of beauty bring the uniqueness in any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.

 

web design UI tubik studio

The Gourmet Website

 

Colorful typography needs thoughtfulness

 

The topic is actively debated. Some think there is no room for color in typography and some claim it’s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.

 

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interests for users. Moreover, each color may transfer a certain message since it has an influence on users’ mind and behavior.

 

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into a colorful chaos. Here is the useful checklist for this case:

 

Make it contrast. A big problem which colorful typography may bring is bad legibility. Proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn’t hurt the eyes.
 
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
 
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
 
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

 

book swap app interaction design

Book Swap App

 

Learn the basics of typography

 

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools which automatically choose the fonts or just hope aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.

 

Designers who don’t know the concepts and the anatomy of typefaces can’t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in depth but the basics is a foundation of every craft.

 

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

 

tubik typography and design books

 

Recommended reading

 

Here are some articles providing useful tips and tricks in typography.

Do’s and Don’Ts of Typography

The 8 biggest typography mistakes designers make

10 typography tricks every designer should know

Typography in UI: Guide for Beginners.

Tips on Applying Copy Content in User Interfaces


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

dance academy landing page design

Hit the Spot: Design Strategies for Profitable Landing Pages.

Every traveler knows it’s hard to find more annoying and upsetting experience than landing in the wrong place. It wastes the precious time and effort on looking for the needed spot right when you are full of nice expectations and ready for the best. No wonder, this story isn’t different when users go to the virtual journey around the Internet, especially having particular goals and destinations in mind. So, today let’s discuss how to make their landing soft and effective.

 

Definition of a landing page

 

In general terms, the phrase «landing page» was created by analogy with a landing spot in the physical world: in the web, it initially marked any page on which the user «landed» while surfing the Net and started their journey around the website. The phrase is still used in this meaning in terms of web analytics. However, more specific understanding of this term has become increasingly popular and widely used by not only designers but also marketing specialists. Today the term is used for a web page designed with a focus on specific relatively narrow goal and a quick way of accomplishing a particular action.

 

As for the goals, they can be different, still, the biggest diversity of landings is found in e-commerce sphere. This is the field in which they play the great role both for users and stakeholders, presenting the specific commercial offers without distraction in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially useful for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page in the case of such websites can open the big gate to poor user experience, especially when users come from particular marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page or their attention will be driven away so the purchase won’t be finalized.

 

Furthermore, there are also many other cases beyond e-commerce when landing pages present a good point to consider: they can present the mobile applications or educational resources, promote events and meetings, make the announcements, introduce the communities or just share information. Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help.

 

tubikstudio ui design dark background

 

Conversion as a key metric

 

One of the core characteristics measuring the efficiency of a landing page is conversion. In basic terms, it is the outcome, the achieved goal which is set for the landing page. Conversion is the transformation of passive users into active, from reading, considering, watching and comparing to actual buying, downloading, trying, subscribing etc. Measuring conversions and improving landing pages to get this rate higher is the way to problem-solving design helping users and supporting business strategies.

 

As e-commerce presents the highest diversity of landing pages now, the most frequent way of conversion is the actual purchase while the most popular call to action is «Buy». However, the presence of the Internet in human life is growing constantly an plays a significant part in daily operations on professional and personal levels. On that ground, the variety of conversions also reflects diverse goals — except buying something, users can be called to:

 

— download the mobile application

— read more about the presented issue

— subscribe to updates

— download a free ebook, templates, graphics or other deliverables

— start the free or discounted trial of the product

— leave the comment or share the opinion

— share the information with friends and followers in social networks

— browse the educational or informational resource

— fill in the form or survey etc.

 

Obviously, conversion as the finalized action the user is navigated to is not the only function of a landing page: it is also effective as a general supporter of brand awareness and recognizability, due to the original design or special features it can even be a part of viral marketing campaign. Still, the most important outcome of all the effort invested into its creation and maintenance is ultimately measured via conversion rate, with the number of users who actually did the action they were called to.

 

UX design process tubik

 

Design strategies

 

No doubt, all the design projects are highly individual and require solutions based on the specific case. Nevertheless, on the basis of our diverse creative practice, we have collected the set of general ideas useful for work on efficient landing pages.

 

Clear goal and structure

 

The core difference between the home page of a website and the landing page with the specific offer is in their strategic use. The home page sets the global point of departure enabling the user to take a variety of routes around the website, while the landing page is focused on one particular aim which should be effectively presented and easily achievable. Therefore, the first step at designing converting page is setting this particular goal and building the page architecture which will navigate the users to the ways of achieving it.

 

Targeting

 

In the article about business-oriented design, we defined targeting as the strategy and techniques of researching the particular target audience to find the best and the shortest ways to attract their attention to the specific product or offer.  A landing page is the effective marketing tool when it’s based on the needs, preferences, and expectations of the target audience. Even more, these web pages allow companies to set multiple landing spots for various target users on the basis of:

— geographic targeting

— gender targeting

— psychographic targeting

— demographic targeting

— behavioral targeting.

 

There are many practical cases when companies changed some parts of the products, their names or even set the new brands to sell successfully in different countries with the diverse cultural background. The same can be done with landing pages:  for example, the page offering the same smartphone can look and talk differently to the users from different countries, taking into account their perception of colors, copy, priorities in product features and trends on the local markets.

 

gym landing page concept by Tubik

Gym Landing Page

 

Functional minimalism

Getting back to the metaphor with the physical landing of an aircraft, it’s hard to imagine how it could safely land on the place which is heavily stuffed. For soft landing, a clear spacious spot is a vital condition. For landing page, it works the same way: attempts to overload it with everything bring to a negative result. In most cases, minimalist design based on core functionality and visual elements easily navigating the user to the CTA proves itself a good approach.

 

Maximum attention ratio

Attention ratio is the level of concentration on a particular task or goal. No need to explain that for a landing page is should be as high as possible. Too many elements of interaction will provoke distraction lowering the chances of conversion: the more options users have simultaneously, the harder it is to make the choice.

 

Instantly visible call-to-action elements

CTA or call-to-action element presents the most valuable interaction element of a landing page as it is actually the spot where conversion happens. It should be instantly visible, which can be done via color or shape contrast, and informative, which is usually achieved with proper copy or icon, or both.

Tubik studio UI animation

Museu landing page 

 

Harmonic color palette

Colors and shades chosen for a landing page are not objects of designer’s creative self-expression: they are as much influencing the conversion rate as any other design element and sometimes even more than others. It’s not just aesthetic satisfaction which users can feel seeing the presentation but also the hidden message which can be transferred via traditional associations in color perception. So, colors should present the combination pleasant for user’s eye, emotionally appealing for the target audience and establishing the effective visual hierarchy of the layout.

 

Corresponding typography and good readability

As well as colors, fonts also tell much not only with the copy hidden behind them but also with associations and emotions they bring out. Typographic hierarchy and well-balanced font combinations have a big impact on the readability of the page which can directly influence the conversion rate. Landing page is not the spot on which users are ready to spend much time so poor readability can drive them away before they make a decision or understand if the offer corresponds to their needs. Being an integral part of the general stylistic concept, appropriate fonts can also contribute much into effective visual performance catching users’ attention.

 

Strong and consistent branding

Landing pages are widely used as the part of web marketing strategy so they should support the general scheme of brand promotion. Coming from outer resources, social networks, advertisements, users need to feel and see the consistency of brand image to be ready to trust it. So, identity elements like logo, slogan, mascots, corporate fonts and colors should be taken into account.

website design for photographers

Photography Workshops landing page

 

Prominent theme image

No secret, most users are visually driven and they scan the web page in a couple of seconds perceiving images much faster than copy. An appropriate theme image, be it a hero banner, original illustration, high-quality photo presenting a product or service, is a good way to attract users and get them interested as well as inform about the nature of the promoted offer. Images of this kind save users’ time, send them a quick and appealing message and add much into aesthetic side of the presentation.

 

Engaging and attractive scroll animation

Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. Scroll animation applied wisely can add life and style to the landing page and become another attractive feature stimulating positive emotions. Also, motion creates the feeling of one integral smooth interaction with a whole page rather than several separate parts. 

 

dance academy landing page animation

Dance Academy landing page

 

Visual hierarchy of copy content

Copy content is another aspect which has to be well-thought. A designer’s task here is to think about edible copy presentation framed into a clear visual hierarchy: sizes and placement of copy blocks, instantly scanned headlines and short concise call-to-action elements directly influence the level of conversions. The length of copy on landing pages is a debatable issue: focused goals behind the landing page doesn’t always mean that each time it should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, short and strong copy can be enough to encourage users. However, if a new unknown product or service is presented, it is often useful to provide users with more information persuading them to follow the call to action. Anyway, the presentation of the copy has to be designed for good readability and scannability of the page.

 

No information overloading

Based on the previous points, creative team working on a landing page — designers, copywriters, marketing specialists etc. — should agree upon the priorities and define the core benefits users must see. Trying to overload the page with all the possible data about the offer, you risk overwhelming them so much that they can start hesitating or even get annoyed. Core information fields included in the landing page usually cover:

— the general introduction of the presented offer

— concise and informative description of the benefits solving user’s problems

— testimonials and signs of trust

— clear call to action.

 

If the offer is quite complex and it’s hard to describe all its benefits shortly, the good solution can be found in dividing the page into several theme blocks with separate interactive elements ( buttons, fields, links etc) enabling users to get further information or help quickly but on the other page.

landing page animation Tubik studio

magic.co landing page

 

Promotional video

In one of our recent posts, we have given insights on the benefits of short promotional videos for the presentation of products and services. The big advantage of this technique is the high speed of perception, emotional feedback and big informative potential of the video in comparison with copy. On the other hand, creating the video can be more time-consuming and require the bigger budget, so the efficiency of this element should be analyzed in business perspective to see if it’s really profitable for every particular case. 

 

High loading speed

None of the mentioned strategies will work properly if technical side of the interaction is neglected. Whatever stylish, sophisticated and informative is the landing page, it won’t make users put up with waiting while it’s loading. The matter here is really in short seconds, without any exaggeration. So, optimization of the images, thoughtful technical realization of motion effects, quickly loading video and fast transitions if they are applied — all of these and similar factors can have a crucial effect on conversion rates. Respect the users’ time otherwise they won’t be quick to trust you.

 

free design books landing page

Tubik Magazine landing page

 

Obviously, the presented list doesn’t mean that all the mentioned strategies should be applied together on every page. Each project demands individual approach based on rigorous analysis of the target user expectations, needs, and preferences combined with business goals. When the page is live, A/B testing and analysis of real interactions open the new perspectives and prove if designer’s initial decisions were appropriate for the established aim.

 

Landing page vs Home page

 

Should all the traffic from outer sources be directed to a home page or landing pages? We have already shared our ideas with the set of strategies for home page design. The answer considerably depends on the nature and complexity of the website. The issue to consider is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

 

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

 

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in the case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. A landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses. The choice of a profitable approach in every case should be based on user research and then thorough user testing.

 

big city guide web ui design

Big City Guide landing page

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, here’s the bunch of articles for those who would like to continue the topic exploration:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

Landing Page. Direct Flight to High Conversion.

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


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

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

UI icons in interface design tubik blog

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

Icons in user interfaces are the elements that cannot be overestimated. Small and meaningful, they solve numerous problems. They become little keys to usability and intuitive navigation. And only designers know how much time and effort is needed to make them simple, helpful and expressive.

 

Guru of user experience design Steve  Jobs said: «Details matter, it’s worth waiting to get it right.» Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

 

Definition

 

In general terms, an icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

 

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience.

 

weather app design UI

 

History

 

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was a beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins which have been used so far.

 

icons xerox star

Source

 

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

 

icons apple machintosh

Source

 

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

 

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

 

Types based on functions

 

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

 

Homey app smart home UI

Homey App

 

saily app UI design

Category icons for Saily app

 

Interactive icons

The icons of this type are directly involved into interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the users request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls and any other elements of interaction.

 

tubik studio tapbar ui

Tab Bar interactions

 

ui concept animation tubik studio

Menu interaction concept

 

Decorative and entertaining icons

 

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

easter icons tubik studio

Easter and spring themed icons 

 

App icons

 

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icons. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon which won’t get lost on the screen full of other app icons.

 

logo design by Tubik studio

Elephun App Icon

 

Favicon

 

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

 

Types based on visual performance

 

Glyph icons

 
The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers etc.): it presents a readable character enabling people to write it.

 

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

 

pictish_rune_meanings

Source

 
In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the «@» symbol representing the preposition «at». For example, here is the set of icons for material design from Google.

 

material icons

Material icons

 

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play the big role in the issues of navigation for a digital product.

 

weather_icons tubik studio

Weather icons

 

Flat and semi-flat icons

 

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in legibility of the presented items.

 

tubik studio blog app

Blog App

 

Skeuomorphic icons

 

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

 

SVG icons

 

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999, and supported by all major browsers. SVG icons are growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

 

Types based on applied image metaphor

 

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of the metaphor they reflect.

 

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail etc.

 

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

 

Arbitrary icons are the symbols which currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing «Save» function: although initially it was a reference icon, for many users now it doesn’t work like that — they just know the meaning solidly connected to this image for many years.

 

multimedia icons tubik studio

Multimedia Icon Set

 

Key features of effective icons

 

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

  • clear — the meaning of the icon is understandable and accessible to the target audience
  • meaningful — the icon transfers the informative value
  • recognizable — the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
  • simple — the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
  • original and noticeable — the icon stands out among other similar elements of the interface which is especially actual for the app icons
  • scalable and flexible — the icon saves its unity, integrity, and legibility in different sizes and resolutions
  • attractive — the icon satisfies aesthetic expectations and sets harmonic visual appeal
  • non-offensive — the icon doesn’t have hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience
  • consistent — the icon corresponds to the general stylistic concept of the layout it is applied for.

 

Icons in UI tubikstudio

 

Recommended reading

 

Here is a bunch of articles for further exploration of the topic:

 

Icon Classification: Resemblance, Reference, and Arbitrary Icons

A Brief History of the Origin of the Computer Icon

Iconic Simplicity. The Vital Role of Icons.

Visual Perception: Icons VS Copy in UI.

How to Combine Icons from Different Sets in Your UI


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

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

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

 

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

 

web design tubik studio

 

What is minimalism?

 

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

 

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

 

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

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers include:

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

 

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

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

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

 

Flat design

 

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

 

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

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

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

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

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

 

upper app UI design case study

Upper App

 

Choice limitation

 

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

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

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

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

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

 

Adding air and using negative space

 

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

 

tubik studio ice ui website

Ice Website

 

Grids

 

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

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

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

 

tubikstudio ui animation website design

Bjorn Website

 

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

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

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

 

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

 

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

tubik free podcast design business terms

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

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

 

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

 

 

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

opera video graphic design case study tubik

Design for Web: Promotional Video. Benefits and Pitfalls.

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

 

What’s a promotional video?

 

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

 

Animation case study by Tubik Studio

 

Types of promo video

 

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

 

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

 

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

 

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

 

Product presentation video for Toonie Alarm

 

Is a custom promo video profitable for businesses?

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Promo video for PassFold project designed and animated by Tubik team

 

Promo video pitfalls to consider

 

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

 

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

 

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

 

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

 

Case Study: Opera custom promo video

 

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

 

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

 

 

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

 

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

 

Recommended reading

 

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

 

How Ecommerce Businesses Can Generate Organic Traffic with Video Marketing

 

The Top 16 Video Marketing Statistics for 2016

 

27 Video Stats For 2017


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