
1. Perfect Page / Audit d'une page
1.1. Crédibilité
1.2. Personnalisation
1.2.1. Personas, prospect - client - remarketing
1.3. Attractivité
1.3.1. émotion, envie de jouer
1.4. Sollicitation
1.4.1. envie de revenir, interaction sociale
1.5. valeur, émotion, organisation visuelle, crédibilité, identification de la société, la réputation, base-line
1.6. SEO - Titre + meta description
1.6.1. Clic à partir du SERP
1.7. Responsive
1.8. Accessibilité
1.8.1. Physique et technologique
1.9. Ambiance
1.10. Architecture
1.10.1. moyen de naviguer dans le site : barre, onglet, moteur, filtre, lien, bouton
1.11. La navigation
1.11.1. localisation dans le site, dans la page (couleur du lien, fil d’ariane) niveau, profondeur
1.12. Convention - standard
1.12.1. (lien souligné standard - couleur d’un bouton une convention), home = lien, les familles, la typographie, la taille, la ligne de flottaison, la lisibilité, les couleurs, le contraste, SEO : Titre de la fenêtre + meta description, Identification : Logo + Baseline, Call to action
1.13. Capitaliser l’apprentissage interne du site web, l'objet mental
1.13.1. se forger un modèle mental, template, blocs, colonne, navigation, localisation dans le site, type de lien, la hiérarchie du contenu
1.14. La terminologie
1.14.1. sémantique des groupes (oiseaux, animaux…) Home, contact, Panier...
1.15. Trouver l’Information
1.16. Assistance/Aide
1.16.1. fil d’ariane, clics logiques
1.17. Gestion des erreurs
1.17.1. Liberté : laisser l’internaute commander, d’interagir, formulaire obliger de donner son nr de téléphone, obliger d’utiliser la barre de nav
1.17.2. 404, retour possible à une page précédente, mentionner le poids d’un fichier et son format, formulaire, choisir une autre produits/services, une autre langue
1.18. Rapidité
1.19. Satisfaction du prospect
1.19.1. Scénario des personas
1.20. Compréhension
1.20.1. : Bien choisir les mots, phrase et les symboles
1.20.2. filtre, couleur de liens, intitulé d’un bouton, affordance des éléments, les espacements, la rapidité d’accès de l'information
2. la charte graphique, adresse, TVA, orthographe, photos, page contact, conditions de vente, vie privée.
3. Ergonome vs web designer
3.1. IU
3.1.1. Efficacité
3.1.1.1. Optimisation des parcours
3.2. UX
3.2.1. Émotion
3.2.1.1. Storytelling dans une expérience d'utilisation
4. Définition
5. Persona, utilisateur, client, cible
5.1. Exercice
5.1.1. Recherche d'informations
5.1.1.1. Commanditaire
5.1.1.1.1. Factures
5.1.1.1.2. Carte de fidélité
5.1.1.1.3. Sondage
5.1.1.2. Statcounter
5.1.1.3. Alexa
5.1.1.4. Google Analytics
5.1.1.5. economie.fgov
5.1.1.6. Analyse concurrentielles
5.1.1.7. AWT
5.1.1.8. Statbel
5.1.1.9. DNS.be
5.1.1.10. Belgium.be
5.1.1.11. IWEPS
5.1.2. Etablir une fiche persona avec un scénario de visite
5.1.3. Présenter oralement sa fiche persona
5.2. Synthétiser les différentes fiches
6. Commanditaire
6.1. Besoins et objectifs
6.1.1. Définir les besoins du commanditaire
6.1.1.1. Besoins prioritaires et secondaires
7. Arborescence
7.1. Tri de carte
7.1.1. Exercice
7.1.1.1. Travail en groupe : énumérer et catégoriser
7.2. Arborescence fonctionnelle
7.2.1. CMS
7.2.2. Bootstrap
7.3. Aperçu des différentes techniques de navigation
8. Zoning, sketching...
8.1. Organiser le contenu
8.1.1. Exercice
8.1.1.1. Réaliser le zoning d'un site Internet : 960px
8.1.2. Exercice
8.1.2.1. Contrôler le scénario des personas
8.1.3. Exercice
8.1.3.1. Réaliser le zoning d'un site Internet : 320px
9. Nakatomi-formation.be
10. Twitter : @nakatomi
11. Laurent Mottet
12. Structure d'une page web
12.1. Hierarchie de l'information
12.2. Grilles et média-queries
12.2.1. 960.gs
12.2.2. Resize my browser
12.2.3. Screenfly
12.2.4. Responsinator
12.2.5. Exemples de sites
12.3. Sens de lecture
12.3.1. Structurer l'arborescence prévisionnelle avec un logiciel en ligne
12.4. Typographie
12.5. Choix de font
12.5.1. Google font
12.5.2. Font Squirrel
13. Exercices
13.1. Sketching
13.2. Zoning
13.3. Prototype
13.4. wireframe
13.5. Wireframe hi
14. Trendboard
14.1. Couleurs
14.1.1. Color lovers
14.1.2. Color HEX
14.2. Recherche de style
14.2.1. Niice
14.2.2. Themeforest