With the growing attention to prominent visual details and diversity of graphics on modern websites, the approach of using a hero image seems to move from trends to well-established strategies. In today’s article, we’re going to discuss what is hero image, why it’s important in web design, and how to make it work for your goals. And sure, we’ll show that all on multiple web design examples by the Tubik Studio team.

Landing page design for a photo service using a hero illustration

What Is a Hero Image?

In web design, “hero image” is a term that is applied to a big eye-catching image that is usually seen in the above-the-fold zone of the webpage right below the website header. This simple scheme from Balsamiq covers the basic idea.

As it’s seen from the wireframe above, a hero image usually takes almost all pre-scroll full-width space on the page. The other layout elements (call-to-action button, text, etc.) are located in the header and on or around the hero image to present a consistent and balanced visual composition.

Make no mistake, the term doesn’t require that all images of this kind should include only a human, animal, mascot, or any other kind of character. Don’t get stereotyped with that “hero” part. It can be also the theme image featuring a landscape, a device, a building – anything, even an abstract model or composition. The main idea is that the image instantly grabs attention and allows for setting a quick visual, emotional, and informative connection with the user.

This landing page for a babysitting service applies an animated hero image with funny characters

Why Is Hero Image Important?

Why is it hero? There are several points to answer this question.

• Attention and impression. First, because it activates the power of visual perception from the first seconds. No secret, there is no much time to impress the first-time visitor to the website or to catch attention to new offers. The hero image gives a chance to impress the users as fast as possible.
• Information. Most people perceive and decode images much faster than words. It means that the hero image is not only the element of attraction – it’s also an informative part of the page, providing a quick visual message about the content.
• Navigation. The correct composition of the hero image can strengthen navigation and bring more attention to the call-to-action button.
• Emotional appeal. No secret, the emotional background of user experience plays a big role and makes communication between the website and its visitor more human-like. Hero images are a well-proven way to transfer the needed emotions via images, shapes, and colors, and set the needed atmosphere from the first seconds of interaction.
• Aesthetic satisfaction. The offer and functionality of the website are a priority, sure. Still, people also expect to get their eyes pleased. Aesthetics means much in terms of high competition on the web and rising desirability as a part of a positive user experience. A hero image is one of the ways to activate aesthetics at once.

The website of the design studio uses full-screen hero images to both impress the visitors and inform about professional abilities.

What Types of Graphics Are Used for Hero Images?

The type of graphics for the hero image and the message they transfer depend on the goals for this particular webpage and the type of the website in general. It can be news that has to catch users immediately, the image reflecting the nature or the benefits of the offer or information, fresh publication that deserves the most attention, and so on. E-commerce websites often use hero images to present bestselling products, sales and special offers, strategical services, or hot deals.

This website presenting and promoting massage services uses the thematic photo as a hero image that quickly informs about the nature of the offer in the above-the-fold area of the home page

As for the type of graphics, the hero image may include the following.

Photos

The essential benefit of photos is that they connect the stuff which users see on the web page with a real world of physical things and live people. Photos have been a part of human reality for many decades, much before the Internet’s advent. That’s why we feel the visuals of this kind like intuitive, close, and clear. What’s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life. So, used on a website, it sets strong associations and may reflect the needed atmosphere in a style typical for the target audience.

What’s more, photography is also a kind of art. Photos let you set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and creating the necessary emotional background. This is one of the reasons for choosing photos to support articles on blogs and media websites.

Furthermore, photos are the main tool of visual presentation of goods on e-commerce websites where the principle “you get what you see” is a vital part of success.

The landing page designed for Dance Academy applies animated hero images on the dynamic slider that instantly connects visitors to the theme of dancing and informs about the closest classes.

Fashion e-commerce website uses photos as hero images catching attention and setting the proper visual style.

Photo as an impressive hero image as a part of the website redesign for Trevor Sorbie, the British celebrity hairdresser. 

Vintage photographic hero image for the web editorial devoted to powerful women that have changed the world

Illustrations

A big web design trend now is using custom illustrations for a variety of website needs, including hero images. Made in various styles, custom graphics effectively support the quick perception of the information on the page or screen. They also set the solid foundation of visual originality and adds aesthetics and beauty to landing pages, blogs, and websites.

A concept of a portfolio website for a designer that specializes in projects for celebrities, entertainment, music, and film production. Dark background in combination with the custom hero illustration looks more vivid and sets the association with the atmosphere of a concert stage.

Page for the website for ecotourism services using impressive and atmosperic custom illustration as a hero image

3D Graphics

One more type of web visuals growing its presence this year is 3D graphics, visuals created by turning 3D wireframe models into 2D images. Many of them have photorealistic effects which are their big advantage for web design. 3D renders may serve well in cases when photo content you need is impossible to get or highly expensive. Although creating the images of this kind demands specific skills and is quite costly and time-consuming, well-done 3D graphics are highly attractive, trendy and convincing so they can have a great impact on web design looks and conversion rates. That’s why now they are also very popular in hero images.

That’s a website of a company that designs and builds sustainable homes using solar power to get all the needed energy. The 3D-rendered model of a house allows users to see the photorealistic image of the offered service and even manipulate it to see the view in day and night mode.

Practices of Using Hero Images in Webpage Design

Now let’s discuss some strategies for hero images that work effectively.

Consider using clear and laconic tagline and make it work together with the image

A tagline is a short and powerful line of text, a kind of slogan that sends a quick and clear message to the reader. It may inform about the core benefits or a problem solved with the product; it may call the reader to action or ask the question that is answered in the rest of the text on the page, etc. If you use a hero image, its harmonic combination with a tagline may be an effective idea: this way the image is supported with the power of words, while the words are made more expressive with the visual.

Here’s the webpage for the online bookstore selling children’s books. The hero illustration instantly creates the proper atmosphere and together with a simple tagline encourages users to subscribe.

Another example of the web page where hero image and copy content present solid composition, set a positive atmosphere and inform users about the theme of the content the Health Blog provides.

Play with fonts

Typography is not only a way to let users read the information in text. It’s also the part of the design, with its own mood and goals. The hero section of the webpage is a good reason to search for the fonts that will also visually reflect the style and mood of the hero image – or vice versa, will present a total contrast to it, this way attracting attention and rising interest. So, take your time to find the harmonic fonts, that will work together in one composition. However, keep your eye on the issue of readability: too much of the experiment can lead to unreadable copy and poor user experience as a result.

The landing page for the security application uses the visual contrast of a hero illustration full of irregular curves and thin lines and bold solid Druk font.

And this landing page with a hero image features the choice of a serif font Domaine for the tagline. It visually reflects the style of the illustration. Yet, for the description copy block, the designer chooses a sans-serif font that is highly readable. 

Let navigation elements and hero image work together

Whatever stylish and harmonic is your webpage design, it’s not valuable if it doesn’t convert. One of the core conditions of easy conversion is making a call-to-action element quickly found and clear. So, in pursuit of beauty, don’t forget about the main goal behind the webpage and don’t let the hero image to overcome the CTA. Instead, make them work together and support each other. Let the hero image and navigation work together.

This design of a booking service website uses a prominent hero image in the form of 3D graphics. To make the composition of the layout not only aesthetic but also effective, the designer uses the same shade of yellow color both as a basic color of the hero image and an accent color for interactive elements: logo button and CTA button. 

The landing page for the mailing service features another hero image used as a full-screen illustration and combined with navigation elements by color accents.

The landing page for the visual media tool uses 3D graphics as a hero image and the split screen making the geometric composition even more expressive. The color accent used for the CTA button makes it instantly visible and visually united with the image.

The landing page for the car wash service website also uses the color as the main tool uniting visual details of the hero illustration, the copy content and the CTA button.

This landing page for the modern art exhibition features the experimental integration of typography into the hero image this way setting the original visual composition.

Add animation

Another way to strengthen a hero image is by adding motion. Animation is an effective approach to add even more emotional and informational power to the visuals, enhance storytelling and set more associations. As well, animation helps to add originality to design.

The website of the innovative energy service quickly grabs attention and informs users about its nature and values with a nice animated hero image.

The landing page for the illustration conference builds the composition on the original and eye-pleasing animated hero image.

The design for the Crypto Blog uses the abstract geometric 3D animation as a hero image and visually unites them with the layout via the color accents and split background.

Evoke emotions

As Aarron Walter said, “When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.” Sure, it doesn’t break the fact the functionality and simplicity of the product are the foundation of user experience. Yet, except it, users also strive for the lovely facade and positive vibes. As visuals are the great tool of setting the needed mood, one of the primary goals designers set for hero images is evoking the emotional appeal of the design.

The landing page of the kindergarten uses a big funny and cute monster designed and animated as a hero image to entertain users and set the needed emotional background.

The cartoonish hero illustration for the page of tea events on the Tea Club website quickly sets the visual connection to the theme and transfers the great atmosphere of tea ceremonies.

The page designed for the education website devoted to the Second World War also sets the emotional background with a hero image – this time hero in its literal meaning as it’s an archive photo of the personality presented on the page.

Add artistic vibes

With more and more competition on the web, designers are looking for different tricks to win the struggle for users’ attention. One of the popular trends now is the artistic, sometimes experimental digital illustration, often used in hero images. Creative experiments seem to combine traditions and innovations for the new circle of web design evolution.

The web page of the gallery of Pritzker Prize winners and nominees in the online architecture magazine features the artistic digital portrait of Zaha Hadid.

The experimental illustration is used as a hero image on the website for the food delivery service. You may like it or not, but it will definitely catch your attention.

The web page designed for the Daily Poetry website uses hero illustration integrated into the page and this way strengthens the poem with visual images and melancholic palette.

The landing page promoting the productivity service features the hero illustration inspired by the high art.

To sum up, we can see that hero images present a diverse and flexible tool in a web designer’s bag of tricks. It has great potential in amplifying both usability and aesthetics of the web page, this way engaging users to learn more.

Useful Articles

Web Design: 5 Basic Types of Images for Web Content

Functional Art: 10 Big Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Single-Page Website: Best Design Practices

3C of Interface Design: Color. Contrast. Content

Call for Attention. Powerful CTA Button Design

Originally written for Tubik Blog

Сообщение Hero Images in Web Design: When, Why, and How to Use появились сначала на Design4Users.

Landing Page Objectives

Why and when landing pages are used most often? As for the goals behind the landing page design, they can be different; yet, the biggest diversity of such web pages is found in the ecommerce sphere. In this field, they support both visitors and stakeholders presenting the particular commercial offers without distraction, in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially effective for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page, in this case, can lead to poor user experience, in particular when visitors come from marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page. Or their attention will be driven away so the purchase won’t be finalized. A landing page is a solution to avoid these issues and focus visitors’ attention.

But landing pages are not only about selling and buying: there are also many other cases. They are widely used to present and promote:

• mobile applications
• educational resources
• charity platforms and activities
• communities
• events and meetings
• special announcements and information.

Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help. Let’s review the variety of examples for different goals. Most of the design concepts are based on well-checked approaches, so they feature:

• clear visual hierarchy
• catchy hero image
• bold and highly readable typography
• short scannable tagline
• readable and concise description
• instantly visible call-to-action element
• the color palette with emotional appeal corresponding to the message of the page

So, let’s get started!

Landing page for a photo service

This design has been created for the web promotion of a helpful digital product for those who love photography. The application allows a user to keep their photos in an organized gallery and albums, find the needed photos in short seconds and improve their looks with an AI-based editor. That’s a bright example of using custom hero illustration to support storytelling, add originality and make web marketing effective.

Landing page for a scuba diving course

When the season of water sports is at its full, for businesses in this area it’s important to reach the target audience that looks for activities, training, and entertainment through the Web. This landing page design has been designed from the perspective of that theme: it’s created for the company that organizes active lifestyle tours and workshops in Portugal and presents the course on scuba diving. The refreshing and atmospheric photo instantly transfers the mood and reflects the nature of the offer, split screen clearly distinguishes different interactive areas and the thought-out visual hierarchy makes the web page scannable.

Landing page for an innovative car wash service

Now more and more digital products are created not to sell, offer, inform or educate, but just to connect people that can solve problems of each other. This design is right about that kind of task: that’s a landing page of the website for a service that provides innovative car cleaning and offers those who want to join and earn money. This particular page is aimed at people who want to be hired as cleaners and join the team of local car wash providers. Cute and catchy hero illustration sets the positive mood and informs about the nature of the service letting all the other content be readable and clear on the airy light background.

Landing page for a mail management service

This page promotes a service for mail management: it unites and organizes all the emails and messages from a variety of channels – inboxes, messengers, social networks. This way, users that deal with lots of communication have the chance of being even more productive. The page composition and layout are built around the hero illustration that sets instant association with both the name of the product and the problem it solves. What’s more, the color accents of the illustration effectively work together with a CTA button, and the dynamic composition of the artwork supports the brand name Mailflow.

Landing page for speech recognition technology

Perhaps, there are no parents in the world who wouldn’t dream to understand each and every sound of kids cooing and babbling. That’s one of the challenges for modern scientific and creative teams, and the presented design is also about that theme. That’s a landing page promoting speech recognition technology in a collection of innovative projects. The pages of this kind are a powerful tool for building a digital product brand so it’s vital to make them catchy and emotionally appealing. Here this effect is reached with a super cute digital illustration that is also informative and instantly gives visitors the idea of the technology benefits. The choice of font for the tagline also supports that mood while the bright color accents make the CTA clear and visible.

Subscription page for a bookstore selling children’s books

Here’s the webpage for the online bookstore selling children’s books and its conversion goal is to engage users to subscribe to the newsletter. The hero illustration instantly creates the proper atmosphere and together with a simple tagline and description that explains the benefits, it encourages users to join subscribers. The dark background here doesn’t hurt readability in any way due to the thoughtful choice of fonts, but it really helps to make the image look deeper, atmospheric, and eye-catchy.

Landing page for a luggage delivery service

If you are a keen traveler or you have to move in business all the time, high chances are you know all the ins and outs of the luggage challenge. That’s one of the negative points for many people on road – and that’s the point behind the service presented in this design concept. Here’s the landing page designed for a delivery service that takes care of clients’ luggage picking it from the needed location and delivering it to the destination chosen by the client. The bright and catchy hero image and color palette instantly set the positive mood and harmonically combine with the tagline and interactive tab. Color accents effectively unite all the layout composition.

Landing page for car security app

For a mobile app, the goal behind a landing page is app installation and the core task is to concisely cover its benefits and functions. What’s more, you can create multiple landing pages for one app based on various segments of the target audience. It is an effective way to reach users and give them a quick presentation of the app telling and showing more than just screenshots on the AppStore. Here is a quick glance at a landing page of that kind: it presents the CarAid, a mobile application of the service to solve problems with a car and save drivers their time, money, and nerve cells. The page design is built around a prominent and a bit experimental hero illustration setting the original visual style and catching users’ attention.

Landing page for an art exhibition

In terms of high competition, one of the factors any event success depends on is its promotion. The landing page is an effective tool to unveil the benefits of the event and simplify the process of booking or buying tickets. As well as get potential visitors stunned with wow-graphics and effects setting the right mood and building up strong emotional appeal. This design features a landing page of that kind: its goal is to promote an art exhibition and let users quickly buy tickets. Prominent illustration, catchy palette and experimental typography will definitely catch the user’s eye.

Landing page for hiring platform

Finding a skillful artist for a design or marketing project sometimes feels like exploring the exotic area. This web design with a prominent hero illustration is right about that: it’s a page created for the web platform that helps artists and their clients easily find each other and together make the world even more beautiful.  This page features the choice of a serif font Domaine for the tagline. It visually reflects the style of the illustration and makes them harmonically work together as one composition. Yet, for the description copy block, the designer chooses a sans-serif font that is highly readable, this way reducing the cognitive load for readers and making the copy presenting benefits scannable.

Landing page for an innovative meal delivery service

When your day is tasty, everything gets better – that’s what today’s shot is about. Here’s a landing page for Quizine, an innovative service that delivers food of different national cuisines. That’s a project widely integrating brand-style illustrations in UI design. The web design is based on simplicity. It’s full of air and uses a limited color palette to avoid distraction and make the web pages scanned easily due to contrast colors and readable fonts. The original illustrations support a positive user experience with storytelling and give the layout original and trendy looks. Prominent call-to-action elements instantly focus users’ attention on the core interactive zones. Color also helps users understand the hierarchy of CTA buttons: filled “Make an order” button get a higher visual priority than the ghost button used to lead the visitors to an explainer video.

Landing page for a shopping delivery service

Here’s another landing page for the local delivery service, this time the one that does and delivers shopping for its clients. Catchy 3D graphics set the theme and in combination with an uncommon color palette give the page trendy looks that help the brand stand out in terms of high competition in this business segment. As the website is oriented toward local clients, the CTA is designed for a quick call as a priority action.

Landing page for an interactive mapping app

No secret, now websites and smartphones are much more for us than just sources of information and communication. They are used for multiple purposes and often become our digital assistants in daily basic operations. This landing page was designed to promote a digital product of that kind: it allows users to build interactive maps for their smart homes, offices and even public spaces. The catchy and concise layout with an artistic and a bit experimental hero image becomes an integral part of strong product branding.

Landing page for a cryptocurrency guide

This web interface concept is on the finance theme: it’s a simple and catchy landing page for a cryptocurrency service sharing an invite-only comprehensive guide. The goal of the page is to inform the visitors about the offer and let them join the community by sending the email address. Animated interactions add fun and life; generally, the design strives for a balance of business-like but friendly mood.

Landing pages for a productivity service

Having our hands full of various tasks, we tend to try tools and methods to boost productivity. This is a landing page for a productivity tool offering AI-based assistance in task management. The prominent hero illustration won’t let the user pass by, tagline and description present the key benefits of the offer and the CTA button engages the user to try the tool for free.

This page for the same service presents another feature of it – inbox management. One of the big challenges is communication in numerous channels, from email inbox to messengers and social networks, so the product offers the united inbox and AI assistance to boost mailing and communication for higher productivity. Following the same visual style, the webpage is built around the original and emotional hero illustration and solid visual hierarchy.

Landing page for a hair accessories store

One of the fundamental rules of commerce is to show the offered item at its best. This landing page demonstrates how to do it in the case of an e-commerce website by means of digital art. Here’s the page designed for an online store selling exclusive hair clips and accessories. Prominent and artistic illustration instantly sets the theme, gives aesthetic pleasure, and creates a strong emotional appeal, especially in combination with sophisticated typography chosen for the layout.

Landing page for a security service

This is another landing page promoting a mobile app, the security application that helps a user quickly contact the police and care about the safety of the neighborhood. It uses the visual contrast of a hero illustration full of irregular curves and thin lines and bold solid Druk font.

Landing page for a fashion event

One more landing page promoting an event: this time it presents a fashion event, gives it a brief introduction, and lets users quickly buy tickets. Prominent illustration, catchy palette, and bold typography don’t leave visitors any chance to pass by and create the artistic trendy look.

Landing page for environment protection community

With all the global problems our planet faces today, communities of people concerned with them and seeking solutions are growing to prevent the negative impact. This design is also devoted to that theme: a web page was 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, infographics, and CTA instantly visible.

Landing page for a Bauhaus event

The Bauhaus is often referred to as one of the most impactful modernist art schools of the 20 century. Its approach to teaching and the relationship between art, society, and technology had a great influence both in Europe and in the United States. The Bauhaus aimed to reunite fine art and functional design, creating practical objects with the soul of artworks. The school was operational from 1919 to 1933, so in 2019 the art and design society marked 100 years of Bauhaus with a big number of events, publications, designs, and artworks. This landing page design is also devoted to the theme and aimed at promoting the Bauhaus event. Obviously, the webpage follows the aesthetics of the art school approaches to art and design, first of all with bold color contrast of the limited palette, visual minimalism, and prominent typography.

Landing page for illustration conference

This landing page for the illustration conference builds the composition on the original and eye-pleasing animated hero image that will attract the target audience: designers, artists, and illustrators. The animation also supports the integrity of the transition between the pages. Here the designer chose a light background and pastel color accents that draw visitors’ attention to the needed layout zones and elements, and support the visual consistency of the composition in combination with the digital artwork.

Landing page for a social network management app

This catchy web page was designed to promote an application that allows users to manage all their social accounts in one place. The illustration has a dynamic composition reflecting the fast-paced nature of communication in social networks. The page uses a split background with a light part for the bright graphics and a dark part for the text content. CTA button works as an element uniting the general composition as a white element on the dark part. The icon of a computer mouse gives the visitor a prompt that the page can be scrolled for further information.

Landing page for a football final match

This web design concept was aimed at football fans: on the 1st of June, Madrid hosted a final of the UEFA Champions League – and two English clubs fought for the cup, which doesn’t happen all too often. We couldn’t help adding a pinch of fun and art to this event, and the creative search brought out this landing page on selling the tickets to the match. The hero illustration sends the vibes of the English tea ceremony and the characters are drawn to be well-recognized as trainers of the playing teams.

And here is a look at the page section aimed at sales: users can choose a place, get a recap of their order and make a payment right there.

Landing page for a currency converter

With easier and faster traveling, online financial operations, and global businesses, currency exchange and exploration of currency rates become a part of the routine for many people. Why don’t we add some style to it? Here’s a quick landing page concept for Currious, simple financial service with an online currency converter. Geometric pattern, clear tagline, ability to do the core operation right on the page, and quick connection to social networks of the service.

Landing page for a kindergarten

This landing page of the kindergarten uses a big funny and cute monster mascot designed and animated to entertain users and set the needed emotional background. The layout features playful but highly readable font, organizes the information in a clear list and marks the clickable elements.

Landing page for a babysitting service

This landing page design is full of cuteness. No wonder: it promotes the service connecting babysitters with their clients. The feeling of cuteness and positivity is supported by several factors, among which animated custom illustrations with funny characters play the key role. They transfer the message and the mood, create the needed atmosphere before the user starts reading about the service, and give the whole page a unique look. Although the color palette is pastel and peaceful, creating enough contrast and making the core details scannable. Smooth scroll animation enhances the feeling of integrity.

The landing page includes all the classic components: it describes the service, gives the direct connection to the top professionals, features testimonials from clients and shows users how to contact the service representatives. What’s important, users aren’t forced to scroll the entire page if they want to apply for a babysitter quickly: they get the needed buttons to do that right from the first pre-scroll screen.

Useful Articles and Design Collections

Check more creative sets of UX design concepts and articles on best design practices.

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

How to Make User Interface Readable: Tips and Practices

10 Reasons to Apply Illustrations in User Interfaces

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

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

Design for Sales: 10 Creative UI Designs for Ecommerce

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

Сообщение 26 Creative Examples of Landing Page Design by Tubik появились сначала на Design4Users.

What Is Mascot?

In basic terms, in design and marketing, a mascot is a character, a personified image that becomes a symbolic representation of a brand, company or even a public figure. The term origins from the French word “mascotte” which means lucky charm.

It’s worth mentioning that historically the term “mascot” was applied to figures of people, animals, or objects that were taken as a symbol of good luck by a particular group of people. So, for years mascots are seen as the carriers of luck and positive energy. That may be one of the reasons why they are so popular in the design for user experience and marketing goals when positive feedback and emotional appeal can have a direct connection to conversions and profit.

Famous character Tony the Tiger, mascot designed for Kellog’s Frosted Flakes

One of the areas where mascots have gained huge popularity is sports. Remember team mascots, especially for the teams whose names are based on real animals or creatures that could potentially get human-like characteristics. Team mascots could be presented not only with images of animals or people but also specially made fantastic creatures and have been highly effective to promote teams and grow their recognizability. One more example is well-known mascots of the Olympic Games designed specifically for every event with the visual features of the host country. In sports, mascots are not only a matter of uniting and support. They are also a huge business with all that merchandising stuff people buy to keep memories about events and mark their support to the team, country, or even a particular person. Another area that caught this approach is educational institutions that use mascots to build up strong branding.

Official mascots of the Olympic Games in Tokyo 2020

No wonder, with all that power, mascots got highly popular in marketing and advertising, much before it moved to the web. They won the attention of customers diversely, from small badges to live costumed characters able to physically communicate with people.

Kinder Pingui Mascots

Lively and full of energy Duracell bunny mascot

Milka purple cow mascot

Teltey tea folk

Today, mascots are also broadly applied widely in digital products for the web and mobile. Let’s review the reasons.

Mascot design process for Saily App

Benefits of Mascots

What’s so good about mascots that makes them used so widely?

Enhanced communication

Mascot becomes a good interconnector between the user and the product. In interfaces, it can serve well as a basic element of communication and interaction. Just changing its appearance (for example, mood, outfit, activities, etc.), may quickly deliver a clear message to the user. Mascots can communicate directly with the speech bubbles, provide visual prompts with various facial expressions, reflect the mood of the user with different graphic variations of the mascot, provide helpful instructions in an app onboarding tutorial, and congratulate the achievements.

Flexibility of personification

The business practice of successful companies shows that a well-crafted mascot can work even more effectively than product endorsement with the help of a famous person. Mascots can reflect any traits of character, any style needed for product positioning, and communicate via a diverse set of visuals. They broaden the horizons of personification. With mascots, designers and marketing specialists can create unexpected and catchy looks or make fantastic characters alive.

Logo mascot design by Tubik for Realli

Memorability and recognizability

Most of us are visually driven and our brains work in such a way that we notice images faster and remember them better than text. Being images far from abstract and having human-like features, mascots tend to take everything from the abilities of human memory: we catch them fast, easily remember them due to particular associations and recognize them faster than abstract images seeing them again. All the mentioned has great importance in creating strong brand awareness and building patterns in user interfaces.

Consistent visual marking

Mascots present wide opportunities for the visual marking of different carriers of identity, website pages, or app screens. Mascots can be used in logos, interface illustrations, hero banners, chatbots, stickers, various swag, and branded merch.

Logo mascot designed for LunnScape

Brand voice, tone, and character

Mascots are a strong way to transfer and support the general tone and voice which is the foundation of a brand strategy. Custom characters usually reflect the most important feature of the product and transfer the idea in a fast and harmonic way. What’s more, it enables a creative team to send the key message to the user: with a mascot, it won’t take long to understand if the product is serious or entertaining, lively or calm, business-like or easy-breeze, highly private or broadly social, and so on and so forth.

Emotional appeal

Although we tend to believe that logic and common sense rule our actions, a big part of the decision-making process relies on emotional appeal. A mascot is one of the well-checked methods to provide emotional triggers and feedback, let the interface or brand speak the user’s language. This way it makes the product more user-centered.

Originally created characters used as mascots for a babysitting service

Virality potential

An original catchy mascot can be used as a powerful element of virality: in this case, it becomes so popular with users that they not only spread it to each other but also create new versions, parodies, discussions, memes and the like. That also works efficiently in products for kids when the mascot actually becomes a key representer of the product and creates a high level of desirability.

Style and beautification

People change not as fast as they think: we all know that quality and functionality are at the head, but they still need a good dress to impress. Especially in terms of tight competition. Mascots often become a core element of the visual presentation for a website, mobile app, or physical product. So, it has a big impact on the aesthetic part of perception, adding beauty and style to the brand image.

Mascot character used as a hero image for an e-commerce website selling books for children

Features of an Effective Mascot

Sure, each case needs an individual approach to the mascot which will correspond to the particular goals and brand image. However, there’s a checklist of basic features that are essential to consider for any mascot design. To work well for marketing and user experience, a mascot should be:

• memorable
• recognizable
• original
• representing a consistent character
• flexible to adapt and adjust
• applicable for diverse tasks
• looking good in different sizes and resolutions
• stylistically harmonic
• lively and user-friendly.

Case Studies: Mascots in Branding

Let’s review some practical case studies when mascots became the center of marketing strategies. Quite often, if stakeholders and creative team make a decision upon such a technique, mascot starts its way from logo design. Mascot logos can work as independent symbols or together with a typographic part if a logo is a combination mark.

For example, here’s a logo for the landscape company Andre. Their first logo was based on a lettermark but in the process of the creative search for the brand redesign, the decision was made upon creating a mascot. They chose a friendly hummingbird whose image was harmonically combined with the shape of a leaf. Then the mascot set the foundation for the further development of corporate identity.

One more example is a mascot logo designed by Tubik for Whizzly, the social network for showcasing talents and sharing creative projects. The target audience of the app is teenagers and young adults, so the character had to set the connection with them and transfer the needed mood at once. The creative search brought the team to this cool monkey that knows the taste of fame. Animated logo version to use on the splash screen and promo animations allowed for adding an even brighter emotional background.

Another example to remember is the event branding case that was designed by Tubik for the local Behance portfolio event. It featured a dog mascot made of the words marking various design directions.

These days another powerful way to integrate the power of mascots into branding is stickers, like this set below featuring a pack of emotions for a cute dog character.

Case Studies: Mascots in UI

Mascots are helpful in web and mobile interfaces: they liven up interactions, catch up attention and draw it to needed details, become the memorable element, create important consistency of a general stylistic concept, and create the strong imitation of direct and human-like communication with the user.

Used in illustrations that show actions or interactions, a mascot is also a good way to avoid extra copy on the screen. This way, the precious space is saved for other layout elements or just more “air” really needed to create a good perception of data on the screen or page.

One of the bright cases for the issue was a mascot created for Toonie Alarm, a simple alarm app with elements of gamification. The idea of applying the mascot was set almost instantly to let it spread the voice and tone of the product, create the feeling of natural communication, and support the mood. So, Toonie was born to be a funny, cheerful bird, whose mission is to make the world brighter and help users to interact with the alarm. It informs users about news, rewards, and errors, and just adds some fun and color to everyday life.

Here is an example of a landing page we designed for a kindergarten: it features a super funny 3D animation of a mascot this way instantly setting the mood and amplifying the emotional appeal.

One more example to share is the case of web design for a platform devoted to zero-waste living. It features a consistent usage of a small but important mascot, a little bird that accompanies the website visitor from one page to another. The mascot sets a strong association with the theme of nature and its engaging animation makes the pages more lively and dynamic.

No doubt, the use of mascots in UI should be based on careful user and market research not to overload the interface. The aim of a mascot in any kind of environment is to simplify and speed up the interaction with a product or information flow. If the objective is not achieved, the mascot can play a bad role and distract users.

Useful Reading

Here are some handy articles to continue plunging into the theme of branding, illustration, and user experience design for various goals.

Functional Art: 10 Big Reasons to Apply Illustrations in UI Design

Creative Stages of Logo Design

Tips and Strategies of Design for Web Marketing

UX Design: How to Make Web Interface Scannable

Mobile App Branding: Tips, Strategies, and Examples

How to Create Catchy Flat Illustrations

The Role of Branding in UI Design

6 Creative Stages of Design for Branding

Originally written for Tubik Blog

Сообщение How to Use the Power of Mascots in Branding and UI Design появились сначала на Design4Users.

Today’s D4U Inspiration post shares the pack of creative designs devoted right to that theme: check the variety of elegant and catchy webpages for exhibition, sports events, workshops, festivals, conferences, concerts, and so on. Welcome to see how UX designers let the website or landing page become an original letter of invitation. Enjoy and get inspired!

The landing page designed by Tubik for the conference where illustrators and digital artists share their experience.

W Festival website design by Sochnik 

Minimalistic landing page concept for a culture event by Cuberto

Website design for the book festival by Tubik

Website design for The Best of Pop Culture event by Sochnik

Landing page for the Bauhaus event by Tubik

Landing page design for Microsoft Events by Unfold

Landing page for circus events by Cuberto

The landing page with custom catchy hero art by Tubik for the modern art exhibition

The landing page design concept for the classical music festival by Mike Creative Mints

The landing page concept for a football match by Tubik

Typography-based creative explorations for the festival website interactions by Sochnik

Landing page for the fashion event by Tubik

Landing page concept for the music event by Beatris Veres

Black-and-white landing page design for a music event by Bethel Design

For more design inspiration, welcome to review the set of ecommerce app designs, educational interfaces, creative logos based on negative space, and impressive packaging design examples.

Сообщение At All Events: Awesome Designs for Event Websites and Landing Pages появились сначала на Design4Users.

Among popular tasks for interface designers, the projects aimed at education include:

• interactive web and mobile encyclopedias
• flashcard apps
• language lessons apps
• apps and websites with a database of formulas
• interactive simulators
• landing pages, apps, and web platforms for educational events and courses, etc.

Check the variety of UI design examples in different styles, all devoted to education needs.

Nature Encyclopedia App by Tubik

Language learning app by 10Clouds

Airy language learning app dashboard by 10Clouds

Minimalist UI concept for a flashcard app by Cuberto

Cheerful learning platform with funny graphics to choose courses and lessons by Black Lead

Web page promoting guitar lessons and featuring bright and catchy hero illustration by Alexandra Glustsenko

Elegant interactive encyclopedia website devoted to Solar system by Tubik

The UI design concept for an educational mobile app by Ramotion

Sports Car Encyclopedia app by Cuberto

Minimalist museum app with the dark background by Tubik

Educational UI concept with bright theme illustrations on Solar system by Kit8

School application screens by Midinventory

Home page for a website of an educational TV channel by Kreativa

Landing page for a Japanese course by Cuberto

Violin lessons app design by Tiffany Stewart

Interactions with education platform designed by 10Clouds

Survey and Quizzes screens for a corporate education app by Selecto

Web platform uniting scientists from different countries by Tubik

Interactions for an educational app by Dimest

Courses and topics screens for a mobile interface of an educational app by Selecto

The UI design concept for a plant encyclopedia app by RonDesignLab

Onboarding screens for an educational mobile app by Johny Vino

For more design inspiration, welcome to review the set of ecommerce app designs, creative logos based on negative space, and impressive packaging design examples.

Сообщение 20+ UI Design Concepts for Education on Web and Mobile появились сначала на Design4Users.

Hero Illustrations

Hero images are not a kind of modern-day invention: for recent years, they have been used for making web pages clear, elegant, catchy and meaningful. No wonder: hero images improve perception as most users notice and decode images much faster than words, so the picture is not only the element of attraction but also an informative part of the page, providing a quick visual message about the content.

The correct composition of the hero image can strengthen navigation and bring more attention to the call-to-action button. Yet, talking about trends, for the recent year we are seeing the wide and diverse digital illustrations in contrast to photos that were much popular before. It can be explained, perhaps, with the higher flexibility of illustrations for user experience design goals. Digital art opens limitless possibilities on styles, characters, environments, compositions, and perspectives, and a combination of them with all the other layout elements into one design.

The web page where hero image and copy content present solid composition, set a positive atmosphere and inform users about the theme of the content the Health Blog provides.

The landing page for the illustration conference builds the composition around the original and eye-pleasing animated hero image.

The web page of the gallery of Pritzker Prize winners and nominees in the online architecture magazine features the artistic digital portrait of Zaha Hadid.

The landing page of the kindergarten uses a big funny and cute monster designed and animated as a hero image to entertain users and set the needed emotional background.

Typography Based Webpages

Bold and catchy typography as a crucial part of any design concept continues to keep its high presence in web and mobile layouts. It’s even hard to call it a trend as it should be seen as a default and vital part of the UI design process. Designers pay much attention to keeping it not only beautiful but also readable and scannable with typographic hierarchy and choice of proper fonts. Yet, there is a noticeable trend contrasting to the previous one: more and more websites and apps are based around typography as the core of the user experience design and attractiveness, with no images at all. The visual and emotional appeal, in this case, is reached with not only the search for interesting and original fonts but also with animation, color contrast, filled and outline letters in one piece of text and other tricks. What’s more, design approaches now demonstrate deeper care about text content itself and its integration into the layout. For example, informative and catchy taglines have shown growing presence as a part of web interfaces, especially in landing pages.

The website of a construction company is based on animated interactions and color contrast with the tagline. The color also works as a way to unite the company logo, tagline, and CTA button into one harmonic system of the layout.

Typography-based home page for the website of the urban digital conference, with catchy animation for the text content.

Transparency Behind Navigation

Many examples in this post feature another popular trend of this year: the transparent background for navigation elements. Now designers find the good level of contrast to make the navigation visible and legible instead of marking out special zones with another background. Such an approach supports the feeling of the integrity of all the layout.

Fashion portfolio website features the transparent header navigation

The ecommerce website selling insects uses the transparent background for header navigation and social buttons in the bottom part of the page

3D Graphics and Animation

For the recent year, the integration of various 3D graphics into mobile and web interfaces has demonstrated the rocketing growth. As well as the diversity of styles and approaches. What’s more, many designers move from static images to 3D animation to make webpages and app screens even more dynamic and engaging.

Creating this kind of graphics is quite a challenge that requires specific skills and artistic eye; also, it’s time-consuming. Nevertheless, it’s worth bothering: 3D is always eye-catching and users never pass by not noticing it. 3D images are a kind of flexible visual content. On the one hand, they often look photorealistic which is a big advantage for user interface design: this kind of graphics may save the game in cases when photo content you need is impossible to get or highly expensive. On the other hand, designers have room for creative experiments and may create non-realistic images increasing the originality of the user interface.

The website of the company building sustainable houses integrates 3D visualization of their product in day and night views.

The health blog applies the 3D animation of body parts as the core visual element on the page

The landing page for the flying school features the animated 3D hero image of a plane in low poly style

The welcome screen of the restaurant app features the complex and realistic 3D animation to engage users from the first seconds of interaction

Full-Screen Background Visuals

Another trend winning more and more positions on a wide variety of websites is full-screen background images. These can be all types of visuals: photos, illustrations, abstract compositions or specially rendered visualizations. The approach makes the screens visually and emotionally appealing as well as informative, as the image instantly captures users’ attention much faster this way. Also, it supports the feeling of the integrity of all the layout elements. However, it requires much skill and effort to find the right contrast and hierarchy of elements and integrate the navigation and text content properly so that the page wouldn’t turn into the illegible mess.

The model portfolio page uses her full-screen photo as a basis of the layout, the navigation and text information are harmonically put on it and don’t spoil the impression from the photograph.

The website of the company selling hot-air balloon rides uses full-screen theme images as an impressive and catchy background and adds dynamic and the feeling of flight with slight unobtrusive animation.

The landing page for the mail management app features the beautiful full-screen illustration with the copy content and call-to-action button elegantly integrated into it

Video Backgrounds and Diverse Video Content

With non-stop progressing technical improvements in the sphere of web development, video backgrounds for web pages aren’t seen as a great challenge anymore. As well as the integration of diverse video content into the web layouts. So, more and more designers now turn to full-screen videos as a way to capture people’s attention, create the needed atmosphere and give an instant view on the product or service that is offered.

Home page design based on a full-screen video about the product and processes for a website of the studio producing custom wedding dresses

Home page design featuring an atmospheric full-screen video for a website of an agricultural holding

Metallurgy plant website applying atmospheric theme video content on the home page

Diverse promo and explainer videos also get a high presence on webpages and mobile screens. In particular, they are helpful for marketing goals and increase brand awareness efficiently. A video works well for attracting customers’ attention and provide them with core information quickly. A video activates several channels of perception — audio, visual, sound — simultaneously and enhances them with the power of storytelling. That makes video content meaningful and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information, so most of them aren’t ready to devote much time to learning about products or services. That’s when videos save the game as a dynamic and attractive way of communication.

Here’s an example of an explainer video designed for OffCents app promotion.

Minimal Mobile Navigation

In mobile user interfaces, with the limited space on the screen, designers tend to find ways of reducing space for navigation, and this way increasing space for content. This trend is now the reason for hot debates at the aspect of usability and clarity of interaction design; yet, new ideas arise and take their place.

The bar inventory application focused on interactions with content tabs and minimal navigation

One of the design practices getting popularity for the recent year is experimenting on mobile  UI interactions without buttons. This approach saves precious space on the screen for more information and it is even believed to be the initial step to the virtual interfaces based on gestures only.

The nature encyclopedia app presents interactive infographics for a variety of themes. All the interactions with the data are based on gestures without any buttons applied in the layout.

Font Experiments and Contrast

No doubt, combining fonts in interfaces is not a trend but a core operation as old and stable as the design itself. However, the recent year was marked with trailblazing experiments in this sphere. With a massive focus on readability seen before, a whole lot of interface designs started looking like twins with the same well-checked font combinations. So, now more UI designers step forward to more originality and fresh looks achieved with fonts. It is especially noticeable in the domain of taglines, headlines, brand names and short phrases that are usually presented in quite a big size so sophisticated or experimental fonts don’t do any harm for their readability.

A product card for the tea ecommerce website features quite an experimental font making the whole design look original

The landing page designed for a security app combines experimental hero illustration with the solid and bold font to create the bright and emotional look

Split Screens

The trend of designing split screens and pages really holds ground for the recent year, getting more and more diverse expressions on websites and apps. This design practice is nothing new – it goes away and comes back in various spheres of design, but now it’s well back and alive. The approach is thought to be effective at the perspective of responsive design: it enables to play with content variations not missing the consistency. In addition, it opens the limitless area for color combinations and experiments. Split screens are helpful when it’s important to show the duality of options of equal importance.

A landing page for the car security service app with a contrast split screen uniting the parts with a digital artwork visualizing the theme

Split webpage for a food order and delivery service: one part applies the light background, text description and bright CTA button while the other users a tasty-looking meal photo as a background

Product page for an online bug store uses a split screen with informative part to the left and interactive one to the right, all united with a product image in the center

Asymmetric and Broken Grids

Creative experiments with grids have never stopped for the recent year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. In many cases, it’s also the way to rethink the visual hierarchy and draw the visitors’ attention to the needed zones or elements of the layout. Or it helps to make the consumption of much homogeneous content easier. Asymmetry and broken grids are found as one of the ways to reach this goal. However, this sort of creativity requires thorough research and testing so the effective result often comes via several iterations tested and analyzed in terms of usability and visual perception.

The gallery app uses the asymmetric grid to present various types of artworks in one beautiful feed

The website for an agricultural holding uses the grid that changes in the process of interaction and makes the interfaces more engaging and visually appealing

Interactions with photo galleries on MYWONY website features the asymmetric grid to make only one picture in focus but also support the feeling of the big gallery

Visuals-Based Ecommerce

Design for the ecommerce interfaces is a special challenge: it should keep a good balance between common well-known patterns easily recognized by buyers and creative solution that help the platforms stand out from the competition. The trend of this year is prominent, sometimes even overwhelming visuals demonstrating products and quite small text content blocks contrasting to them.

Hero section design for an ecommerce website and its mobile view feature prominent photos in combination with sophisticated typography

The ecommerce platform selling hand-crafted furniture and interior decor features the prominent 3D visualization

The online store of stuff for fishing also built around big visuals demonstrating the items

Overlaying Animation

UI designers never stop searching for new methods of making pages and screens engaging. One of the ways getting more and more popular is the animation of several interactive layers that make scrolling experience original and dynamic as well as support the integrity of interaction for long webpages or feed screens.

The home page designed for the website of the innovative energy service quickly grabs attention and informs users about its values with a nice animated hero image that makes the scrolling experience natural and dynamic.

Experimental Art-Inspired Graphics

As custom illustration has established well in user experience design and many products and companies use it now, the competition grows day by day. So, illustrators and UI designers are always in search of new solutions and ideas that would step to the next level of originality. Recently, it evolved into creative experiments that look based on high art. They push the limits of traditional composition and proportions, give rise to unusual characters, fantastic creatures, and unexpected stories.

The experimental illustration is used as a hero image on the website for the food delivery service. You may like it or not, but it will definitely catch your attention.

Website design for a small family-run winery features artistic and creatively animated illustrations

Interactive Intro and Onboarding Stuff

Onboarding design is for sure not an invention of today. Still, one of the really hot and rocketing trends of this year is the appearance of diverse introduction projects giving a deeper understanding of the brand, company or product and supporting their promotion with emotional and catchy storytelling. These can be tutorials, integrated gamification elements and mini-games, cartoons, interactive magazines and much more.

Creative and interactive brand intro for MYWONY, a brand of wedding dresses

Limited and Monochrome Color Palettes

The growing interest in minimalist design for maximum functionality resulted in a broad presence of monochrome UI solutions for web and mobile. The layouts of this kind usually look stylish, harmonic and non-distractive. However, designers have to invest much time and effort to make them not boring and ensure that all the core elements of interaction are instantly visible.

The landing page for an event devoted to Bauhaus movement features the limited and contrast color palette that reflects the values and approaches of that artistic school

Design for an online store selling cosmetics and beauty care stuff features the sophisticated interface in different shades of nude to make an advantageous background for the items

The home page for a web platform on cybersecurity is based on the monochrome layout and catchy futuristic animation 

User Choice of Color Scheme

Another thing to mention about color is personalization. User interface designers and developers strive to provide more functionality with which users may customize the features according to their personal needs. One of the most popular ways is giving a user the choice of the color scheme they like more for a particular interface. Sure, it takes more time on the design process but definitely contributes much to positive user experience.

These are screens of a stock analysis app Bitex that offers users the choice between light and dark color schemes

Color Contrast Across Pages or Screens

One more way to apply color contrast for the sake of user experience is using contrasting colors as backgrounds for different screens within one app or website. This way designers not only add a pinch of diversity into the product but also provide effective visual separation for different kinds of content or various purposes.

Nature encyclopedia app uses a dark background for encyclopedia screens and light background for charity screens

MYWONY website uses a dark background for Lookbook screens and light background for Collection screens

Infographic-Style Numbers

As we mentioned in the article about web scannability, readers subconsciously associate numbers with facts, stats, sizes and distance — data which is potentially useful. So numbers included in copy catch reader’s attention while words representing numerals can be missed in the bulk of copy. What’s more, numbers are more compact than the textual numeral, so it makes the content more concise and time-saving for scanning. One of the trending design features goes even further: it makes the numbers prominent and more noticeable than text as it’s often done in infographics.

Here’s design for an award-winning biography website devoted to Stanley Kubrick’s path of glory, life, and creative heritage. Contrast and elaborate typography as main visual expressiveness tools are successfully combined with prominent infographic-style numbers presenting important dates, milestones, and facts to make the resource informative and information digestible.

Environment community website sets the visual hierarchy of the home page to make the major information, infographic-style numbers, and CTA instantly visible.

Forms Above the Fold

Although there is much claiming that the importance of the above-the-fold aka pre-scroll area of the webpage is not that vital, users still interact with it much more than with everything that is below. So, some websites and landing pages put the interactive forms right into this strategic part, often right below the website header. This way the users that are ready to act and complete conversion without learning more can do it immediately.

The landing page designed for a delivery service that takes care of clients’ luggage delivers it to the destination chosen by the client features the form right below the header

The landing page for the scuba diving courses also features the interactive form of the extended search in the above the fold area

In general, it’s easy to see the global design community continues with building up the diversity in interface design. And that is the most user-friendly trend. There are millions of users with different tastes and preferences, feelings of what is convenient and beautiful for them, and now they use apps and websites as a part of their daily routine. The more variants we design for them, the wider range of options users will get to find the ones which fit their specific wishes. Looking forward to seeing what trends will be found the most popular at the end of the year.

Originally written for Tubik Blog

Сообщение 19 UI Design Trends for Web and Mobile Worth Your Attention появились сначала на Design4Users.

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

What’s a CTA Button?

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

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

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

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

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

Tasty Burger mobile app screens

What Makes an Effective CTA Button Design?

Size

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

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

Tasty Burger mobile app interactions

Color and shape

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

Color meanings:

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

Shape meanings:

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

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

Product card design for an eco-goods online store

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

Website design for an AI-based marketing platform

Placement

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

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

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

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

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

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

Ecommerce website design for selling herbs and spices

Microcopy

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

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

Hair beauty company website

Perfect Recipes mobile app design

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

Recommended Articles

UX Design Glossary: Interface Navigation
UX Design Glossary. Navigation Elements: Icons, Search, Tags
7 Tips to Improve Mobile Interactions
3C of UI Design: Color, Contrast, Content
9 Effective Tips on Visual Hierarchy
How to Make the Interface Effort-Saving

Originally written for Tubik Blog

Сообщение User Experience: How to Design Effective Call to Action появились сначала на Design4Users.

We aren’t often thinking in terms of love and respect when it comes to digital products. We can describe them in tons of other words featuring appearance (like beautiful, elegant, interesting, etc.) or functionality (like intuitive, easy-to-use, confusing, etc.) or content (like informative, consistent, etc.) but you rarely can hear that someone names a website or app respectful. However, respect for user’s time and energy is one of the vital goals which designers should strive to achieve in the product they work on. This approach is a great factor in usability and desirability. Today we would like to share some advice and techniques which could become supportive of this aim. These tips aren’t reinventing the wheel but present a helpful checklist for the design outcomes. So, let’s check what designers can do to save time and effort for users.

1. Put the core navigation into the header

Talking about websites, it is an extremely helpful idea for quick and easy navigation. The only problem is to decide on what core data is, especially for websites with a huge amount of various data, like big e-commerce websites, news platforms, or multi-theme blogs. The header is a strategic part as people see it before scrolling the page in the first seconds of introduction to the website. Being a sign of invitation, the header should provide the key information about the digital product so that users could scan it in split seconds.

In our article telling about web headers design in detail, we provided the typical kinds of content which can be included in headers:

• basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors, etc.
• copy block setting the theme of the product or service presented
• links to basic categories of website content
• links to the most important social networks
• basic contact information (telephone number, e-mail, etc.)
• switcher of the languages in case of multi-lingual interface
• search field
• subscription field
• links to interaction with the product such as trial version, downloading from the AppStore, etc.

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract the user’s attention, the harder it is to concentrate on the vital ones. Here designers, preferably together with marketing specialists and stakeholders, need to decide on the strategically important options and pick them up from the list or add the others.
Why is the header so essential? Eye-tracking investigations show that whichever scanning model a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while the website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

2. Make branding highly visual

In terms of the discussed topic, a brand means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. This image can be created in tons of diverse ways – visual, verbal, touchable, etc. In web and mobile design, branding supposedly means a set of visual elements defining the brand style, which can be applied in the interfaces such as logo, typography, brand colors, and the like. All of them together are a powerful tool for creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays a vital role in product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech. Moreover, if the brand is already well-established, its signs observed in the first seconds of seeing a website or app increases the level of trust.

3. Use numbers, not words

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes, and distance – something potentially useful for them. So they are hooked with the numbers included in copy while words representing numerals can be missed in the bulk of the text. Even more, whatever numbers represent, they are more compact than their textual variant, which allows for making the content more concise and time-saving for skimming the data.

4. Make the call-to-action (CTA) instantly noticeable

A call to action (CTA) is actually a word of phrase stimulating users to interact with a product in a way and according to the aim it is designed for. CTA elements are the interactive controls that enable users to do the action they are called to. Common types of such interactive elements in the layout are buttons, tabs, or links. In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays a crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rates and general user experience. That’s why this navigation element should draw particularly deep designer’s attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

5. Care about general page scannability

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with a better understanding of user behavior and interactions. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website.
Among the following common models, you’ll find Z-Pattern, Zig-Zag pattern, and F-Pattern. Let’s check what are the schemes for them.

Z-Pattern

Zig-Zag Pattern

F-Pattern

Knowing these models, designers and information architects can build navigation and important data in the points where they have the highest chances to be seen and get the user interested. The well-thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.

6. Check the icons perception

Icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction. It’s hard to overestimate their role in UI navigation: they make it much quicker as most users perceive images faster than words. The usage of recognizable and clear icons has great potential for boosting usability. However, even the slightest misperception can become the reason for poor UX so the solutions on the type of icons should be carefully tested and if needed supported with the appropriate copy content.

7. Strengthen the message with theme images and hero banners

No secret, in many cases an image is worth a thousand words. In web and mobile UI, it often works that way: images become highly supportive and effective in setting the mood or transferring the message. In addition, images present the part of the content which is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can satisfy multiple goals:

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

8. Talk to users in their language

Copy content plays a crucial role in communication with the user. Not only is its effective visual presentation significant for high page performance: the style, structure, and vocabulary should also correspond to the user’s expectation from a page. Usage of too formal or business-like style in an entertainment app for teenagers, or vice versa too informal style on the luxury website selling elite real estate – there can be hundreds of cases when the copy doesn’t follow business goals as well as habits and needs of a target audience. That kind of content inconsistency can be confusing and move the users away from the website or app. User research will be effective for this issue to see what way users want to communicate while a professional copywriter will help to strengthen design with the power of words.

9. Use the power of Gestalt principles

Gestalt is the term meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. It helps to understand the psychology of the app or website users better. When designers know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get in this way.

Source

For example, applying the principles of similarity and proximity, designers can group the layout elements according to human cognitive abilities, so that users could perceive them in the most natural and convenient way.

10. Optimize visual content

Whatever interesting, attractive, and informative is the interface, there is the invisible factor that can erase all the benefits – the loading speed. If the visual content – images, animations, video – applied to an interface is too heavy or doesn’t perform well on different devices, the risks are high to lose users before they will understand the strong points of the product. In terms of high competition, with loads of websites and application, be sure: users aren’t going to wait, they will head for the more convenient and quick alternative even if it loses in a number of points. Optimization and persistent testing of visual content is the real sign of respect for the user boosting the less time-consuming flow of interaction.

Hopefully, this list will be helpful for those who are aimed at creating a positive user experience. Don’t miss the updates – new practical tips and inspiration are coming very soon.

Useful articles

This set of articles can be useful to dive deeper into the points mentioned above

Best Practices for Website Header Design
The Relations of Branding and UI Design
Visual Hierarchy: How to Organize UI Content
Gestalt Theory for UX Designers: Principle of Similarity
Gestalt Theory for UX Design: Principle of Proximity
Role of Copywriting in UI Design Process
Small Item, Big Impact: Types and Functions of UI Icons
Copy Content in User Interfaces

Originally written for Tubik Blog

Сообщение UX Design: How to Make the Interface Effort-Saving появились сначала на Design4Users.

Functional minimalism

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

Major features often mentioned in terms of minimalism approach include:

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

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

WineYard App

Brutalism

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

Typography integrated into images

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

Big City Guide

Animated hero banners

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

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

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

Dance Academy Landing Page

Custom theme illustrations

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

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

Financial Service Website

Unframed layout

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

Big City Guide

Variety of interface animation

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

Watering Tracker App

UI-friendly branding

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

Whizzly Logo Animation

Monochrome UI

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

Jewellery E-Commerce App

Progress of dark backgrounds

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

Cinema App

Light space for copy

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

Watering Tracker App

Sophistication and contrast in fonts choice

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

The Gourmet Website

Experiments with grids

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

Variety of landing pages

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

Digital Agency Landing Page

Creative parallax

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

Mood Messenger Landing Page

Promo videos for web marketing

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

Promo video design for Binned

Gamification mechanics supporting UX

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

Upper App

Boxes and cards as layout elements

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

StarDust Biker Website

Geometric elements as a part of style

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

Wedding Theme

Experimental color palettes and combinations

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

Book Swap App

No Lorem Ipsum

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

Dating App Landing Page

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

Originally written for Tubik Blog

Сообщение Review of Prominent UI Design Trends in 2017 появились сначала на Design4Users.

Every traveler knows it’s hard to find a more annoying and upsetting experience than landing in the wrong place. It wastes the precious time and effort on looking for the needed spot right when you are full of nice expectations and ready for the best. No wonder, this story isn’t different when users go to the virtual journey around the Internet, especially having particular goals and destinations in mind. So, today let’s discuss how to make their landing soft and effective.

Definition of a landing page

In general terms, the phrase “landing page” was created by analogy with a landing spot in the physical world: in the web, it initially marked any page on which the user “landed” while surfing the Net and started their journey around the website. The phrase is still used in this meaning in terms of web analytics. However, a more specific understanding of this term has become increasingly popular and widely used by not only designers but also marketing specialists. Today the term is used for a web page designed with a focus on specific relatively narrow goals and a quick way of accomplishing a particular action.

As for the goals, they can be different, still, the biggest diversity of landings is found in the e-commerce sphere. This is the field in which they play a great role both for users and stakeholders, presenting the specific commercial offers without distraction in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially useful for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page in the case of such websites can open the big gate to poor user experience, especially when users come from particular marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page or their attention will be driven away so the purchase won’t be finalized.

Furthermore, there are also many other cases beyond e-commerce when landing pages present a good point to consider: they can present the mobile applications or educational resources, promote events and meetings, make the announcements, introduce the communities or just share information. Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help.

Conversion as a key metric

One of the core characteristics measuring the efficiency of a landing page is conversion. In basic terms, it is the outcome, the achieved goal which is set for the landing page. Conversion is the transformation of passive users into active, from reading, considering, watching and comparing to actual buying, downloading, trying, subscribing etc. Measuring conversions and improving landing pages to get this rate higher is the way to problem-solving design helping users and supporting business strategies.

As e-commerce presents the highest diversity of landing pages now, the most frequent way of conversion is the actual purchase while the most popular call to action is “Buy”. However, the presence of the Internet in human life is growing constantly and plays a significant part in daily operations on professional and personal levels. On that ground, the variety of conversions also reflects diverse goals – except buying something, users can be called to:

– download the mobile application
– read more about the presented issue
– subscribe to updates
– download a free ebook, templates, graphics or other deliverables
– start the free or discounted trial of the product
– leave the comment or share the opinion
– share the information with friends and followers in social networks
– browse the educational or informational resource
– fill in the form or survey etc.

Obviously, conversion as the finalized action the user is navigated to is not the only function of a landing page: it is also effective as a general supporter of brand awareness and recognizability, due to the original design or special features it can even be a part of a viral marketing campaign. Still, the most important outcome of all the effort invested into its creation and maintenance is ultimately measured via conversion rate, with the number of users who actually did the action they were called to.

Design strategies

No doubt, all the design projects are highly individual and require solutions based on the specific case. Nevertheless, on the basis of our diverse creative practice, we have collected the set of general ideas useful for work on efficient landing pages.

Clear goal and structure

The core difference between the home page of a website and the landing page with the specific offer is in their strategic use. The home page sets the global point of departure enabling the user to take a variety of routes around the website, while the landing page is focused on one particular aim which should be effectively presented and easily achievable. Therefore, the first step at designing converting page is setting this particular goal and building the page architecture which will navigate the users to the ways of achieving it.

Targeting

In the article about business-oriented design, we defined targeting as the strategy and techniques of researching the particular target audience to find the best and the shortest ways to attract their attention to the specific product or offer.  A landing page is an effective marketing tool when it’s based on the needs, preferences, and expectations of the target audience. Even more, these web pages allow companies to set multiple landing spots for various target users on the basis of:
– geographic targeting
– gender targeting
– psychographic targeting
– demographic targeting
– behavioral targeting.

There are many practical cases when companies changed some parts of the products, their names or even set the new brands to sell successfully in different countries with a diverse cultural background. The same can be done with landing pages:  for example, the page offering the same smartphone can look and talk differently to the users from different countries, taking into account their perception of colors, copy, priorities in product features, and trends on the local markets.

Gym Landing Page

Functional minimalism

Getting back to the metaphor with the physical landing of an aircraft, it’s hard to imagine how it could safely land on the place which is heavily stuffed. For soft landing, a clear spacious spot is a vital condition. For landing page, it works the same way: attempts to overload it with everything bring to a negative result. In most cases, minimalist design based on core functionality and visual elements easily navigating the user to the CTA proves itself a good approach.

Maximum attention ratio

The attention ratio is the level of concentration on a particular task or goal. No need to explain that for a landing page is should be as high as possible. Too many elements of interaction will provoke distraction lowering the chances of conversion: the more options users have simultaneously, the harder it is to make the choice.

Instantly visible call-to-action elements

CTA or call-to-action element presents the most valuable interaction element of a landing page as it is actually the spot where conversion happens. It should be instantly visible, which can be done via color or shape contrast, and informative, which is usually achieved with proper copy or icon, or both.

Museu landing page 

Harmonic color palette

Colors and shades chosen for a landing page are not objects of designer’s creative self-expression: they are as much influencing the conversion rate as any other design element and sometimes even more than others. It’s not just aesthetic satisfaction which users can feel seeing the presentation but also the hidden message which can be transferred via traditional associations in color perception. So, colors should present the combination pleasant for user’s eye, emotionally appealing to the target audience and establishing the effective visual hierarchy of the layout.

Corresponding typography and good readability

As well as colors, fonts also tell much not only with the copy hidden behind them but also with associations and emotions they bring out. Typographic hierarchy and well-balanced font combinations have a big impact on the readability of the page which can directly influence the conversion rate. Landing page is not the spot on which users are ready to spend much time so poor readability can drive them away before they make a decision or understand if the offer corresponds to their needs. Being an integral part of the general stylistic concept, appropriate fonts can also contribute much to effective visual performance catching users’ attention.

Strong and consistent branding

Landing pages are widely used as part of a web marketing strategy so they should support the general scheme of brand promotion. Coming from outer resources, social networks, advertisements, users need to feel and see the consistency of brand image to be ready to trust it. So, identity elements like logo, slogan, mascots, corporate fonts and colors should be taken into account.

Photography Workshops landing page

Prominent theme image

No secret, most users are visually driven and they scan the web page in a couple of seconds perceiving images much faster than copy. An appropriate theme image, be it a hero banner, original illustration, high-quality photo presenting a product or service, is a good way to attract users and get them interested as well as inform about the nature of the promoted offer. Images of this kind save users’ time, send them a quick and appealing message and add much into aesthetic side of the presentation.

Engaging and attractive scroll animation

Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. Scroll animation applied wisely can add life and style to the landing page and become another attractive feature stimulating positive emotions. Also, motion creates the feeling of one integral smooth interaction with a whole page rather than several separate parts.

Dance Academy landing page

Visual hierarchy of copy content

Copy content is another aspect which has to be well-thought. A designer’s task here is to think about edible copy presentation framed into a clear visual hierarchy: sizes and placement of copy blocks, instantly scanned headlines and short concise call-to-action elements directly influence the level of conversions. The length of copy on landing pages is a debatable issue: focused goals behind the landing page doesn’t always mean that each time it should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, short and strong copy can be enough to encourage users. However, if a new unknown product or service is presented, it is often useful to provide users with more information persuading them to follow the call to action. Anyway, the presentation of the copy has to be designed for good readability and scannability of the page.

No information overloading

Based on the previous points, creative team working on a landing page – designers, copywriters, marketing specialists, etc. – should agree upon the priorities and define the core benefits users must see. Trying to overload the page with all the possible data about the offer, you risk overwhelming them so much that they can start hesitating or even get annoyed. Core information fields included on the landing page usually cover:
– the general introduction of the presented offer
– concise and informative description of the benefits solving user’s problems
– testimonials and signs of trust
– clear call to action.

If the offer is quite complex and it’s hard to describe all its benefits shortly, the good solution can be found by dividing the page into several theme blocks with separate interactive elements ( buttons, fields, links, etc) enabling users to get further information or help quickly but on the other page.

magic.co landing page

Promotional video

In one of our recent posts, we have given insights on the benefits of short promotional videos for the presentation of products and services. The big advantage of this technique is the high speed of perception, emotional feedback, and big informative potential of the video in comparison with copy. On the other hand, creating the video can be more time-consuming and require the bigger budget, so the efficiency of this element should be analyzed from a business perspective to see if it’s really profitable for every particular case.

High loading speed

None of the mentioned strategies will work properly if the technical side of the interaction is neglected. Whatever stylish, sophisticated, and informative is the landing page, it won’t make users put up with waiting while it’s loading. The matter here is really in short seconds, without any exaggeration. So, optimization of the images, the thoughtful technical realization of motion effects, quickly loading video and fast transitions if they are applied – all of these and similar factors can have a crucial effect on conversion rates. Respect the users’ time otherwise they won’t be quick to trust you.

Tubik Magazine landing page

Obviously, the presented list doesn’t mean that all the mentioned strategies should be applied together on every page. Each project demands an individual approach based on rigorous analysis of the target user expectations, needs, and preferences combined with business goals. When the page is live, A/B testing and analysis of real interactions open the new perspectives and prove if the designer’s initial decisions were appropriate for the established aim.

Landing page vs Home page

Should all the traffic from outer sources be directed to a home page or landing pages? We have already shared our ideas with the set of strategies for home page design. The answer considerably depends on the nature and complexity of the website. The issue to consider is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

For simple one-page websites, this question is not actual: indeed, they represent only a home page that satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, the homepage is not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in the case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be an efficient way of solving this problem. A landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses. The choice of a profitable approach in every case should be based on user research and then thorough user testing.

Big City Guide landing page

Recommended materials

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, here’s the bunch of articles for those who would like to continue the topic exploration:

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

Landing Page Conversion Course (9 parts)

Classic landing page mistakes you’re probably still making

Landing Page. Direct Flight to High Conversion

The ultimate guide to designing landing pages that convert

What Happens When You Analyze 100 Landing Page Examples?

10 Key Landing Page Features That Draw in Prospects

7 Landing Page Call-to-Action Formulas for Higher Conversions

Want Conversions? Start with User-Friendly, Useful Landing Pages

Problem-Solving Web Design. Free Ebook.

Originally written for Tubik Blog

Сообщение Profitable Tips for Landing Page Design появились сначала на Design4Users.