Tag Archives: app design

Articles about UI, UX, graphic design for mobile applications. Design for iOS, usability, interactions, wireframing, animation and user testing.

design for business tubik blog

UX Design for B2B: Businesslike Strategies and Tips.

User experience design for business is getting more and more expressions today. A great diversity of companies make an important decision to come into play and fight for online presence. Various services are now available and executed online. In these conditions, designers working on the projects in this perspective, have to keep in mind the variety of business relations to offer the solutions corresponding the specific client’s goals. Continuing the theme of creating web and mobile products, today we suggest discussing the issues of design for the sphere of B2B services.

 

What is B2B?

 

B2B is the term used in business, marketing and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at the other companies’ business activities. The target audience of the offer is not individual customers but businesses. The nature of relations has a direct impact on business process, strategy, promotion and therefore any design stages involved in this scope. Not going far, if we are talking about outsourced design and development services, they are a direct example of B2B.

 

To get this example deeper, let’s imagine the company which sells physical goods to end consumers, let’s say, casual clothes. They need a website which will provide quite broad functionality for a big amount of users. The stakeholders monitor the market for web services and find out that hiring an outsource company for design and development is cheaper and more convenient for them than creating an in-company department for this purpose. This is the start of B2B relations as a digital agency provides their services for another business — a clothes shop — so that it could start e-commerce activity.

 

People involved in the design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines the target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation which are different from the one presented directly to end users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.

 

Neglecting the aspect of business relations increases the risk of creating the design which will not provide high conversion rate even being sophisticated, stylish and attractive visually. The psychological background behind design solutions has to support a particular business schemes or strategy. Here in Tubik, we have had broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.

 

design for business

 

Aspects to consider in design for B2B

 

Designing for B2B, it’s important to remember that:

— design solutions should consistently strengthen branding and company policy. The quality of design says much to the potential clients which the interface has to attract. A good dress is a card of invitation, a good mind is a letter of recommendation — it worked years ago and it still works now. Quality of design created for a website of B2B service is actually an integral part of their image and therefore profits. Remember, that B2B differs from B2C: the stakes, as well as the expenses, are higher, the number of leads can be limited with the specific nature of services, the decisions about the deal may take weeks and even month before they are agreed upon. The website or app design must present the company or service as highly-professional from the first seconds of the interaction and visual perception.  It should build a reliable bridge between the sides looking for collaboration. That’s why businessmen in this sphere are recommended to involve professional designers into the process while designers have to do their best to understand the business goals and research target audience.

 

— people become more and more open and sociable, not only in personal but also in professional aspects, and social networks present the great ground for that aim. Implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors and graphics, specially designed branded items and the like is one more way to strengthen brand awareness by means of design. Design has to be consistent whenever the B2B company is presented: headers and banners, logos, style of photos in social network account and on the website need to feature the same stylistic approach. In this way, design makes branding more recognizable, comprehensive and solid.

 

— consistent and a thought-out content strategy combining visual and textual material with the careful selection of visuals and copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;

 

— concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. The effective variant of scenario can take place when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Certainly, this solution should be based on thorough user research, but it has a high potential to make user experience positive;

 

— business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making a considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally unacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;

 

— the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to the target audience and are potentially open to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers, in this case, plays not less role than involving them in the game.

ux_design_practices_article

 

Design strategies for B2B

 

The strategies mentioned below may work not only for B2B but for any kind of interfaces aimed at business. Still, in B2B their role in getting profit may be more significant.

 

Get CTA elements seen instantly. Call-to-action buttons should be perfectly visible. Doesn’t it work that way for any kind of website, not only B2B? Yes, you are right. But in B2B the price of a click is much higher while visitors are often horribly busy and don’t tend to spend much time looking for a button on the page. Apply color, shape or orientation contrast, test the most effective placement and think over the copy on it — all that stuff may have a crucial effect on conversion rates.

 

Make value proposition noticeable. Getting to the website, the visitors should immediately understand why it is beneficial to them. Don’t make them search for the reason to cooperate with this B2B service — they won’t do it. Use the catchy slogan or tagline which will express the value proposition briefly and clearly, and take care of its visual performance. Typographic hierarchy will help user’s eye to catch it first, appropriate fonts will add the mood and style to the message.

 

Don’t overwhelm users with information: prioritize content. There is a big temptation for a business to show all its strong sides at maximum. However, it may lead to the website with a huge amount of data which might get the visitor confused, annoyed or frightened. It is especially hard in the cases when visual hierarchy isn’t thought-out and tested properly: the pages risk transforming into a mess which cannot be scanned quickly. So, prioritization is both designer’s and user’s friend here: apply design techniques and layout which will strengthen the visual performance of the core information.

 

Make copy blocks digestible. The debates around the theme of copy blocks are still hot and actual: which copy is better, long or short? Actually, both may be effective. As we mentioned in the article devoted to landing pages, a decision on the amount of copy has to be based on thorough research and testing as it directly and highly influences conversions.  For example, if it presents a famous company product or service or informs about special offers, sometimes short and concise copy is enough to encourage users to buy or know more. However, if a new unknown product or service is presented, it may be important to provide users with more information persuading them to follow the call to action. Whatever is the decision, the copy content should be given in scannable blocks which aren’t too big so that the user didn’t think reading will take too much time. Scanning the blocks allows for faster understanding if the copy brings useful information.

 

Keep core data available from the pre-scroll area. Users usually decide on staying on the website or leaving it very quickly. It is really a matter of minutes or even seconds. That is why all the key information would better be seen in the pre-scroll area, including the value proposition and ability to contact the duty holders. 

 

Activate the power of color psychology. Colors present the great support in sending the right message. Being attentive to target audience’s preferences, designers can select the colors not only on the basis of their nice looks but also color psychology which explains associations people have with colors.

 

Apply catchy visuals sending a message. A picture is worth a thousand words — and that’s not just because it’s more appealing or beautiful but also because in the vast majority of cases, it is perceived faster than words. Moreover, the attractive visual content, be it a photo, illustration or poster may become another source of informing the user about the value proposition provided by the company.

 

Consider promo video content. Promo videos present the popular trend in business schemes now as they enable to inform users about the value propositions and benefits in the fast and original way. However, it may influence the loading speed of the page so this decision needs to be well-weighed.

 

Apply landing pages for special offers. Landing pages allow for focusing user’s attention on the specific information instead of making them search for it around the website. It is especially important is the sales funnel starts out of the website.

 

Don’t forget about the testimonials and signs of trust. Word-of-mouth is the best advertising, especially in the B2B sphere. Making a decision on collaboration, people tend to consider references, testimonials and other signs of trust from the previous clients as positive factors. So, make sure they are available and easily found.

 

Let users contact duty holders from any point of their journey. Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them. 

 

usability_interfaces_ux_design_tubik

 

Hopefully, the mentioned strategies will help not only designers but also entrepreneurs who want to know more about design issues influencing profitability. Soon, we will share more posts devoted to other numerous aspects of design for business.

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics.

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.

11 Profitable Strategies for E-commerce UI Design


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

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

CTA_buttons_design_tips_tubik_blog

Call for Attention. Powerful CTA Button Design.

An effective interaction system of a digital product consists of small elements which have their tasks and functions. To make the sufficient system, it’s vital to pay attention to all the details.

 

Buttons are core interactive components of user interfaces which play a significant role in the quality UX as well as conversion rates of websites and applications. UI buttons vary according to their features and can be divided into different types. A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals. Let’s see what makes CTA buttons stand out from the crowd learning from the best practices.

 

mobile interaction design tubik blog

 

What’s a CTA button and why is it important?

 

A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example purchase, contact, subscribe etc.

 

Traditionally, CTA buttons are easy to notice, even more, designers intentionally create them that way so that people couldn’t resist to clicking it. That’s why they are usually bold buttons containing microcopy with a particular call-to-action (e.g. “Learn more” or “Buy it now”) which encourages us to push it.

 

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

 

ux_design_practices_article

 

This way website visitors and app users can be led through a sales funnel from one stage to another helping them to learn the details about the product or service. Even professionally worked out content may not guarantee the high level of user engagement. Without CTA buttons people are more likely to scan content quickly and just leave it untouched.

 

Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are much more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.

 

choice of color in UI design

 

What makes a powerful CTA button?

 

Size

 

Size is one of the most common tools helping to divide UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

 

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

 

burger_app_ui_animation_tubik

 

Color and shape

 

Visually attractive size is only one aspect of a powerful CTA. To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The thing is that human mood and behavior highly relates to the visual surroundings. Our mind reacts to colors and shapes while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted the influence of different colors and shapes on our consciousness. In our previous articles, we described the role of this impact on the design solution. Here are brief guides on the common meaning which colors and shapes have.

 
Color meanings:
 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 
Shape meanings:
 

  • Squares and rectangles meanings: discipline, strength, courage, security, reliability.
  • Triangles meanings: excitement, risk, danger, balance, stability.
  • Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
  • Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.

 

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

 

dating_app_landing_page_tubik

 

 

Placement

 

The placement of CTA buttons is crucial for their capability. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. But how to understand what placement is more prosperous?

 

Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path.

 

According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is the most common for web pages with big amount of content such as blogs, news platforms. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences.

 

Z-pattern is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right.

 

These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

 

gourmet_herbs_website_design_tubik

 

Microcopy

 

Microcopy plays a significant role for the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

 

bright_vibe_calendar_app_ui_tubik

 

Call-to-action buttons are one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. Designers need to understand the importance of CTAs and pay deep attention to all the details having an impact on their performance. Follow Tubik Blog to get more tips on CTA design.


Welcome to see designs by Tubik on Dribbble and Behance

design_review_tubik_studio

Tubik 2017. Bright Year in a Big Review.

Full of productive work and a wide variety of creative challenges, the year 2017 is almost over. For Tubik it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. And again, we start the new stage of our workflow remembering the most significant points of what has already been done, so today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked the year 2017 for our team.

 

Keeping our active position on Dribbble, we published over 120 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Ten UI shots

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

financial_service_website_tubik

Financial Service Website

 

dating_app_landing_page_tubik

Dating App Landing Page

 

design agency landing page

Digital Agency Landing Page

 

web ui design city guide

Big City Guide

 

home budget app mobile interface

Home Budget App

 

bikers website blog

StarDust Biker Website

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia

 

music streaming app design

BeatSync Music Streaming App

 

Homey app smart home UI

Homey App

 

Top Twenty Animated shots

 

watering_tracker_app_ui_tubik

Watering Tracker App

 

jewellery ecommerce app

Jewellery E-commerce App

 

loading_animation_iphonex_tubik

Loading Animation for iPhoneX

 

home budget web interface

Home Budget Dashboard Animation

 

burger_app_ui_animation_tubik

Tasty Burger App

 

californication_bus_animation_tubik

Californication Bus Animation

 

dance academy landing page animation

Dance Academy Landing Page

 

cinema app interaction UI

Cinema App

 

upper_app_ui_design_tubik_studio

Upper App

 

Upper App Animation

Upper App Landing Animation

 

business_card_app_animation_tubik

Business Card App

 

gourmet_website_interactions_tubik

The Gourmet Website

 

bookshop website animation

Bookshop Website

 

car app interface

Car Stats Animation

 

mood messenger landing page

Mood Messenger Landing Page

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

navigation_in_ui_animation_tubik

Navigation in UI

 

mobile_game_interactions_tubik

Mobile Game Interactions

 

tubik_photo_app

Photo App Interactions

 

menu_interactions_ui_animation_tubik

Menu Interactions Concept

 

Top Ten Illustration shots

 

design_party_graphic_design_tubik

Design Party

 

star_wars_stickers_fanart_tubik

Star Wars Fan Art Stickers

 

creative_ux_design_illustration_tubik

Creative UX

 

halloween_pumpkin_animation_tubik

Creative Pumpkin

 

opera video animation case study

Opera Video: Summer Heat Illustration

 

illustration_design_in_progress_tubik

Design in Progress

 

add_color_illustration_tubik

Add the Color

 

building_ui_illustration_tubik

Building UI

 

business_graphic_design_tubik

Business Teamwork

 

golden_ratio_ui_design_illustration_tubik

Golden Ratio in UI Design

 

Top Five Branding Shots

 

binned logo animation design

Binned Logo Animation

 

logo_animation_tubik_design

Whizzly Logo Animation

 

brand identity design case study

Reborn Business Cards

 

lunnscape_branding_case_study_tubik

LunnScape Branding

 

forcecop_logo_design_tubik

ForceCop Logo

 

Top 5 tubik.arts shots

 

tubik_arts_character_animation_hagrid

Character Animation: Rubeus Hagrid

 

tubik_arts_flickids_pirates_character_animation

Character Animation: Flickids Pirates

 

tubik_arts_orks_vs_aliens_nagari_cg_design

Character Design: Sorceress Nagari

 

tubik_arts_orks_vs_aliens_nazmordul_illustration

Character Design: Orc Nazmordul

 

tubik_arts_thorin_character_illustration

Character Design: Thorin Oakenshield

 

Top Ten Articles in Tubik Blog

 

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Here’s the top ten of them (the extended list of the most popular articles can be found here).

 

Psychology in Design. Principles Helping to Understand Users: the post about general principles of psychology which can help designers know users better and create user-friendly web and mobile interfaces.

 

Best Practices for Website Header Design: the set of insights on the definition, structure, and composition of a website header as a strategic part of the website with a variety of examples and approaches.

 

UI/UX Design Glossary. Navigation Elements: another set of UI/UX Design Glossary, explaining terms in the field of user interface design. Focused on navigation elements: buttons, menus, switches, icons etc.

 

Color Theory: Brief Guide For Designers: the article concentrated on the basics of color theory and color combinations in design. Learn more about the color wheel, RGB, CMYK and models of color harmony.

 

Color in Design: Influence on Users’ Actions: considerations devoted to the issue of using various colors in user interfaces and branding design, associations and the influence of color choice on user behavior.

 

Mobile UI Design: 15 Basic Types of Screens: mobile applications evolve with user’s needs offering new functionality, still, there are screens common for many apps and they are the focus of this article.

 

Gestalt Theory for Efficient UX: Principle of Similarity: the article considering Gestalt theory application in interface design: this time it’s focused on similarity principle of effective content grouping in UI.

 

Gestalt Theory for UX Design: Principle of Proximity: the second post in the series devoted to applying Gestalt principles in design of user-friendly web and mobile interfaces, today about the principle of proximity.

 

How Human Memory Works: Tips for UX Designers: insights into the ways human memory works and the factors of its influence on UX design solutions for websites and mobile apps.

 

Information Architecture. Basics for Designers: the article providing insights into the basics of information architecture for designers and setting the link between IA, UX and UI for websites and applications.

 

most popular design articles in tubik blog

 

Top Six Tubik News

 

Upper App Launch

 

At the beginning of 2017, following the successful launch of Toonie Alarm, Tubik team we rolled out another iOS application for everyday use called Upper App. It is a simple and elegant to-do list designed in minimalistic manned and aimed at easy task tracking. The application got itself the App of the Day on Product Hunt and once again allowed us to go through all the process from the initial idea of the product to branding, design, development and marketing of our own product. No doubt, this kind of experience was highly helpful for our work on outsourcing project.

 

upper app UI design case study

 

tubik.arts launch

 

One more big news was establishing tubik.arts department focused on creating CG, characters and environment for various games, book illustrations and complex motion design.

 

tubik_arts_cg_orc_nazmordul_animation

 

Behance Portfolio Reviews

 

In 2017 Tubik hosted Behance Portfolio Reviews events twice in Dnipro, Ukraine. These creative meetups let the local design community get one more platform for communication on professional issues and allowed novice designers to get useful tips and recommendations from experts.

 

behance portfolio reviews

behance portfolio reviews dnipro

behance portfolio reviews dnipro tubik

 

Full Cycle for Product Creation

 

This year our team has grown to add not only the designers but also web and mobile developers, therefore the range of services which we can offer to our clients has broadened significantly. At the moment we are able to accomplish the creation of any digital product from scratch. Research, branding, graphic design, UI/UX design, motion design and video production, iOS, front-end and back-end development as well as copywriting for slogans and brand names — in 2017 we successfully dealt with all those positions and even more custom ones.

 

Tubik Academy

 

The year has also been marked with the first group of UI/UX designers who have completed the intensive course of UI/UX design in Tubik Academy — and two of them are already going through their internship in the studio.

 

tubik academy ui ux designers

 

Problem-Solving Web Design — Free Ebook

 

In 2017 we shared one more issue of Tubik Magazine: a free ebook Problem-Solving Web Design devoted to design of user-friendly and goal-oriented websites and landing pages.

 

problem solving web design free book

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. And as usual, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora at which we got the positions of top writers in the domains devoted to design. Also, we kept everyone updated with studio news via TwitterFacebookTumblr and Flipboard.

 

new year tubik studio team

 

Even this quite concise review makes obvious that 2017 was full of everything for us. And we are ready for new challenges, perspectives and projects which will definitely open many new unforgettable creative pages.

Warm greetings for everyone from the Tubik team, we wish you the amazing and successful year 2018!


Welcome to read the Review of Popular Interface Design Trends in 2017

most popular design articles in tubik blog

20 Most-Read Design Articles by Tubik in 2017

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Striking the balance of 2017, today we have collected here the list of posts which were most-read, shared and liked during the year. They are devoted to the variety of design issues in the domains of UI and UX, information architecture, logo and branding, design for business and marketing. So, welcome to review them together to check what themes have been found the most actual.

 

home page design article

 

20 most popular articles

 

Psychology in Design. Principles Helping to Understand Users: the post about general principles of psychology which can help designers know users better and create user-friendly web and mobile interfaces.

 

Best Practices for Website Header Design: the set of insights on the definition, structure, and composition of a website header as a strategic part of the website with a variety of examples and approaches.

 

UI/UX Design Glossary. Navigation Elements: another set of UI/UX Design Glossary, explaining terms in the field of user interface design. Focused on navigation elements: buttons, menus, switches, icons etc.

 

Color Theory: Brief Guide For Designers: the article concentrated on the basics of color theory and color combinations in design. Learn more about the color wheel, RGB, CMYK and models of color harmony.

 

Color in Design: Influence on Users’ Actions: considerations devoted to the issue of using various colors in user interfaces and branding design, associations and the influence of color choice on user behavior.

 

Mobile UI Design: 15 Basic Types of Screens: mobile applications evolve with user’s needs offering new functionality, still, there are screens common for many apps and they are the focus of this article.

 

Gestalt Theory for Efficient UX: Principle of Similarity: the article considering Gestalt theory application in interface design: this time it’s focused on similarity principle of effective content grouping in UI.

 

Gestalt Theory for UX Design: Principle of Proximity: the second post in the series devoted to applying Gestalt principles in design of user-friendly web and mobile interfaces, today about the principle of proximity.

 

How Human Memory Works: Tips for UX Designers: insights into the ways human memory works and the factors of its influence on UX design solutions for websites and mobile apps.

 

Information Architecture. Basics for Designers: the article providing insights into the basics of information architecture for designers and setting the link between IA, UX and UI for websites and applications.

 

Tips on Applying Copy Content in User Interfaces: considerations on some essential points on the effective use of text in web and mobile user interfaces: visual hierarchy principles for copy content.

 

Gamification in UX. Increasing User Engagement: the post is centered on the aspect of gamification applied to mobile applications and websites for engaging UX design and user-friendly interactions.

 

Typography in UI: Guide for Beginners: In design, every layout element plays its role. This post presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.

 

Case Study: Upper App. UI Design for To-Do List: the case study about UI design created by the Tubik team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.

 

Case Study: Vinny’s Bakery. UI Design for E-Commerce: the design case study that looks and feels tasty: check the details of UI/UX and animation for a website presenting a small elite bakery selling home-made bread.

 

Lean and Mean: Power of Minimalism in UI Design: dive into cases when less is more: the definition, history, features and benefits of minimalism applied in UI design for websites and mobile applications.

 

Knock Design into Shape. Psychology of Shapes: the psychology of shapes is helpful for creating user-friendly interfaces. The post features the meanings of different shapes and their influence on design solutions.

 

UX Design for E-Commerce: Principles and Strategies: the general insights on design for e-commerce websites and mobile applications in business, UX and UI perspectives: tips and strategies to consider.

 

Feel Homey. Handy Tips for Home Page Design: the set of effective tips enhancing usability of home pages for various websites. Check the design strategies for information, interaction and appearance.

 

Golden Ratio. Bring Balance in UI Design: The article devoted to golden ratio as an effective technique for web and mobile user interfaces: check how it brings balance and aesthetics into UI design.

 

Bonus: Free ebook and the review of 2017 design trends

 

Problem-Solving Web Design. Free E-Book by Tubik: the free e-book by the Tubik team presents the overview of theory, practices and design cases for user-friendly websites and landing pages.

 

Review of Popular Interface Design Trends in 2017 — traditional year-in-review post observing the most popular trends of 2017 in user interface design for websites and mobile applications: UX approaches and examples.

 

most popular design articles in tubik blog

 

Wishing you great holidays and productive new year, we are already working over a new plan to write content which is helpful and useful for the global design community. Huge thanks to all our readers for support and loyalty and best regards from all the Tubik team!


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

design trends review tubik blog

Review of Popular Interface Design Trends in 2017

The new year 2018 is closer and closer, so stepping into a phase of fresh challenges and new horizons, we would like to look back and remember what the ending year has been marked out with. Here we’ve gathered the collection of trends which won the big place in web and mobile interfaces of 2017 supporting most of them by designs from Tubik team.

 

Functional minimalism

 

Quite a big number of mobile applications and websites continued and evolved design solutions based on the principles of minimalism. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message.

 

Major features often mentioned in terms of minimalism approach 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 appears to be a user-friendly trend. Applied wisely, it helps 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.

 

UI animation wine app

 

Brutalism

 

The trend of brutalism in digital design started rocketing last year and got even brighter expressions in 2017. It is often described as a style that aims at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. In contrast, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to a plain HTML page. Being used thoughtfully for the appropriate goals and audience, it features the high level of originality and gives the unique look to a digital product. It may be liked or disliked, but it is never left unnoticed.

 

Typography integrated into images

 

Bold and catchy typography also kept its high presence both in web and mobile layouts. This year it got a new breath with a widely spread technique of cutting or inscribing the title keyword or a headline into the visual elements on the page. The approach strengthens the harmonic integrity of the layout elements and makes typography felt tightly united with everything in the interface.

 

web ui design city guide

 

Animated hero banners

 

In web design, hero banners are big images catching user’s attention in the first seconds of interaction with a website. They usually contribute much to the attractive visual presentation of the main content. Hero banners proved themselves as highly effective in setting the mood or transferring the message. Moreover, as well as any other striking graphics on web pages, this is a kind of content which is both informative and emotionally appealing. Prominent hero banners can satisfy multiple goals such as:

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

 

This year they were often strengthened with original animation breathing life into images and making them even more engaging.

 

dance academy landing page animation

 

Custom theme illustrations

 

Accomplished in different styles and complexity level, custom illustrations are actively covering more and more space on web and mobile UI, adding the quick perception of the information and setting the solid ground for originality. Web and mobile interfaces apply custom mascotsicons and  illustrations to enhance the looks of a page or screen as well as boost usability and intuitive navigation. In addition, images improve the accessibility of UX design pushing the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

The highest diversity here, perhaps, was featured in theme illustrations supporting websites and apps. They appeared to move to the next level, becoming more complex, sophisticated, stylish, and metaphorical.

 

financial_service_website_tubik

 

Unframed layout

 

Big background images or patterns without any frames have been observed quite frequently in the web interfaces this year. It allowed users to feel the layouts more airy and spacious while the background image deeper and stronger not breaking the interaction with the feeling of boundaries or limits.

 

Big City Guide tubik

 

Variety of interface animation

 

As well as in the previous year, 2017 didn’t experience any loss in the issue of interface animation. Not only does it add life and motion to the interaction process but also significantly improves usability. User experience becomes more informative and engaging while manipulations with the elements of interaction get more clear and respond to the user in an understandable way. So, this year designers worked well on a variety of buttons, tabs, charts, preloaders and scroll animations.

 

watering_tracker_app_ui_tubik

 

UI-friendly branding

 

2017 could be definitely mentioned as the year of rebranding: a big number of global and local companies, products and brands changed their logos mostly towards simplification of forms and details. One of the reasons for the trend was striving for better usability and navigability of brand elements as more and more businesses competed for the higher online presence. So, both new and redesigned logos were created to be more UI-friendly and effectively perceived on a variety of digital devices and layouts. Furthermore, animated logos became a trend making symbols more interactive and strengthening brand awareness.

 

logo_animation_tubik_design

 

 

 

 

Monochrome UI

 

Growing interest in minimalistic design for maximum functionality resulted in a considerable presence of monochrome UI solutions. These layouts usually look stylish, harmonic and non-distractive. However, designers have to invest much time and effort to make them not boring while the core elements of interaction instantly visible.

 

jewellery ecommerce app UI

 

Progress of dark backgrounds

 

Mobile and web interfaces applying color palette with dark background have not only saved but also grown their presence. In particular, they are often applied in the digital products based on visuals rather than copy. Dark backgrounds are traditionally associated with grace and prestige, they deepen the perception of images and can make the interface less contrast and more natural to see in different environments. Moreover, this approach now corresponds to preferences and expectations for quite a broad target audience who like this style.

 

cinema app interaction UI

 

Light space for copy

 

Another trend got especially popular for interfaces based on the dark background scheme. It featured one more approach to proper readability in them which is often the issue of debates: applying boxes or spaces with light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page.

 

watering tracker app design tubik

 

Sophistication and contrast in fonts choice

 

With numerous new fonts created around, user interface designers have a broad field for creative experiments. Today typography is seen as not just the means of communication and sending a message to the user but also the integral part of all the design concept. So, professionals pay much attention to the choice and combination of fonts. This year we experienced new approaches to setting contrast with serif and sans-serif fonts making them work for strong visual hierarchy and appealing beauty of the interface.

 

web design UI tubik studio

 

Experiments with grids

 

With over a billion of websites coming into play, designers have to be more and more creative to make them both attractive and original. So, experiments with grid also won their place in the list of general design trends of the leaving year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of creativity requires thorough research while the effective result often comes via several iterations tested and analyzed in terms of usability and visual perception.

 

Variety of landing pages

 

No doubt, this year landing pages have witnessed the new lap of their development and diversity. Businesses and social projects tend to use them regularly for effective presentation of special services, sales, offers or issues striving for focused user’s attention. Landing pages also have proved themselves as an effective method of promotion for native mobile apps. Based on user and market research as well as testing, they can be defined as a user-friendly trend, providing necessary information and interactions in clear and accessible way saving users’ time and effort. From the business perspective, they also work well, giving companies the flexible tool for original and effective communication with better targeting.

 

design agency landing page

 

Creative parallax

 

With more accessible and improved tools for motion design,  scroll animation saved its positions of broadly applied technique both for in web and mobile. Creative and original parallax enhances scrolling experience making it natural for human eye and adding grace for such a basic operation.

mood messenger landing page

 

Promo videos for web marketing

 

Different types of promotional videos were boosted to appear on screens and pages. No wonder as they serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and enhances them with a power of storytelling. All the mentioned factors tend to make the presentation via video strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, videos have become the way of communication which is dynamic, informative and attractive. However, the issue of loading speed for a webpage moves forward and should be tested carefully for on different devices.

 

 

Gamification mechanics supporting UX

 

This year has witnessed growing interest to gamification applied in a variety of interfaces, not only for entertainment but also for utilities and business products. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. Challenges, rewards, points, badges, leaderboards and other stuff of this kind help designers to think over the ways of effective user motivation and retaining.

 

upper app UI design case study

 

Boxes and cards as layout elements

 

One more trend in UX design of 2017 moved around the diversity of cards and boxes in web and mobile layouts. They played their essential role in setting visual hierarchy and making the pieces of information quickly scannable. Moreover, they successfully contributed to the general harmony and shapeliness of a page or screen. 

 

bikers website blog

 

Geometric elements as a part of style

 

Supporting the previous trend, geometry vibes got featured in many interfaces this year. Variety of simple and complex shapes, patterns, lines and curves has been found in numerous design solutions on both traditional and innovative combinations.

 

wedding_theme_website_ui_design_tubik

 

Experimental color palettes and combinations

 

The trend of color probes hasn’t lost its popularity, bringing out new original combinations. No wonder, color is one of the most powerful ways to add quickly perceived message and mood to an interface as well as make its looks original and attractive. Anyway, effective color experiments are not just pure creativity: even the most creative and surprising combinations are based on the knowledge of color theory, color psychology and virtuosity of user interface designers. 

 

book swap app interaction design

 

No Lorem Ipsum

 

This year has continued the increasing attention to content quality and performance. In user interfaces, content and design and interconnected: creators have to make them successfully support each other instead of fight for users’ attention. That’s why today more and more designers prefer real content instead of well-known Lorem Ipsum, even in cases of initial ideation for design concepts. It gets designers, clients and content makers closer to real experience and natural feel of interactions.

 

dating_app_landing_page_tubik

 

No doubt, 2017 was the year of diversity in interface design — and this can be called one of the most user-friendly trends. Every day millions of users, having different tastes and preferences, various favorite styles and characters, particular feelings of what is comfortable and looks nice for them, use simple and complex apps and websites as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless global community of technology users will get to find the one which fits their specific needs and wishes. Anyway, soon we’ll see what the next year will bring out and what new creative challenges it will set for UX designers.


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

watering tracker app design tubik

Case Study: Watering Tracker. UI Design for Home Needs.

In all the diversity of applications fulfilling different personal, social and business needs, the special place will always belong to the ones that become our everyday helpers in sometimes basic but necessary operations. Calendars, calculators, to-do lists or fitness timers, apps saving our menus and reminding to take medicine along the schedule — all this simple stuff makes users’ lives much easier. The apps of this kind increase productivity as well as save time and effort for multiple challenges life prepares for us on a daily basis. Designers creating such interfaces become a sort of magicians activating problem-solving potential of modern technology. Today we would like to share a new design case study telling about that kind of UI: welcome to check the creative flow for Watering Tracker App.

 

Project

 

User interface and interaction design for an iOS application tracking plants watering.

 

Process

 

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

 

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

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

 

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

 

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

— adding plants to the app

— reminders and notifications about watering

— getting information and recommendations about conditions and care for particular kinds of plants

— tracking stats of watering and plans for next week.

 

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

 

water_tracking_application_ui_tubik

 

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items which were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

 

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

 

watering tracker interaction design

 

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. «My Plants» opens the directory of the ones tracked for watering, «Add New» allows to create a new item and «My Profile» goes to all the history and stats data.

 

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

 

watering tracker app interactions

 

Here’s the animation showing the interactions described above.

 

watering_tracker_app_interactions_tubik

 

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

 

— the name and the background picture of the plant in the upper part of the screen,

— the interactive zone with the tabs of other plants ready for watering,

— the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

 

watering tracker UI design

 

The interactive zone with the tabs of other plants ready for watering can also be extended. In this case, it opens the graph showing the progress  — aka watering workload — for the current week.  This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides high readability level and contributes much to the effective visual hierarchy of the layout.

 

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

 

watering tracker user interface design

 

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

 

watering_tracker_app_ui_tubik

 

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks,  landscape firms and services — all those who are in charge of taking care of plants and supporting the beauty of nature around us.

 

watering tracker app design tubik

 

Recommended reading

 

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

 

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

mobile interaction design tubik blog

7 Tips to Enhance Mobile Interactions

The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it.

 

Mobile apps are expected to be clear and easy to operate so that they could be effectively used anytime and anyplace. Designers’ task is to create an intuitive interface which will guide users within the app helping them operate its functionality without problems. In this article, we describe the essential aspects of the effective mobile interaction system along with the tips helping designers to create intuitive design.

UI navigation elements

 

Increase learnability

 

Every designer strives at creating a unique product with original interactions and navigation systems. Such an approach allows standing out a crowd and being noticeable on the market. However, creating absolutely new environment designers have to think how users will adjust to it.

 

If the interaction system of a mobile application has no logic and sequence or it doesn’t respond to needs of the target audience, it may be frustrating and annoying. That condition is critical for UX, so people will simply give up on trying to decipher an app and quit it.

 

To avoid this kind of outcome, designers need to care about learnability of the interactive elements. Learnability stands for how easy tasks can be attained during the first usage and how quickly users learn from the previous experience. To increase learnability, designers need to keep it simple and clear helping quickly adjust to it. Also, the system should be consistent and logical so that users could identify the repeating patterns and use a mobile app intuitively.

 

Consider multiple holds

 

We all are different in many ways, even how we hold smartphones. The way of holding smartphones depends on various factors including the situation and conditions in which the app is used as well as the task we need to accomplish.

 

There are three common types of holding a mobile. The first is when we take it with one hand and navigate it with a thumb. Another way is to hold a smartphone in one hand and interact with it with the forefinger of the other hand. Also, the type which is common for chatting people is holding a phone in two hands using both thumbs for actions. Of course, there are other types of holds but these three are thought to be the most common.

 

interaction_models_mobile_interfaces

Source

 

thumb-zone-mapping_UI_design

Source

 

Considering this fact, designers have to figure out if the layout elements placed effectively for different holds. One-handed hold requires special attention since it has the most limited space of reach. To make the interaction process within a mobile app effortless it may be a good idea to put the key components at the bottom of the screen so that users would be able to reach tap areas easily. In addition, the interactive elements should be big enough so there would be no chance for a mistap.

 

user motivation design

 

Apply recognition patterns

 

When a new app can be used intuitively it means that the designer did a good job. To provide intuitive interactions, UI design has to contain recognition patterns. They are the elements which users are already familiar with and those which give slight hints on how an app works. The thing is that using an application we are expecting to see certain things associated with the definite kind of product. For example, working with e-commerce apps we are used to seeing cart icons along with CTA buttons “Buy”. Familiar elements in a new app make people feel more confident in their actions.

 

Users become accustomed to things quickly and their absence makes them feel uncomfortable. That’s why, if you plan to use custom interactive elements, don’t forget to add some standard components. This way a new application won’t overwhelm with an absolutely unfamiliar environment and will help to learn quickly.

 

ux design for ecommerce tubik blog

 

Make a clean UI

 

A big pitfall of mobile UI design is small screens of the devices. Designers have to figure out how to include all content in a short space without turning user interface into clutter. Clean UI design helps effectively interact with a product since all the core elements can be easily reached.

 

To create neat mobile UI it is recommended to use icons as interactive components. Copy elements often can be too big for the small screen, so icons are a sufficient alternative. They can explain a function visualizing it with simple shapes and it helps to save the space on the screen. However, during usability testing, it should be thoroughly checked if the icons are perceived appropriately and transfer the right message.

 

Decrease the number of actions

 

Probably, many of us have the experience of using an annoying mobile app which made us take a long way before we could finally accomplish the task. It may often be caused by ineffective interaction system which employs too many actions and the unnecessary functionality.

 

Mobile apps usually serve as problem-solving assistants, so it’s vital for them to be designed ergonomically. It means that designers have to apply only core functional elements which will get the users right to the point they needed. Minimum of actions won’t make your product look primitive. It will help a mobile app be effective and pleasing in usage. Remember that people mostly rate the quality of an application not by extraordinary features but how helpful it is.

 

tubik_photo_app

 

Add game mechanics

 

Based on the facts described above, we can say that an effective mobile interaction system should be simple and clear to use so that it could be operated without problems.

 

However, simplifying the interface it’s vital not make it boring. Apps which seem ordinary have fewer chances to gain users’ attention. That’s why it’s important to bring some emotional aspects into applications that look standard at the first glance.

 

To make the process interesting and catchy, it may be a good idea to use gamification. It is the technique of exerting game mechanics into the non-game environment like mobile applications. Various challenges and leaderboards along with the awards and stickers motivate users to interact with a product more and come back to it constantly.

 

What’s more, implementing a game mechanic called a user journey is an effective way to create clear layout and transitions. A journey is user’s progression stages at the time of usage. Designers create UX that way so that people could go step-by-step through the various features which gradually change depending on needs of the target audience. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Last but not least, gamification adds the element of fun. Users enjoy entertainment, challenges, and competitive spirit similar to video games, so they are encouraged to go back. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual application, you help to reduce some stress and relax for a moment.

 

toonie alarm UI design

 

Don’t forget about testing

 

Mobile interaction design aims at creating a user-friendly product which will be pleasant to use under different circumstances. But how can a designer define if an app is usable enough and distinguish possible problems in UX? This is when usability testing comes into play.

 

Usability testing is an essential stage in creating mobile apps helping to evaluate it by testing on the potential audience. It is usually conducted at the UX building stage before a project goes to the development team so that inefficient solutions could be changed easier and faster.

 

Various usability testing methods allow identifying problems and bugs and quickly eliminate them. This way designers can improve all the aspects of UX ensuring user satisfaction.

 

So, before you deliver a project to the development team remember to handle testing. Test it by yourself, on your colleagues, on the potential users and then you’ll get the desired outcome.

 

choice of color in UI design

 

A simple mobile interaction system is not that easy to create. It requires hard work, concentration and lots of practice before you receive sufficient results. Stay tuned!

 

Recommended reading

 

Take It Easy: Tips for Effort-Saving User Interfaces.

Gamification in UX. Increasing User Engagement.

Color Matters. 6 Tips on Choosing UI Colors.

Mobile Typography: 8 Steps Toward Powerful UI.

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

Tests Go First. Usability Testing in Design.

Gamification Mechanics in UX: Smart User Journey.

Mobile UI Design: 15 Basic Types of Screens.


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

fitness_app_ui_design_article

Keep Fit. UI Design for Fitness Apps.

A professional athlete Billie Jean King once said: “Sports teaches you character, it teaches you to play by the rules, it teaches you to know what it feels like to win and lose — it teaches you about life.” Sports has become a part of our routine a long time ago. Even more, today a healthy lifestyle is a top trend which constantly grows its popularity across the world.

 

Fitness apps are the key helpers for people who strive to get fit. Their functionality gives a lot of opportunities and makes keeping fit easier. Understanding the significant impact of these applications on users’ everyday life, designers do their best to activate the problem-solving potential of fitness apps. Today’s article describes common screens and essential UI elements for fitness apps.

 

sport app motion ui tubik studio

Sports App Interactions

 

Sign-in and profile screen

 

Fitness app is something like a pocket instructor telling you what to do and gives a feedback on your achievements. To make it more comfortable and personalized, designers need to create an effective profile UI.

 

Before users obtain their profiles they usually go through the sign-in process. Fitness apps, as well as the other ones, can allow logging in via social networks still there are some aspects which users have to fill in to create a personalized profile. The applications usually require the personal data including age, gender, weight, and height which helps to define users’ physical condition. Profile creation is often similar to filling in an application form. This way users can easily provide the needed information to make a profile more personalized.

 

The major objective of a fitness app is to help users in their self-improvement, the reason why profiles should contain not only the personal data but also the user’s achievements such as the number of burnt calories or personal records in sports. It’s important to not to overload the profile screen with the unnecessary information otherwise user interface may look chaotic.

 

Home screen

 

It’s a core element for any type of apps. Home screens serve as the main point where users start the journey within a product. Creating UI for home screen designers need to think of it as a center of navigation and make sure users will be able to operate it easily. 

 

First of all, home screen should provide access to the other parts of the app. Designers can choose various ways of the presentation from a sidebar with minimalistic icons to the clickable subheaders leading to the different sections of app content. The choice often depends on the number of features provided by the product as well as the platform which it is meant for.

 

Activity screen

 

People who aim at getting fit always have to do various physical activities. Fitness apps provide users with the feature which helps to track how active they are during a day. To make a sufficient UI for activity screen, designers include different kinds of activities and sports. Traditionally, fitness apps provide tracking time spent on sports as well as measuring the distance which users cover during a day. The distance can be calculated in two ways: walking is measured by the number of steps and running is usually measured in miles (kilometers).

 

The information about users’ activity is often presented via diagrams of various forms. Such presentation contributes the effective visual perception of the data which includes many numerals. Also, designers often apply custom icons representing each kind of activity. This way the screen looks clean and neat even if users have a really active life.

 

fitness_app_ui_landscape_tubik

Fitness App

 

Heart rate screen

 

The heart is an engine which lets our body live and function, so it’s important to follow its condition daily. Many fitness apps can be connected to the various devices such as fitness wearables which allow measuring pulse. The applications usually transfer the data gathered with devices on a heart rate screen.

 

User interface representing the feature should be simple with the minimum of elements so that it could be easily operated. Since the process of pulse measuring takes some time it may be a good idea to supply the UI with sufficient animation which will show the loading process. For example, motion designers can animate an illustration of the heart showing it beats. Custom illustrations along with motion design can make UI look more proficient and make the process of the pulse measuring more interactive.

 

Sleep tracking screen

 

Nice sleep is a guarantee of the human health. Sportspeople know it better than anyone else and always try to control the time and quality of their sleep. Fitness apps show the gathered information during a night which includes the time and stages of sleep. There are four stages of sleep: the first and the second are called light sleep, the third is deep sleep and the fourth is rem sleep. The applications track these stages and in the morning users can see the statistics. The data on sleep is often shown as graphs.

 

Calories screen

 

They say that fitness people are obsessed with calories. Well, there is truth in the words because if you want to get fit it’s vital to control what and how much you eat. As we said above, fitness applications show the information on the number of burnt calories based on the activity results. The calories data can be displayed on the activity screen as well as on the personal profile. However, it may be an effective solution to create a separate screen to provide users with the expanded information on the lost calories.

 

Sport app UI design

Sports App

 

Progress screen

 

To stay motivated and continue self-improvement, it’s important to know that the hard work gives results. The progress screen shows the statistics about users achievements along with failures. Here the graphs will be the best choice. If people have the progress, they see that their results are getting better and the scales on the graphs go higher.

 

Schedule screen

 

There can be many sports activities in different time and different places so the schedule seems to be essential in this situation. The screen of schedule is standardized, but to make it unique and original, designers can add some interesting icons representing various sports directions.

 

Goals screen

 

Goals move us to achieve more and more, especially if we talk about fitness. People start doing sport because they have some goals like losing weight or shaping up. In fitness applications, users set maybe a bit less radical goals but easier to achieve on a regular basis. They often include walking a certain number of steps per day or week along with burning the fixed amount of calories.

 

The screen of goals can be presented as a sheet divided into categories: to do, doing, done. This way users will see how much they have managed to achieve and what they need to strive for. In addition, designers can settle the system of awards which will help users be even more motivated. We’ve already described awards as effective gamification tools which contribute increasing user engagement. You can find detailed info in our previous articles.

 

tubik_studio_bebright_app

BeBright App

 

The sport requires persistence and fortitude and so does the creation of sufficient UI design. Learn the basics, add some inspiration and you can surprise yourself. Stay tuned!

 

Recommended reading

 

If you want to learn more about common screens for various mobile apps, here is the list of helpful articles revealing tips on mobile UI design and its components.

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

 

fitness_app_ui_design_article


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

tips on visual hierarchy in design

9 Effective Tips on Visual Hierarchy

Sufficient visual hierarchy is a foundation of a successful digital product. It helps to organize UI elements in an effective way so that content would be easy to comprehend and pleasant to see. The presentation of visual elements has a great impact on user experience. If the components are organized wisely, users navigate and interact with a product without efforts and enjoy the process.

 

So, what makes powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating the compelling visual hierarchy for web and mobile products.

 

Keep business goals in mind

 

There are often business goals standing behind a digital product. To achieve them, creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out the crowd.

 

design agency landing page

Design Agency Landing Page

 

Consider scanning patterns

 

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

 

F-pattern appears mainly on digital pages or screens with the big amount of content such as blogs, news platforms etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

 

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

 

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

 

Functionality first

 

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider functions of UI elements and a role they play in the navigation process.

 

landing page UI design tubik studio

Seafood Recipes Landing Page

 

White space is a visual element

 

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create the effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating visual hierarchy so designers need to work on its balanced usage.

 

landing page web design

Colony Landing Page

 

Apply the golden ratio

 

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

 

Designers often apply golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

 

golden ratio in ui design

Tracking Widget

 

Use a grid

 

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

 

Add some colors

 

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

 

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a red color for purchase buttons so that people could intuitively find them when they need.

 

financial_service_website_tubik

Financial Service Website

 

Pay attention to the fonts

 

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

 

Three levels for web, two for mobile

 

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via relatively small type.

 

In many cases, web products include all three levels since they are more likely to provide the big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

 

UI animation wine app

WineYard App

 

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

 

Useful articles

 

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

 

Visual Hierarchy: Effective UI Content Organization.

Golden Ratio. Bring Balance in UI Design.

Take It Easy: Tips for Effort-Saving User Interfaces.

Tips on Applying Copy Content in User Interfaces

Information Architecture. Basics for Designers.

Typography in UI: Guide for Beginners.

 


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

psychology of shapes in design tubik article

Knock Design into Shape. Psychology of Shapes.

The success of any visual composition highly relates to how people perceive it. There are many factors influencing human perception and the significant part goes to psychology. In one of our articles, we’ve already discussed the role of psychological principles in design and described how useful they can be on the way to understanding users.

 

The aspect which we want to cover in today’s article is called the psychology of shapes. Let’s see what this direction studies and how it can help designers in the creative process.

 

Psychology of shapes

 

All the visual objects can be analyzed in terms of shape. For example, an average house may be perceived as a rectangle with a triangle on the top and the sun is often presented like a circle with lines around it. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. The science studying the influence of shapes on people is known as the psychology of shapes.

 

The study claims that each shape has its own meaning and influences our mind and reactions differently. There are many psychological tests which are used to define the personality or mental condition via shapes. For example, a favorite figure can tell about person’s character traits, a quickly chosen shape can show what’s on the mind.

 

Many years of research and tests have helped professionals to define what meaning each shape typically brings and how it can influence human perception. Let’s take a closer look.

 

animated tutorial

Social network tutorial animation

 

Geometric shapes meaning

 

Hearing the word shape most people think about geometric figures first. There are plenty of geometric shapes which people see daily including squares, circles, rectangles and others. But what do they mean? Let’s see.

 

Squares and Rectangles

 

These two shapes are thought to be the most commonly used. We see them many and many times per a day. The walls and furniture, books or monitors, cell phones and cameras as well as many other everyday things have square or rectangular shape. Straight lines and right angles of these two shapes give a sense of reliability and security. People strongly associate squares and rectangles with buildings the reason why they bring the feeling of trust and authority.

 

Common meanings:

  • discipline
  • strength
  • courage
  • security
  • reliability

 

tubik_photo_app

Photo App

 

Triangles

Triangle is an energetic and dynamic shape which is always associated with motion and direction. The lines are placed that way so our eyes automatically move to the top of a triangle or in the direction it is placed. Triangles can have different meanings. An upright triangle brings the feelings of stability and balance but the reversed one looks risky and ready to fall giving people a sense of tense.

 

Common meanings:

  • excitement
  • risk
  • danger
  • balance
  • stability

 

Circles, ovals, and ellipses

 

The first and foremost meaning of this shape is the eternity since they have no beginning or end. The circle has a long association with the sun and Earth as well as other cosmic objects while ellipse is similar to the whole universe. That’s why round shapes may give the feeling of magic and mystery. In addition, unlike the previous shapes circles don’t have angles so it makes them softer and milder.

 

Common meanings:

  • eternity
  • female
  • universe
  • magic
  • mystery

 

tubik_art_courses_app

Art Courses App

 

Spirals

 

These shapes can be often seen in nature, for example, shells and some flowers, the reason why it’s often associated with the circle of life and growth. Also, in some cultures, spirals may represent the knowledge or information. In modern society, they are seen as a sign of creativity and a fresh mind.

 

Common meanings:

  • growth
  • creativity
  • calmness
  • intelligence

 

Big City Guide Madrid tubik

Big City Guide

 

Natural shapes meaning

 

All the things created by mother nature have their unique shape. Leaves, flowers, trees, animals, and many other representatives of flora and fauna become the source of inspiration for artists and designers. Natural shapes have clear meanings of the plants and animals which they symbolize. They often bring the feeling of refreshment and unity with the natural environment. In addition, animals and plants can also have their own characteristics and symbols. For example, a rose is a flower of love and passion, while a lion is a symbol of pride and bravery but this is another topic to discuss.

 

Common meanings:

  • originality
  • organic
  • balance
  • refreshment

 

andre landscape tubik studio logo design

Andre landscape logo option

 

Abstract shapes meaning

 

They are usually visual symbols of abstract ideas or simplified versions of natural shapes. Some abstract shapes can be too difficult to recognize because they are stylized and only small details give a hint to what it is. One abstract shape often has both direct and figurative meanings.It is often used in graphic design, especially for logos and icons. Abstract shapes are an effective way to transfer a message quickly without text.

 

Common meanings:

  • the duality of meaning
  • uniqueness
  • elaborate.

 

wedding_theme_website_ui_design_tubik

Wedding theme

 

How designers use psychology of shapes

 

Shapes are essential elements in all design directions. They can serve as components of a visual composition as well as a content organizing tool which divides or connects design elements into groups. To make the sophisticated design, experts need to consider the meaning of shapes and the impact which they have on users’ mind.

 

Graphic designers often deal with small but meaningful elements such as logo and icons. A powerful logo needs to convey the right message which would serve as the brand voice. If the shapes are chosen appropriately for a logo, they will assist to convey the right mood without additional words. For example, in case of a logo for a financial company, one of the approaches can be applying to apply the shapes which convey the feeling of trust and balance such as square or triangle.

 

Various shapes are often found in user interfaces of digital products. They can be used as buttons or icons as well as applied to organize the content on the layout. For instance, text blocks are often gathered in a rectangular or square shape which allows users to quickly scan copy. Using different shapes designers can create effective information architecture for a product. The elements of the layout may be structured in certain shapes so that make users’ eyes easily find core information. For example, if we place the content in a triangular shape placing the vital component on its top, people’ eyes will automatically go to the peak.

web design UI concept tubik studio

The Big Landscape

 

Psychology of shapes plays a big role in typography. There is a great number of typefaces and all of them have their individual impact on visual perception. Some kinds apply round shapes as a dominant and they seem more feminine and mild unlike those with straight lines and sharp angles which are more formal and sometimes aggressive. That’s why it’s important to pay attention what shapes are dominant in a chosen font to avoid a conflict between the context and visual presentation.

 

The human mind is full of secrets and it’s often hard to predict possible reactions. However, the science of psychology helps designers be prepared and comprehend how our brain works, at least at some basic level. Knowing psychology of shapes designers are able to create proficient logos along with problem-solving user interfaces for web and mobile products.

 

Recommended reading

 

Color in Design: Influence on Users’ Actions.

Psychology in Design. Principles Helping to Understand Users.


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