23 Juin 2025 - HIG Apple : icônes, matériaux et optimisation d’assets
Salut ! J’espère que tu as passé un bon week-end. Pour ma part, c’était plutôt calme et reposant. Nous avons fait quelques courses au Decathlon pour nos sessions de natation, j’ai terminé deux livres et en ai directement commencé deux autres. Ma femme est un peu malade mais ça va mieux aujourd’hui, pas de panique !
#
Une journée productive entre théorie et pratique
Aujourd’hui c’est déjà le 21e jour de formation dans mon parcours pour devenir développeur iOS freelance. Je rédige ce blog après être allé à la salle de sport, comme ça tout est encore frais dans ma mémoire.
La journée s’est organisée en plusieurs parties : notre session théorique d’une heure sur les guidelines d’Apple, puis de la pratique intensive sur Figma avec des prototypes animés.
##
Pratique Figma : vers des prototypes plus sophistiqués
Ce matin, j’ai travaillé sur les dessins de la semaine passée en ajoutant des animations aux prototypes. J’ai aussi créé un nouveau prototype en reproduisant le lecteur de Spotify avec ses boutons de lecture et le scroll vertical.
Ce qui était intéressant, c’est que j’ai dû revoir toute la structure du design. Pour que les scrolls horizontal et vertical fonctionnent correctement, il faut penser davantage en termes de frames et de hiérarchie. C’était très instructif !
##
Défi de demain : le responsive design
Mon exercice pour demain sera de rendre les pages responsives. Actuellement, si je change mon prototype d’un iPhone 16 Pro vers un iPhone 14 Pro ou un Pro Max, le design ne s’adapte pas automatiquement.
Je vais devoir travailler avec les contraintes et les auto-layouts. Je comprends le principe des auto-layouts et je sais comment fonctionnent les contraintes, mais il faut maintenant les appliquer directement dans le design de l’interface - ce que je n’avais pas fait lors de mes créations précédentes.
##
Stratégie de réutilisation et design system
J’ai aussi réfléchi à comment minimiser le retard que je vais prendre avec tous les projets de portfolio. L’idée est de standardiser et réutiliser les composants, exactement comme en codage.
Pour mon premier projet d’application, je ne vais pas créer un design system complexe, mais je vais réutiliser les composants créés en les intégrant dans un nouveau design system avec des atomes, molécules et organismes. Comme ça, pour les projets 2, 3, etc., je pourrai aller beaucoup plus vite.
C’est une compétence importante à maîtriser, pas seulement pour le portfolio mais surtout pour accélérer le temps de développement dans mes futurs projets.
#
Apprentissages du jour : Guidelines Apple
Aujourd’hui, j’ai vu la troisième partie du Design Guide d’Apple. Il me reste encore deux chapitres et j’essaie de diviser à environ 20% du contenu par jour. Je suis actuellement à 56% au lieu de 60% parce que ça se terminait bien sur un chapitre complet.
Demain, je réviserai l’avant-dernier module, et mercredi le dernier. Une fois terminé, j’aurai bouclé mes trois formations en design pour me lancer corps et âme dans SwiftUI !
##
Icônes et symboles : les fondamentaux
###
Principes de design d’icônes
Pour avoir des icônes bien dessinées, il faut retenir plusieurs éléments clés :
- Silhouettes simples et formes claires
- Layout propre et organisé
- Clarté immédiate : l’utilisateur doit directement comprendre à quoi on fait référence
###
Système SF Symbols
Les symboles SF (la collection complète d’icônes d’Apple) s’adaptent automatiquement à la taille et au poids de la police San Francisco. C’est un système très cohérent qui évolue avec la typographie.
Conseil important : Il est toujours mieux de se fier à l’alignement automatique pris en charge par le symbole, sauf si c’est vraiment nécessaire. Dans ce cas, on peut ajuster manuellement en prenant en compte les pixels.
###
Codes couleur pour les symboles
Les couleurs ont des significations précises dans l’écosystème Apple :
- Rouge : actions destructives ou messages d’erreur
- Vert : messages de succès ou de progrès
- Bleu : liens et éléments interactifs
- Gris : actions secondaires ou éléments désactivés
J’ai pu observer cela en pratique cet après-midi en regardant les design systems : au lieu de changer complètement de couleur, les designers utilisent plutôt du gris pour les boutons secondaires, ou les rendent plus opaques.
###
Bonnes pratiques pour les symboles
Taille et poids : Toujours partir sur du regular et ajuster plus tard. J’ai fait cette erreur en reproduisant l’interface Spotify, j’ai récupéré des icônes en bold via le plugin Iconify dans Figma, et quand je réduisais la taille, elles ne s’affichaient pas correctement.
Spécificités par plateforme :
- iOS et iPad : surface de toucher assez grande, éléments de navigation en couleur, bold pour les actions primaires et regular pour le reste
- macOS : cibles précises et petites, privilégier le monochrome dans les toolbars, utiliser lightweight au lieu de regular et bold
- Vision OS : haut contraste, adaptation aux lumières de l’environnement, taille ajustée à la distance de l’utilisateur
###
Accessibilité et localisation
Accessibilité : Utiliser du texte avec le symbole pour fournir le message complet et important.
Localisation : Faire attention aux différents aspects culturels :
- Direction de lecture : dans un setup right-to-left (droite à gauche), les symboles doivent suivre
- Hauteurs de texte variables selon les langues
- Gestes culturels qui peuvent changer selon les cultures
- Symboles monétaires (euros vs dollars)
- Symboles culturels qui pourraient être mal interprétés
Bonne nouvelle : Le système SF Symbols gère automatiquement la plupart des aspects de localisation.
##
Matériaux et interfaces en couches
###
Types de matériaux
Apple propose plusieurs types de matériaux, chacun pour un usage spécifique :
- Ultra-thin et thin : créent des transitions, utilisés pour les backgrounds
- Chrome : pour les éléments de navigation
- Regular : la fondation, l’ensemble de base
- Thick : très solide, privilégié pour les layers les plus hauts (plus près de l’utilisateur)
###
Propriétés des matériaux
Les matériaux ont plusieurs propriétés importantes :
- Transmission de la lumière
- Blur (flou)
- Vibrance : comment la couleur et le contraste s’adaptent au background
- Motion response : réaction au mouvement
###
Hiérarchie des matériaux
La hiérarchie suit une logique claire :
- Backgrounds : ultra-thin
- Supports secondaires : thin
- Éléments secondaires : regular
- Actions primaires : thick
###
Considérations pour les modes clair et sombre
Mode clair :
- Plus d’attention au ratio de contraste pour la lisibilité du texte
- Jeu sur la vibrance et les ombres
Mode sombre :
- Ajustement de l’intensité du flou
- Réduction des niveaux de transparence
- Ombrage plus raffiné
##
Assets et images : optimisation et bonnes pratiques
###
Types d’images
Quatre catégories principales d’images :
- Images de contenu : fournissent des informations
- Images de fond d’écran : placent l’utilisateur dans le contexte
- Images décoratives : ajoutent un intérêt visuel sans fonction pratique
- Icônes d’interface : communiquent des actions et de la navigation
###
Résolution et mise à l’échelle
Pour les images, il faut prévoir plusieurs résolutions pour prendre en compte :
- La mise à l’échelle
- L’alignement des pixels
- Le redimensionnement dynamique
###
Gestion des couleurs
J’ai appris qu’il existait un nouveau type de couleur appelé P3, utilisé pour les nouveaux périphériques Apple. En parallèle, le sRGB assure la rétrocompatibilité avec tous les appareils.
Étapes pour gérer efficacement les couleurs :
- Choisir l’espace couleur (sRGB ou P3)
- Profile embedding : sauvegarder les fichiers avec l’information couleur
- Utiliser les bons profils selon les besoins
- Maintenir l’accuracy dans Xcode
###
Optimisation des fichiers
Recommandations par type de contenu :
- Éléments UI : PNG transparents
- Photos : JPEG avec qualité entre 60 et 80%
- Icônes : PNG en facteurs @x1, @x2 et @x3
- Images vectorielles : PDF (j’avais vu ça dans une vidéo YouTube mais j’étais sceptique - ce cours le confirme!)
Types de fichiers disponibles :
- PDF et SVG : pour tout ce qui est mis à l’échelle (éléments et icônes)
- PNG : pour une transparence pixel perfect
- JPEG : pour les photos ou images complexes
- HEIC : compression haute efficacité pour les images
Attention : Si la taille d’un asset est anormalement grande, il faut revoir et optimiser le fichier.
#
Bilan de la journée
J’ai pris moins de notes aujourd’hui car j’ai expérimenté davantage et passé du temps sur les exercices pratiques. J’ai aussi dû repasser plusieurs fois les petits tests théoriques de la formation; mais c’est comme ça qu’on apprend !
Cette combinaison théorie-pratique intensive me permet vraiment de progresser. Demain, direction le responsive design sur Figma et la suite des guidelines Apple.
À demain !