Show/hide navigation

Interactive iPhone 5S & iOS7 Concept

Built with HTML, CSS & JavaScript

Turn me on here

How to use our iPhone 5S concept

  • 1 Wake up the iPhone 5S with either the power button or home button
  • 2 Slide to unlock the phone, or try out the new lock screen widgets
  • 3 Browse our iOS7 app concepts and explore the other features

Try the Apple iPhone 5S and iOS 7 out before anyone else, here at Recombu

7

We've created this iPhone 5S concept so that you can trial iOS 7 ahead of Apple’s official announcement on June 10th. The interface and app designs are based on rumours from multiple sources, and this is our interpretation based on this fact.

Interact with this how you would a real iPhone. To kick things off, press the power\lock key on the top of the phone or press the Home button. Enjoy.

Tip: Choose what colour your iPhone 5S is selecting from the boxes down below.

What you can do with the lock screen

  • 1 Click the time/date to reveal connectivity shortcuts
  • 2 Try out the camera app
  • 3 Slide to unlock the iPhone 5S to explore the rest of our concept

About the lock screen

The lock screen still has a familiar appearance but there are some obvious new tweaks. The glossy, gradated look and feel has been replaced by a higher contrast UI which utilises solid black as its main component. The circular lock icon and slide bar replace the traditional animated 'slide to unlock' element, whilst quick access to connectivity shortcuts is now available.

Tip: Click the clock to the left to reveal new connectivity shortcuts.

How to use home screen

  • 1 Click the status bar to reveal a new notifications menu
  • 2 Browse the iOS 7 app concepts listed below by clicking the icons on the iPhone itself

Home screen

The home screen is largely unchanged with room for 20 icons in a 4x5 layout above a set of four permanently docked apps. Icons have been remastered with their gloss, strong shadows and gradients all removed giving the apps a flatter appearance.

The notifications pull down menu (accessed by clicking the status bar on our concept) has been updated to removed the textured background in favour of a solid black aesthetic, similar to the lock screen redesign.

Additionally, shortcut widgets for core iPhone settings such as WiFi, Bluetooth, Location Services and Airplane Mode have been added.

Messages

The Messages app has been updated to include standard black header and footer bars, whilst buttons and other elements now feature accent colour relevant to the app. The keyboard has also been updated to remove shadow effects and take on a flatter appearance.

Tip: Click the message input to show the new flatter keyboard.

Calendar

The Calendar app has been updated with a black and white theme, using a red highlight colour for buttons and core elements.

Camera

The iPhone 5S is rumoured to include a 12-megapixel rear camera in addition to an improved front facing FaceTime camera.

Tip: If you have a webcam and you're using Chrome or Firefox, try out the front facing camera on our concept!

Reminders

Reminders has been redesigned to lose the skeuomorphic leather textures and now takes on a more standard, consistent feel, with black bars, a white background and yet again, a coordinated accent colour.

Notes

Like the Reminders app, the skeuomorphic aspects of the old design have been replaced by cleaner, high contrast elements, presumably with the intention that notes will be easier to read.

Phone

Our Phone app concept has been redesigned to show the rumoured round numerical keypad, with an overall black feel and the buttons highlighted with a white border.

Tip: Press the number keys to dial or delete them with the backspace key.

Mail

Mail has been updated to fall in line with the new style of the core Apple apps, with black header and footer and it's own highlight colour for buttons.

  • N
  • E
  • S
  • W
Safari

Safari has been updated in line with the rumoured black and white feel, with the addition of a unified URL and search bar, better in keeping with the Safari desktop experience or Google Chrome's Omnibox bar.

Music

The music app sees minor changes, adopting the black and white feel and making use of the orange highlight colour for buttons.

rRecombu

Find the latest news, reviews, videos and impartial advice to help you get the best from your mobile phone. Sadly, this won’t come pre-installed as part of iOS 7 when Apple does release it, but we can dream, right?

Embed our concept on your site

Copy and paste the code below to embed our interactive iPhone 5S concept on your site.

About the concept

Based on a combination of leaked photos and the new WWDC app highlighted in our iOS 7 rumour round-up, changes to the OS will likely consist of a flatter aesthetic and less gradients.

Skeuomorphic elements will also be taking a back-seat. For anyone not au fait with the term, skeuomorphism refers to elements imitating reality. This means we can expect the Notes app to look less like a notepad for example, instead, providing a simple, clean, text ready canvas.

This should result in a consistent feel throughout each of Apple’s proprietary apps; with a black headers and tab bars as well as colour-coded accents on buttons and details helping differentiate from one app to the next.

This concept is intended to be a fun way for people to interact with an idea. From a technical point of view, the challenge was to build this entire concept without using any images and instead, building the iPhone, icons and apps solely out of CSS and HTML code.

While it’s unlikely that Apple will release a hot pink iPhone 5S off the bat, the idea of different coloured iPhones has been flying around for some time. As such click the colour picker underneath the phone to try out different tones.

iOS7 app concepts

We've created iOS7 concepts for the apps below. Try them on our iPhone 5S concept!

1 Camera 1 1
  • N
  • E
  • S
  • W
.............................
.............................
.............................
  • Mon29/11
  • Tues26/9
  • Wed28/11
  • Thurs31/15
  • Fri31/14
  • Sat30/12
  • Phone×
  • BlockedMissed Call14:08
  • Messages×
  • RecombuDid you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?2h ago
Messages Recombu Edit
  • My mobile contract is ending soon, quite fancy the new iPhone too.

    Read 24 May 2013 14:21

  • r

    Good choice! It's a great phone.

    Read 24 May 2013 14:21

  • Where can I compare the best iPhone deals?

    Read 24 May 2013 14:21

  • r

    Have you tried recombu? http://recombu.com/mobile/

    Read 24 May 2013 14:29

  • Thanks! I'll check it out.

    Read 24 May 2013 14:37

  • r

    Did you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?

    Read 24 May 2013 14:39

Send
  • 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
Calendars All Calendars +
June 2013
Mon Tues Wed Thurs Fri Sat Sun
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
  • all-dayApple WWDC
  • 14:30Catch-up with James
    Meeting room
  • all-dayMike's Birthday
Today
  • List
  • Day
  • Month
Lists Reminders Edit

iCloud+

  • Apple WWDC10/06/2013
  • Buy more coffee30/05/2013
Mailboxes All Inboxes (1) Edit
  • Recombu

    Compare Mobile Phones

    Today

    News, reviews, videos and impartial advice to help you get the best from your mobile...

  • Apple

    iPad. There's just so much to love about it.

    Yesterday

    When iPad was introduced, there was nothing quite like it. And there still isn't. Today...

Updated 29/05/2013 15:06
Compare Mobile Phones | Reviews, News & Deals | Recom...
  • 1
The Beatles
Ob-La-Di, Ob-La-Da
The White Album Back
4 of 30
0:003:08
The BEATLES
  • 1
  • 2ABC
  • 3DEF
  • 4GHI
  • 5JKL
  • 6MNO
  • 7PQRS
  • 8TUV
  • 9WXYZ
  • *
  • 0+
  • #
+ × Call
  • Favourites
  • Recents
  • Contacts
    Keypad
  • Voicemail
Notes Notes +
  • Previous
  • Share
  • Delete
  • Next
Options
Please enable your webcam to use the camera app.

(This feature will currently only work in Firefox or Chrome)
Recombu
:
100%
7
:

Messages

Did you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?

CloseView
1Messages Calendar
Photos
Camera
Videos
Maps
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
Clock
23°Weather 1Reminders Notes
Stocks
Passbook iTunes App Store
Settings
rRecombu g+Google+
Phone 1Mail
  • N
  • E
  • S
  • W
Safari
Music
Ringer
Back to top ↑