1. Etat d'esprit
1.1. Pourquoi on n'est pas des webdesigners ?
1.1.1. 80% créativité 20% méthode
1.1.2. 80% méthode 20% créativité
1.2. Méthode
1.2.1. Approche géologique / scientifique ou "mille-feuille"
1.2.2. On avance, strate par strate...
1.3. **Noyau**
1.3.1. Objectif du site
1.3.2. Objectif de conversion
1.3.2.1. Appel
1.3.2.2. Formulaire de contact
1.3.2.3. Demande de devis
1.3.2.4. Vendre un produit / service
1.3.2.5. Récolter des emails
1.3.2.6. Informer
1.3.3. Taux de conversion, tunnel de vente...
2. Méthodologie en 7 étapes
2.1. **Étape 1**
2.1.1. Objectif du site
2.2. **Étape 2**
2.2.1. Plan du site (sitemap)
2.3. **Étape 3**
2.3.1. Inspiration
2.3.1.1. Tendances, recherches **(dribbble,** pinterest, recherches web, Astra Templates...)
2.3.1.2. Moodboard
2.3.1.3. Swipe File
2.4. **Étape 4**
2.4.1. Wireframe
2.4.1.1. Dans WordPress
2.4.1.2. Framer, Figma
2.4.1.3. A la main 📝
2.4.1.4. Octopus.do
2.4.1.5. Skelementor
2.4.1.6. Structure de vos pages
2.4.1.6.1. Frameworks
2.4.1.6.2. AIDA
2.5. **Étape 5**
2.5.1. Guide de style : on **systémise** notre travail
2.5.1.1. ✨ Police(s)
2.5.1.1.1. **Font system**
2.5.1.2. ✨ Couleurs
2.5.1.2.1. **Color system**
2.5.1.3. Logo
2.5.1.4. Boutons
2.5.1.5. Bordures (épaisseur, rayon)
2.5.1.6. ⚠️ Séparations de section
2.5.1.7. Images
2.5.1.8. Champs
2.5.1.9. Ombres portées
2.5.1.10. Icônes
2.5.1.11. Aussi : hover, séparateur
2.5.1.12. ...
2.6. **Étape 6**
2.6.1. **Intégration** Wireframe + contenu + styleguide
2.6.1.1. ... C'est du remplissage
2.6.1.2. Maquette ?
2.7. Étape 7
2.7.1. Finition (20% créativité)
2.7.1.1. *Plusieurs jours de recul*...
2.7.1.2. Décoration
2.7.1.3. Règles de webdesign
3. 5 règles de webdesign
3.1. Règle 1
3.1.1. Hiérarchie visuelle
3.1.1.1. Différents niveaux d'importances
3.1.1.2. ✅ Font system
3.1.1.3. ✅ Color system
3.1.1.4. Taille, couleur, contraste, emplacement
3.2. Règle 2
3.2.1. Cohérence visuelle
3.2.1.1. Répéter les choix et motifs
3.2.1.2. Mon bouton d'appel à l'action est bleu ? Il est bleu **partout**
3.2.1.3. Mes sous-titres H2 sont de 32px ? Ils sont de 32px **partout**
3.2.1.4. Si c'est 🟢 quelque part, ce n'est pas 🟩 dans la section ou la page d'après...
3.3. Règle 3
3.3.1. Espacements
3.3.1.1. Aérer le contenu (on veut du vide !)
3.3.1.2. Symétrie
3.3.1.3. On évite généralement les pavés...
3.4. Règle 4
3.4.1. Scannabilité
3.4.1.1. Les gros textes
3.4.1.2. Visuels
3.4.1.3. Listes
3.4.1.4. Caractères gras
3.4.1.5. ...
3.5. Règle 5
3.5.1. Règle des 3 secondes