Blog
Web Design for iPhone 5s / iOS7
Apple launched two new features last week: the iPhone 5s and the iOS7 mobile operating system. We thought that it might be helpful to analyse how web designers might want to emulate some of Apple’s changes in order to more effectively engage with iPhone 5s and iOS7 users.
Flat Design
Notice that the new iphone has replaced its ubiquitous square button with a round one. This reflects a shift towards clean lines and simple shapes. Web designers can emulate this by keeping website design clean and thinking about how use of shapecan improve the simplicity and functionality of the website.
We also spoke to one iOS7 user at the weekend who was generally very impressed by the new operating system, but a little surprised at how bright and colourful his control centre had become. Whilst we’ve generally moved away from garish multi-coloured flash web designs towards a lower-key, minimalistic trend (notice that the new iPhone 5s is only available in understated, neutral tones) the use of bold colours in certain web design contexts remains a very powerful tool.
It has to be said that flat design is buoyant at the moment, with iOS7 following the lead set by Windows 8. By integrating this approach web designers will connect more effectively with mobile users and help to significantly improve mobile user experience.
Touch Technology and Web Design
The new iPhone 5s has introduced Touch ID, a brand new fingerprint identity sensor that allows users to keep their iPhone 5s secure. This feature also allows 1-touch purchases from iTunes, iBooks and the App Store.
Whilst this technology won’t be directly applicable to website designers, the emphasis on touch is a vital consideration when we’re thinking about mobile web design. The designers at Apple have realised the importance of re-orientating user experience around touch.
As web designers we’re looking to apply this same principle, ensuring that mobile users have a high quality touchscreen user experience. This is achieved through responsive web design techniques and helps mobile visitors to feel like the website is designed with their unique requirements in mind.
iSight Camera Technology: Imagery and Website Design
Apple have made much of their new iSight camera technology. In fact, some of the new features wouldn’t be out of place on a digital SLR. With a continuous burst for action shots and an incredible f2.2 aperture (this allows you to shoot in low-light conditions without flash, get shallow depth-of-field portrait shots and pick up bokeh from sources of light) Apple have really raised the bar for mobile camera technology.
What does this tell us? It reminds us that image quality matters. We’re increasingly familiar with responsive image techniques, but it’s important to remember that high-quality, high-resolution photography is still important to mobile users. Integrating this dynamic into our web design will help to deliver the kind of user experience that Apple pride themselves on.
Marketing the iPhone 5s / iOS7
Finally, web designers can learn a huge amount simply by looking at the way Apple have marketed their new products on their website. Notice the use of whitespace, clean typography, bright imagery and the sense of journey as you navigate down the page. It really is textbook.
