Check Out This Interactive HTML5 iOS 7 Mock-Up

ios7html

 

Ahead of WWDC13, developer Steve King gives us a ‘first look’ at what a redesigned iOS 7 with flatter, less skeuomorphic design elements would really look like. King’s mockup is  all done in HTML, CSS and Javascript, meaning it’s fully interactive in any browser.

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.

Check out the mockup here

[via]



LATEST ARTICLES



SUPPORT

We don't think that using an adblocker = piracy. That's simply not true. We use and recommend uBlock Origin.

However, as a small non-corporate website, we would appreciate it if you'd consider whitelisting FSM in your adblock of choice.

Alternatively, consider donating using the options below....

PayPal  
Monero (XMR) 43GnqUNJrTi9QyL7kEH8vM8pgWGCE6bjv1FSRipeNMM4TTeNnUVsRBb6MfMpQYxtLE7ReonxVVSXz2rFCEdW5H11LC3x73b
Bitcoin (BTC) 1Hfuq77gKKFJeNcq4EP4dQK3yDRWrFEwJR
Bitcoin Cash (BCH) qzmdm6e6q5wf2p6sxz2mst7cenz60newwc5m4e9js8
Ether (ETH) 0x5f02869278C24A6579d3820f52AD15936D6F9d69
Stellar (XLM) GDWT2QU2CI3GZ5XH5DTSU3IUAHZMTB6VQKKRHBYWS5YCCQOAG6OKG2OB
More content?  
Ads Blocker Image Powered by Code Help Pro

Congrats on using an adblocker. We mean it.

Please support us by disabling your AdBlocker or whitelist us.

Thank you! ❤️