Show/hide navigation

Interactive iOS 7 Demo

iOS 7 Demo

With the veil now pulled away on iOS 7 we can finally see the old and the new side by side. With this latest release Apple wanted its famed industrial designer – Sir Jony Ive to turn his attentions to the look and feel of a new iOS that reflected the latest complimentary hardware offerings the company is cooking up.

iOS 7 sheds the heavily worn skin that has effectively stayed with the platform since its original release on the first iPhone back in 2007 and in its place we have new features, new ways to interface with Apple’s mobile devices and an entirely new aesthetic.

In our latest demo, we’ve brought the most significant design choices made by Apple and squeezed them into this virtual iPhone so that you can try the most important parts of iOS 7 out before the update begins to seed officially later this year.

The underpinnings have been put together using a combination of HTML and JavaScript, but with images to give the most realistic representation possible.

Turn me on here

How to use our iOS 7 demo

  • 1 Wake up the iPhone with either the power button or home button
  • 2 Slide to unlock the phone, or try out the new lock screen widgets
  • 3 Browse the iOS 7 apps and explore the other features

What you can do with the lock screen

  • 1 Drag from the top and bottom of the screen to view new notification panel and widgets
  • 2 Try out the camera app
  • 3 Slide to unlock the iPhone 5 to explore the iOS7 demo

About the lock screen

The bold black and white has been stripped back with cleaner, crisper, finer font running through elements like the clock. Unlocking can now be done by swiping right anywhere on the screen, while a swipe down (or a click in our case) from the top reveals the notifications panel and likewise a swipe upwards from the bottom with pull up the new Command Center. Features like the camera are still accessed in the same way.

How to use the home screen

  • 1 Browse the updated apps to explore our iOS 7 demo

Home screen

The new home of iOS 7, the home screen layout still utilises a 4x6 grid of icons (4x5 on iPhone 4/4S) but each of the new icons adheres to a single set of guides laid out by Ive and his design team. As such they have a consistent look and feel, all employing a vector based art style. Folders now accommodate multiple pages so you can throw tens of apps in each. The phone also features a faux-3D wallpaper which reacts as the phone is tilted in the hand.

Messages

Threaded messages are still the focus of the app in iOS 7, however the green and grey has been swapped out for white and blue. The keyboard also now utilises a translucent background so content is almost visible behind it.

Calendar

The gradients are gone and in their place we have a high contrast aesthetic in white and grey accented by red. Highlighted days or other key elements feature a red circle.

Camera

Shutterbugs will now have an even easier time of being able to tweak and change the look of their shots before throwing them up on Instagram. The new Camera UI breaks the design into four key modes. Photo – which fills the screen, Square – great for that vintage layout, Video – for Full HD video recording and Pano – the new name for the panorama feature. There are also a wealth of filters that can new be previewed in real-time, so you know how the end result of your shot will look like before you even press the shutter.

Reminders

Much like Notes, Reminders now features a hammered paper backdrop in front of which sit purple titles, blue sub-headings and a lined page.

Weather

The simple weather app of iOS 6 has undergone a complete overhaul and has blossomed into a robust and beautiful new service. By default, the screen showcases location, temperature, hourly and five-day forecasts as well as an animated background with a wealth of different animations for varying weather conditions. You can swipe left or right to jump between locales of pan out to see an aggregated view of all your saved locations in one go.

Notes

Gone is the yellow lined waitress’s notepad of old and in its place is a subtle hammered card background with inlaid icons accented by a golden yellow.

Maps

Unsurprisingly, Apple kept pretty quiet about Maps at the announcement of iOS 7, but it too received a lick of paint in the redesign. The UI around the map view adopts a translucent background and the application’s icon is now flatter too.

Videos

Videos separates content into three main fields: Movies, TV Shows and Music Videos. Content is primarily displayed in cover art form using a 3x3 grid. There’s also a link to the iTunes Store.

Stocks

The blue separated rectangles with rounded corners have gone and in their place is a full screen white on black view which shows both stock rises and falls as well as the data graph simultaneously.

Clock

The arrangement of the clock’s four primary features hasn’t changed but much like the new Calendar app, the colour scheme is primarily black text on white with red graphics and icons dotted around the place. Buttons for features like the stopwatch are now circular too.

Phone

The dialler now features circular monochrome keys with a white on black design. Much like the lockscreen clock, fonts are crisper and thinner.

Mail

Although the layout from iOS 6 has remained relatively unchanged, iconography has been reworked with a two-tone outline design. New features like ‘Mark all as’ have now been included too. Finally.

Safari

Having undergone a significant refresh, the Apple design team has turned Safari into more of a full screen browsing experience. Both the URL bar and controls hide when not in use and it’s easier than ever to add sites to your Bookmarks or Reading list. Tabs also look very different, with a new 3D card system making it easier to manage multiple pages and speaking of multiple pages, you’re no longer limited to just eight tabs.

Music

Aside from minor visual tweaks and a red/black motif, the functionality of the Music app remains similar to its predecessor. The app has a new icon and playback still prominently features cover art.

Photos

Rather than dividing photos into Albums, Photo Streams and Places, the bottom of the app’s UI now features Photo, Shared and Albums. By taking pictures, Photos organises your shots automatically by events it calls ‘Moments’. You can scale back and look at a broader overview, grouped by automatically generated ‘Collections’ and even at the smallest zoom level, you have thumb over pictures for an expanded view.

Game Center

No more green felt and wood trim in and of itself is a welcome change, but in its place is a pristine white design which features high contrast splashes of colour highlighted by the new icon.

Newsstand

The wooden bookshelves have been swapped out for a flatter monochrome shelving unit, but the books that sit on said shelves have also been reworked, using vector-based art for a punchier, more simplistic look.

iTunes

Another app the remains relatively unchanged, the chrome which houses the controls is now white instead of black and for the most part gradient free.

App Store

Just like iTunes, the App Store also gets a whiter, brighter reworking. In addition Apple has now made it possible to filter app choice by both age and location.

Passbook

There’s little that’s changed with this app’s functionality, but expect white writing, crisp blue text and not much else to have changed.

Compass

The visual overhaul of the compass takes us out of the 18th century and places us squarely in the 21st. As well as pointing north, the new compass features your current location and takes into account gyroscopic movement of the phone too.

Settings

The settings menu now uses a stripped back white UI with more crisp blue text. While new options save for the addition of Air Drop are scant, Command Center brings fast access to your device’s settings from anywhere else within the UI. Accessible by swiping up from the bottom of the screen lets you control brightness, media playback, Air Drop and Air Play as well as fast access to a flashlight, timer, calculator and the camera.

BlackBerry Curve 9320 on TalkTalk Mobile
Loading
.............................
.............................
.............................
TalkTalk
:
100%
Welcome to Recombu's iOS 7 demo!
  • Q
  • W
  • E
  • R
  • T
  • Y
  • U
  • I
  • O
  • P
  • A
  • S
  • D
  • F
  • G
  • H
  • J
  • K
  • L
  • Z
  • X
  • C
  • V
  • B
  • N
  • M
  • ×
  • .?123
  • space
  • return
Please enable your webcam to use the camera app.

(This feature will currently only work in Firefox or Chrome)
Camera Filters
  • Q
  • W
  • E
  • R
  • T
  • Y
  • U
  • I
  • O
  • P
  • A
  • S
  • D
  • F
  • G
  • H
  • J
  • K
  • L
  • Z
  • X
  • C
  • V
  • B
  • N
  • M
  • ×
  • .?123
  • space
  • return
  • 1
  • 2ABC
  • 3DEF
  • 4GHI
  • 5JKL
  • 6MNO
  • 7PQRS
  • 8TUV
  • 9WXYZ
  • *
  • 0+
  • #