Inspiration

Design Ideas For Landing Pages

In this post we delve into some design ideas for landing pages and take a look at which trends are being used in successful layouts.

Less intrusive advertisements can be found on almost every site whether you realize it or not; many websites actually behave like one big advertisement. The sales pitch could be for a mobile app, WordPress theme, or the services of a development studio. Regardless of the product, a great sales pitch should never feel like a sales pitch.

In this post, I’d like to take a look at some landing page design ideas, and specifically on which design trends are being used in successful layouts. It may also help to think about landing page design from a marketer’s perspective. All the crucial elements of a good design should be present but if the page doesn’t sell then it hasn’t fulfilled its primary objective.

Guided Tours

The quick hands-on approach to getting some attention is to showcase whatever product is being offered. It works best if you have a product either physical or digital – but even service-based landing pages could go through typical project workflow. This technique should offer visitors a behind-the-scenes peek at different features or selling points.

daypack app for iphone landing page

A glimpse at the landing page for Daypack should illustrate my point beautifully. Near the top, you’ll find a list of tabbed links that dynamically switch between content. This is an excellent way to familiarize visitors with how the app operates and how to interact with the UI. Lower on the page, there’s a diagram explaining each tool and how it works. The whole layout is clean and has a strict focus on guiding a user toward helpful information.

intercom homepage guided info

Another guided method would be analyzing each key point of the application or service in greater detail. Intercom is a customer communications manager with a lot of features. To any newcomer, this may seem overwhelming, so it helps to break down the app into smaller portions for easier consumption.

Use any method possible to guide visitors deeper into the product. This could be an actual tour of screenshots or a small video clip, or something completely different. It just helps to familiarize new visitors with the product being offered and why they might want to check it out.

Pictorial Features

If a website doesn’t easily describe the purpose of a product then it just creates more confusion. Visitors should be able to recognize the purpose of your product or service even if it’s only hinted or implied.

One great way to accomplish this would be through graphics. Pictures and screenshots can be understood quicker and easier than a bundle of paragraphs. Take for example the DigitalOcean landing page which offers cloud & VPN servers. Their homepage uses a couple icons to illustrate features and even has a separate features page dedicated to their product.

digitalocean landing page featured icons

You can never explain too much unless the content becomes redundant. Many websites prefer to use a small list of icons that gloss over common features. These features may link to internal pages or just behave as standalone content. Yet in both cases these feature lists are still beneficial to the overall experience.

viewflux landing page icons list

New visitors really want to understand what’s going on, and fast. Don’t assume that anyone will know what you’re offering just from the page itself. Communicate through words and visuals to make the design more impactful.

Customer Testimonials

Although I notice this trend on a lot of different websites, landing pages tend to use a lot of testimonials for garnering support. Big-name companies and various individuals can both supply a healthy dose of accountability to whatever you’re advertising. A testimonial from an existing customer says that someone was willing to try out the product, and they liked it enough to give encouraging feedback.

avocode product landing page customer testimonials

The landing page for Avocode is so elegantly designed and uses plenty of great visuals to explain the product. Towards the bottom you’ll notice a list of customers who have tried it and given their opinion. Most testimonials include a person’s photo along with their associated company.

If possible try to include company brands or logos along with reviews. This will only help to strengthen the product’s apparent value to potential users who are on the fence or have never heard about the product before. Ask each customer if they’d be interested to give a quick testimonial for the website – it’s an easy marketing tool and helps build quick credibility.

Horizontal Page Sections

Most landing pages focus on a product or service which is explained over a series of different pages. Yet most users don’t stick around that long so it’s important to catch their attention right after that first pageload. This can be accomplished using large horizontal content sections broken up with a sliding navigation.

The Montage photo book homepage is a great example of this technique. As long as the navigation doesn’t intrude on the content it can be quite beneficial for a single-page layout. All the features are easily accessible without the need for exhaustively browsing through extra pages.

montage book landing page design

Some landing pages split up content into horizontal sections using different backgrounds. These could be photos, videos, or background colors designed like tiles. Regardless of the design choice this is an excellent method to showcase a multitude of information. Each horizontal section would cover a major feature or service and which requires the visitor’s full attention.

Relatable Photographs

We all know about the ridiculous modeling for stock photography and it’s actually become an Internet meme. But great photography doesn’t require an unnaturally-excited businessman on his phone grinning foolishly about nothing. Talented photographers know that great photography is relatable and when photos are paired with content they should add to the message, not detract from it.

heavy android app weightlifting landing page

One of my favorite landing page designs is the Heavy app for Android. It’s a smartphone app for weightlifting and bodybuilding which uses background photos in the layout. But instead of the cliché “smiling woman curling 5lb dumbbells” the landing page uses a more mature set of photos which appear more like scenery. Notice how these photos take up a large portion of the website and change the tone in a very pragmatic way.

square payment system landing page

Photos don’t need to be sewn all throughout the layout to build an effect. Many landing pages like Square use just a single background photo at the top of the layout. As long as it’s a relatable photo that doesn’t look forced it should add to the overall design. And with free aggregation sites like Unsplash it’s getting much easier to find useful stock photography.

A balance between form and function

Web UI design is often about problem solving and this goes double for landing pages. The goal is to design something that promotes a product or service without appearing like a blatant advertisement. Following these trends can help, along with analyzing other successful landing pages that catch your attention. Think about how catchy landing page designs make you feel and why they draw your curiosity further.

Great design is achieved with a balance between form and function. Form follows function because the function(marketing) is primary while the form(design/UI) is secondary. Yet both elements are crucial to every website and should mesh together nicely. To quote a wise cartoon adage: “When you do things right, people won’t be sure you’ve done anything at all”.

Featured image: Montage


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.