What Are Breadcrumbs

Breadcrumbs are navigation elements used mostly in web design and supporting users in a journey around the website. Due to breadcrumbs, users get aware of where they are on the website and can get used to the website structure easier, which means that breadcrumbs present a tool for better wayfinding. Yet, breadcrumbs don’t replace the primary navigation menu; they present the secondary level of navigation and increase website usability in case it has lots of pages.

Breadcrumbs on the product page on Amazon

Why such a funny name is used for this interactive element? If you think it resembles something from a fairytale rather than from design terminology, you are right. The term echoes Grimm Brothers’ tale about Hansel and Gretel: in it, the characters used breadcrumbs to mark the way home and not get lost. On the web, it works the same way: breadcrumbs visualize the path or the users’ journey from the perspective of the website hierarchy. That’s why they are also called a breadcrumb trail.

Types of Breadcrumbs

As for classification, there are three basic types of breadcrumbs:

Location-based: they show the visitors where they are according to a website hierarchy, usually applied to websites with complex navigation schemes consisting of multiple levels.

Image source

Attribute-based: they show the visitors the trail of attributes of the page they are on.

Image source

Path-based: these show the visitors the trail of steps they took to arrive on the page they are on. This type is often referred to as less effective compared to previous ones and is not recommended to apply.

Why Use Breadcrumbs

Among the benefits of breadcrumbs as a navigation element, we would mention the following.

• increased findability: the more complex is the website architecture, the more content it has, the better organized it should be to be found quickly. Breadcrumbs give users another touchpoint to the content and help to understand the structure of the website easier
• fewer clicks needed: with breadcrumbs, website visitors can jump from one level of the hierarchy to any previous step with no effort and no need to take all the way back, which means it takes fewer clicks and transitions to reach the page they want
• effective use of screen space: crafted well, breadcrumbs take a narrow horizontal line with plain-looking text elements that don’t need much space, so users get navigated but designers have no need to overload the page
• no misinterpretation: breadcrumbs present the element which is hardly ever misunderstood by users: the behavior pattern for them has solidified through years and people rarely mistake this element for anything else
• lower bounce rate: breadcrumbs are great support for first-time visitors or people that have no everyday experience of dealing with complex websites, so the more confident they feel the slimmer are the chances of them bouncing the page. What’s more, it’s an effective way of engagement for the users directed to a particular landing page: seeing it as a part of the bigger structure shown via breadcrumbs, users can get interested in jumping to other pages and seeing more.

Minimalist product page by tubik for an e-commerce website uses breadcrumbs to follow the typical mental model users expect and help them with quick navigation.

Design Practices for Breadcrumbs

Here’s a bunch of UX design tips and practices that can help to master breadcrumbs as a supportive and handy element of web navigation. Bear in mind that none of these practices is a cure-all to apply for any website: the examples below show you how different products approach this navigation element to cover their priorities.

Don’t use breadcrumbs as the primary navigation

The key rule of thumb for breadcrumbs is using them as an addition to major navigation. They shouldn’t be seen and used as a replacement for global navigation, usually found in the website header or menu. Instead, they support and amplify primary navigation.

Place breadcrumbs above the H1 heading

The most common place where users expect to find breadcrumbs and where they work effectively as a part of the general layout is above the H1 heading. It may be the name of the category, the product, the article’s title, etc. Sure, not all the pages have visually defined H1 headings; in this case, designers find the most appropriate place, typically in the top part of the layout.

For instance, on the George website, the product page features the classic approach to the breadcrumbs: they are placed right above the H1 heading, with a slight line used as a visual divider between them. However, on the category page, which doesn’t have an obvious H1 title, the breadcrumbs just keep at the same position at the layout, below the top navigation, and visual dividers help to clearly separate the trail from other navigation elements and filters.

Consider starting a breadcrumb trail with a link to the home page

Noticeable and easy-to-reach link to the home page that allows the user to jump to the website’s main page from any point of the journey is still an essential part of web navigation. Although more and more users are getting used to the pattern when the logo featured in the website header is clickable and helps to jump to the home page, there are still many those for whom this flow is not obvious. As the breadcrumbs let users quickly define the website hierarchy and their current position in it, it’s logical to start the trail from the main page of the website.

However, if there is a text link to the home page in the primary navigation, for instance, in the header, you don’t need to double it in the breadcrumbs.

As well, in the case of a polyhierarchical website, you may want to concentrate users’ attention on a particular level or category instead of sending them to the home page. For example, Uniqlo starts the trail from the name of the major category user is browsing at the moment, letting the logo in the top left corner do the job of moving visitors to the home page.

Make the current location look non-clickable (or don’t show it)

There are two different approaches to the last item of the breadcrumb trail: you may show the name of the current page or finish it with the previous step, which means that the current page’s name isn’t shown at all. Whatever your choice, make sure that all the elements cover a particular goal and help users. If you suppose that adding the current location to the breadcrumbs is necessary to support usability, make it clear that it’s not clickable and thus looks different from the interactive elements. For the mobile experience, it’s better not to show the current location at all, as the screen space is very limited.

On the contrary, for all the other elements of the breadcrumb trail, make it obvious that they look clickable and are clickable.

Example of a breadcrumb trail on the Walmart website

Clearly separate the elements

One of the most popular separating symbols for the elements of the breadcrumb trails is the symbol “greater than” (>), which typically defines hierarchy and features the movement from the parent category to the child category. Other frequently used symbols are slash (/), right-angle quotation mark (»), and arrow to the right (→). So, designers do have what to choose from, don’t they? Some also separate breadcrumbs with the color putting them into the colored tabs that imitate the line of elements, each colored in a different shade.

Mind readability and white space

As well as for any text element, the primary goal of breadcrumbs is to make the information packed in written form perceived and absorbed easily and in no time. So, take care of making them highly readable rather than decorative. And make sure there is enough space between the elements so that it is easy to read them, visually separate the pieces of text, and click.

A clear and unobtrusive breadcrumb trail on the Google Support website

Show the website hierarchy instead of the interaction history

Unlike the fairytale characters who used breadcrumbs to mark all their way, web designers would do much more effectively turning to show users the clear hierarchy of the pages instead of all the way they got through to reach this page. Such an approach will always look more logical and, furthermore, will clarify the clear and simple path back for the visitor who could get lost otherwise. What’s more, in this case, breadcrumbs don’t work at all for users who landed on a particular page and didn’t take any steps yet.

As Jacob Nielsen mentioned in his article, “a history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confusing progression at the top of the current page doesn’t offer much help.”

Don’t clutter the page with too many elements

What if the breadcrumb trail gets too long? Sure, it won’t be good to overload the page, especially at the secondary navigation level. In the case of the too long breadcrumb trail, some of them in the middle can be hidden behind the ellipsis. But never hide the first and the last element so as not to break the logic.

In his article about breadcrumbs, Alex Zlatkus recommends not to let breadcrumbs take more than half of the page and think about such a shortening with an ellipsis inside when the trails get more than 5 items.

Image source

Sure, the final decision is up to the designers of the particular project. It should be based on usability testing, as there can be different creative design solutions that allow for organizing longer breadcrumb trails effectively.

Don’t emphasize breadcrumbs visually in the webpage layout

If you feel the urge to find a super bright and catchy solution for the breadcrumbs, consider refocusing that on the other object of the web page layout. Breadcrumbs are not the primer violin in this show; that’s not the goal behind them, so keep them stylish but moderate. No need for bright accents, bigger sizes, and impressive fonts – breadcrumbs should just provide the secondary level of wayfinding, not scream into users’ faces distracting them from more important things that solve users’ problems.

For example, the OldNavy website uses super minimalist and non-distractive breadcrumbs placed in the top left corner right below the header with primary navigation, this way sticking to a common left-to-right reading and scanning pattern. That makes breadcrumbs almost unnoticed when you don’t need them but easily found when needed.

Don’t use multiple lines of breadcrumbs on mobile

The most precious asset of any mobile app screen is space. So, optimizing your website for mobile, take special care about that aspect: if the breadcrumbs trail is just copied from the website to mobile, it may take several lines, and this way snips off the big part of the limited screen space. So, by that, you get into the higher risk that some critical elements, for example, the name of the product on the product page or the introductory text, won’t be seen at once just due to the lack of space.

Don’t apply breadcrumbs to the websites with a flat or simple hierarchy

As well as with internal website search, breadcrumbs are needed and helpful in cases when the website has multiple pages and a complex hierarchy consisting of multiple layers. Breadcrumbs are common – and expected by users – in big e-commerce websites and platforms, media and news websites, blogs, and magazines covering a wide range of topics, etc. If that’s not your case and your website has a simple hierarchy, primary navigation will be enough to let the users effectively interact with it.

Example of a breadcrumb trail on the California State University website

Breadcrumbs present the perfect example of how much details matter in user experience design for the web. Being far from primary and critical functionality but approached thoughtfully and crafted well, this interaction element can contribute much to making interactions easier and user-centered. Nevertheless, think twice and test twice before deciding upon them, as there may be more effective secondary navigation options to solve a particular task for a certain project.

Useful Articles

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

5 Basic Types of Images for Web Content

The Anatomy of a Web Page: 14 Basic Elements

UX Design: How to Make Web Interface Scannable

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices

From Zero to Hero: Look at Hero Images in Web Design

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

Сообщение Web Design Usability: How To Use Breadcrumbs появились сначала на Design4Users.

Client and Project

FarmSense is a USA-based innovative tech product that helps growers reduce losses from insect pests and lower dependence on pesticides to take the uncertainty out of pest management for better farming and a brighter future.

Why is it important, and how does it help? The agricultural industry loses more than $220 billion in crop damage each year because of insects. For decades, farmers have been stuck with few options for pest management. Most use sticky traps – a time-consuming and inaccurate method, followed by a broadcast spray of selected pesticides and insecticides. Still, sadly, these traps can also affect beneficial bugs that pollinate more than 70% of the global crop supply.

So, the FarmSense team formed by scientists and innovators developed a better way. Using computational entomological models, they created a real-time sensor that can help farmers make better decisions for pest management, saving time and potentially boosting crop yield. The team believes that leveraging the power of machine learning and computational modeling can help save lives, reduce hunger, and help developing countries achieve food independence.

The target audience they aim at is diverse, from big agricultural corporations to small family farms, from innovators and advisors with high tech-literacy levels to farmers that spend most time right in the fields and have no broad experience or tight connections to different software and applications. So, the team worked on the affordability and accessibility of the technology and strived to reflect that in the branding approach and website, helping them communicate with their clients and uncover the product’s benefits. Let’s check how the designers from tubik achieved that goal.

Identity Design

The branding design process started with extensive research covering the agriculture and ag-tech current state in the USA, the existing presence of the sector on the web, the pain points of the target audience, and the touchpoints of the brand communication.

Based on everything mentioned above, the key advantages of the product that branding had to transfer were defined as:

• sustainability
• affordability
• accuracy of real-time data
• rich information

As well, the team aimed at making a visual branding design system that would have a range from more strict and business-like to more illustrative and emotional.

One of the core tools supporting both emotionality and usability in brand design for FarmSense is color. The palette features bright contrast shades of natural colors employing the psychology of color and giving instant visual connection to the topic of agriculture, summer, soil, fields, insects, and plants: green, orange, yellow, and blue. The latter is also traditionally associated with tech-related and digital products.

Having agreed upon colors, the team started working on the logo. The initial logo design approach was based on data as a core of the problem-solving power of the product. The creative search based on that resulted in a set of brand sign options reflecting that idea via lines and dots forming abstract shapes and building association with digital data processing and statistics visualization as well as fields seen from the bird-watch perspective. The basic shape chosen for the brand symbol was a circle.

Here’s a glance at the logo design process, from sketches through variations to the polished sign. The first version of the symbol developed in this direction was an abstract round sign consisting of vertical lines.

First sketches to think over the idea and find the composition

Digital symbol development

Testing the symbol with the brand name typographic part

Monochrome version of the combination mark

The version of the symbol with soft edges

Icons designed to test how the symbol can be further developed into other types of graphics

Another idea for the symbol at this stage of the creative search was to transfer the visual metaphor of the insect or the sun rising above the field, shaped by the lines. The latter was taken into deeper consideration.

Logo symbol sketching stage

Digital logo symbol development

Combination mark for the brand identity

Monochromatic version of the combination mark

The set of branded items was also presented to show how this version of the logo and color palette could work for various marketing goals: banners, printed advertisements, social media posting, business cards, etc.

Although the general idea looked effective, after discussions with clients and deeper testing, we together made the decision to move to another iteration, as this version of the symbol, even looking different, could bring up associations with some political campaigns that took place earlier in the USA. So, the second approach was also based on aerial views on the fields of crops, but this time irregular and asymmetric, cut by roads in various directions.

For this version, the color palette excluded blue, and the basic shape was square. The creative search was done on the sign composition and detailing.

The idea development resulted in the bright three-color symbol with a moderate level of detail and a bold, readable typographic part.

And here’s how it could be developed into the design system for branded items.

Posters design

Truck livery design

However, the deeper the team dived into the visual concept for the FarmSense brand, the more the client’s team got certain that they would like to combine the discussed approach and palette to their existing logo and reconsider it to make its design bright, up-to-date, and recognizable as well as flexible for various communication objectives.

The previous FarmSense logo

So, the final iteration started at the intersection of the existing logo and the ideas considered in the previous versions. The logo had to become simpler and less detailed to stay clear and informative in various sizes and get packed into a new color palette giving a quick connection to both agriculture and digital technology. Again, it started from basic sketching to think over the idea and moved to the polished logo.

Finally, the option with strict thin lines and a thin, elegant sans-serif typographic part was chosen as an approved brand sign.

So, based on that solution, the consistent set of branded items was designed for indoor and outdoor advertising and brand communication.

Billboards and banners designed for outdoor advertising

Business card design

Rollup design

Exhibition stand design

Truck livery design

With the brand graphics above, it’s also easy to see that another important aspect of identity design for FarmSense was creating custom illustrations. They covered four major goals:

• pictures set the atmosphere and apparent association with the agricultural theme
• specially created graphics helped to visualize the flow and benefits of highly-technological processes which are hard or even impossible to show via photos or videos
• custom graphics helped the brand to stand out of the crowd among the players in the agricultural sector, mostly using photo content which is often quite generic and just setting the theme
• the hero illustrations featuring people added a powerful human element and made brand communication more friendly and emotional

The creative process for the illustration also moved from rough sketches to present the idea and discuss it with the clients to the transformation of the approved ideas into bright digital artworks. Here’s a glance at the process for hero illustrations which had to become one of the first visual touchpoints of the product introduction on the website as a channel of communication.

And here’s the process for creating custom graphics reflecting the main benefits of the FarmSense technology.

Web Design

The next stage of customer experience design, extending the efficiency of the product presentation and amplifying brand communication online, was redesigning a website. At the initial stage, the team worked on developing a structure that would be effective and straightforward for the diverse target audience of the product.

Overview of the UX wireframing stage to consider the solid and straightforward website structure and navigation

At the UI design stage, the bright branded colors were used not only for illustrations and other graphics but also as background colors for different website sections, supporting usability, scannability, and readability of web pages.

Here’s a glance at the home page of the website, catchy, friendly, and informative, amplifying the message with a hero illustration sharing the peaceful, sunny, and positive atmosphere and giving instant connection to the topic of farming that employs modern technology.

The set of original illustrations used across the website pages proves itself as a powerful tool for visual communication and storytelling. It supports the text content, sets the mood, and helps establish consistency and integrity in the website’s performance.

Also, an infographic with custom illustrations was created to visualize how the technology works and make its benefits more accessible.

Here’s a closer glance at the set of artistic color icons supporting different text messages and creating visual triggers for essential functions or benefits to make them more noticeable and well-organized for website visitors.

To make the website work effectively and look attractive on any device, the tablet and mobile versions were also well-thought-out. They were arranged to provide a smooth and integral user experience at any stage of interaction.

For our team, the FarmSense project was a great chance to collaborate with the representatives of the modern ag-tech industry developing with a rocketing speed now and utilizing innovations to improve farming experience and outcome, which is crucial for the whole world.

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.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

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

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Glup. Delivery App Branding and UX Design

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

Carricare. Identity and UX Design for Safe Delivery Service

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

Сообщение Case Study: FarmSense. Brand Identity and Website Design for Agricultural Technology появились сначала на Design4Users.

Project

Synthesized is the all-in-one DataOps platform which is helping to solve one of the most challenging problems we face as a society—the use of personal information. Synthesized makes it easy for organizations that want to collaborate on sensitive data. It enables enterprises to monetize and innovate through their data and speeds up the development of data-driven products. In as little as ten minutes, as opposed to months or years, Synthesized’s AI-based platform provides data practitioners with secure and compliant, ready-to-use, high-volume, high-quality data sets.

Telling about the product’s mission and origins, the founders mention that from their time as Machine Learning (ML) researchers at the University of Cambridge, they struggled to obtain sufficient clean and regularised data fundamental to building predictive models or testing a hypothesis. With ML projects becoming more advanced, the complications were also growing in the attempts to get high-quality, clean data sets. What’s more, they found a gap between the developments of the scientific community caused by the lack of infrastructure to share data safely. So, they started Synthesized with a mission to empower data scientists with the highest quality datasets for collaboration and innovation.

The task for the tubik team was to create a user-friendly and attractive website that would present and promote the service, uncover its benefits, and set a quick, easy connection to its users.

Web Design

Traditionally, the design process started with discussions with the client to dive into the nature of the service, the business goals, and the expectations about the functions the website should cover. After that, the team went through the stages of research and analysis that gave food for thought on how to create effective design solutions for the objectives set behind the website. And then, the stages of UX wireframing and design approach started to let all the sides of the process be on the same page.

Let’s take a look at the general design concept via some of the pages designed for the website. The search for a color palette that would be effective and set the proper mood resulted in a bold and contrast combination flexible for various design needs. Another key choice to make was the choice of fonts which gave the elegant and stylish combination of graceful Canela as a heading typeface and neat geometric Gilroy as a text typeface.

As the dress-to-impress rule still works, especially on the Web overloaded with pages and sites competing for people’s attention, the above-the-fold part of the home page moved through several iterations to find the visual way to reflect the connection to the world of synthesized data. This way, we came up with an animated full-screen background with abstract patterns adding depth and dynamics to the visual experience. The minimalist layout of this part of the page is scanned in no time and features the core navigation in the header, prominent tagline, and small description text to give a short and concise message about the nature of the product, and a CTA button whose noticeability is supported with bold color contrast to make it seen at once.

Background color contrast is used as the primary type of visual divider, helping to separate various web page sections and this way, make content perception easier. The pages look information-packed but not overloaded due to mastering the power of negative space and well-thought-out data visualization. It is a highly essential aspect to consider in user experience design for products that are non-tangible and innovative, so they demand a lot of explanation which is challenging to imagine and hard to show.

This page uses neat tabs with bulleted lists to present information about different features in a straightforward manner that is easy to skim and remember. The abstract background pattern reflects the idea of growth and gets animated to make the experience more engaging.

It’s easy to see from the pages above that one more aspect to consider in the design process was visual elements that would support text blocks. So, the custom icons were designed to support the consistency and integrity of the layout with informative graphics. Making them animated, we could also employ motion to attract visitors’ attention to particular elements and interactive zone, as well as add a pinch of liveliness to the web pages.

As mentioned above, balanced and attractive data visualization was one of the priorities in a project of such a nature, so this aspect was thoroughly thought-out, resulting in a range of techniques from graphs and code snippets brought to the common style to prominent infographic-like numbers presenting essential benefits.

The blog page design uses the uncluttered regular grid with one featured post on top. We also thought out and offered the design system for covers of the articles and resources, designed in a futuristic manner and satisfying both consistency and diversity needs.

Here’s the system of cover images designed for whitepapers and downloadable resources to be presented in style echoing the web platform’s visual identity.

The Company page is built around the animated photo gallery, which sets the emotional connection and adds a powerful human element to the presentation of the product.

As a number of our earlier projects, for example, Credentially or ShipDaddy websites, the Synthesized website was also implemented on Webflow. It enables both designers and the client’s team to effectively update the website in live mode and keep up with the speed of the company’s growth.

Mobile Adaptation

For any web project these days, the well-crafted mobile adaptation is not a privilege anymore but a must-have that makes the website look good and work well on any device convenient for the visitor, as well as have a significant impact on search ranking. Here’s a glance at how some pages of the Synthesized website look on mobile.

Synthesized is the company we’ve still been collaborating with, so it’s not the complete story: new design tasks are being covered, new challenges are being faced, and that’s the amazing experience to go through the different growth and scaling stages together with the client, from the basic website to the diversity of pages, content, and functions.

Stay tuned; new design case studies are coming soon!

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.

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

Nonconventional Show. Website Design for Podcast

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

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

Сообщение Case Study: Synthesized. Website Design for DataOps Platform появились сначала на Design4Users.

Project

Web and graphic design for an online educational resource covering different aspects of radioactivity.

Client and Idea

Although known more for quite a poor reputation, radiation as a phenomenon is presented by not only tragic but also curious and inspiring stories, facts, and findings. The clients set an objective:

• to experiment with the interweaving and creative retelling of these complex narratives,
• to push the common perception of the radiation phenomenon,
• to diversify and broaden the knowledge about radiation.

They wanted the project to revitalize the collective understanding and embolden people to be responsible custodians of our radioactive world.

As for the client side, Illuminating Radioactivity is generously supported by the Stevens Institute of Technology. It was developed in partnership with the Bombshelltoe Arts and Policy Collective and the Stimson Center. In addition to the website, a part of the project is the book Atomic Sublime by Lovely Umayam and Tammy Nguyen.

Design

The main creative direction the Tubik team got to realize by design and content presentation was changing the perspective of a common vision of the radioactivity phenomenon. In particular, the website had to present a lot of various information from experts and scientists in a comprehensible, digestible, and engaging way for a wide and diverse audience. The content visual performance had to shift the understanding of radioactivity as something negative to a much broader outlook, including the positive side as well.

The first iteration of web design was corresponding to educational needs: airy and elegant, simple and intuitive, somehow looking like a beautiful textbook. And that was the moment when the client got totally sure they wanted something absolutely uncommon and even revolutionary. They strived for the design breaking standards and stereotypes as the project idea in its essence aimed at breaking standard thinking about radioactivity.

So, Tubik designers developed a totally new concept of visual style and interactions.

Interactive Home Page

One of the clients’ wishes was to make the home page interactive. There are many stereotypical associations about radiation, mostly negative. The clients’ idea was to add the interactive form on the home page and offer visitors to input the associations they had about radioactivity. Yet, designers got them quickly convinced that offering a newcomer not knowing much about the website to take some effort was not the best way to go. Instead, they came up with an idea of a super interactive page. It opens the field full of bright tags featuring popular characteristics of radioactivity and hiding the name of the project. Moving the mouse cursor, users remove the tags, as well as the website, is going to erase the common stereotypes about the theme of radioactivity.

Typography

As text content is the core of the informational value of the project and readers have to interact with it much, the choice of typography means was one of the most important stages of the design process. The main font used for the title elements is also symbolic. It is called Opposite, and it was chosen for its original, attractive, and irregular geometry of characters. Amazingly, even the font supported the objective of setting the opposite direction to the global understanding of radioactivity.

Images and Animation

To step aside from the traditional presentation of archive photos and graphics, massive work was done on images. The major type of visual content for the website is trendy and catchy collages with a vibe of brutalism and livened with smooth animation.

Keeping the balance of text blocks and images integrated into the narration, the designers performed such a serious theme and content in a way that wouldn’t let the users feel bored.

Each section of the website also has a theme collage and a specific color solution. Together with the long-scroll structure, all that creates the amazing experience of engaging storytelling.

Details

There are also other design details that are worth mentioning as they added their two precious cents to cool interactions:

• an interactive cursor with dynamic visual effects supports the theme
• the effect of visual noise is added to all the website pages to amplify the atmosphere
• some of the website parts also feature the sound imitating the Geiger counter
• the pages devoted to the findings of particular scientists break the long bulks of information into several bright cards, changing one another in the process of the scroll and making text consumption easier

Technically, the base platform to realize the project was Readymag. When the general stylistic concept of the visual performance was agreed upon, the designers moved right to Readymag and built all the user experience with it from the very start. This way, they could check directly and in no time how the interactions and animation work together with the diversity of text and backgrounds.

The mobile adaptation of the website was also designed to impress visitors independently of their device choice.

No doubt, that was a super informative experience for all sides. The design team had to dive deep into the theme and work in tight collaboration with experts to make the website not only attractive and unique but also readable and trustworthy. This impressive website was recognized as a Site of the Day on Awwwards.

Check the live Illuminating Radioactivity website to find not only useful information but also bright and original design solutions.

More Design Case Studies

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

BlockStock. Brand Identity and Website for Minecraft Models Resource

Roebuck. Mobile Design and Illustrations for Educational App

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

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

Сообщение Case Study: Educational Website About Radioactivity Phenomenon появились сначала на Design4Users.

Project

Bennett is a modern brand offering users high-quality tea for different tastes. It produces various worldwide popular beverages, such as black tea, herbal tea, green tea, decaffeinated tea, iced tea, and seasonal tea. The brand is positioned at the crossroads of hot trends and classic traditions and transfers the idea of elite, exclusive products which are about lifestyle and mood rather than just a drink.

Identity Design

The logo design for Bennett is based on the symbol, which presents a combination of shapes sharing the visual metaphors of a teal leaf, an eye, and a teacup seen from above. The sign is harmonically combined with a typographic part that features the brand name presented in an elegant and minimalist manner.

The brand identity that had to stretch to the e-commerce website design is rooted in the creative spark that is sometimes hidden in the simplest things. It started when our designer and art director, Ernest Asanov, got inspired by a photo of neatly collected tea leaves and started developing the idea. In identity design, it got transformed into a graphic pattern, and later the set of patterns applied to packaging and branded items. In the website design, the idea to feature realistic images of tea leaves turned into a video used on the product page.

Here’s how the graphic patterns became the basis for packaging design and stylish paper cups.

From the packaging perspective, one more important design task was creating an informative label that corresponds with the general stylistic concept and keeps consistency across a variety of packaging options. The label design carefully arranges a lot of text content about the particular tea blend to make it readable and straightforward; it looks original and trendy due to typeface choice and enhances perception with neat and clear line icons. The front label contains only key information and focuses buyers’ attention on it without distracting or overloading them with too many details, while the back label presents much more detail.

As a part of identity design and brand communication, special branded envelopes and business cards were also developed to echo the style.

Web Design

The website design approach starts from the home page, which uses typography as its primary and only tool for informing and impressing visitors. No photos, no illustrations, only the elegantly wrapped text content setting the mood and call-to-action button seen at once and inviting the visitor to check the range of the offered products. Product pages instantly connect to the tea theme and set the emotional and aesthetic appeal due to the video of tea leaves scattered from the top of the screen.

Here’s a closer look at the interaction with product pages in the tea store. The layout is built on bright and bold color combinations for the backgrounds, effectively highlighting various products in different packaging colors. Split screen, sophisticated geometry, smooth animation, and original typography – that’s what the designer chose for this case of web layout. The text information is organized in boxes, forming a sort of asymmetric grid.

To keep up with the external consistency and recognizable mental patterns of commerce website users, the website uses a stylish and minimalist sticky header, with the brand element in the center, links to core navigation in the left part, and a shopping bag button in the right corner. The latter uses the visual marker accented by color to let visitors quickly see if they already have something in their shopping bag.

The live Bennett Tea website was fully implemented on Webflow: for our team, it was a great chance to try how it works for non-standard design aimed at e-commerce objectives.

To make the website look good and work effectively on various devices, the designers worked out the mobile version of the website.

The website got positive feedback from the global design community, having received three awards on Awwwards: Site of the Day, Mobile Excellence, and Developer Award, proving once again that Webflow allows for the effective implementation of projects of different complexity and non-standard design solutions.

Stay tuned; new case studies are coming soon!

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.

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

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

Carricare. Identity and UX Design for Safe Delivery Service

OOP. Brand Identity Design for Online Flea Market

Otozen. Mobile App Design for Safe Driving

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

Сообщение Branding Case Study: Bennett. Identity and Website Design for Tea Brand появились сначала на Design4Users.

Stop Plastic Website

This web design project is called StopPlastic and deals with a hot and important topic of today: our world is overloaded with plastic, and this issue shouts for global attention. The website tells people more about the problem, its influence on nature and our future, and information about how to solve it.

Limited and contrast color palette, readable text blocks efficiently supported with negative space, impressive visual and video content, and smooth motion for interactions make the user experience emotional and engaging. Visuals are mostly presented by artistic and eye-catching collages and theme photos. Typographic hierarchy is made super solid to let users quickly skim the text content and not miss the essential ideas.

Ecotourism Website

This website was designed for a service for people that want to try ecotourism and have some rest deep in nature and far from the urban hustle and bustle. The home page features a stunning hero illustration. The Discover web page tells and shows more about the destinations and types of holidays to book, with the video integration to amplify the effect.

The design shows the balance of readability and decoration in typography choice, solid visual hierarchy, and thoughtful integration of different types of visuals: photos and custom theme illustrations.

Mobile adaptation helps to save visual harmony and allows users to interact successfully with the website from any device.

Zero Waste Website

“We abuse land because we regard it as a commodity belonging to us. When we see land as a community to which we belong, we may begin to use it with love and respect.” Aldo Leopold’s words are full of truth, and luckily, that philosophy seems to inspire many people these days. This web design concept is also of that kind. Take a glance at a website devoted to a zero-waste lifestyle: here, people can communicate, get useful information and tips as well as buy eco-friendly and reusable stuff.

Promoting the philosophy of minimalism, sustainable consumption, and zero-waste living, the website design also sticks to minimalistic performance and navigation.

The product pages are built around the prominent product image and engaging animation of a bird to set a strong association with nature. The little bird image also works as a visual mascot uniting different pages of the website.

And here, you can check how the choice of color works on a product page, making the experience engaging due to smooth dynamic animation.

Blog pages feature lovely theme illustrations, split-screen presentation to make the text content scannable and readable, and an engaging loading animation. Here you will find the bird mascot supporting the integrity of transitions between pages.

And this page makes a part of the theme illustration work as loading animation.

Save the Oceans

This web design is devoted to a vital global problem of awful pollution of the world’s oceans, which has already become a disaster. Look at the user interface and interactions designed for Save the Oceans, a charity website gathering the community of people to make our planet a better place for future generations. The instant atmosphere of the theme is created due to the appropriate color palette giving a strong visual association to the majestic power of the ocean as well as atmospheric photo and video content.

The airy layout, bold typography, and ocean motifs transfer the theme to the visitors from the first seconds and make the content scannable and attractive, whatever the device they come from.

The 404 page deserves special attention, showing another piece of a creative idea by turning the error page into an atmospheric image supporting the general message of the resource.

Innovative Energy Service Website

The issue of alternative power sources and sustainable building is one of the hottest now, arising multiple innovations and new products. This web design concept is also devoted to this theme: it’s a home page design for the company providing services in new-age sustainable energy production, consumption, and even distribution for community needs.

The page features a digital theme illustration in the above-the-fold area to quickly set the visual associations and amplify the message provided in the tagline and core description block.

Environment Protection Community

With all the global problems our planet faces today, communities of people concerned with them are growing to prevent the negative impact. This web design example gives a look at a home page designed for the website of the eco-aware community consulting businesses and manufacturers, as well as launching projects devoted to environmental protection.  The composition and color palette of the hero illustration support the emotional appeal and create an instant message about the theme. The visual hierarchy of the webpage sets the basis for scannability to make the major information and CTA button instantly visible.

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

Tubik Design Collections

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

Design for Sales: 10 Creative UI Designs for Ecommerce

Steal the Show: Creative Web Design for Diverse Events

App Design Ideas: 7 Nifty Mobile Application Design Projects

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

Mobile Design: 14 Stylish and User-Friendly App Design Concepts

Web Design: 26 Examples of Creative Landing Pages

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

Logofolio: 16 Logo Designs for Different Business Goals

Originally written for Tubik Blog, graphic content by tubik

Сообщение Web Design Examples on Environmental and Ecological Issues появились сначала на Design4Users.

Project

Logo, identity, and ecommerce website for the brand of weighted blankets

Client and Story

It’s not a secret that healthy sleeping plays a huge role in people’s physical and mental health, productivity, and creativity. GNO Wellbeing company produces special and well-checked heavy blankets that present a reliable and comfortable way to wipe out anxiety and racing thoughts and sleep better.

First, GNO weighted blankets were sold only via Amazon, and people bought the product quite well there. However, to reach a wider audience and increase profits, GNO founders decided to build a solid brand and create an ecommerce website to expand their sales. As well, they strived for a new identity that would be both modern and flexible for various marketing goals.

Logo Design

Traditionally one of the core tasks at the branding design process is creating a logo, and this case was not an exception. The client gave a clear direction set behind the brand message: GNO Wellbeing is the brand that helps achievers to get a good sleep that helps them to achieve their goals. They wanted the logo to be fun, modern, and youthful and wished to think in the direction of a symbol logo rather than a wordmark.

As usual, the logo design process started with the creative search for a general visual idea. What the designer had to consider was the flexibility of logo usage for a diversity of surfaces, from blankets and packaging to the website and social networks.

The first set of concepts played around letter variations.

Here’s the symbol featuring the letter G that covers itself. The curves and rounded corners give a cozy feeling. In addition, the covering gesture corresponds with protection from anxiety and sets the visual association with the blanket.

Logo concept

Label concept

Bag design concept

Another concept presented a curvy letter G with a wavy ending that refers to the flow of a blanket when covering someone.

Logo concept

Label design

Bag design

One more logo design concept was inspired by the folds on the blanket. Also, it referred to ripples in the water, which is associated with calmness.

Logo concept

Label design

Bag design

From this iteration, the style of the first variant was chosen for the further creative search direction to continue and dive deeper into searching for a proper symbol that would be both attractive and informative.

The new set of logo concepts offered a variety of symbols that could be developed and polished for the final brand sign. The set included both color and outlined options; most variants featured recognizable symbols such as a sleeping cat, moon, dreamcatcher, and some more abstract signs.

In addition, to get another angle of view, the graphic designer made the set of options for typography logos in different styles, from bold and minimalist to beautifying serif.

Having considered all the options, the symbol featuring a peacefully sleeping and smiling moon was agreed upon as the most effective for the brand goals.

So, this option was further developed as a brand sign for different goals. The choice of color had to be made, as well the designer offered two options for each color solution, outline and filled.

The choice of visual concept was made upon a beige outline logo symbol (variant 1) accompanied by a solid and simple typography part.

Then the approved logo was applied to the branded packaging and blanket label.

One more aspect to cover for the identity design was packaging solutions for branded candles. The minimalist and elegant solution for the candle with a branded cork featuring the outline logo and the readable label that used color marking for different scents and clear typographic hierarchy to let the buyer quickly skim the information.

Another point to consider was updating and improving the Amazon presentation as the company still continues using this sales channel as well. So, it was important to make the brand presentation consistent everywhere. We created new infographics for that goal that supported the design solutions for identity and web design.

Web Design

The website design for the brand had to keep visual consistency and harmony with the identity concept, let users quickly catch the message, review the benefits of the product, and make a purchase.

The web pages feature a well-balanced combination of airy light and deep dark backgrounds, high-quality visual content demonstrating the product outside and inside, clear visual hierarchy, readable fonts, and digestible information blocks, making the website scannable and eye-pleasing.

The website uses the sticky header to make the core links and cart available from any point of interaction.

Here’s a look at the home page. Its mission is to inform visitors that weighted blankets are not just regular blankets; they help people to get over sleep disorders and reduce anxiety. To quickly demonstrate that benefit, designers integrated custom illustrations that add a good mood and emotional appeal to the website. The information is divided into clear, digestible blocks in which background color works as a visual divider. The CTA button in the above-the-fold area echoes the color of the logo.

Home page for GNO Wellbeing website

Smooth scroll animation makes the interaction even more dynamic and attractive.

Except for the hero illustration featuring the peacefully sleeping woman and instantly setting the needed mood and atmosphere, there were some more custom 2D graphics integrated into the layout: a lovely sleeping cat character featured on the popup for subscribers and the section of reviews and original icons reflecting the benefits of the product.

Original icons visualizing the product benefits

The reviews section integrated into a cozy night-theme illustration featuring a cat character. 

The Subscribe pop-up window with the custom illustration of a sleeping cat

The product page gives all the details about the product, includes the video presentation, and allows for choosing the needed blanket and adding it to the cart. The light background, balanced and thoughtful use of negative space, instantly noticeable CTA button, and highly readable font create the solid visual hierarchy of the page and make it easy to scan and interact with.

The GNO blankets are made with premium materials. It’s important to tell customers about it, but it’s even more effective to show it. So, a special 3D illustration of the blanket layers was created to give an impressive visual presentation of that aspect.

The About page also uses contrast blocks to present the pieces of content. In the pre-scroll area, it gives a quick message about the brand message with a clear and prominent tagline in combination with the important infographic-style numbers about the company and lovely photo content setting the needed theme. This block uses a dark background making the photos look deeper and the tagline even more prominent. The next block uses a light background, first of all for the sake of readability as it presents the bigger block of text telling about the brand.

So, the website for GNO features three different types of visuals: photos, 2D illustrations, and 3D graphics, harmonically combined and balanced together.

Blog pages designed for the website also feature the same approach: they are airy, calm, and highly readable, with the careful selection of photo content that sets the consistent visual atmosphere.

To make the website usable from any device, the team made the mobile adaptation of the pages considering the peculiarities of mobile interactions.

In general, that was the case of tight and fruitful collaboration with the stakeholders to clarify the business goals and find ways to reach them by means of design appealing to the target audience and unveiling the benefits of the product.

Welcome to check the GNO Wellbeing website live.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

PointZero25. Identity and Website Design for Event Agency

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

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

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на 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.

By Peter Tarka

By tubik

By Wolfe

By UI8

By Mike Creative Mints

By Peter Tarka

By tubik

By Mike Creative Mints

By UI8

By Voila

By Plainthing Studio

By tubik

By Peter Tarka

By Tran Mau Tri Tam

By Orizon

By Sebo

By Leo Natsume

By Upnow Studio

By Alzea Arafat

By Seahawk

By tubik

By Herve Studio

By Ramotion

By Halo Lab

By Devignedge

By Mike Creative Mints

By Plainthing Studio

By Sebo

By Mike Creative Mints

By tubik

More thematic design collections are coming soon, don’t miss.

You may also like the big collections of e-commerce web design examples and ecommerce app designs, examples of awesome 3D illustrations, neumorphic UI designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение 30 Inspiring Web Design Concepts with 3D Graphics появились сначала на Design4Users.

In our today’s collection, you will find a bunch of concepts that demonstrate the results of this creative search. Here you will find a variety of web pages typical for e-commerce websites: home page, catalogs, product pages, landing pages for particular campaigns. Enjoy, consider, and get inspired!

Fashion brand e-commerce website by tubik

Skincare e-commerce website concept by Emy Lascan

Food ecommerce website by Vision Trust

Clothing store website page design by Orizon

Ecommerce website design for craft confectionery by tubik

Online fashion store website concept by OTAKOYI

Bright ecommerce website concept for selling shoes by Shah Alam

Fashion ecommerce web concept by gde.design

Product page concept for a toy shop by Anatoliy

Brutal product page design by Justin Greene

Product page design exploration by Emy Lascan

Ecommerce fashion store concept by Witech Enterprise

Furniture store website concept by Bold Monkey

Balloon e-commerce website by Cuberto

Furniture e-commerce product page concept by RH Agency

Fashion e-commerce web concept by Ariel Jedrzejczak

Cosmetics e-commerce landing page concept by Nickelfox

Furniture e-commerce product page design by Halal Lab

Minimalistic product pages concept by isavelev

Ecommerce theme design by WPDeveloper

Clothing e-commerce website concept by Halal Lab

Light and airy product page concept by Vishnu Prasad

More thematic design collections are coming soon, don’t miss.

You may also like the collections of ecommerce app designs, neumorphic UI designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение UI Inspiration: 20+ Web Design Concepts for E-Commerce появились сначала на Design4Users.