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+ 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'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 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.
Twitterific is a third-party Twitter app for Mac, iPad, iPhone and even your desk!
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 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 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' 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 is a one-window, web development app for OS X.
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.
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 naturally features a cup of tea, milk spill and biscuit!
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 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 is the maker of such popular apps as Camera+ and Voices for iPhone.
Office for Mac is a productivity by the always-loved Microsoft.
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 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 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 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.
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 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 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 mimics the design of their iPad app to create a design that blends into the name "On Your Table".
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!
Microsoft makes some nice, simple typography choices on their app sites which is married with modest icons.
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 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 is another app that lends it's design to thier website, naturally the design of a chalkboard.
Spotify features prominent screenshots of both their mobile and desktop apps.
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 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 is a web browser available on your desktop, mobile and certain Nintendo consoles.
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.
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 is an iPhone photography app.
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 uses text with inner shadowing to make it "feel" a lot more like an app itself.
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.
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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly