Challenge and Client

To broaden its ways of reaching the audience and set an effective sales channel using mobile technology, Heineken Mexico strived to launch a mobile application that would allow users to buy beer and associated stuff like snacks, cups, and the like and get the orders delivered quickly. This is how the Glup application started.

The clients approached the tubik team with a range of design tasks: we worked on logo audit and tweaks, extended brand identity development, delivery application UI/UX design from scratch, website design, and creating custom 3D icons and 3D illustrations for marketing and user experience objectives.

Process

The creative process included two major directions: developing a flexible identity and creating a consistent functional UX design for the application.

Brand Identity Design

Firstly, it was essential to work on powerful branding that would be effectively applied to both marketing goals and mobile interactions, providing the integrity of the customer experience.

The brand already had a logo, but it had to be enhanced to get a more attractive and trendy look appealing to the target audience and become more pliable for a variety of brand advertising and marketing objectives.

Original logo color variations

Glup logo redesign

Certainly, the team took advantage of color power and its remarkable ability to set the needed mood in split seconds. The primary brand colors were yellow, setting the cheerful spirit and giving instant association to the beer theme, and deep purple, setting the effective contrast and playfulness and supporting the flexibility of the palette for the defined objectives. Also, an extended palette for different ways of product presentation was developed.

Another element of visual branding was the set of abstract geometric shapes to be consistently used across various branded items, advertising materials, delivery bags, social networking, and mobile application screens. What’s more, these shapes reflected the parts of the clock face setting a solid association with the speed of delivery as one of the key features. Take a look at the variety of branded items and advertising design.

Outdoor advertising

Social network posting templates

Billboard design

Delivery backpack design

Range of variants for delivery motorbike branding

Branded T-shirts design

Branded cap design

User Experience Design

The second direction of work was to think about the flawless and intuitive user experience for the mobile application. The interaction design was thoroughly thought-out to make the sales funnel work successfully and let the users move through the whole purchase flow smoothly.

The onboarding screens and categories use trendy and balanced 3D graphics presenting the products and setting friendly communication. Having a different visual style, these original graphics don’t distract users’ attention from the offered items.

The icons working as visual, illustrative markers for the different categories of items in the application also moved through several iterations and evolved from 2D graphics consistent with the general concept of visual branding and echoing its graphic elements to the big set of 3D icons following the style of 3D illustrations used across the app and in the onboarding process. Here’s a quick glance at the stages of the process.

Airy light screens of the application effectively show the products, while branded colors, graphics, and eye-pleasing gradients help to set attractive color accents for interactive elements, making navigation clear and intuitive. Custom icons in the interface also echo the brand palette, supporting both usability and consistency of brand performance. The customers are offered several ways to surf the range of provided items, including browsing the entire catalog, using filters to customize it, or using the internal search to find the needed item quickly. Plus, the button on each card on the catalog screens sets the shortcut to add the items directly to the basket without opening a card, which saves time and effort in cases when users have some faves and order the same items multiple times.

Here’s a quick look at the category screen. All categories are illustrated with stylish theme 3D graphics that instantly set the theme but do not overload the screen with too much detailing.

The shopping cart screen is informative and functional, based on the principles of external consistency and well-recognized mental models so that users can finalize their orders easily and effortlessly. A special progress bar with a text hint is used to visualize the ability to get free shipping for the order.

The home screen and promotions screen also feature sliders with banners for special offers or hot sales to attract more attention to them immediately.

One of the essential elements of building a solid mobile app brand and enhancing its online presence is supporting it on the web with a concise and informative landing page that uncovers the benefits and engages new users to try it. The landing page for the Glup application echoes the design approach of visual identity for the brand. It’s based on a bright background in primary brand colors separating different content sections, a solid visual hierarchy of text blocks, clear and visible call-to-action elements, and prominent visuals that present the balanced mixture of app screens and thematic 3D graphics to instantly set the connection with the essence of the offered service. Smooth web animation makes the user experience even more lively and dynamic.

So, as a result of the project, the Glup brand obtained a solid and effective sales channel via the easy-to-use mobile application, consistently reflecting brand identity and making the customer experience integral, engaging, and smooth.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

HP23. Website and 3D Animation for Prostheses Producer

Nova Post. Interactive Christmas Advent Calendar UI Design

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Crezco. Brand Identity and UI/UX Design for Fintech Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Glup. Branding and UX Design for Delivery Application появились сначала на Design4Users.

Complex 3D Graphics

With the rocketing evolution of modeling tools, 3D graphics and animation started getting increasingly popular in recent years and have taken a well-deserved place on different lists of design trends. Still, for the last year, the complexity and detailing of 3D images integrated into user interfaces have reached the levels not expected before. Although modeling and rendering can take quite a long time, using this type of visuals helps push the horizons of creative approaches and get more flexible in demonstrating specific objects that are hard to visualize in any other way or getting the modern look for web pages or mobile screens.

The company website for the prosthetics producer uses a complex animated 3D model to make the product demonstration impressive and lively.

The interactive advent calendar interface for the Nova Post Christmas campaign presents the long-scroll map with tons of beautiful 3D images, setting the festive mood and enhancing visual storytelling.

Creative Motion Design

Animation in user interfaces also moved to the next level this year, with designers in a non-stop search of applying it to various stages of interaction with websites and apps. Creative motion graphics not only support the usability and accessibility of the interfaces but also spice them with eye-pleasing details and amplify emotional appeal. Moreover, creative approaches to animation in UI play a big part in activating the power of the aesthetic-usability effect.

The hero animation for the poster store app landing page works as an impressive presentation of the product and strengthens immediate aesthetic appeal.

From the background full-screen animation on the hero section to slight motion added to numbers and copy blocks and unobtrusive motion graphics, all animation on this business consultancy website home page works as one system, engaging users into learning more without getting bored or tired.

The animated explainer illustration for the Synthesized website helps to visualize highly technological processes as well as becomes an integral part of the general visual style concept for the service website.

The web platform for bartending courses uses a variety of motion effects to make the user experience intuitive and engaging and amplify the website’s elegance.

Web design for AI-powered content hub uses a variety of web animation effects to turn the scrolling process into a captivating experience and make necessary visual accents.

Diverse Video Content

One more aspect that grows its presence and diversity in user interfaces of all kinds is video content. Realizing the effectiveness of videos for modern users, stakeholders and creative teams find more and more ways and formats of integrating them into the user experience, from full-screen background videos to small ones on some tabs or screen sections. That’s especially brightly seen for digital marketing, with websites and landing pages quickly setting the needed atmosphere and demonstrating service or items to their audience.

Hales Freight website features video content in the hero section of the web page to instantly uncover the essence and benefits of the service to the visitors.

The website for the niche water brand supports the atmosphere and sets the association of their water’s refreshing naturalness with video pieces integrated across website pages.

The home page of the virtual reality studio employs prominent atmospheric video pieces to make an impressive and emotional presentation of the service. 

The website of a mental health guide uses a block of changing video fragments sharing positive vibes.

Scrollytelling

One of the currently popular approaches we have already had the chance to realize within our recent projects is scrollytelling. Basically, it is turning the process of scrolling the page or screen into captivating storytelling with the right balance of visuals and text design and spiced with animation to make it even more dynamic. This approach is also applied in the form of various timelines telling the story of a brand or company development.

Advocacy Through Walls website, an interactive guide for public defenders, community-based organizations, and other social justice advocates on how to ethically and intentionally engage with people currently incarcerated or directly impacted by systemic advocacy, is based on the scrollytelling approach.

The business consultancy website uses the approach of engaging scrolling on the About page to uncover the stages and milestones of the company’s development and achievements.

Emotional Hero Section

One more trend showing the steady growth of popularity is using the potential of a hero section to make the first seconds of contact with the user not only informative and functional but also emotional. Prominent visuals and videos, captivating motion graphics, and bold, concise typographic parts featuring taglines and/or brand names greatly help achieve that goal.

MOVA Brewery website home page has a hero section setting instant emotional connection with the visitor via the party-vibe full-screen photo with branded beer glasses and the tagline uncovering the idea behind the beer space connecting people.

Posse website hero section sets the instant feeling of cheerful and sincere communication. 

The color palette, solid massive typography, ultra-minimalistic layout, and atmospheric full-screen photo background in the hero section set the starting point for the adventure emotion offered on the website of the service organizing sledding expeditions.

Mental health guide website uses the emotional hero section, combining a bright, bold typographic part with black-and-white background video.

The landing page for the fitness application builds an emotional connection in the hero section via the catchy prominent typography of the tagline and engages in scrolling down with the visual hint of the mobile interface, which is presented via eye-pleasing animation when the visitor scrolls.

Typography Experiments

Typography in user interfaces has always presented the field for experiments, and recently, app and web designers have been demonstrating new levels of creativity in approaches to font choice and combinations. Playing with decorativeness, original graphic details, and motion, they continue pushing the borders of making the interface design look unique, elegant, and aesthetic with the help of chosen typefaces.

The ecommerce marketplace website design uses a beautiful decorative font for taglines, headings, and primary text blocks.

The music instrument producer’s website plays with a bold sans-serif font for headings and original all-caps font for the text block, setting the visual connection to modern music technologies.

The light and airy website of the niche wild farm drinks producer uses a neat decorative primary font that plays well with the idea of wildflowers and grasses.

Interactive Menus and Catalogs

Having checked the benefits of interactivity and its contribution to positive user experience, today, designers and developers don’t limit themselves to the well-checked types of interactive content but constantly experiment with new approaches and ideas. That results in new kinds of cool interactive details we can find on modern websites and apps, and trendy interactive menus and catalogs are among them lately, making the websites and mobile apps more desirable and handy.

The winery website home page features an interactive menu showing the photos on hover of the specific position.

Interacting with the menu, the visitors of the clinic website get to the page that uses a split screen layout and changes the photo depending on the chosen position. 

The water brand website uses the interactive catalog with text-labeled vertical tabs, allowing users to switch between product pages.

Immersive Experiences

With the technological advancements of AR and VR in recent years, more and more brands integrate immersive experiences into their communication and marketing campaigns. Immersive digital marketing involves users in an experience that merges elements of the surrounding environment with personalized digital content connected to the specific customer journey and purchase needs. So, that means that creatives also have to think over new approaches to design this kind of user experience and make it the factor amplifying the positive result.

The poster store application allows users to fine-tune the search of the poster and try the chosen item in their specific interior.

Mix of Visuals

More and more interface designers tend not to make a choice upon one type of visual content but employ a mix of different visuals, finding the balance of effective combinations. So, websites and apps can feature photos and videos, illustrations and collages, and major and minor motion graphics working as one system and supporting each other to make the pages and screens more usable, informative, and eye-pleasing.

The bartending school website uses a combination of various visual content, from full-screen video to atmospheric photos and neat line illustrations.

The mental health guide combines photos, videos, and illustrations for emotional and diverse communication of the ideas to the reader.

The winery ecommerce website features a combination of beautiful vineyard photos, product presentation photos of bottles, and sophisticated line illustrations to visualize the production stages.

High-Level Conceptuality

One more trend of the recent months in UI design is the creation of high-fidelity concepts to think over user experience for future technological advancements, gadgets, and devices that are not massively used or affordable yet but are already talked about actively enough to consider interaction design for them.

Here’s an elegant design concept for a product manager application created to be used effectively on a foldable device; in this project, our team set the challenge to think over both additional limitations and possibilities that foldable devices open for the user experience. 

Some UI/UX and interaction design solutions for the vibrant and engaging mobile application concept of the AR-based social network.

Sure, these are only some of the actual trends in web and mobile design at the moment, so let’s move on and see what the new year of design will bring out.

New articles on user experience design are coming soon; stay tuned.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of usability and user experience design.

6 Essential Elements of a Company Website Design

Big Little Details: 7 Helpful Elements of Web Usability

UX Design: Types of Interactive Content Amplifying Engagement

Negative Space in Design: What It Is and How To Use It

5 Types of Images for Web Content

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Make Web Interface Scannable

The Anatomy of a Web Page: Basic Elements

Error Screens and Messages: UX Design Practices

Web Design: 16 Basic Types of Web Pages

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение 10 Hot UI/UX Design Trends To Start 2024 появились сначала на Design4Users.

Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

Outdoor advertising billboard design

Business cards design

Booklet/notebook design

Branded badges

Branded tote bag design

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

Project

OtoZen is an innovative technology for safe driving, operating via a hardware device connected to a mobile application. It helps users to turn any car into a smart, distraction-free vehicle. It is the all-in-one safe driving assistant that keeps drivers focused, organized, and connected to friends and family. Users can quickly pair the OtoZen device with their Apple or Android phones via Bluetooth and install the OtoZen Pod in split seconds, with no tools, wiring, or professional installation required.

In this project, tubik specialists were involved in auditing and improving UI and UX design for the mobile application, as well as creating custom graphics and a website that would strengthen the product’s web presence.

App Design

From the perspective of user experience design, the Otozen application was a complex project that included a diversity of manipulations with different data, some of which are changing in real-time mode and should be updated and distributed appropriately. Another concern was dealing with a lot of personal data security and privacy issues. So, the design process had to start with diving deep into the slightest details of functionality and user problems solved by the application. This is what the application looked like at the start of the process.

The client came to us with a prototype that had to be reviewed, discussed, and reconsidered. In general, the technology is built around the following primary directions:

• safe, distraction-free driving: texting-while-driving prevention, reduced audio distractors, high-speed alerts, feedback on driving safety level, autodial to call help for emergency
• well-used driving time and organized reminders: location/time-based reminders, audio calendar alerts, joining meetings hands-free, simplified expense reports with mileage tracking
• convenient connection and communication with other people, for example, family and friends: requesting live location and ETA of other drivers, getting easily updated with automated notifications, full control of privacy and visibility

So, having analyzed the diverse functionality and data the app had to process, considering the objectives behind the application, our team made a deep review of the pain points and blind spots in the existing prototype. That process of design audit was grounded on constant communication with clients to find out the slightest details that could have an effect on user experience and grew into tons of graphs, charts, tables, and schemes. That’s a good example demonstrating that a huge part of the user experience design process is not about visuals but about analyzing, structuring, connecting the dots, considering details, and building systems. Here’s a look at just a small part of the process.

A part of multiple systematic tables textually organizing different information about the product, questions and issues to discuss, and suggestions that could improve user experience, to support collaboration between the clients and the creative team and let them stay on the same page.

A glance at the process of analysis and structuring user interactions with the application and issues arising in the process

The process of building a particular piece of user scenario

So, the core tasks for the UX designer were to think over data organization, visualization, and navigation which would make complex flows of information and functions feel intuitive and straightforward and wouldn’t overwhelm users. Supporting that idea, the choice was made on a light and airy interface with contrasting but not overbright colors for critical visual elements and buttons and a highly-readable sans-serif font to make the screens scannable and easy to use on the go.

One of the significant points for the user experience design of the mobile application was effective onboarding and registration flow. The account creation process is divided into several simple steps, with a progress indicator keeping the user updated about the current stage.

My Trips section opens the feed and gives an opportunity to easily tune what the user wants to see. This application is a good example of how well-crafted icons support the usability and navigability of the mobile interface and help set instant visual connections with different types of information. The map screen shows the trip details. It also uses color marking for the various points, such as speeding or telephone usage, this way visualizing quickly how often the issue happened during a particular trip.

Opening the calendar, the user can see daily time stats in minutes. The drive score section opens the information on issues that influence driving safety.

The tab bar lets users switch between five core interactive zones: Alerts, My Trips, Buddies, Profile, and Notifications. To maximize the influence and make it clear for users, it combines elegant line icons and text labels to quickly inform what users will find in each tab.

And here’s a glance at the flow of interactions with the app.

The Alerts section organizes all types of incoming alerts and helps to switch between them smoothly.

Profile screen shows different data about settings and preferences, neatly organized in groups. Here users also can add, edit, and review their emergency contacts, vehicle details, and places.

One more important and valuable feature of the Otozen application is Buddies. This function allows users to connect, make their trips trackable, and notify their chosen buddy about the needed information, such as the current point on the route or arrival. It can be super helpful for various issues, for example, when the app user needs to know where the family member is but doesn’t want to distract them from driving with calls or messages.

One of the points the technology creators describe as the most essential and show deep care on is personal data security. So, in the Buddies functionality, this aspect had to be well-thought-out, and sharing/accepting access to tracking the other users’ trip, OtoZen users needed to be sure that they can control the level to which they open data to their buddy in the app. That resulted in another neatly organized set of settings in the application that had to be clear and straightforward.

The major challenge behind the application UX design was to get together all the multiple flows of information, notifications, alerts, macro and micro settings, and decide upon the most user-friendly way to organize them.

Web Design

One of the well-checked tools for building a solid mobile application brand and effective promotion is creating a landing page or website to present the benefits and connect users to the product in an efficient, informative, and captivating way. So, the website was another task for our team to allow the OtoZen product to cover this aspect of digital marketing and set another major channel of communication with its users, letting them catch the idea and uncovering the answers for all the questions that may arise. The general layout and website style echo basic color accents and the airy, light layout of the application. The information about the technology is divided into concise sections to be scannable and skimmable. The hero section presents the immediate visual connection to the technology via the prominent image demonstrating both the device and the app and giving the main idea about the product and its value for users via an informative tagline and short description. The call-to-action button in the hero section is instantly visible due to the color contrast. It works in pair with the ghost button, allowing visitors who want more information to watch the video.

For the last few years, original illustrations applied to user interfaces have been one of the most popular and solid UX design trends. Not only do original graphics contribute to the general brand image and enhance its recognizability and memorability, but also they set a solid emotional connection between the product and its user. What’s more, they add much to the usability and visual storytelling, especially when consistent photos cannot be obtained for all the necessary demonstration needs, especially in the cases of highly technological products. The Otozen website took advantage of the custom illustrations keeping a consistent style and effectively supporting information blocks. Also, many of the pictures feature people, adding a human element to the communication. A mobile adaptation of the website makes it look attractive and work effectively from any device.

“We are very pleased with the outcome. The app UI/UX is well received by our customers. There was a consistent app UI/UX theme that was maintained throughout the development, and having the same designer working with us helped us achieve this,” the client company’s CEO wrote in his review on Clutch, and what could be the better way to finish the design story?

New design case studies are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

HotelCard. Brand Identity for Hotel Offers Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

Nonconventional Show. Website Design for Podcast

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: OtoZen. Designing Mobile Application for Safer Driving появились сначала на Design4Users.

Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

For more inspiration, check the sets of other posts from our D4U Inspiration gallery, where we gather impressive creatives to share their art with you, for example:

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на Design4Users.

Task Manager App

Having a life full of various things to do, we try to find the best way to organize them all neatly, and task manager apps become a great help. Here’s a glance at the design for one of them. With it, users can create multiple calendars, plan their tasks, and enjoy a simple aesthetic interface. Color marking helps to quickly monitor tasks from different calendars, while the dark theme supports the good balance of contrast to make text and bright color accents deep, scannable, and avoid eye strain in any environment of usage.

Calorie Tracker App

Those who care about being fit know what a big part healthy eating plays. Today, there are numerous apps helping people track their eating habits and analyze their influence on weight and well-being, yet we want to add our two cents to this theme. So, here’s the user interface designed for the app to calculate calories and give users a better understanding of the essence of the food they consume. An airy light interface with fresh green as the main color in the warm app palette, custom illustrations, and smooth animations make the app user-friendly, attractive, and engaging. But what UX designers put the most effort into is data visualization, allowing users to get confident about their stats and progress.

Exotic Fruit Ecommerce App

This mobile user interface design project is full of juicy colors and tasty looks. Take a look at the product screens designed for the e-commerce mobile application for buying various exotic fruit. Eye-pleasing, clear, and readable screens with prominent and attractive product images and contrasting call-to-action buttons are all aimed at making a choice and purchase process easy. The bright color marker gives the user a prompt that the shopping bag already has something added, special tab helps to choose the number of items quickly, just tapping on the slots and seeing the price changed immediately. An engaging and artistic main screen with custom illustrations of fruit allows for choosing a product right from there.

Cloud Storage App

Here you can take a glance at the design for a mobile app that offers a sort of cloud storage, nice and clean in the best traditions. The primary goal of design for such products is making them super intuitive and usable, with no distraction from content users interact with, but also aesthetic and eye-pleasing.

Drink Recipes App

This app design is filled with the vibes of a party or relaxation after a hard day. Here’s a mobile application with a big base of recipes and guides on how to make various soft and alcoholic drinks. The dark background sets the atmosphere of a bar or restaurant and adds depth and elegance to the photo and video content. Solid visual hierarchy, intuitive navigation, and data visualization help users feel confident.

Personal Challenges App

One of the interesting opportunities the modern world offers to us is various challenges that can be done remotely and supported by coaches from different corners of the world. Here’s a bit of app design devoted right to that theme. That’s a set of interactions for a mobile application helping people take various challenges online and boost their skills, knowledge, health, and fitness. It’s easy to see that elegance, readability, and usability were top priorities in the design process.

Quotes App

This UI design concept is about wisdom and inspiration packed together. Here’s the set of interactions for a minimalist and elegant Quotes App, the mobile application allowing users to collect wise thoughts and ideas from different sources.

Task Tracker App

Take a look at the user interface design for a task tracker that helps users to schedule and track various tasks, events, and things to do, this way increasing their productivity. An elegant and usable balance of dark and light backgrounds, lovely color accents, animated illustrations, onboarding, a variety of stats, clear transitions, and solid readability make the interface both handy and beautiful.

Finance Tracker App

This design project is devoted to money and finance. Here’s the finance tracker app that helps users to manage their incomes and expenses. Design solutions for this mobile application feature the dark theme, wise and balanced inclusions of custom catchy graphics, strong readability, and thought-out color accents for clear data visualization. Another thing worth attention is well-crafted and engaging UI animation.

Fitness Tracker App

Progress owes much to self-control, and in its turn, self-control is stronger when you are aware of what is going on. Here’s the design project whose aim is to help users keep their fingers on their health and fitness: that’s the Fitness App, with a personalized choice between a trendy dark theme and airy light theme, simple, clear, legible data visualization, highly intuitive navigation and eye-pleasing smooth UI animation for different states and clear communication between the app and its user.

Event App

Being sociable is not only fun and joy but also a challenge for your responsibility. Sometimes, it’s not that easy to keep everything in mind. Here’s the app solving that problem. That’s a simple mobile application for scheduling, keeping, and tracking events. It is aimed at young people as the core target audience, which determined the bright and trendy visual style as well as a catchy custom illustration used as loading animation.

Bees And Honey App

This app is about the sweetness and hard work combined together. It’s all about bees. Here’s a sneak peek at some mobile screens of the app that lets users buy and hire bee families as well as get some products and useful information connected to the theme. Another interesting design feature to attract the user’s attention is the playfully illustrated onboarding screens setting a friendly mood and tone of voice from the first contact with a user.

Gallery App

“Art is not a mirror held up to reality but a hammer with which to shape it,” Bertolt Brecht once said, and it doesn’t change with time and generations. Whatever progress is achieved, whatever technologies are invented, art still remains one of the biggest sources of inspiration, education, and motivation for mankind. More and more apps are rising to support it, and this app design continues showing you one of a kind.

This is a UI design concept for a gallery app performing the artworks by modern artists. The artists can sell their artworks here while visitors are able to choose the picture they would like to buy or just enjoy the variety of art. Sure, all the navigation and composition of the layout are built around visuals performed on the dark background to show them in the best light and supported with an asymmetric grid and smooth motion.

Bar Inventory App

This mobile user interface concept is about increasing the efficiency and productivity of bar workers. The app that is connected to the special scales quickly informs the users how much drink is left in the bottle opened before. This way, the process of inventory is made much faster, easier, and more intuitive. So, the interface is focused on clear navigation and the ability to use the app in a variety of environments.

New web and mobile design collections from our team are coming soon – don’t miss the updates!

UX Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Mobile UX: 14 Cool and User-Friendly App Design Concepts появились сначала на Design4Users.

Onboarding tutorial screens for the Vertt application

What Is Onboarding?

Let’s start with the basic terminology. The concept of onboarding comes from the sphere of employment and HR. It marks special steps and techniques aimed at helping newcomers to adapt to the new conditions and get comfortable to bring out good results as soon as possible. For most people, a new job is a sort of stress which demands effort and consideration, so a little help can make the decision-making process easier, the emotional background smoother, and performance growth more harmonic. Special tactics enable to correct possible inconveniences and make people more confident in the new place, which means they become productive and socialize with their colleagues faster, bringing benefits to the company.

The sphere of user experience design for digital products quickly absorbed this idea together with the term. Here onboarding means the set of techniques and interactions whose objective is to comfort the user and give a concise introduction to the product.

Considering the fact that users, especially first-time ones, are not going to spend much time trying to understand how the product works, one of the vital issues in user onboarding is deciding upon clear priorities. Users have not only limited time they are ready to devote to learning about the new product, but also limited capacities of working memory. Even if there’s much to tell about the product, don’t focus on overwhelming visitors with everything at once. Setting the priorities, designers and stakeholders decide which dose of information is needed for a particular stage: tutorial, wizard, tooltips, instructions and the like should feature the most essential information first.

Onboarding screens for the app on bee-keeping

Onboarding Goals

There are three basic goals that UX designers strive to achieve with onboarding screens and functions.

• Greeting: well-crafted onboarding process starts the communication of the product with the user in a natural, engaging way
• Information: at that stage, it’s crucial to tell users how the app is going to help them or make their life better
• Engagement: onboarding contributes much to set emotional appeal and encourage users to learn and try more

So, logically, you use onboarding screens and most elements for first-time users but not to annoy those who are already using it with the information they already know.

Flower Store application onboarding

Onboarding Elements

There are different elements and techniques of the general onboarding experience.

• app tutorial, aka first-look tour: a set of screens that quickly introduces the product to a newcomer and convinces the user to try it
• welcome messages: short messages on welcome/splash screens to greet the user and set the communication; quite a typical way to ignite the onboarding process; often feature a CTA element
• progress bars and indicators: the trick based on the natural human urge to complete the tasks. Progress indicators (dots, dashes, etc.) included in the user interface stimulate a user to complete the onboarding and creates an understanding of what stage of it is currently active
• explainer video: the video review of the product benefits and functionality explaining the major points to the user may work as a dynamic and effective way to quickly introduce the product.

The explainer video designed for OffCents App

• in-context and action-driven tooltips: prompting messages tied to particular layout elements or user actions, usually appearing in modal windows rather than separate screens
• empty state tips: these may appear in the zones which in the future will be filled with the content created by users, but while they are empty, space can be used for good and informative prompts
• checklists: as well as progress bars, this onboarding technique motivates users to complete the initial set of steps. Even more, it may become the element of gamification (for example, you complete the full list of points and get an achievement or open more functions)

Behance uses a checklist strategy to guide users in completing their profile

• hot spots: this onboarding element attracts attention to important zones or controls that risk being missed or unnoticed by an inexperienced user
• personalized onboarding: the approach is built on setting user’s preferences from the very start and can often be found in products based on interaction with a lot of diverse content (like Behance or Pinterest)

Personalized onboarding experience for the Perfect Recipes app helps users to set goals and restrictions this way making the app performance tuned for their specific needs

Sure, this list doesn’t mean that all of them have to be integrated into any product. In each particular case, the user experience designer has to find the balance and pick the points that work for both users and the business goals behind the product. What’s more, to organize onboarding right, explore the mental models of your target users via user research and usability testing: this way, you will be able to predict more precisely when and where users need help and prompts.

Onboarding Design Practices

Use Images in App Tutorials

Most people perceive and decode images faster than words. It makes the usage of illustrations logical and rational for app tutorials that have to give information quickly. In the article devoted to the benefits of illustrations in UI, we mentioned that in the case of tutorials, illustrations, be they photos or originally drawn images, fully reveal their potential in explanation and clarification. The options can be totally diverse, from simple icon-like to artistic and sophisticated artworks. Illustrations of this kind become an excellent way to boost usability, minimizing the necessity of using the copy on the screens. They are particularly efficient in apps for kids and youngsters as they usually feel this sort of explanation is more user-friendly.

Cute and funny 3D animation created for the onboarding experience in the app for the studio for children holding classes on 3D modeling and animation.

3D animation for the Status App onboarding

Design trends demonstrate the increasing popularity of custom illustrations created for specific interfaces. App tutorials became the favorable ground featuring a variety of styles and approaches. In many cases, illustration becomes the center of the composition, and its aim is to present a specific feature or benefit in an attractive and easily decodable way. Another popular approach is applying a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds. What’s more, you can make the images work as directional cues helping a user to understand the navigation and layout easier.

The onboarding screen for the Finance Tracker application features a custom illustration that is not only trendy and eye-catching but also works as a directional cue together with an arrow to attract users’ attention to core interactive elements

Don’t Be Wordy

In writing for user interfaces, words are power. However, there are two simple rules to uncover that power in the best way: say words short and make them helpful. Here’s the time to realize that writing a short informative sentence is much more complicated than writing a long text. You have to find a proper way not to waste those precious seconds that the user is ready to devote to tutorial screens or tooltips. Some creative teams involve a professional copywriter for this task to create texts that make every single letter count. With the writer or not, anyway, take time and effort to create a concise, attractive and clear copy that applies language appealing to the target audience and corresponding to the objectives behind the product. As well as design solutions, the copy should be tested as much as possible to find short ways of informing users.

“The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at ‘muddling through’ have failed.” Steve Krug once mentioned, and that’s the point to remember. When you are tempted to manifest your eloquence, just don’t overdo it here: tooltips, tutorials, and instructions are not the place for it.

Another thing to remember is that any text is not only an informative part but also a visual element of design. As well as the icons, fields, buttons, illustrations, toggles, and other layout elements, it literally occupies the part of the screen or webpage like any other graphic component and influences the general stylistic presentation. The success of the efficient copy directly depends on not only the message and content but also design solutions as the choice of types and fonts, background, and even placement of the text. All that affects the level of readability, so if these points aren’t thought-out well, the copy risks getting much weaker, even being highly meaningful.

The short tagline for the My Baby App onboarding screen expresses the essence of the problem it solves and leaves most of the screen space for the beautiful 3D illustration

Focus on User’s Needs

Have you ever dealt with parents introducing their children? When they start telling about the kid’s achievements, strong points, and features, it’s not that easy for them to stop. The same happens when you introduce your product to a new user. For you, it is the clot of ideas, iterations, effort, time, money, benefits, valuable functions, and much more else. No doubt, telling about it, you want to share that feeling, to unveil as much as possible. That’s a natural temptation, but sticking to it is a mistake. For a user, it’s just another app, tool, or website, a bit of a step into the unknown. So, decide what benefits and functions are the most needed by a target user and tell about them in a focused and effort-saving manner instead of trying to overwhelm the user with everything possible at once.

Even the quite concise textual content on the onboarding screens of the app devoted to bees and honey is organized with a clear visual hierarchy, with the most essential information in headings and a bit more details in the body copy

Add Life with Animation

One more way to add not only meaning but also fun and engagement is animation. Motion makes interaction more dynamic; it breathes life into the interface, creates wow effects, and catches the user’s attention. Even more significant point is that animation can make important details more noticeable. On the other hand, motion can increase the time and traffic needed to get it loaded, so it should apply it wisely and discuss with developers the aspect of its technical realization.

Emotional and eye-catching 3D animation designed for the onboarding interaction with the My Baby app 

Allow for Skipping

Another thing to consider is the choice of skipping the tutorial. Not all users need it, even those using the product for the first time, so for most products, it could be reasonable to give them the ability to skip the tutorial. The decision on this function has to be made on the basis of testing and analysis.

Mind the Context

In-context tooltips are a good way to support the users in the process of trying the interface functionality. They appear in the process of interface exploration one after another, feature after feature, in one-time dismissible modal windows to explain the ways to use a particular function or highlight a specific benefit.

Amazon uses tooltips to drive the non-registered users to sign in, and in the same way, informs about the vital benefit (international shipping) that may have a great impact on decision-making

Use Empty States

For the products, where users interact with content actively, at the early stage, they quite often deal with the spaces that are empty because the user hasn’t filled them with personalized content yet. For example, these can be the screens of a wishlist, projects, collections, etc. While they are empty, using them for onboarding prompts and further engagement is a good idea.

The Dropbox empty page for starred items features a funny illustration and a short, well-written prompt on how and why to use this function

Mind the Emotion Level

Making a digital product emotional is an essential aspect of setting a solid connection with the target users, and design is one of the most flexible ways to do it. Yet, make sure you find the right way to set the needed emotion and learn what works for your audience: user research plays a super important role in this perspective. Don’t design onboarding and write the copy for it until you have a clear vision of the tone and voice of the product’s communication with its users. Don’t go too far with humor, especially with a product aimed at users from various countries: what sounds funny for you can be not funny or even offensive for your users. Make onboarding emotional but do it carefully.

Don’t Overplay

Honestly speaking, many users don’t need instructions or help all the time. So, don’t overplay in your trying to be helpful. Onboardings elements start playing on the wrong side when:

• there are too many of them
• they are too distractive
• they are unclear
• users aren’t able to skip them or dismiss them (like “don’t show me that anymore”)
• they aren’t bearing any useful information.

So, keep a good balance of user support and never miss a chance to check it with user testing.

Summing up, it’s easy to see that well-crafted onboarding is the way to set the bridge between the product and the user, create the emotional background, quickly present the core benefits, and make a good first impression.

Useful Articles

Here’s a set of articles on more aspects and best practices of user experience design.

UX Design: Types of Interactive Content Amplifying Engagement

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

Visual Dividers in User Interfaces: Types and Design Tips

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

Light or Dark UI? Tips to Choose a Proper Color Scheme

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение User Onboarding Design: Practices and Tips появились сначала на Design4Users.

For the last decade or so, we’ve witnessed the rocketing rise of demand for diverse delivery services, getting even more popular in the world of online shopping. In this case study from the tubik agency design team, we will unveil the story of our collaboration with one of them: welcome to check the creative process of identity design and mobile application for Carricare, the service that helps customers get their parcels delivered safely and in perfect time.

Client and Project

Carricare is a service based in the UK; its objective is to effectively connect couriers and customers expecting the order to set perfect conditions and timing for delivery. It is an instant and real-time notification platform for delivery couriers that helps clients with last-minute delivery notifications, allowing them to manage their time better. Therefore, it aims at solving a fundamental problem of courier delivery, when the parcels aren’t safe if brought at the wrong time and left just at the door – or leading the courier’s coming up with the idea of what to do. Automating different user scenarios, the service makes the delivery process smooth and effective for both the courier and the addressee.

The first stage of brand design was all about absorbing, sharing, and analyzing various information. We dived into discussions about the client’s goals, visions, and brand value, as well as researched the market segment to develop a solid brand approach before the actual design of its identity started.

The service mainly focused on two critical aspects appreciated by target users: the safety of all sides of a delivery case – couriers, clients, and the delivered parcels – and the high convenience of taking them for the addressees. That’s how the brand name, Carricare, was up, combining two major concepts – carry and care – and echoing the idea out into the tagline: we carry and we care about your parcel, your time, and your convenience.

In the research process, the graphic designer emerged into the topic of visual elements that support the delivery process in the United Kingdom, from history to the modern state. The mood board of diverse stamps and icons transferring important messages, like the parcel’s fragility or the need to protect it from wet conditions, inspired the general approach to branding, echoing these well-recognized meanings and adding new ones to the set.

Another key aspect to consider was brand colors choice. In this case, the brand uses a bold and contrasting combination of colors, all well-grounded by the service essence: primary colors are blue and red that echo the UK flag colors, while the additional color is cardboard color setting the apparent association with packaging and boxes used for parcels.

So, logo design presents a combination mark flexible for plenty of practical goals. The bold typographic part is supported with a set of informational graphics reflecting the parcel delivery theme:

• parcel symbol
• fragility symbol
• water protection symbol
• parcel in hands symbol, transferring the ideas of courier delivery and care for the parcel
• line waves adding association to the typical postal stamps
• the heart symbolizing care and using the color contrasting to the rest of the graphic elements.

Here you can take a look at the ideas of different logo options and elements’ placement to cover various brand identity goals.

To make the logo work in an even more dynamic way in the digital environment, we’ve also made the animated logo version.

Here’s how the logo works on the branded boxes. Take a look at how QR code presenting the primary interactive element is integrated into the wavy pattern.

And these are the stickers, another key element developed for the courier and addressee interaction.

In addition, to satisfy the need for custom graphics, a special consistent system of icons was developed to link together branding and app design, also echoing the branded color palette and reflecting a variety of user scenarios that may arise.

Another task for the creative team was to think over a variety of graphic assets for marketing goals and outdoor advertising, such as posters, billboards, city lightboxes, etc.

Posters design

Billboard design

City light box design

Intending to strengthen online marketing and amplify brand recognizability, we’ve also worked on the general stylistic concept as well as the set of design templates and ideas for social media posting and advertising that would consistently reflect the identity.

So, this stage of the design process resulted in an eye-pleasing system of identity elements combining aesthetics and practicality, both essential for the service brand image.

UX Design

The mobile application was designed to meet the needs of two different categories of users: the courier and the recipient. The app offered several scenarios of delivery flow and was based on the delivery process improvement as a core feature: it aimed at providing successful parcel deliveries even when the recipient is away. Approved couriers scan the QR code, and the recipients get a notification and choose if they just open the door and get it when they are home, get the parcel back to the depot, leave it with a neighbor, or ask the courier to leave it in a safe place.

The user interface of the mobile application is nice and clean in the best traditions: minimalist and highly functional layout, readable typography, light airy background, and bright color accents make the app intuitive and easy to use on the go and for users of different ages. Custom illustrations help to not only enhance the messages but also add aesthetic and emotional appeal to the interface as well as keep close bonds with the rest of the branded items.

One more significant detail to consider was the app icon design that would be noticeable and digitally friendly, contributing its two cents to the general brand style of the service.

Working on the Carricare project, our team has got another great experience of connecting the physical and digital worlds employing beautiful and functional design.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Roebuck. Mobile Design and Illustrations for Educational App

Nonconventional Show. Website Design for Podcast

uMake. Branding and Website for 3D Design Tool

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

OOP. Brand Identity Design for Online Flea Market

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Brand Identity and UX Design for Safe Delivery Service появились сначала на Design4Users.

Modern UI buttons are really diverse and can serve plenty of purposes. Typical and frequently used buttons which present an interactive zone are usually clearly marked out for visibility, having a particular geometric shape, and often supported with the copy explaining what action will be fulfilled via this button. Designers have to apply considerable time and effort to create effective and noticeable buttons that are naturally integrated into the general stylistic concept but are contrast enough to stand out in the layout.

Let’s check the types of buttons widely used in mobile and web interfaces.

CTA Button

A call-to-action (CTA) button is an interactive element of a user interface that’s aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example buy, contact, subscribe, etc.), in other words, it turns a passive user into an active one. So, technically it can be any type of button that is supported with a call to action text. What differentiates it from all the other buttons on the page or screen is its engaging nature: it has to catch attention and stimulate users to do the required action.

The home page for uMake website features instantly noticed contrast CTA button echoing the same style in the header and in the hero section.

The yacht hiring website uses the bright color contrast to make the CTA button instantly noticed and amplifies the effect with the smooth web animation.

Here’s the home page of an e-commerce website selling books for kids. In the featured slide, there is one core action set as a goal for the page: getting a user to subscribe to the mailing list sharing. So, the button is designed as one of the most noticeable elements of the layout so that the user could instantly see how to do the action as soon as he or she is willing to do it.

Text Button

Here the terminology is transparent: it’s a button presented with a piece of text. It means that the copy isn’t integrated into any shape, filled tab, or anything like that. So, it doesn’t look like a button in our standard understanding of this phenomenon in the physical world. The copy is its only visual presenter. Still, it’s a live control that allows users to interact with an interface. You can also see these buttons marked with color or underlined. Also, used in the website header, text buttons connect a user with the core content sections of the website – and in this case, they aren’t marked anyhow as all (or most) elements in the header zone are interactive by default. Text buttons are usually used to create secondary interactive zones without distracting from the main controls or CTA elements.

Here’s an elegant website design for a fashion store. As you can see, the interactive part of the layout is based on text buttons. Only the main CTA element is presented as an easily decoded button. All the others feature only copy in both header and tabs for offers. Such an approach supports the general light and minimalistic style of the webpage.

This product page for the e-commerce website selling neon signs features a set of text buttons in the header, marking the actual one with the underline.

One more effective way to use text buttons is various interactive menus, like this one featured on the e-commerce website selling egg products.

Dropdown Button

The dropdown button, when you click it, displays a drop-down list of mutually exclusive items. You can often come across this type in the settings button. When a user chooses one of the options in the list, it’s usually marked as active, for example by color.

HealthCare app interaction flow shows the buttons opening the lists of details a doctor can add to the particular bill: when the button is clicked, it opens the dropdown list of options. As soon as you choose one, the big button disappears leaving the option chosen and the small plus button in case you want to check the list once again.

Hamburger button

It is the button hiding the menu. When you click or tap it, the menu expands. This kind of menu (and button as well) got such a name due to its form made of three horizontal lines that look like a typical bread-meat-bread hamburger. Today it is a widely used interactive element of web and mobile layouts; still, debates about its pros and cons are still hot.

Active internet surfers visiting diverse websites on a regular basis know by default that this button hides the various categories of website content so this trick does not need additional explanations and prompts. What’s good, hamburger menus free the space making the interface more minimalist and airy; from the point of functionality, it saves a lot of space for other important layout elements. Additional benefits can be mentioned for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

The arguments against the hamburger menu are based on the fact that this design element can be confusing for people who do not use websites regularly and can get misled by the sign that features a high level of abstraction. It may have a negative influence on navigation and can become the reason for poor user experience. So, the decision about applying the hamburger button should be made after user research and definition of the target audience’s abilities and needs.

Although hamburger menus still belong to controversial issues of modern web and app design, they are used frequently.

Here’s an example of a website using the functionality of a hamburger menu. It allows for hiding the extended menu of options to concentrate the user’s attention on impressive visuals and core information.

Plus Button

Being clicked or tapped, plus button enables a user to add some new content to the system. Depending on the type of an app, it can be a new post, contact, location, note, item in the list – anything that is a basic action for the digital product. Sometimes, by tapping this button, users are directly transferred to the modal window of creating content, in other cases, there is also a medium stage when they are given additional options to choose from and make adding content more focused.

The Task Manager app interface features plus button in the bottom right corner of the screen to make it accessible and easy to use.

The Event App features the plus button on top of the screen and opens the screen of creating a new event.

Expendable Button

This button opens a variety of options after being clicked or tapped. It is one more way to set the proper flow of interactions without overloading the screen, which is particularly important for mobile interfaces limited in screen space.

Here’s how the expandable button works in the Habit Builder application, allowing the user to create and tune the new habit to track.

In the Finance Management application, the expendable button is on top, integrated into the calendar stripe.

Here’s the Travel Planner application: the central interactive element of the tab bar is a plus button allowing a user to add a new trip or a new item to a particular trip. To make the experience simpler, the button is expanded into a set of buttons marking definite types of content, so that the user could make the choice at the start and reach the necessary screen.

Share Button

With the high popularity of social networks, chatting, and emailing, these buttons simplify the process of connecting an app or website content to a user’s social profile. The button of this type enables a user to share the content or achievement directly to social networking accounts. To make the connection clear, it is presented with icons that feature a brand sign of particular social networks and are easily recognizable. Quite often now, if sharing is not the key action expected from the user on the page, they aren’t marked anyway as buttons (no additional shapes, color marking, underlining, etc.) – you just see the icons, but they are interactive. Such an approach supports minimalism and the effective use of negative space. It also lets users concentrate on the main functionality but always see the signs of quick access to their social profiles.

The blog page for the Credentially website features a vertical set of share buttons on the right side of the screen.

Ghost Button

Ghost button is a transparent button that looks empty. That’s why it is also called “empty”, “hollow” or even “naked”. Its visual recognizability as a button is typically provided with a shape bordered by quite a thin line around the button copy. This kind of button helps to set the visual hierarchy in case there are several CTA elements: the core CTA is presented in a filled button while the secondary (still active) is given in a ghost button.

Here’s the sign-up screen for a restaurant app. It features buttons of three different types: the core CTA is presented with the filled button that offers the most popular and easy way to sign up quickly; the ghost button offers access to less popular option; the text button is integrated into the next line as an answer to a question and marked with color. Such an approach helps to build a solid visual hierarchy of the buttons on the screen.

Floating Action Button (FAB)

In Material Design, the floating action button (FAB in short) is the button that presents the primary action on the app screen. Typically, it’s a round icon button elevated above other page content. This button usually gives instant access to essential or popular actions users do with the app. Depending on the design and information architecture of the mobile application, FAB can:

• perform a typical core action (open the screen of a new email, open the screen for adding the photo or video content, search for the needed content in the gallery, etc.)
• show additional actions
• transform into other UI elements.

The position of FAB on the screen is usually determined by the factor of high visibility and may vary according to the general design concept of the app screens. The rule of thumb is to use only one FAB per screen, not more, to avoid loss in concentration.

Here’s a flow of interactions for travelers’ diary applying the bottom app bar, overlapping FAB, and woven image list.

Factors of Effective Button Design

Size. Size is one of the core ways to inform users about the importance of a layout element and build the hierarchy of components. An attractive and efficient call-to-action button needs to be big enough to be quickly found but not too big so that the layout structure wasn’t spoiled. Market leaders often provide recommendations on the proper 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. If you design for mobile, the requirements for different types of buttons may be quite strict so study the guidelines thoroughly to minimize the risks of app rejection due to poor UI design.

Color. To make some buttons easily noticeable and some secondary, it’s vital to choose a proper color. The thing is that human mood and behavior highly relate to the visual surroundings, and the color is one of the most powerful tools in this aspect. It is vital to keep in mind while choosing colors for CTA: buttons and background colors have to contrast well in order to make the button quickly stand out from the other UI components.

Shape. As for CTA buttons, they often look like horizontal rectangles. The reason is that you want to make it clear this button is clickable and interactive, and people are used to perceiving this shape as a button. In addition, it is recommended to design CTAs with rounded corners because they are thought of as they point inside of the button drawing attention to the copy. Sure, this decision is made in case the shape harmonically combines with the general stylistic concept chosen for a webpage or mobile app screen.

Placement. The placement of buttons is crucial to building up a solid visual hierarchy and clear navigation. 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. Designers have to learn the most scannable areas and place buttons of the core functionality within the user’s path.

Copy. The powerful button microcopy is usually short but consistent so that it could quickly catch users’ attention. It’s often performed in capital letters to make the copy even more attractive in the layout. Still, that’s not necessary, the decision is made according to the general design concept, typography, and mood of the text message.

Here’s the landing page design for a kindergarten. Let’s review all the buttons used on the page:

• the core CTA button inviting visitors to join is instantly noticeable: the designer used a rounded rectangular filled button of the color that contrasts with the background but sets the visual connection to the animated hero image, the most prominent visual element on the page. The CTA text is given in simple readable font featuring all capital letters
• the header features 4 text buttons that connect users to the important content sections on the website.
• the left part of the header features the secondary CTA button that is quickly scanned and allows already registered users to enter their accounts.
• the share buttons are placed into round shapes but aren’t given too much color contrast so that to be easily found but not to distract users from the main CTA.

Obviously, there are more types of buttons to discuss and check with UI design examples. So, we will continue the review in our next posts, don’t miss the updates.

UX Design Articles To Read More

If you want to check more creative sets of UX design concepts and articles on best design practices, here they are for you.

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

Negative Space in Design: What It Is and How To Use It

How to Make User Interface Readable: Tips and Practices

Hero Images in Web Design: When, Why, and How to Use

The Anatomy of a Web Page: 14 Basic Elements

Photo Content in User Interfaces: 7 Basic Ways to Use

Take My Money: UX Practices on Product Page Design

5 Pillars of Effective Landing Page Design

12 UI Design Trends for Web and Mobile We Started 2022 With

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Basic Types of Buttons in Web and Mobile User Interfaces появились сначала на Design4Users.

Project

Millions of drivers in the world face the problem of car vandalism, damage to a parked car, or lack of information about safety issues in different locations. The client had an idea to create a community of drivers so that they could easily get and exchange actual information about car accidents in specific areas, find a safe place for parking and get news about their cars left on the parking spaces.

The application had quite a diverse target audience of various ages, gender, physical abilities, and levels of tech literacy. What’s more, in most cases, the users would use it on the go on different devices and in diverse conditions of lighting, noise, and other factors influencing user experience. So, the user interface had to be highly intuitive and employ well-recognized patterns of user behavior.

User Scenarios

The app had three scenarios:

• You are an accident witness, and you report the accident (flat tire, sideswipe, ticket or highlights turned on, etc.), specifying the license plate number. The driver gets a notification about his car, so he can immediately react to it.

• You are a driver. You park a car and receive all notifications about it. Furthermore, you can turn on the parking mode and receive all notifications in the area nearby. When something happens with another car (for instance, dome vandalism) close by yours, you will know about it and can avoid that happening to your vehicle. You go to the other area and look for a place to park. You can see all of the accidents that happened there recently and find the safest parking lot.

• The app also may help police since the search for a witness of the accident would be easier. This way, the drivers using Pazi app would avoid many unpleasant situations, starting with a dead battery due to the lights turned on and ending with vandalism. Drivers come together in a friendly community to reduce vehicle accidents and speed up reactions to them.

UX Design

Let’s have a look at the screens and navigation aimed at covering the goals and scenarios mentioned above.

Main Screen

The map on the main screen allows a user to track all of the close incidents and gets fast access to all of the app features.

Search field: aims at the search for a safe parking place and view of all reports in the needed area.
Tab bar: provides fast access to profile and reports screen.
Add button: lets a user add a new report of an accident
Features: pinning the place allows for tracking the area around a parked car when you are far from it.

Reports Screen

The reports screen has two tabs.

All reports: History of all added reports in the current city

My notifications: Reports indicated with the user’s license plate. The user is immediately notified when the report on his car is done.

User Flow

Traditionally, at the stage of UX wireframing, the designer developed the layout, navigation elements placement, and flow of interactions in clear monochrome screens.

Scenario 1

Adding a new report is a primary CTA on the main screen. The user can choose the type of accident to classify their report. Then a new report screen opens, and the user has to indicate the circumstances of the accident. The address is set automatically by the user’s location, but they can change it in case of a report delay.

The license plate field is a piece of the required information; it activates the opportunity to notify the car owner about the accident that happened with their car. The comment field lets users describe the details of an accident, but it is optional: the main goal is to make the report as fast as possible, so giving details is not obligatory.

Also, the client asked to make the photo/video attachment as required, so the camera was designed with fast access to the latest photo in the gallery. The recording of the short video is possible by a long tap on the camera button.

Also, the designer offered the client to add the possibility of contacting the accident witness, but there was a problem with confidentiality and personal data security. So, an optional checkbox was added to the New Report screen: it allows opening the user’s contact info, but only the car owner can do it.

Scenario 2

A driver parks his car in any area and turns on the parking mode by pinning the location. The app remembers where the car is left and starts monitoring this area so that the driver could be notified not only with reports with his car plate number but also other accidents reported nearby.

Scenario 3

The driver is going to visit a new place and park there. He uses the search to see how many accidents have happened there recently and decide if it is safe to leave the car there, or maybe there is a reason to find another place.

UI Design

Color palette and style

The color scheme is based on a light and airy background that makes the text content highly readable, while the color accents are easily caught in different conditions of the app use. The client requested the turquoise color as primary, so it helped the designer to understand his vision of the visual style. The idea was to make the app friendly and easy, and round the corners of unpleasant situations in an elegant style, not provoking any tension or overdistraction.

Icons for accidents

Continuing the style, there was made a decision to illustrate every incident type by a specific icon and assign a color for fast identification of the reports on the map and other screens. Color marking is a well-checked way to reduce the user’s memory load and make the interaction patterns quicker and simpler. It helps the user to scan and understand the content even before reading about the type of accident.

Camera

Simple and handy camera screens and interactions were also included to provide functionality for the core app needs: fast photo or short video. Minimalistic layout and clear navigation allow a user to take a picture instantly right on the accident spot.

Here are some more of the final app screens: sign-up/log-in popup window, interactions with a map, profile and user contact information, etc.

In general, all the user interface design for the mobile app was built around simplicity, intuitiveness, and readability as core issues of positive user experience.

UX Design Case Studies

Welcome to review other case studies on UX design process and solutions for a variety of digital products:

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Otozen. Mobile App Design for Safe Driving

Crezco. Brand Identity and UI/UX Design for Fintech Service

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

CashMetrics. UX Design for Finance Management Service

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Watering Tracker. UI Design for Home Needs

Home Budget App. UI for Finance

Originally written for Tubik Blog, all graphic content by tubik

Сообщение Case Study: UI/UX Design for Vehicle Safety Mobile Application появились сначала на Design4Users.