Design Killer Mobile App Websites: Tips And Examples

By . Filed in Web Design

The mobile scene has grown exponentially over the past couple of years. The iOS App Store along with Android Apps on Google Play have become the two hotspots for smartphone enthusiasts. As the number of smartphone users increases we are seeing hundreds of mobile app developers launching new ideas into the market.

ImGame social checkin video game network

Most popular apps are accompanied by their own website. This can be helpful with marketing and getting your name out there. It’s also a much prettier online URL than either of the App Stores. I feel that any successful mobile application almost requires a web presence.

In this article I want to go over some of the most common design trends for mobile app websites. There is no strict rulebook you must follow for building such a layout. Rather there are some unique guidelines and trends which web designers have found to work well in gaining an audience. Coupled with my iOS Development Guide you can put together a fantastic mobile app and construct its website, too.

Check out these concepts below and try implementing some into your own application website layout.

Device Screenshots

A staple piece for any mobile app website has to be screenshots of the application. Visitors are only interested in your app, and what quicker way to demonstrate its purpose than through screenshots? You can fit device shots into any layout style so it’s not a limiting factor.

Easy Chef is a Spanish iOS app which uses many device shots. The very top part of the layout has a slideshow preview of different views. But as you scroll down you’ll notice other diagrams using iPhone displays. These panels include detailed labels and upclose, magnified screen views. I have actually written about designing informative product graphics in an older post.

Easy Chef iOS App website graphics

Another interesting setup can be found on the Tweetbot gallery page. This is a very popular Twitter client for iPhone and the developers have put together a sliding showcase of screenshots. If you’re trying to save room in your layout, this may be an easier solution. Visitors won’t need to scroll down looking for a specific view. jQuery is easy to implement and you can quickly put together a sliding iPhone screen preview. It may be difficult to include extra details, but this can be added in another section.

Tapbots and Tweetbot iPhone App screenshot gallery

App Store Badges

This technique also seems very no-nonsense once you’ve finished building the application. Badges are quickly recognized as download links to the app marketplace. Both Android and iOS users have the ability to view apps right from their browser, or this will redirect when viewed on a smartphone.

I like using Instagram as an example since the website had updated to a newer layout. They have badges supporting the Android Marketplace (Google Play) and iOS App Store. Both badges are very simple in design yet easily recognized at a glance. If you’re looking for more complex designs, I recommend a quick dribbble search. Talented designers often share their app store badge concepts for constructive criticisms.

Instagr.am App Store Badges - new layout redesign May 2012

Mobile Social Networks

Facebook and Twitter have switched to mobile, but this hasn’t stopped other networks from sprouting up. We are seeing social networking use mobile apps to allow a whole new platform of communication.

Localmind runs on a concept that is similar to Foursquare, where you register an account and start checking into local places. You can leave questions, or answer other people’s questions. Their website is very friendly and inviting to newcomers. I especially love the top banner section designed with a custom map background. Their use of gradients and background texture give the website a life of its own.

Mobile checkin social networking app website Localmind

Minimal Photo Sharing

Pose is another mobile network with similar ideals for minimalist design. You can download the mobile app for both iOS & Android devices. The feeling is similar to weheartit but it’s for mobile fashion lovers. The whole app is focused around fashion, hair, makeup, and glamor.

mobile social network for fashion lovers - Pose

Users can take photos of their outfit, clothes, or accessories and share them around the network. One thing to notice about Pose is how quickly you can browse the website. It’s easy to find the company blog, contact details, etc. Other app websites often overlook these corporate features which can be a touchy subject.

If you want to draw attention from the media it’s important to make your website look and feel like a real social networking product. You are not only trying to sell your app (by ads or paid subscription) but also sell the network itself. Social apps can definitely be trickier than designing regular app websites. But they also garner a lot more downloads from users and it’s an exciting new field for mobile.

Extra Features & Details

Of course you want to give your visitors some good information on the app. Some designers choose to keep their application websites very simple and easy. A download button, screenshots, and social links, although it can’t hurt to offer just a bit of detailed info on the side.

I love the Listomatic website because it combines the best of all interface techniques. The top page section has a device screenshot with app store download buttons. As you scroll down the page you’re introduced to a features list with unique icons. This is a guaranteed way to grab some attention and introduce your app’s purpose.

Listomatic App Website details and screenshots

iMyGarden has a much more detailed design including background textures and tons of screenshots. As you scroll down, their website has an entire sidebar area listing their many features. Off to the side, you’ll also find screenshots and even custom videos!

iMyGarden App for iPhone - website details list view

When going over your app details consider how thoroughly you’d like to present everything. Too much information and your visitors may be turned off or even confused. But not enough info and they’ll have no idea what your app even does.

From Humble Beginnings

Web designers are not always capable of putting together outrageous graphics and icons. Thankfully app websites are not critical towards how much Adobe Photoshop prowess you have. I actually feel that minimalism can work much better for this layout style.

Leef App is a newly released Forrst client for iPhone. Their website includes a beautiful app screenshot along with a big bold download button. All of the page text is simplified in a similar manner to Apple’s fonts and color schemes.

Forrst Leef App for iOS - minimalist website design

What makes the Leef website great is the candid nature of each page element. It’s blatant and upfront with nothing hidden or pushed aside. I recommend trying this style as your first mobile app website, if anything just for practice. You can learn a lot by minimizing the lesser tidbits and concentrating on what grabs attention.

Lovely Whitespace

Also as brilliantly simple is the Wood Camera App website. Their layout holds nothing but a plain white background and centered content. This content includes some default screenshots, an app store badge, and some additional key features.

Wood Camera iOS iPhone app website

If you feel like minimalism and white space are important to your layout then stick with it! Wood Camera isn’t a particularly mindblowing website layout, but it is super easy to navigate. Their site doesn’t even link to any alternate content aside from the developer’s official page. This keeps focus on the app and what it can offer, which is much more important than flashy graphics. Although that’s not to say flashy artwork is a bad idea – it just requires a proper implementation.

Colorful Illustrations

Quite the opposite to the minimalist approach is a work with unique illustrations, which I totally adore. Often times this extra detail will completely sell me the app. One example I can relate to is the Barista App for iPhone. Their site header is riddled with little vector cappuccinos and espresso drinks.

Barista iOS App website vector graphics

But notice how there aren’t any other images when scrolling down the page. This whole top section was designed specifically for the iPhone app, similar to a landing page. The vectors catch your eyes right away and also hint towards what the app is about.

Kitchenator is a similar iOS app which converts units of measurement for cooking and baking. Their header layout uses rich wooden textures, a checkered tablecloth, and mini spoons of water. This imagery hints at the purpose of this app before you even skim the content.

Kitchenator measuring cup digital iOS App website

This design style actually permeates through the entire layout. The footer area matches with a similar wooden background and much of the same font choices. This is an example of a very simple website layout with some very powerful graphics.

App Websites: Premium Showcase

What article would be complete without a bit of eye candy? Along with the techniques above I have also put together this beautiful gallery of mobile app websites; notice the logo and navigation schemes, as well as the domain URLs. By studying what the professionals do, you can understand design trends and use them in your own projects.

Bosquet App

Bosquet App Forrst for iPhone

Banjo App

Android and iOS Banjo Application

Everyme

iPhone Everyme app for iOS

Gifture App

social networking gifture app website

Fontain

Fontain iPhone application site

ImGame

ImGame social checkin video game network

Sparrow App

Sparrow App for iPhone iOS

Things for iPhone

Cultured Code iOS5 Things App to-do list

Snapguide

Snap Guide iPhone app

Whoovie

Whoovie app movie reviews for iPhone

Path

Path Social Network for iPhone

Repeat Timer Pro

Repeat Timer Pro Application Store iOS

Cutest Paw for iPhone

Cutest Paw iOS App

Pistachio App

Pistachio App for mobile iOS

Delibar for iPhone

Delicious iPhone app Delibar website

Sketch with Friends

Sketch with Friends iPad App

Get Billy App

Billy App for iPhone iOS

Peg Jump App

original peg jump game app for iPhone

Stop the Vom

Stop the Vom iPhone iOS game

Crowdspottr

Android and iOS Crowdspottr app mobile

Munch 5-a-day

Munch iPhone app website design

Travveling App

Dribbble Travveling for iPhone

Leaflet App

Leaflet iPhone app website design

Get Galleried

OS X and iOS App Store Network

Plazaa

Plazaa German iPhone app website layout

Make Faces App

Funny faces photo app for iPhone

Float App

iOS Float app mobile website clouds

Weave

Weave to-do iOS App by Intuit

Ballin’ App

Dribbble Ballin' iPhone App by Kangaroo Bandit

Forkly

Forkly social networking mobile app website

Mycityway

my city way for iOS app store

Tap Place App

tapplace iPhone app website design

Photo Stats App

Photo Stats iPhone App

Idea Mix

Idea Mix for iPhone website layout sketch

Holitapp

Canadian holiday app iPhone store

Author:

Jake is a user experience designer for both web and mobile platforms. Having over 4 years of freelance projects under his belt, he frequently writes articles on topics of modern design trends and social media. You can check out some of his work on Dribbble or follow his tweets @jakerocheleau.

Advertisement