parallax background

How to design mobile app websites: 23 best app websites

A showcase of great blog design examples to inspire you
March 12, 2019
Let’s take a look at the best photographer websites
March 14, 2019
 

So you’ve created an amazing app that you want to show off, promote, and sell. You might think that you just need to feature an optimized entry in the app stores for your new app and call it a day.

The thing is, you’ll require a focus point for your app’s marketing, a place that will allow your app’s audience to increase by hyping it up. This is why all apps require effective landing pages with a good design.

howtodesgn_heading
 

The most successful formula is to have your product placed right in the middle and have it surrounded by a clean UI design and beautiful color schemes. Full-screen images, videos, vibrant colors, and other memorable and catchy features make things even more enticing. Mobile app websites are a fantastic source of inspiration when they’re designed properly.

Take a look at the following concepts and try to utilize them when creating the layout for your app website.

Components of a Compelling App Landing Page

Components-of-a-Compelling
 

What does the template for the landing page of app websites normally consist of? If you look at the examples listed in this article and even take a look at your favorite apps’ landing pages, you’ll discover these basic elements:

The Headline

theheadline
 

The headline is the first thing seen by visitors. It needs to showcase your app’s value. Basically, it needs to convince the visitor that your app is exactly what they need. At the very least it needs to intrigue visitors enough to remain on your page.

Take a look at how the sleeping app how Pzizz communicates their app’s entire value with simply one headline, and their call-to-action buttons right below it. a sleeping app, explains the entire value of their app with the headline. Roy Hibbert’s social proof adds celebrity influence and is a nice touch.

app2
 
 

Hero image website - the product-first background

Hero-image
 

As soon as users land on a page, large, oversized images will catch their attention. These images also help convey the brand’s unique selling point (USP) to users, allowing them to form an opinion straight away.

Product-first hero images will show off either the mobile app itself or one of its features. These aren’t full-screen images, but they’re borderless and feature a clear background.

They either float to a certain point on the page or they’ll be fixed in position. Their backgrounds are usually white, and they’ll be accompanied with contrasted, almost-black header text.

Attractive Media for Hero Images

attractive-media
 

Your visitors have to be made aware right away of the fact that this is an application website if you want the majority of your website or landing page to even make sense. They’ll also find out straight away if it’s usable since they’ll know if it’s an app for Android, iOS, iPad, or Tablet.

Since visitors only care about your app, the best way to demonstrate its purpose to them is through screenshots. Screenshots fit into any layout style, so this isn’t a limiting factor.

Your visuals’ main goal isn’t to create beautiful app landing pages, but to build up the story told through the body copy. Your product and its benefits should be showcased through your visuals.

The Soundcloud’s mobile app landing page is a fantastic example of attractive media as it demonstrates how easy it is to search for new music through the use of animated GIFs to show how easy it is to scroll to find new music.

app3
 
 

White and Negative Space

White-and-Negative-Space
 

Basically, negative space — more commonly known as white space — is the area of the layout that gets left empty. It can usually be found around the objects placed in the layout, as well as inside and between them. It gives all of the objects on the page or screen room to breathe.

Don’t forget that you don’t need to use just white space for negative space in web design — all colors, textures, patterns, and background images are at your disposal.

Check out the website for Upper app: they use black negative space, which contrasts beautifully with the interface’s core elements. Only one straight line is used for the entire screen. However, the layout looks organized and is easy to read due to the lack of distractions and because the elements have room to breathe. It also utilizes a minimalistic style, making it aesthetically pleasing.

beapp
 
 

App Name and Icon

appnameandicons
 

When deciding on your app’s name and icon, visibility is key: your visitors should remember both straight away, even if they don’t instantly download your app.

The Body Copy

bodycopy
 

Your benefits get placed in the main body copy. Provide as much copy as is necessary to answer your visitor’s unspoken questions and leave them feeling satisfied with the decision to visit your landing page in the first place.

Your copy’s length depends on the kind of app and industry you’re a part of. Less copy (and more pictures) is required to get someone to buy an endless runner game than it is to buy a dieting and healthy lifestyle app.

  • Describe the most relevant information first
  • Briefly describe key functionalities
  • Use bullet points to mention key features
  • Use familiar words

beapp1
 
 

The Right Colors, The Right Way

rightcolour
 

When choosing color themes for app websites, go for those that complement your organization. The color palette selected for your app web page should either be in sync with or match your organization’s color.

This gives the website the look and feeling of it being an extension of your application. If your website features too many colors, colors that are heavy, textures, and an abundance of composition tricks, that might hinder the UX.

App Store Badge

appstorebadge
 

Once you’re done with building your app, this might seem like a no-nonsense technique. Badges are easily identified as download links to the app marketplace.

Both iOS and Android users are given the option of viewing apps straight from their browser, or when viewed on a smartphone, this will redirect.

BE-ITservice
 
 

Call to Action That Stands Out:

call-to-action
 

If there are no prominent call-to-actions featured on app websites, no amount of convincing will enable users to download that app. This CTA must draw attention and trigger a certain action. Adding it to several different places on your app website is a good idea.

Your app landing page exists in order to gear visitors towards the call-to-action, which should consist of clicking a download button that leads them to the app store. Either that, or it should consist of them filling out a contact form and then getting the app directly.

This main objective should be supported by all the components on the web page.

Belanding
 
 

Regardless of whether it’s in the form of a button, a contact for, or a text link, this CTA is the key component of your landing page. It is what converts casual visitors into users or leads in all the best app websites.

Social Proof

Social-Proof
 

Some kind of social proof is also necessary as it demonstrates to visitors that your app is trustworthy. These can consist of the best quotes from reviews by blogs or newspapers, as well as some of the best quotes from user reviews.

Most apps tend to shed the spotlight on glowing user reviews or testimonials that come from big-name users. If their app has received any awards or recognition, those will be displayed. They might also just boast about how many users they have or how many downloads they’ve generated.

Check out how at how the map and travel app Roadtrippers tells a story about finding hidden gems on road trips through user reviews and body copy.

Mobile-Friendly Design

Mobile-Friendly-Design
 

When designing your mobile app’s landing page, make sure that your tap targets (the areas on the page that users interact with) don’t overlap and are large enough in size.

Take a look at the landing page for mobile app Simplenote. First of all, you’re given an overview of the app’s functions, immediately followed by download links for every OS. Look at how large those links are. That’s because the goal is to make them easily clickable on mobile devices.

What kind of article doesn’t feature some eye candy? The techniques listed in this article are accompanied by a list of some of the best mobile app websites:

Benotebook
 
 

Tapcart

tapcart
 

What makes this landing page so great: Beautiful pictures, effects, and animations, Numerous auto-play videos demonstrating the app in action, Sections that are simple and structured make this page easily digestible and several clear call-to-action.

Things that could be improved: A much simpler copy would be better - technical words such as “bespoke” might confuse numerous visitors.

Path

path
 

Our favorite thing about the Path website (besides them integrating an actual video of the app in use and their responsive website) is that they provide some instructions: the app can either be downloaded through your browser, or you’ll receive a download link via text message. Badges for the Google Play and App Store are also included, just to be on the safe side.

Pacemaker

pacemaker
 

What makes this landing page so great: Users are enticed thanks to beautiful branding and vivid colors, the app’s functionality is showcased through fantastically-executed product videos, a short page will lead to towards the various product offerings, and there’s also an awards section to display the product’s credibility (eg: Apple Design Awards 2015).

Things that could be improved: The call-to-action should be placed above the fold so that there’s no need to scroll, showcase some example mixes to entice prospective users, mention that it’s a FREE app!

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 157,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.