Design Killer Mobile App Websites: Tips And Examples
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.
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.
Recommended Reading: Designing for Mobile Devices
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
0 nhận xét:
Đăng nhận xét