Interactive iPhone 5S & iOS7 Concept
Built with HTML, CSS & JavaScript
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
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 4×5 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 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 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?
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!- 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
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
- 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
| 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
iCloud+
- Apple WWDC10/06/2013
- Buy more coffee30/05/2013
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…
- 1
- 2ABC
- 3DEF
- 4GHI
- 5JKL
- 6MNO
- 7PQRS
- 8TUV
- 9WXYZ
- *
- 0+
- #
(This feature will currently only work in Firefox or Chrome)