Tag Archives: ui

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 teamwork design digital agency

Effective Teamwork in Digital Agency: How to Avoid Pitfalls.

There’s an old saying “Two heads are better than one”. But when there are ten heads it’s called a team and this is when the real workflow begins. Today, the majority of digital agencies include three main departments: designers, developers, and managers. People working in a company know how difficult it may be to collaborate, especially if they are from different departments.

 

Nevertheless, effective teamwork is a foundation of a successful company and teammates need to get along with each other to work productively and efficiently. Step by step, Tubik Studio was transformed from a small design agency to the full-service digital company so we’ve experienced the pitfalls appearing on the way of creating a cohesive team. Today’s article highlights the problems occurring in the teamwork and presents useful tips on organization of the effective teamwork in a digital agency.

 

Why is teamwork important for a company?

 

No matter how many talented workers a company has, it will be hard to build a profitable business if employees don’t work as a team. Teamwork is not only about operating together for one company, it means to collaborate so that you could achieve the company’s goals on its way to success. But what benefits can teamwork bring? Let’s see.

 

First of all, team members increase the efficiency of their work as well as general productivity of the company. The amount of work is shared among employees so the tasks are done faster while nobody is while nobody is overloaded with a ton of work. Moreover, it’s much easier to solve problems if there are colleagues willing to help rather than dealing with them by yourself.

 

ux designers brainstorm tubik

 

Another benefit of the teamwork is that together team members are able to generate more ideas. Brainstorming and task discussions are one of the biggest sources of fresh and unique ideas. The diversity of opinions and creative thoughts make the pleasant environment for idea generation. Furthermore, each team member can share their experience and knowledge so employees constantly learn and develop their professional skills.

 

In addition, teamwork enhances connections between team members. The efficient interaction within a team contributes to better understanding of the project details and ensures the quality of the product in all aspects. Besides, informal communication between colleagues increases their effectiveness on the work since some fun and laughter help to reduce the stress and fatigue.

 

tubikstudio design office teamwork

 

How can different departments get along?

 

Effective teamwork is impossible when the departments can’t get along. Digital agencies have a difficult task — unite extremely different personalities under one roof and even more make them support each other. To achieve this aim, you need to learn deeper about possible pitfalls on the way the successful teamwork in a company. Let’s discover common problems which can appear when designers, developers, and managers are working together.

 

teamwork tubik studio designers developers

 

Designers vs Developers

 

Designers and developers are often seen like cats and dogs bickering all the time which often has the bad influence on the workflow. However, now when most of the digital companies aim at providing full-cycle services, these two opponents are forced to find the ways how to understand each other. To find out what causes these confrontations, we’ve distinguished the most common issues occurring in designer-developer relationships.

 

Developers ignore design principles. Design harmony, visual hierarchy, the balance of design elements play a significant role in a quality digital product. However, it often happens that developers miss some details or change them for some reasons crushing the harmony within the design. Obviously, designers react negatively and ask to correct errors. But the conflict starts when developers say “What’s the big deal?”. It actually is the big deal and designers need to explain why rather than arguing.

 

Designers don’t understand anything about HTML CSS. Of course, designers are not developers and they don’t have to know how to program but the basic knowledge of the web and how it works is essential. Design created without knowing web principles can be too difficult to actualize in a real life and it’s not about developers skills. To avoid such an unpleasant situation, designers are recommended to learn the basics of CSS, or Cascading Style Sheets, language that defines a layout of HTML.

 

Developers make the design look different than designers expect. Every designer must have been in a situation when the developer shows the coded version of the design and it looks like anything but the one that designer meant. Different colors, unnecessary white spacings, or even different fonts can make designers get angry with the developers but it’s not always their fault. Many designers do not consider the fact that colors may look different on Mac and the whole picture can be changed on the different browsers.

 

Designers estimate their work time wrong. Time estimation is a painful question for everyone who’s paid hourly. When you work in a team, it’s getting worse because the other departments depend on you. Sometimes, designers underestimate the time they need to accomplish their part of work and the development team is forced to push hard so that they could meet the deadlines. Certainly, it can’t be a good thing for the relationships between designers and developers. However, programmers need to take into account the fact that the design process heavily depends on creative aspects and inspiration presence, so it makes time estimation more difficult for designers.

 

Tubik Studio design team

 

Designers and Developers vs Managers

 

One thing that designers and developers undoubtedly have in common is their confrontations with managers. When it comes to the “managing time”, programmers and designers can forget about their issues and create a coalition against the manager. But what are the problems? Here they are.

 

Designers and developers don’t stick to the deadlines. Managers are responsible for delivering the product to the client on time. And when the product team is late and can’t meet deadlines, the blame goes to the managers. Still, in this situation, the fault lays on the both sides because managers couldn’t organize the team properly at the start while the team was too irresponsible.

 

Managers are too demanding. Sometimes there come clients with a project that can be done during two weeks and they say “I need it to be done in three days, no longer”. Managers take the risk of agreeing and ask the team for the impossible. This may happen when the managers don’t understand the peculiarities of the design and programming process and underestimate its complexity.

 

Managers can’t establish the connection between the product group and the clients. One of the biggest problems leading to the bad product creation is misunderstandings between clients and the product group. If managers do not make sure this connection is established right, designers and developers can build the product that doesn’t correspond to the client’s expectations, and the blame will be put on the product team.

 

No one takes responsibility for the failure. People can’t live a life without failures, and of course, digital companies also have bad days. There always will be the clients who will abandon their project and pay no money to the agency. This is when the team starts to blame each other and no one takes any responsibilities. However, it’s a common problem which companies face from time to time and that it’s not a reason to fight. The team needs to accept the failure and learn from the mistakes.

 

ux designers tubik

 

Useful tips to improve teamwork between departments

 

Difficulties exist so that we could overcome them. Today there are many great digital agencies showing that effective teamwork is possible. Discovering their secrets, we’ve conducted the research on the efficient tips about teamwork and created a list completed with some advice from Tubik experience.

 

Constant communication. To collaborate and understand each other, team members need to communicate. If the team works on the project, every department should know how the things are going. Designers should involve development team on the very first steps explaining their choices. And the development team need to advise designers on the aspects of realization.

 

Learn the craft of the others. Misunderstandings are often the result of ignorance. Designers don’t know about CSS, developers are not aware of design principles and managers know only about management. It’s the worst scenario for the team. If each department learns the basics of the craft of the other departments, they will understand each other.

 

Managers can help. Both design and development teams need to understand that manager is a major link connecting them with the client. Managers know the product team as well as the customers, the reason why they can organize the work in the best way.

 

Respect. It may sound too obvious still many of us underestimate someone else’s job putting our job as the biggest. We need to keep in mind that all the parts of the work are vital and proper combination of them gives the desired outcome.

 

Use the technology to your advance. Modern technology makes our life easier in many aspects and teamwork is not an exception. To make collaboration and communication more productive, team members can use cloud-based platforms such as Slack to communicate faster. Moreover, using tools like Sketch and Zeplin can significantly improve designer-developer relationships because they make the process of assets exchange much easier and faster.

 

Learn the trends. If you’re designer, it doesn’t mean you need to follow only the design news. Read about the web and programming trends and you will find more topics to discuss with the programmers, or even you’ll together come up with the new idea. The same refers to developers.

 

Informal communication. If you want to know the colleague, you need to communicate not only in the office but also somewhere outside. When you learn the personalities, you may be able to collaborate at work more effectively. Besides, friendly atmosphere reduces stress and improves the productivity of the whole team.

 

tubik studio teamwork designers managers

 

Today the summing will be short: working together people can move mountains. So, the effective teamwork leads straight to the success. Stay tuned!

 

Recommended reading

 

Designers And Developers: No Longer A House Divided

5 Pet Peeves Developers Have With Designers (and How to Avoid Them)

5 Pet Peeves Designers Have With Developers (and How to Avoid Them)

Designers and developers collaborate better with these 5 adjustments


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

tubik free podcast design business terms

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

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

 

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

 

 

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