Archive for July, 2014

With one in every five people in the world now holding a smartphone and one in seventeen owning a tablet, it’s easy to understand why website design has become immersed in catering for a wide range of device screens, and in fact why current digital design trends are being heavily influenced by the prevalence of mobile browsing. The mobile revolution brought with it the concept of the mobile app: the pocket sized utility that can do so much more than a website can, with access to the GPS, camera and other phone capabilities including the iPhone’s accelerometer and touch screen interactions. We now have apps for mapping, cooking, education, and entertainment. We even have apps that can control mini quadcopters that fly through the sky at your whim.

So how has mobile technology influenced digital design?

If you use your phone to view the Facebook website, in the top left or top right corner you will now see a very familiar icon, the menu button. Not long ago 3 horizontal lines meant nothing to most people, but now it is synonymous with opening up a navigation menu. Collapsing horizontal and vertical menus up into a single icon is a intelligent way to give visitors access to many pages, but take up the least amount of screen real estate. Many of our responsive website designs utilise this familiar icon, including inner pages of the Contact Point website when viewed on a smaller screen.

Another interesting design trend you might notice lately is the appearance of bold iconography. Many buttons, links, images and even logos, are now being simplified down to basic geometry, and cleverly illustrated symbols. Apart from being aesthetically pleasing, the main reason for this trend is simply to make life easier for mobile device browsing. Touch screen devices require pressing, swiping and other ‘gestures’ with your fingers to interact with the website or app. Using fingers is much less accurate than using a mouse and pointer. Large and simple icons and buttons are now ruling the way we browse because they are simply easier to press with a finger. They also grab our attention on the screen, no matter what size the screen.

In addition, apps have brought with them a range of standard icons that are used to achieve the same sorts of tasks across any website or app. The ‘settings’ icon is a good example of this. The image below shows the settings icon on Android, Windows and Apple devices. The commonality of the icons is obvious.

Parallax scrolling, which I have posted about before, is also intermingling with mobile behaviours such as the appearance of new content at the bottom of the screen, triggered by swiping upwards to reveal more content. The ‘more content’ is only brought down from the web server when you “ask” for it via your touch gesture, making the initial content load faster, and also making the content feel more interactive. This behaviour is now appearing more in websites, including shopping cart sites containing many products per category.

The introduction of high definition ‘retina’ displays on mobile devices is also changing the way we are creating an displaying images in websites. An image that looks perfectly good on your regular PC monitor now looks a little fuzzy on such high definition screens. We are now regularly creating two versions of buttons and icons for display – one for high definition and one for regular screens.

These 5 design trends boil down to User Experience or UX (also known as User interface design or UI). The most successful apps have a potent combination of utility and user interface design. There’s no point in having a great product if it’s hard to use. By being simple yet bold, your users are more likely to pay attention and stay around for your message.

Has your use of mobile devices changed the way you expect a website to operate?