Tag Archives: ux

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

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

 

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

 

web design tubik studio

 

What is minimalism?

 

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

 

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

 

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

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers include:

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

 

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

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

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

 

Flat design

 

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

 

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

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

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

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

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

 

upper app UI design case study

Upper App

 

Choice limitation

 

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

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

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

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

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

 

Adding air and using negative space

 

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

 

tubik studio ice ui website

Ice Website

 

Grids

 

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

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

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

 

tubikstudio ui animation website design

Bjorn Website

 

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

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

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

 

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

 

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

tubik studio design process

FAQ: Do UX Designers Need to Know Programming and Computer Science?

The question if UI/UX designers should know how to code is one of the «eternal» discussions in the design sphere. The more diverse UX design becomes in its evolution, the more opinions arise. Having answered several questions of this sort on Quora recently, we would like to share our ideas with Tubik Blog readers as well. 

 

What is the difference between UI/UX designer and programmer?

 

UI and UX design present different aspects of creative flow for digital products. Basically, UI design aims at creating effective and attractive user interface while UX design aims at providing the positive user experience. Interaction with a product via the user interface is a part of user experience, so we UX design as a creative field is broader and includes UI design as its integral part.

 

UX design process tubik

Work on information architecture for a website UX

 

Working on the UX and UI for a digital product such as a website or mobile app, designers have to concentrate on such core aspects as:

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

 

home budget app mobile interface

UI design of some screens for Home Budget App

 

Programmers or developers are people who actually build the website or mobile application planned and designed by UI/UX designers. They breathe life into the plan, with the code they create the live product which users can actually apply to solve their problems and satisfy wishes. Programmers transform the structure and visual performance thought out and created by designers into the real interface.

 

ios-developers-tubik-studio

How interfaces look from the programmer’s point of view

 

Therefore, to see the difference, we can apply the metaphor of an actual construction site: 

UX designers are architects who come up with the general concept, its structure and the flow of interactions as well as a variety of factors which influence positive or negative user experience (in case of real building it could include transportation, quality of air, availability of shops and entertaining points, educations and sport facilities, neighbors etc.).

UI designers are architectural visualizers who find the best solutions for visual performance of the object corresponding to the style, the environment, user’s expectations and aesthetic needs based on the already agreed architecture, structure and core factors of interaction.

Programmers are actual builders who create the final object in reality. As well as on the building site, they have various specializations: some are good in creating the foundation, others know how to realize visual features made by designers, and some of them work out effective interaction with this object in particular environments and for new requirements which can arise later.

 

tubik teamwork design digital agency

 

Do UI/UX designers need to know computer science and programming to create top-quality user-friendly designs?

 

This is the question in which the terms should be clearly defined.

 

Computer science in its traditional understanding is the broad comprehensive study including theory and practices for making and using the computers (now it can also go further to other kinds of digital devices and gadgets). It is often characterized as the scientific and practical approach to computation as well as study, exploration, and automation of diverse operations with data. Therefore, the person with a major in computer studies is usually a specialist in the theory of computation and design of this sort of systems and hardware.

 

In this perspective, yes, knowledge of computer studies is a great basis for creating problem-solving and user-friendly interfaces. UI/UX designers are professionals dealing with much more than just the looks of a website or an app: they think over the logic, transitions, usability, accessibility, emotional and aesthetic appeal, data presentation and lots of other things forming the whole user experience. Whatever is the way to get this knowledge — higher education, courses, apprenticeship, self-education etc. — it underlies the necessary basis of knowledge which allows a designer to understand human-computer interaction for appropriate and effective design solutions. I personally find the knowledge on computer science important factor of being a competent designer of modern user interfaces.

 

As for the programming, the situation is different. There are, basically, two camps of extreme positions. One side claims that programming/coding is the absolutely vital thing to know and you cannot provide really efficient UI/UX without knowing how to code. The other side believes that the knowledge of programming kills the creativity in design as in this case designer is limited with the rules, standards and restrictions of development. Both positions are supported by numerous articles and discussions and both somehow make sense if you think about the issue in the perspective of real design projects.

 

On the basis of our team experience, it’s easy to state confidently: you definitely CAN be a competent and successful UI/UX designer for mobile and web with no background or major in programming.

 

Basically, the task of UI/UX designer is to analyze the target audience and their needs, to make a research, to create an efficient layout and well thought-out system of transitions, to wrap it in an attractive but highly usable and clear visual design and to test the solutions. UI/UX designer is not a developer: they work on the same product but from different sides, as well as for example a writer, an editor and a publisher work differently on the same book. However, it is obviously pleasant for developers if a UI/UX designer is able to produce designs which consider at least the basic limitations and points of programming and coding.

 

information architecture for designers

 

You can find a great bunch of successful experts in app and web design who have never had anything in common with the sphere of coding and development and provided great design solutions with a very high level of usability. Nevertheless, in the case of high-level specialists, it’s impossible to say that they are totally out of the issue. Designers, who are keen to create viable product designs, usually tend to get acknowledged with the general understanding of development basics. That really supports the designer in providing effective design as possible, considering all the stages of its creation and implementation. However, it doesn’t mean that without this sort of knowledge it’s impossible to create good designs. Moreover, if designers work in a team with developers, they can create designs without knowing coding even easier as they are supported by developers who control the process in the perspective of coding.

 

Happy medium should be found in this issue without any extreme positions. If designers tear themselves too far away from development reality, they risk losing viability of their designs and could end up having a great deal of amazing and terrific concepts none of which will be implemented in real products. On the other hand, if designers concentrate too much on limitations of coding, they risk becoming unable to think out of the box and provide original design ideas. Keeping the wise balance provides the harmony.

 

So, to sum up, a person can become a successful UI/UX designer not knowing programming and development; however, this kind of knowledge can be supportive if used wisely.

 

Working on interfaces created from the first line of design to the real digital product, like Upper App and Toonie Alarm, we find thoughtful and organized teamwork the most effective workflow: UI/UX designers, developers, content and branding specialists have to be involved into the creative process from the very beginning and combine their strongest sides into one product. The wise delegation of tasks works more quickly and effectively than the attempts of one person to explore and cover everything. And this sort of teamwork lets designers and developers share their knowledge and understand each other’s decisions for the sake of good outcome solving users’ problems.

 

upper app UI design case study


 

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

Welcome to read us on Quora

video speeches for ui ux designers

Must-See Expert Speeches for UI/UX and Product Designers. Set 2.

Learning and innovation go hand in hand. The arrogance of success is to think that what you did yesterday will be sufficient for tomorrow. (William Pollard)

 

Our previous collection of video speeches from top experts in product design and user experience, which we published several months ago, got shared and actively viewed. There is no reason why we wouldn’t continue this sort of sharing, collecting great speeches from designers and product creators recognized internationally. That’s the precious part of being a professional in the era of the internet: you are able to get tips, recommendations, experience and knowledge from the best masters. So, catch the new set of expert talks we have collected for you and get inspired!

 

Julie Zhuo: How a Facebook Designer Thinks

 

 

Katie Dill: Balancing Order And Chaos In UX

 

 

David Vogel: Zen and the Art of UX Design

 

 

Cindy Chastain: Building the bridge from UX to CX

 

 

Joe Natoli: 5 Rules for Successful UX Disruption

 

 

Michael Bierut: How to use graphic design

 

 

Stephen P. Anderson: Hooked on a Feeling

 

 

Jakob Nielsen: Web UX 2016 vs 2004

 

 

Robert Brunner: What All Great Design Companies Know

 

 

Design+ Social Panel — Designers from the top social networks

 

 

Welcome to watch the first set of must-see speeches for UI/UX designers

Welcome to check 20 TED-talks for designers

cinema_app_ui_design_tubik

Mobile UI Design: 15 Basic Types of Screens.

Smartphones have invaded almost every activity of our lives. Different applications assist us and make the life easier. A designer’s job is to create the user interface meeting users’ needs and making the experience pleasant and satisfying. To build effective UI, designers need to dive deep into the peculiarities of mobile applications, learn their constituents and functionality. Nowadays it’s difficult to distinguish a standard set of necessary screens for any application because mobile industry is evolving fast and so do the apps. Our article presents the most common and popular types of mobile screens and shows the design features they require.

 

tubikstudio ui app design

 

Common screens

 

Splash screen

 

The first impression is one of the key points influencing user’s opinion about a mobile application. When the user experience is pleasant from the very beginning of interactions with an app, there are more chances it’ll be more popular among users. That’s why splash screen needs to be paid as much attention as any other mobile app screen.

 

Splash screens are the first image users see launching a mobile application. They are usually minimalistic and present a name, logo, or slogan of a product. To make sure splash screen will look good on different devices, designers often focus the elements in the middle of the screen. Splash screens are recommended to be shown no longer than 4-8 seconds otherwise users may get annoyed. Also, it may be good to show loading progress so that impatient users could know when the app will be launched.

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

Onboarding tutorial screens

 

Onboarding tutorial is a set of screens presenting a mobile app, its navigation system, features and benefits which the application could bring to the possible users. They appear to users who launch the app for the first time helping them get oriented within unfamiliar features and controls understand if the application can be useful for them.

 

The structure and content of an app tutorial are highly individual for every particular project. However, there are some common tendencies in onboarding design. First of all, many tutorials use custom illustrations presenting a specific feature or benefit in an attractive and easily decodable way. Also, designers often apply a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds. A powerful copy is significant for onboarding as well. It should be short, helpful and readable.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia — section tutorial

 

Home and menu screens

 

Home screen is an essential part of any application. In a context of mobile apps, it’s the main screen from which users interact with most options of the application. Home screens are designed depending on the type of a product and its purpose still there are some key elements common for different kinds. First of all, the main screen usually includes the search field or button so that users could easily search for the content they need. Also, since home screen is a start point for user journey, it often contains navigation elements providing access to the various content sections.

 

homey_app_ui_design_tubik

Homey App

 

To make user interactions easier, a mobile application outfits a menu containing the list of possible directions the user can move to within one click. There are two variants of presenting the menu in mobile applications: it can be a part of a home screen or a separate screen. It is recommended to keep the number of options in the menu under seven showing only important sections. If the app requires more, it can be a good idea to create subcategories.

 

tubik studio animated interface

Slide Menu Concept

 

Log-in and profile screens

 

Today many applications offer users creating their personal accounts, so every designer needs to know how to work with log-in and profile screens. Log in screens should be minimalistic and clear so that users could easily access the application. There are usually two fields where users can enter their name and password along with the confirmation button. For people using the app for the first time, there always must be the sign-up option.

 

Profiles make interaction within the mobile application more personalized and allow operating with the data effectively. Also, a personal account is a key part of any social network app which involves the user into the virtual community of the network and enables to share the personal info with the others. The main task for designers is to maximize the convenience via the smart UX. According to Interaction Design Foundation, the first point designer should consider is that profile page should be clear in use. The amount of the information has to be limited otherwise the profile screen may look too complex. What’s more, it’s vital to make sure the navigation system is intuitive. This way users won’t have to take much effort to puzzle out the app. Finally, the profile screen design should be oriented to the target audience of the app. User research is a must if you want your app to meet users needs.

 

Tubik Studio Social Networks

Dating App

 

Stats screen

 

Various applications contain stats on the user activities. The more data it provides, the harder it is to create a mobile design of a stats screen. Designers need to make sure it is possible to see all the key information still the screen has to be clear and usable. Graph curves, scales and original icons can make the stats screen look smooth and clean on a mobile app. Moreover, stats screens require distinct typography so that users could easily read the data.

 

car app interface

NGIN App

 

Calendar

 

Event apps, to-do list apps, and many others provide users with the personal calendar. Depending on the type of the application, calendar accomplishes certain functions such as remindings or schedule. The visual style should fit the mood and objectives of the mobile app.

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

E-commerce screens

 

Catalog screen

 

The main objective of any e-commerce project is to sell the products. Visual presentation has a great impact on users’ decisions. A catalog is a list of goods the company offers for sale. A designer’s job is to create the catalog that will attract users attention and encourage them to buy a product. The product list in mobile apps can be similar to many e-commerce websites where the items are placed in catenas and can be viewed via vertical scroll. The number of products in one row is settled according to the width of the screen.

 

Another approach to product organization in a mobile catalog is a row with horizontal scroll. To make the navigation intuitive the last item in a horizontal row should be shown not in a full view to let the user see that this is the direction of scrolling. In addition, the photos or illustrations of products should be only high-quality so that users could clearly see what they are going to buy. The catalog screen should include a call-to-action button via which the user can add the item to the cart. This way users will be able to pick up product right from the catalog screen without the necessity to go to the page of this particular position.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Product card screen

 

This screen is for people who like to know what exactly they buy. Product card demonstrates the key information about the goods helping users decide whether they need the product or not. Designers focus on the photo of the product putting it in the center of the screen. The description data is usually placed below. Designers can divide the data into the groups such as size, material or others so that users could easily find the info they need.

 

jewellery ecommerce app

Jewellery E-Commerce App

 

Check out screen

 

Today a lot of purchases are done via smartphones so the companies try to make the mobile shopping process as convenient as it has never been before. The checkout process is a final step users take before they buy the product. Designers’ task is to make people comfortable while people take this step. First and one of the essential parts of the checkout screen is a form where buyer fills in a specific personal data such as a name and number of the credit card. The type of required information depends on the resource where a user makes a purchase. In addition, it’s important for people to know their personal data is secure, so designers have to reassure users via visual elements that their information is safe. It can be callouts in a copy as well as some icons of the famous brands who gave their approval or maybe even some certificate signs if there are such.

 

cinema app interaction UI

Cinema App

 

Social screens

 

Feed

 

People often use various social network apps for communication and to be able to follow the news and updates around them. Feed is a constantly changing list of news and other data the users choose to follow. The practice shows that mobile users prefer scanning quickly through the feed, the reason why they need a simple clear design which won’t be overloaded with visual details. The news can be presented one by one via scroll. To make the navigation more intuitive the next piece of news should be partially shown.

 

tubikstudio motion design

Timeline App

 

Contacts

 

The contact list has been evolving for a long time. From paper notes to the different digital variants it’s been changing visually still delivering only one purpose: saving key data about friends and other close people. Mobile contact screen presents users a list of contact data sorted by the name in alphabetical order. Each contact should be clickable and lead to detailed data which includes the phone number, email, and sometimes contacts on Skype, Messenger, etc. Also, contact info is given with a small photo that makes the searching process easier.

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

Music screens

 

Playlist

 

Music lovers like creating their own playlist for every occasion. Obviously, every music app is obligated to provide their users with such a feature. Playlist screen looks similar on different apps: it’s a list of tracks showing the name of the song, singer or band, and the length of the soundtrack. Also, designers can add a small image of the album this track belongs to. In case a song has no image there still should be an icon, for example, with a music note.

 

tubik studio music_app

Music App

 

Player

 

People can control what they listen and how they listen to it via the player. The feature allows switching, stopping and starting a track with standard buttons which are easily recognized. This set is usually placed centrally on the bottom of the screen. The major part of the screen is typically taken by the image attached. Also, sometimes instead of a picture, many designers apply music visualizer as the central part of the screen. Visualizer is a good opportunity to reveal the imagination and creativity which is always inspiring for designers.

 

Player Transfer Animation for Echo case study

ECHO app

 

Nowadays, loads of mobile applications appear, so they bring new types of screen for fresh requirements users bring out. Designers should be ready to take this challenge and always follow innovations. Get inspired!

 

Recommended reading

 

A Roadmap To Building A Delightful Onboarding Experience For Mobile App Users

 

Mobile Onboarding: A Beginner’s Guide

 

Tell Me About Me – User Profiles for Mobile Applications

 

How To Design A Better Mobile Checkout Process

 

UI/UX Design Glossary. Navigation Elements.


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

tubik free podcast design business terms

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

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

 

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

 

 

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

opera video graphic design case study tubik

Design for Web: Promotional Video. Benefits and Pitfalls.

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

 

What’s a promotional video?

 

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

 

Animation case study by Tubik Studio

 

Types of promo video

 

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

 

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

 

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

 

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

 

Product presentation video for Toonie Alarm

 

Is a custom promo video profitable for businesses?

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Promo video for PassFold project designed and animated by Tubik team

 

Promo video pitfalls to consider

 

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

 

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

 

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

 

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

 

Case Study: Opera custom promo video

 

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

 

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

 

 

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

 

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

 

Recommended reading

 

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

 

How Ecommerce Businesses Can Generate Organic Traffic with Video Marketing

 

The Top 16 Video Marketing Statistics for 2016

 

27 Video Stats For 2017


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

problem solving web design free book

Problem-Solving Web Design. Free E-Book by Tubik.

Nowadays, World Wide Web connects people from all around the world whatever their aims and wishes are. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. This reality presents new challenges for designers.

 

Today we would like to present you the new issue of Tubik Magazine. This time the free e-book called Problem-Solving Web Design presents the overview of theory, practices and design cases for user-friendly and attractive websites and landing pages. We have collected tips and ideas sharing our experience in this field.

 

Welcome to download the book at one step or read it online below.

 

 

Also, welcome to read or download previous issues Design for Business and Logo Design.

tubik free podcast design business terms

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

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

 

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

 

 

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

human memory tips on ux design

How Human Memory Works: Tips for UX Designers.

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

 

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

 

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

 

Ui design trends by Tubik Blog

Healthy Food App

 

Basic points about memory

 

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

 

Basically, psychologists mention three types of memory:

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

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

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

 

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

 

memory work

 

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

 

Basic laws of memory

 

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

 

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

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

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

 

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

 

cinema app interaction ui animation

Cinema App

 

Expert explorations of memory

 

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

 

Miller’s Law

 

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

 

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

 

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

 

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

 

landing page animation Tubik studio

Magic.co landing page

 

Hick’s Law

 

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

 

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

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Tips for memory-friendly UX

 

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

 

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

 

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

 

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

website design for photographers

Photography workshops

 

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

 

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

 

book swap app tubik studio

Book Swap App

 

3. Save memory effort with recognizable patterns and symbols

 

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

 

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

 

tubik studio behance weather app

Weather App

 

4. Apply consistent markers in navigation

 

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

 

Homey app smart home UI

Homey App

 

5. Don’t hide the core elements of navigation

 

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

 

bookshop website animation

Bookshop Website

 

6. Stimulate different types of memory

 

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

 

tubik studio application recipes and cooking

Recipe App

 

7. Remember about emotions

 

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

 

ui animation design tubik

Night in Berlin App

 

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

 

Recommended reading

 

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

 

Short-Term Memory and Web Usability

 

UX and Memory: Present Information at Relevant Points

 

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

 

User Memory Design: How To Design For Experiences That Last

 

Visual Perception. Icons vs Copy in UI.

 

Total (Memory) Recall

 

The Properties of Human Memory and Their Importance for Information Visualization


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