ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How Apple Adopted The Flat Design

Updated on October 30, 2015
Flat UI iOS 9
Flat UI iOS 9 | Source

We were born in an age where everything was presented in 3D or 4D. All of our gadgets were 3D and even the operating systems we use, used to have a 3D design. Recently things may seem to take a turn and everything is slowly changing to a flat design. Mobile phone operating systems are no exception. In 2013, Apple released iOS 7 featuring flat UI design elements, moving away from skeuomorphic design. Let’s look in to how iPhone captured the flat UI design.

What is 3D UI Design?

Basically it’s the virtual representation of the depth in the user interface with beautiful elements. This is what came out with all Apple devices prior to 2013. The design was embedded in iOS version 3-6. The element in the 3D UI is consisted with shadows and embosses. Even the buttons in the user interface are 3D and users will be able to quickly identify whether it’s clickable or not. The glass effect is also another element in the 3D design that makes it more noticeable. All iPhone apps were designed prior to 2013 were based on 3D design and they kind of owned the market share of all iPhone apps.

What is Flat UI Design?

Flat design is a minimalistic design in nature which focuses on the aspects on 2D design elements more than 3D. Flat design uses different methodology to recreate 3D design concept in a truly flat manner. In other words, flat design gives an illusion of depth, clarity and dimension without using the elements in 3D perspective. This is not something really new, yet new designs concepts are used in flat design to use much more neutral colors that appels to readers eyes.

Flat design was used in desktop application development as well as in web development. For creating more responsive designs, flat design was an easy approach rather than using 3D design elements. A considerable amount of free space in a design was considered as an unacceptable practice till flat design was introduced. Different measures were taken to implement control and UI elements to stand alone in the design using position and colors. A healthy use of negative space, margins and paddings also contributes to the overall feel of flat design, spacing elements out instead of the details that once distinguished them. Microsoft, Google and Apple adopted flat UI concepts to their major products and they turn out to be better than before.

App Designs - Flat App Design
App Designs - Flat App Design

How iOS Adopted Flat Design

Apple introduced flat UI in 2013 with their major release of iOS 7. This update was available for variety of devices including iPhone 4, 4S and onwards. The design was first unveiled in June and inspired by the work of legendary German designer Otl Aicher. The iOS 7 was embraced a flat look, largely marked by the use of bold colors, lots of white space, elegant typography and simple geometric shapes. However at the time it seemed natural that deviating from iOS's previous skeuomorphic look would strike as a risky experiment.

Flat Design - Home Lock Screen
Flat Design - Home Lock Screen

Apple managed to hit it off with iOS 7 and it was further developed to fit the amazing UI of iOS 8 in September 2014. Apple adopted colors (gradients) and typography correctly in their operating system to provide the best for the user. And their design approach worked as they did it correctly by adding latest trends to their UI. Most of the apple screen consisted with a transparent masks. This feature was somewhat new to a mobile operating system as even android and nokia used a fill layers for their designs masks.

The buttons and notification area was another area where Apple successfully used the flat design. Buttons were truly flat and users were able to identify when to click and swipe. An amazing feature was developed with the latest update iOS 9 and it was called 3D touch where you can get nice 2D menus by hard-pressing the screen of the iPhone. This was different from the long press.

Apples shift form iOS 6 to 7 shows that they really wanted to more with the changing world. Flat design is based on the user experience of 3D design, knowing that the majority of web users now understand that a button is for pressing, without needing an embossed figure to appear like a button you might press in real life. Flat design is an independent concept that can be surprisingly complex, but, when executed well, can lead to beautiful designs across platforms.

Image Curtesy From: iPhone Mockup Software


This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

Show Details
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)