web-design-inspiration:-20+-examples-of-creative-landing pages

Tubik Studio

A landing page is a well-checked tool of web marketing: it helps to focus visitors’ attention on the specific offer, benefits or actions. Today we offer you a collection of web design examples featuring landing pages for a variety of products and offers.

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:

So, let’s get started!

This design has been created for 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.

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 at 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.

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.

This page promotes a service for the 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, color accents of the illustration effectively work together with a CTA button, and dynamic composition of the artwork supports the brand name Mailflow.

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 a speech recognition technology in a collection of innovative projects. The pages of this kind are a powerful tool of 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.

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 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.

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 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.

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 a quick glance on a landing page of that kind: it presents the CarAid, 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.

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.

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.

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 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 the higher visual priority that the ghost button used to lead the visitors to an explainer video.

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 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 at local clients, the CTA is designed for a quick call as a priority action.

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.

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 sending the email address. Animated interactions add fun and life; generally, the design strives for the balance of business-like but friendly mood.

Having our hands full of various tasks, we tend to try tools and methods boosting 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 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.

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 case of e-commerce website by means of digital art. Here’s the page designed for an online store selling exclusive hairclips 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.

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.

One more a landing page promoting an event: this time it presents a fashion event, gives it a brief introduction and let 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.

With all the global problems our planet faces today, communities of people concerned with them and seeking for the solutions are growing to prevent the negative impact. This design is also devoted to that theme: the 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. Visual hierarchy of the webpage sets the basis for scannability to make the major information, infographics, and CTA instantly visible.

The Bauhaus is often referred to as one of the most impactful modernist art school 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 this year art and design society mark 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.

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.

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 the 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.

This web design concept was aimed at football fans: on the 1st of June, Madrid hosted a final of 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.

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.

This landing page of the kindergarten uses a big funny and cute monster 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.

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 all the 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.



ui-design-inspiration-?-sep-2019

Subscribe to our half-monthly newsletter for regular design inspiration.

Product Disrupt

Sep 20

·

2

min read

Dribbble shots that we found interesting for this month’s round-up.

Kikk Festival 2017 — About Page by Dogstudio

Landmark — Homepage by Dogstudio

AI for Marketing Suggestion by Dwinawan for Paperpillar

Why Slack? by Gene Ross for Ueno

Chatlio — Features by Filip Justić for Balkan Brothers


Behance projects that we found interesting for this month’s round-up.

Music Mobile UI Kit by Marko Jotic & Damjan Krivosija for Creative Form Studio

Endomondo Redesign Concept by Adam Bałazy, Kamil Bachanek, Kamila Mitka, Kohut Piotr, Michał Jarosz, Dawid Sobecki & Milosz Pirog for 10Clouds

Instalend — Website by Martin Strba

Talklife — An iOs social network app by Gregoire Vella & Simon McCade

Groundwork — Better team payments by Łukasz Pachytel for Netguru

Hit the clap ? icon if you enjoyed this curation.

Product Disrupt Blog brings you the best of UI every month. Be sure to subscribe to the newsletter and follow on Twitter, Instagram & Facebook to stay on top of the game.

ux-inspiration-from-history:-made-in-the-soviet-union

History is full of great inventions. Over the past 100 years, people have created a great number of original inventions. Despite this, there is no streamlined process to create a product that is guaranteed to be successful.

Today, if you want to create a product that will become legendary you have to spend a lot of time researching, validating your ideas, looking at other products, testing them, etc. Unfortunately, all these still won’t guarantee success. Even with such a large set of resources like the Internet, books, videos, etc. Besides, no one will accept your idea without deep research and market analysis.

It is a well-known fact that in the Soviet Union, all information was blocked from outside. But when outside information did manage to make its way into the country, it was collected bit by bit and passed from person to person carefully. This is how the products that I will talk about were built: almost in complete isolation from the rest of the world. Mostly with local knowledge and local resources.

Despite these limitations, engineers and designers have made wonderful devices that were used by most people in the Soviet Union. Not all of them are perfect from the UX side but there are plenty of amazing solutions and features that can inspire everyone.

Electronica VL-100 front view

Electronica VL-100 front view

image by u-ssr.ru

It was the first portable TV in the Soviet Union. Electronica VL-100 was extremely popular because of its unique design and compact size. Also, it was relatively lightweight — only 2.8kg! One of the best features of the TV was the portable battery, which you could add and take with you to the park.

It was the right product for the right time. The engineering team filled in the need for a portable device. They didn’t just improve existing products but changed the way of how people use TVs.

TVs Electronica-50 and Electronica VL-100

TVs Electronica-50 and Electronica VL-100

TVs Electronica-50 and Electronica VL-100

The most prominent part of every new product is the ability to use with as least explanation as possible. This TV was very successful with that. Electronica VL-100 had 5 small dial knobs to control contrast, brightness, etc., plus one big dial to switch between channels. This simple control system allowed to set up and use the TV easily and intuitively.

Every dial has its label and placed above it. When the user turns a knob, they can see what setting they are changing. Indeed, not all modern products follow this simple rule: give enough context to users.

Electronica VL-100 setting knobs: Contrast, Brightness, Turn ON/OFF/Volume

Electronica VL-100 setting knobs: Contrast, Brightness, Turn ON/OFF/Volume

Setting knobs: Contrast, Brightness, Turn ON/OFF/Volume. Image by u-ssr.ru

Another remarkable part of the TV is the antenna that goes straight from the handle. It is a perfect solution that combines both usefulness and aesthetics. Instead of going a standard way and mounting it on top or at the back, engineers came up with the ideal solution and added it to the handle. With this design solution, the engineering team prevented the antenna’s damage during frequent transportation.

Another design decision that was driven by functionality is the material that the body is made out off. The core idea of this product is to be portable and used for outside events or often moved within a house. Customers want to be sure that after an accidental hit, it will not fall apart. It was the good old days when the design was mainly driven by customers’ needs and not by marketers.

Side View of Electronica VL-100

Side View of Electronica VL-100

Side View of Electronica VL-100. Image by u-ssr.ru

There are many products from the Soviet Union that are known for durability, and this one is no exception. You may be surprised, but there are lots of places where you can get a used TV and it is still fully operating. The fully functional product that has been produced 50 years ago, how do you like that?

Normally, until around the 1990s, most of the TVs were cathode-ray tube-based with a small ceramic heating element. It was essential to have some cooling to avoid overheating. Engineers made holes on top and at the back to be sure that inside parts won’t overheat. At that time, passive cooling was a standard choice for lots of TVs.

Electronica VL-100 red

Electronica VL-100 red

Electronica VL-100 red

The overall style is simple with a little number of details. I would even say it’s close to Braun type of products from a design perspective. The only thing that I find underwhelming is a huge logo on the front of the device. You do not want to tell your user the name of the device every time they use it. People will buy a great product one more time but not because of the name in the front.

“Spidola” radio in good condition

“Spidola” radio in good condition

Beautiful “Spidola”. Image by SverdlovskAvia

Let’s continue our path to the world of portable devices. The next one is “Spidola” radio that has been produced in the early 1960s. This radio is one of the most popular devices in the USSR in the middle of the XX century.

“Spidola” was a pioneer in the world of portable radios. Many people wanted to have a small and convenient radio for different occasions. In the 1960s, all radios were huge, heavy and just for home use. That’s why this radio was a breath of fresh air for people who wanted to listen to music outdoors or on the go.

Technical characteristics were outstanding for that time — almost 200 hours of battery life without recharging. For the first product in this niche, it had impressive integration with other products. For instance, you could plug a bigger antenna or a more powerful speaker. Sometimes it seems that the ability to plug the third-party devices are not the most important function for the initial version but it set the standard for all future portable devices.

The first sketch of the “Spidola” radio

The first sketch of the “Spidola” radio

The first sketch of the “Spidola” radio

Sometimes even for the first version, you must have a killer feature to make sure that your product can compete with others on the market. Of course, for this radio, the main feature was portability and only then third party plugs.

The design of “Spidola” Radio is minimalistic and clean. The metal body instead of plastic for better durability in conditions of frequent transfer. Engineering team could choose to make a plastic body, but they put endurance first. It’s not overloaded with ornaments or functions. This is a simple radio that does its job amazingly.

The antenna also hides inside the radio, which is the ideal solution for portable devices to prevent any damages. The speaker is small relative to its body, but the quality of the audio is impressive for that time.

“Spidola” radio front

“Spidola” radio front

Image by SverdlovskAvia

Another detail — all controls of the radio except the handle are “hidden” inside the body. The handle is soft and thin to make the product lighter.

All controls are missing labels, and that’s a problem from a user experience standpoint. If you wanted to know which control does what you had to check the operational manual. Interestingly, there was a lot of space to place labels for every button.

“Spidola” radio top view

“Spidola” radio top view

Image by worthpoint

“A user interface is like a joke. If you have to explain it, it’s not that good”. — Martin Leblanc.

This radio was so successful that it served as the base for 5 different models of portable radios. All of them were released between the years of 1967 to 1978.


Both of these products had feedback forms that came with the packaging. At that time it was the only way manufacturers could communicate with customers. You should always seek for any kind of feedback, especially from direct consumers, to improve your product.

Electronica VL-100 and “Spidola” radio are excellent examples of great functional and long-lasting design. Moreover, the durability that was laid in the design is outstanding.

Hopefully, one day, everything will change and companies will be making products for people, not just for shareholders.

Also, check out my other articles:

ui-design-inspiration-?-jul-2019

Subscribe to our half-monthly newsletter for regular design inspiration.

Product Disrupt

Jul 18

·

2

min read

Dribbble shots that made it to the list of best UI for Jul 2019.

Minimal & Creative Design — Web Development Agency — Home Page by Lucian Tudorache

Tunefox by Jaromir Kveton for Soulmates

Articulate 360: Tour by Luisa Mancera for Ueno

Qonto by Barthelemy Chalvet for Qonto

Restaurant Dashboard by Julia Jakubiak for Fireart Studio


Behance projects that made it to the list of best UI for Jul 2019.

Pleo — A company card that works for you by Prakhar Neel Sharma

NakedGroove: Online Music Streaming Platform by Tom Koszyk, Mateusz Piątek & Kuba Karas for Hologram Design

LiquidPro UI Kit — Free Download by Stanislav Hristov for Dtail Studio


Shopping made personal — IKEA online experience concept by Michal Parulski, Mateusz Czajka, Pawel Kontek, Jarek Ceborski, Łukasz Pachytel, Toto Castiglione & Anna Klawikowska for Netguru Team

Hit the clap ? icon if you enjoyed this curation.

Product Disrupt Blog brings you the best of UI every month. Be sure to subscribe to the newsletter and follow on Twitter, Instagram & Facebook to stay on top of the game.