Dans la première et la seconde partie de cette série, nous avons vu les designs de Microsoft avec Modern UI et de Google avec Material. Intéressons-nous maintenant au style d'Apple pour iOS et OSX.
Le style d'Apple est très différent du style de Google et Microsoft. Même si le style d'Apple est énormément moins skeuomorphic qu'auparavant, il est tout de même celui qui garde le plus d'éléments graphiques traditionnels, tel que des dégradés et des ombres. C'est en fusionnant ces éléments avec un effet translucide que l'interface devient unique. Elle prends la couleur du contenu à l'arrière de celle-ci, ce qui fait en sorte que l'interface graphique semble être adaptée à l'utilisateur à chaque fois. Cette façon de présenter et de contextualiser le contenu peut être adaptée pour le développement web.
Apple - Transparency
Historique
2013 - iOS7
Apple se défait de son attirance envers le faux cuir afin de sortir une version de son système d’exploitation mobile qui n’est pas skeuomorphic. iOS 7 est un redesign complet de l’interface, vers un style plus minimaliste et coloré que le précédent. De grandes typographies minces sont utilisées, les icônes sont plus raffinées et l’interface est parsemée d’éléments semi-transparents, qui laissent paraître l’arrière-plan en transparence floue.
2014 - OS X 10.10
Apple présente OS X Yosemite, lun système d’exploitation ayant un style similaire à la dernière version d’iOS. Des nouvelles icônes, des éléments ayant un fond transparent et une typographie rafinée.
2015 - watchOS
Avec la sortie de l’Apple Watch, Apple emprunte certains éléments d’iOS, mais épure l’interface en plaçant quasiment tous les éléments sur des fonds noirs. Ce choix démarque ce nouveau design de celui des autres produits Apple.
Le style
Forme:
- Grandes formes translucides
- Des ombrages
- Des dégradés
- Couleurs blanches et noirs
Typographie:
- Grandes typographies minces
- Police de choix: Helvetica Neue
Fonds:
- Fonds translucides
- Dégradés se rapprochant de la couleur grise
Icônes:
- Icônes blanches
- Parfois munies d’une bordure entourant le symbole d’un cercle
- Formes habituellement faites à partir de minces lignes
Exemples du web
Peek Calendar - Application de calendrier
Valencia - Thème HTML
Outils iOS:
TETHR - Kit de design pour Photoshop et Sketch
App Icon Template - Templates de design d’icônes
Ionic - Framework de développement d’applications
En bref, si vous voulez un site web qui met la priorité sur le contenu, soit avec des effets translucides ou avec une interface plutôt minimaliste, l'utilisation du style translucide d'iOS et d'OSX est conseillée. Mais suite à l'étude de ces trois styles, pouvons-nous donc conclure que les tendances du design web sont définies par Google, Apple et Microsoft? Ou est-ce les géants qui suivent la vague d’un certain style qui est déjà présent sur le web? Nos prochains articles de design web vont définitivement nous aider à répondre à cette question.