Web apps, Android apps, iPhone and iPad apps and now, with the release of Mac apps, the world appears to be going app crazy! It seems that there is an app to cater for almost every situation... but in a digital marketplace, how do these apps promote themselves? With web design of course!
There are tens of thousands of apps out there (and that number grows everyday). Naturally, all of these various applications need to use different methods in order to promote themselves and using a website is one of the most essential strategies. App websites are some of the best designed and there are many trends running through this particular niche of site. In this article we will take a closer look and examine some of those techniques currently being used.
Introduction
The Angry Birds site is deceptively simple, using illustration to effectively deliver the spirit of their app without any need for an overly stylized design.
"Where would we be without Angry Birds allowing us to let of some steam by hurling small, feathered animals around the place?"
Some people simply couldn’t live without Evernote for all of their note taking needs and how could we possibly know where everyone is without Foursquare? Where would we be without Angry Birds allowing us to let of some steam by hurling small, feathered animals around the place? Apps have almost become essential to many people’s work and social lives.
The popularity of apps has resulted in many thousands of them being released into the various marketplaces, and in order for any particular one to be noticed, it needs to distinguish itself from the crowd and a well designed website is one way to achieve this.
App websites need to perform several different tasks effectively. First of all, it is absolutely crucial that app websites are well designed, as should any website that sells products online; since a potential buyer’s perception of the worth and quality of the product will be influenced by the environment it is contained within. As well as looking good, app websites are expected to market the app, communicate its purpose, demonstrate its capabilities and even educate the buyer on how to use it. Some may even have to integrate e-commerce features if the app is not sold through a marketplace.
Needless to say, it can be quite a challenge to meet all of these requirements, and designers need to find creative ways to do so. Next, we’ll examine in depth some common features found amongst app sites that contribute towards them being a success. Let’s get started.
Themes
The EpicWin App website mimics the theme of their app on their site... to the max. Everything from background textures to typography emphasize the style and tone of the app.
A large majority of application websites choose to mimic the theme of the application they are promoting. Creative use of imagery, color, texture and many other elements allow the subject of the app to transcend the app itself and enable the website to become an extension of it. There are many examples of this method in action, an obvious one would be the website for the Tea Round app.
The Tea Round app, in their own words; “rapidly settles thirst-based arguments by deciding who makes the tea”. It is extremely obvious from the design of the website that the purpose of the app revolves around tea. .
Use of imagery such as the kettle, the cup stain on the note and the teacup in the logo are all highly indicative to the purpose of the app. As mentioned earlier, this is a very clear use of this technique, but it can also be used more subtlety, such as in the website below.
This is the website for the Get Galleried app, which displays examples of high-quality web designs in order to provide the user with inspiration. From the site itself – “We pre-populate inspiring sites from hand-picked design galleries for you in a fast, tiled interface”. Notice how the website uses a tiled pattern for its background – suggestive of the tiled gallery the app presents.
This technique of extending the theme of the application to the site is an excellent way of communicating the nature of the app itself. Sure, while it will still be necessary to provide an explanation of how exactly the app works, this method instantly provides the user with a general feel of its purpose.
Also, an additional benefit of using the same textures, colors and design elements for both the site and the app, is that it creates continuity between the two platforms, which will allow the user to become familiar with the brand and more comfortable using the app.
Icons and Buttons
You will notice that as well as the websites being designed around themes, they are also designed to look like an app themselves. Elements commonly found in apps such as icons and buttons are also often used in the design of the websites.
There are two main benefits to designing the website in the style of an app. The first benefit relates to the point made earlier, in that it helps create continuity between the website and the app. Secondly, it is sensible to think that a good amount of visitors to these sites will be using touch-sensitive devices such as iPhones and iPads.
Apps use large and visual interface elements such as icons and buttons as they are much easier to interact with when using touch-sensitive devices, so it is only good practice to utilize such features on the website as well.
Device Imagery and Screenshots
You can talk up your app all you want, use every superlative in the dictionary and claim it will solve all of life’s problems, but unless people can actually see what they are buying, they will be very reluctant to commit to anything. It is one of the many problems some people have when purchasing products over the Internet, especially for electronic information such as eBooks and digital music.
To solve this problem, images are used to help the buyer visualise what they buying, such as images of album covers on iTunes or eBooks represented as actual books. It is much the same with apps; websites will often show screenshots of the app displayed on devices such as iPhones, iPads and computer monitors. This technique not only allows the user to become familiar with how the app will look, but it will also help them visualise the app on their own device which may influence their buying decision.
If the saying ‘a picture is worth a thousand words’ holds true, then a video should communicate more information about your product than you ever could using text. Many app websites have taken to using video to demonstrate their app and its capabilities to potential buyers.
The video demonstration for the Concentrate app is an excellent example. The video is able to fully demonstrate all of the app’s features in a relatively short space of time. With the addition of pleasing background music and short section headings; the video is more entertaining and the information is much easier to digest than the many lines of text it would require to communicate the same information.
Layout
As we have discussed, app websites have many objectives that they need to accomplish, but their primary goal is to get visitors to buy the app itself. All of the websites will include some form of link to allow you to download the app, either through an app store, or directly from the site itself.
To aid the website in doing this, designers will often create a simple, but effective, layout that guides the user through the key points of the site and ultimately to the call to action element (the download link). Many choose to use the ‘Z’ layout. Webdesign+ editor Brandon Jones has previously discussed the ‘Z’ layout in depth here – it is an excellent article and will help you better understand the points we are discussing here.
Let’s take a look how such a layout is implemented on an app website. We will use the website for the Leaflet app. Once again, there is an excellent tutorial on Webdesign+ on how this particular design was achieved. A rough ‘Z’ shape has been overlaid onto the website to help demonstrate our points further.
You will notice that the ‘Z’ shape covers various points on the website in the following order:
- Images of the iPhone Device with screenshots of the app
- The logo/name of the app
- A brief description of the app
- The download button
The designer has deliberately chosen to place these points along the path he intends the user to follow. If the visitor to the site were to indeed follow the intended path, they would first receive an early indication as to the purpose of the site through the use of iPhone imagery with screenshots of the app. The user would then notice the logo of the app quickly followed by a paragraph briefly describing what the app does.
Now that the user has been educated on the many benefits of the app, coupled with enticing imagery, they arrive at a conveniently placed button (alongside a temptingly low price) that will allow them to buy the app for themselves.
There are an incredible amount of apps available and it is a very competitive marketplace, so it is essential that you can grab your users attention, pitch the benefits of the app and make it easy for them to buy it all in a short space of time, and the ‘Z’ layout is perfect for this. Obviously it is impossible to fit all of the information in this space, so you will often find that sites who implement this layout will go into a lot more detail about how the app works further down the page.
The ‘Z’ layout is by no means the only layout used by app websites, as there are many others to choose from, but it is very effective when used correctly. Here are some more examples of the ‘Z’ layout in action.
Get Galleried
Evernote
Steps and Bullet Points
The app marketplace is saturated and if a potential buyer isn’t convinced quickly by your app, you can guarantee that they will be able to find something that will elsewhere. Therefore it is essential that you can communicate how your app works and the benefits it will provide in a clear and concise way.
Using bullet points and numbered steps are an effective method for breaking down information, as users may not be willing to read through whole paragraphs of information about how it works.
The website for the Gallerytopia app utilizes both bullet points and numbered steps to communicate information about the app. All of the benefits are summed up using a small amount of short, easy to digest bullet points. The benefits listed by these bullet points are further enhanced by use of visual ‘tick’ symbols, almost as if they are checking off your list of requirements.
Further down the page, instructions on how to use the app are broken down into three numbered steps. It is very common for app websites to divide information on how the app works or how to use it into a small amount of numbered steps. These steps communicate that that the app is very simple and easy to use, because no one wants to buy something that complicated right?
More Examples of Great App Sites
Now that we have seen some of the features app websites implement, lets take a look at how some of the best app websites go about this. Below are some great examples of beautifully designed app websites.
Kaleidoscope
Bills
Bord
Concentrate
Courier
Evernote
Things
Layers
Epic Win App
Conclusion
We have discussed many different features and techniques commonly found amongst app websites and there appears to be a common goal than runs throughout many of these features; and that is to communicate information quickly and efficiently. It was recently announced that the Apple app store has hit ten billion downloads and the marketplace is growing all of the time. The website of any app needs to capture the user’s attention, communicate the benefits and make it easily available all in a short space of time; otherwise there are plenty of other options for an app shopper to choose from.
Lastly, it is worth mentioning that although these websites employ many techniques in order for them to achieve their goals, these features would not be nearly so effective if they were not contained within such beautifully crafted website designs.
This article has discussed a few features and techniques that make app websites effective. Are there any other features you have noticed amongst these types of website? Is there a particularly good app website that you know of? Please share your thoughts and comments below!
