Design Tips for iPhone App Website Layouts
The process of designing a landing page is much different than a standard website. You have to plan ahead for your audience and understand what they’ll be looking for. These ideas hold true in any market and certainly within iPhone/iPad app displays.
I’d like to share a few design tips for building one of these iPhone app layouts. Each application will have different needs and as such require a different set of page elements. But these ideas can generally span a wide audience – app developers are all really looking for the same results. And when you can focus on such a specific niche it leaves plenty of room for creativity.
Include an iPhone Screenshot
This is a seemingly crucial part of the design process for any app website. Having a small iPhone or iPad graphic somewhere on the home page will draw attention right onto the product at hand.
It’s best to load this up with screenshots from your application. jQuery makes it really simple to implement a slider where you can loop through a small set of photos. This gives your visitors a sneak peak at the application without any work on their part. This display feature should become an integral part of the overall layout.
And thankfully it shouldn’t even be difficult to find graphics to use. If you spend a bit of time in Google you’ll find loads of free iPhone PSD downloads which you can re-size and fit to your specifications. There are even white iPhone mockups to download for free if you’d rather not use the generic black models.
App Store Badge
Here is another easy decision to include a small App Store badge somewhere on the page. Visitors recognize this icon and most designers will build badges to behave as a download link leading out to the App Store product page.
Load up Google Images and search for the phrase “available in the app store”. This will return dozens of results with customized badges and featured examples. The typical graphic also includes a small iPhone icon to signify your app is for mobile devices and not within the Mac App Store. If you choose not to use a similar graphic that’s fine as well. But these badges represent authority and it’s a great way to rack up some additional downloads.
Use a Minimalist Approach
Keeping your design as simple and elegant as possible is the best strategy. I always recommend sticking to one page designs and letting the content cascade down. Visitors can feel overwhelmed if your app needs a 4-5 page website to explain everything.
In this case minimalism should be your best friend guiding each aspect of the site. Don’t try to include paragraphs of extra detail. Instead, consider maybe building a small list of core features. This is easy to skim and much easier on the eyes than a set of block paragraphs. Also try to keep headers to a minimal unless they outline important features.
If you run an e-mail campaign or newsletter you’ll absolutely want to include a signup form. Best placement is somewhere above the fold where you’ll get a lot more attention. It’s great to pair this with a signup form somewhere else in the application. Then you can slowly amass a fan base for connecting with future app ideas.
Even if you don’t have a product officially released yet it’s still handy to include an e-mail opt-in form. Interested visitors will likely want to hear more information about future releases. Try not to go overboard and spam out hundreds of newsletters. Again keep things simple and you’ll have no problems.
It may additionally be a good idea to include links to your social networking profiles. If you haven’t already created a Twitter account for your application I would highly recommend doing so. This is by far the most popular open network of communication to share ideas, promotions, and updates. A small Facebook fan page is also really beneficial.
Resources & Tutorials
- Simple iPhone Application Website Layout in Photoshop
- Create a one-page iPad/iPhone App Web Layout
- Design & Code a Cool iPhone App Website in HTML5
- 60 Amazing iPhone Application Websites For Design Inspiration
- iPhone App Site Design Trends
I hope this guide can offer a few solid ideas moving forward with building iPhone app layouts. Marketing is just as important as development and you need to pay careful attention when building a brand. Apps are just the latest trend with a lot of buzz and an active support community. If you have similar ideas or have built your own application website please feel free to share with us in the post discussion area below.