In the first and second parts of this series, we looked at Microsoft's Modern UI and Google's Material designs. Now let's take a look at Apple's style for iOS and OSX.
Apple's style is very different from that of Google and Microsoft. Although Apple's style is much less skeuomorphic than before, it still retains the most traditional graphic elements, such as gradients and shadows. It's by fusing these elements with a translucent effect that the interface becomes unique. It takes on the color of the content behind it, making the graphical interface appear to be tailored to the user every time. This way of presenting and contextualizing content can be adapted for web development.
Apple - Transparency
Historical
2013 - iOS7
Apple is shedding its attraction to faux leather to release a version of its mobile operating system that isn't skeuomorphic. iOS 7 is a complete redesign of the interface, towards a more minimalist and colorful style than its predecessor. Large, slim typography is used, icons are more refined and the interface is dotted with semi-transparent elements, allowing the background to appear in blurred transparency.
2014 - OS X 10.10
Apple introduces OS X Yosemite, an operating system with a style similar to the latest version of iOS. New icons, elements with transparent backgrounds and refined typography.
2015 - watchOS
With the release of the Apple Watch, Apple borrows certain elements from iOS, but streamlines the interface by placing virtually all elements on black backgrounds. This choice sets the new design apart from that of other Apple products.
Style
Shape:
- Large translucent shapes
- Shading
- Gradients
- Black and white colors
Typography:
- Large, slim typefaces
- Font of choice: Helvetica Neue
Base:
- Translucent backgrounds
- Gradients approaching the color gray
Icons:
- White icons
- Sometimes with a border around the circle symbol
- Shapes usually made from thin lines
Web examples
Peek Calendar - Calendar application
Valencia - Theme HTML
iOS tools:
TETHR - Design kit for Photoshop and Sketch
App Icon Template - Icon design templates
Ionic - Application development framework
In short, if you want a website that prioritizes content, either with translucent effects or a rather minimalist interface, using the translucent style of iOS and OSX is advisable. But after studying these three styles, can we conclude that web design trends are defined by Google, Apple and Microsoft? Or are the giants riding the wave of a certain style already present on the web? Our upcoming web design articles will definitely help us answer this question.