La troisième semaine est terminée. À mi-chemin sur la route du Mobile Design !

Il n’y a rien à faire, le design mobile semble simple mais lorsqu’on commence à creuser dans les explications, on se rend compte qu’il est nécessaire de comprendre ces concepts afin de construire une expérience enrichie et meilleure pour l’utilisateur.

Avec les bases apprises, je pourrais envisager une refonte complète de ContactHive !

# Apprentissages du jour, Récapitulatif des jours manqués

J’ai manqué quelques jours, non par paresse, mais parce que j’avais davantage de choses à faire, et il ne m’était pas possible d’enregistrer mes notes. J’ai bien publié un article le 11, mais sans vraiment expliquer mes apprentissages. Aujourd’hui, je prends le temps de rattraper ce petit retard, pour que tu puisses suivre ce que j’ai appris et en profiter pour réviser moi aussi.

---

## Jour 13

### UX Design (User Experience)

L’UX (User Experience) désigne l’ensemble des interactions entre l’utilisateur et un produit ou service numérique. L’objectif est d’optimiser ces interactions pour offrir une expérience fluide et engageante, tout en atteignant les objectifs du produit ou service.

Le design UX se concentre sur la facilité d’utilisation et les fonctionnalités, à ne pas confondre avec le UI design, qui concerne l’apparence visuelle. Le premier s’intéresse à l’expérience vécue, le second à l’interface visible.

### Architecture de l’information

En UX design, l’architecture de l’information repose sur quatre piliers :

• Organisation : structurer les informations de façon logique
• Labellisation : choisir les bons termes et visuels pour présenter le contenu
• Recherche : aider l’utilisateur à trouver ce qu’il cherche
• Navigation : faciliter le parcours de l’utilisateur dans l’application ou le site

### Design Thinking

Le Design Thinking est essentiel dès les premières étapes d’un projet UX. Je devrai creuser davantage ce sujet, voire suivre une formation dédiée.

Ses cinq étapes clés sont :

1. Empathie – comprendre les besoins, frustrations et attentes des utilisateurs
2. Définition – formuler clairement le problème à résoudre
3. Idéation – générer un maximum d’idées pour y répondre
4. Prototypage – créer des versions visuelles pour tester les concepts
5. Test – valider les hypothèses et les idées auprès des utilisateurs

### UX Honeycomb

Le UX Honeycomb, en forme de nid d’abeille, illustre les grands principes de l’UX :

• Usefulness : répondre à un besoin réel
• Value / Impact : apporter une vraie valeur ajoutée
• Desirability : susciter l’envie d’utiliser (et de revenir)
• Accessibility : rendre le produit utilisable par tous, y compris les personnes en situation de handicap
• Credibility : instaurer la confiance (témoignages, expertise, transparence)
• Findability : permettre de trouver facilement l’information
• Usability : s’assurer que l’outil est facile à prendre en main

### Théorie des couleurs

On a revu les fondamentaux : la roue chromatique, les couleurs chaudes (énergie, passion), les couleurs froides (calme, confiance) et les neutres (fond, typographie).

Il est crucial de choisir ses couleurs avec intention : elles véhiculent des émotions et influencent la perception du design.

### Systèmes de couleurs

• Additif (RGB) : mélange de lumière (rouge + vert + bleu = blanc)
• Soustractif (CMY) : mélange de pigments (cyan + magenta + jaune = noir), utilisé en impression

### Formats de couleur digitaux

• Hexadécimal : code à 6 chiffres, très courant sur le web
• RGB : 3 valeurs entre 0 et 255 pour chaque couleur de base

### Typographie

Distinction entre:

• Typeface : famille (ex. Arial)
• Font : variation précise (ex. Arial gras 12 pt)

Catégories de typographies :

• Serif : élégant, traditionnel
• Sans Serif : moderne, lisible à l’écran
• Script : manuscrit/calligraphie, idéal pour titres ou logos
• Slab Serif : massif, percutant pour titres courts
• Display : décoratif, à utiliser avec parcimonie
• Monospace : pour le code
• Manuscrite : créative, mais moins lisible

L’épaisseur, la taille et le style participent à la hiérarchie visuelle du contenu.

---

## Jour 14

### Couleurs et branding

Les couleurs jouent un rôle clé dans l’identité de marque. Il est donc essentiel de bien maîtriser leur usage.

### Espaces

Le negative space (espace vide) améliore la lisibilité et la structure visuelle. Il permet de respirer dans la mise en page.

### Micro contenu

Il s’agit de textes très courts mais percutants (headlines, tips, résumés). Ils servent à transmettre un message clair rapidement.

### Layout et composition

Une grille bien utilisée permet un agencement structuré et cohérent des éléments. Cela aide à guider le regard et hiérarchiser l’information.

### Propriétés des couleurs

• Hue : couleur pure
• Shade : ajout de noir → sombre, profond
• Tint : ajout de blanc → léger, jeune, dynamique
• Tone : ajout de gris → sophistiqué, équilibré
• Saturation : intensité de la couleur (haute = vive, faible = calme)

### Images

• Photographies : lien émotionnel, crédibilité
• Illustrations : identité de marque, narration, accessibilité

### Images de fond

• Privilégier les images simples et cohérentes
• Utiliser des overlays (ex. fond noir semi-transparent) pour améliorer la lisibilité du texte

### Formats d’export

• @1x : résolution standard
• @2x : écrans Retina
• @3x : haute densité

---

## Jour 15

### Animation

Les animations doivent imiter la réalité sans être intrusives. Durée recommandée : 100–500 ms.

Types :

• Linéaire : vitesse constante
• Ease-in : lent au début
• Ease-out : lent à la fin
• Ease-in-out : doux des deux côtés
• Spring / Bounce : effets dynamiques de rebond

### Icônes

• Filled icons : bonne lisibilité
• Color icons : à utiliser avec parcimonie
• Dual-tone : visuellement riches mais peu lisibles à petite taille
• Outline icons : élégants mais plus complexes à comprendre

### Padding des icônes

• Renforce la zone de clic
• 6–10 px recommandés selon les guidelines

### Ombrage

• Utiliser les ombres pour souligner l’interactivité (ex. bouton cliquable)
• Types : drop shadow (externe) et inset shadow (interne)
• Shadow stacking : cohérence visuelle entre éléments superposés

### Hiérarchie typographique

Trois niveaux :

• Eyebrow : tag informatif discret
• Headline : titre principal, impact fort
• Body : texte courant

### Alignement du texte

• Centré : pour citations ou courts titres (max 3 lignes)
• Aligné à gauche : standard pour les langues européennes
• Justifié : à éviter en digital (lisibilité réduite)

### Espacement des lettres

• Kerning : ajustement ciblé (ex. entre deux lettres)
• Tracking : espacement général sur tout un mot ou une phrase

---

Voilà tout ce que j’ai appris ces trois derniers jours. C’est un gros article aujourd’hui, mais ça m’aide à structurer mes connaissances donc c’était nécessaire. J’espère que cela pourra également t’aider.

A la semaine prochaine.