Advertisement
  1. Web Design
  2. Roundups
Webdesign

Inspirational Roundup! 40 Great Examples of App Site Design

by
Languages:

Yesterday, we looked at what goes into a great app site by dissecting the design methodology; Today we're following that post up with a roundup of 40 excellent examples of app-site design in action. If you're designing a site for an app (or just about any promotional site), you won't want to miss out on this inspirational roundup!

Apps are everywhere: on your phone, on your computer and even on your TV! Not many apps live purely on a store. They probably have a site also to either distribute the app or just one to demonstrate and show of it's features. Today, I'll be guiding you through a list of application promo websites from PC to Mac, Android to iPhone.

Make sure you don't miss our post on Dissecting App Site Design, as that post goes over a lot of what makes these examples so worthy of your attention.


Camera+

Camera+ is one of tap tap tap's premium apps and a big success in the app store. Before even reaching the fold, you already get a large, animated iPhone showing off the app and a stylised button taking you straight to iTunes. At the bottom, there's an interactive gallery created purely from CSS effects.


RipIt

RipIt's page features a higher-resolution version of the app's icon and three main points of the app on the right. As you hover over these points, the image changes to show an associated screenshot.


Things

Things for Mac, iPhone and iPad is a task managment app by Cultured Code. They've opted for a thinner content area than most, but this is actually more akin (not perfectly, though) to divine proportion. The app itself is based on simplicty and large margins & padding create a sense that that's true.


Twitterrific

Twitterific is a third-party Twitter app for Mac, iPad, iPhone and even your desk!


Itinerary

Icon design sometimes governs my choice of an app. If you have a terrible icon, I probably won't buy your app as I prefer someone else's icon. If you go through my iPad, only one app has a sub-standard icon (purely due to it being the only one of it's type available).

To arrive at the point, Itinerary for iPhone is one of those apps with a nice icon. Naturally, I expected the website to have a similar style and it does. The ribbon and leather UI style of the app is evident in it's website too.


TweetDeck

TweetDeck is a universal Twitter application for iPhone, iPad, Android, Chrome and desktop. If you head to one of the five platform pages, you'll find a large image showing the app in use as well as the download button and a highlight of features. As with some of the apps we've already looked at, the dark style of the app is represented by a similar theme on the website.


Miro

Miro is a video player app for OS X. It has a hero screenshot on the side which switches between content as you roll over section titles on the left.


Tapulous

Tapulous' application detail pages are very clean and differ little between pages. The detail pages uses the Z-layout that was highlighted in the preceeding article, so your eyes naturally go from the logo banner, to the description to the download button: exactly the order they want you to go through the page.


Coda

Coda is a one-window, web development app for OS X.


Foursquare

Foursquare's official app websites featured a large screenshot on their host device and the rest is layed out very nicely. Each point is baked up with an image and the QR code (for Android) is also very prominent on the page.


atebits

Loren Brichter, now a developer at Twitter, created the very popular Tweetie for Mac and iPhone. They've now been rebranded for Twitter's official usage, but his website still showcases them. The site has a grey colour scheme which matches the scheme in the app. The style of the purchase and download buttons don't look flat and look much more app-ish.


Wheel of Tea

Wheel of Tea naturally features a cup of tea, milk spill and biscuit!


WordPress

Everyone's favourite blogging platform, WordPress, has a range of official apps on most mobile platforms. A minimalist, white design was opted for here using serif fonts which are quite common in WordPress' backend and other sites.


iTunes

iTunes is Apple's PC and Mac media player and integrated store. It's place on Apple.com highlights it's tentpole features and points to a download page.


Tap Tap Tap

Tap Tap Tap is the maker of such popular apps as Camera+ and Voices for iPhone.


Office for Mac

Office for Mac is a productivity by the always-loved Microsoft.


Evernote

Evernote is a note-taking app across a number of desktop and mobile platforms. Their homepage highlights three three tentpole features of the software: capture anything, access anywhere and find things fast.


Filmscore

Filmscore is an app for rating films. The website features the same wood texture background that also features a ticket and slightly-crumpled paper note.


Courier

Courier is an app that allows you to share files through a selection of social networks. In this example, I personally love the "available on the Mac App Store" button that blends in with the overall texture of the web page and the app itself.


Weightbot

Weightbot is a futuristic, metal-ish designed app which tracks your weight. Under the hood, Tapbots (the makers of said app) uses animation to transition through a number of tabs, and a selection of photos in the gallery tab.


Permute

Fuel Collective's Permute app allows you to convert video through a simple drag and drop interface. This particular example uses the Z perception path (icon to tagline to quote to features to download).


Skype

Skype is an app i'm sure most of you will be familar with as it's one of, if not the premier app for video calling and conferencing.


Kaleidoscope

Kaleidoscope uses a really awesome, and unique, single page design for their site. They use a pretty awesome scrolling effect to create a brilliant and interactive experience.


Bills ~ On Your Table

Bills mimics the design of their iPad app to create a design that blends into the name "On Your Table".


Kiwi

Kiwi is an OS X twitter client. All i'm going to say is move your mouse around the representation of the Kiwi bird. It's very shy!


Windows Live Messenger

Microsoft makes some nice, simple typography choices on their app sites which is married with modest icons.


The Daily

The Daily is Rupert Murdoch's latest creation, an iPad-exclusive newspaper/magazine that was only recently launched. The website itself crams a lot of information into a single page (compared to other apps) but doesn't feel like a heavyweight.


Concentrate

Concentrate is an app that's website was used as an example in the buttons section of WebDesignTuts+'s "Dissecting Web Design: The App Site" article. The buttons match the overall theme of the site and popout, drawing in the user's attention.

On a side note, this is an app I could really use right now!


Bord

Bord is another app that lends it's design to thier website, naturally the design of a chalkboard.


Spotify

Spotify features prominent screenshots of both their mobile and desktop apps.


Wunderlist

Wunderlist uses a clean, light design to promote their task managment app. I am especially a fan of the handwriting-style "now with collaboration!!" annotation under the large, bold title.


iMovie

iMovie for iPhone is highlighted on Apple's iPhone 4 site. Apple's marketing tactic is also evident here using the same minimalistic, image-heavy design to show off the major features of the application.


Opera

Opera is a web browser available on your desktop, mobile and certain Nintendo consoles.


1Password

1Password's website starts at an initial page with a nice desk representation of each of the platforms the app is available on. You can then click through on any of these devices to view a detailed description of the app on each system.


Thunderbird

Mozilla's Thunderbird page features an artistic background that plays nice with the rest of the content (the bit they want you to notice!).


Instagram

Instagram is an iPhone photography app.


USA Today

USA Today's app website uses the prominence of screenshots to attract users to it's app. As you scroll down, the inner shadowing of text differs it from the norm.


Fontcase

Fontcase uses text with inner shadowing to make it "feel" a lot more like an app itself.


Out of Milk

Out of Milk is an Android "to-do" app. It too uses a text and element shadowing effect but the strong point of this design is it's download button.


Gallerytopia

I've highlighted the latter part of Gallerytopia's page due to it's use of a numbered steps to communicate the simplicity of the app's use. Further up the page, there's also a bulleted list of major features of this iPhone/Android app.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.