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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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!
If you enjoyed reading this article about mobile app websites, you should read these as well:
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.