Interactive iPhone 5S & iOS7 Concept
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
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
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.
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.
The Calendar app has been updated with a black and white theme, using a red highlight colour for buttons and core elements.
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 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.
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.
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.
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.
The music app sees minor changes, adopting the black and white feel and making use of the orange highlight colour for buttons.
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!