Voir également la sélection de mes réalisations Book Up Position.
J’identifie la société pour laquelle ce site doit être réalisée. Je découvre ses aspects qui la composent : son univers, ses ambitions, ses orientations...
Je place Fayat dans son contexte. Connaître le comportement du marché : à la hausse, à la baisse, en stagnation. Qui est le leader ? Comment la société se positionne parmi les autres acteurs ? Qui sont les concurrents émergents et ceux en déclins ?... Je me nourris de ces infos pour avoir des idées sur le contenu éditorial et aussi, indirectement, sur le design graphique à produire. J’en extrait une liste de concurrents pour l’étape suivante.
J’identifie et répertorie les points communs aux niveaux contenu et design graphique. Je commence à avoir des avis sur ce qui pourraient être des pistes à exploiter ou à éviter. C’est une perception plutôt globale. Mes partis-pris s’affineront au fur et à mesure des étapes suivantes.
Pour comparatif, je réalise également un tour rapide sur l'existant.
Je traduis les précédentes analyses pour en faire une synthèse. Ainsi, je possède une vue globale de la direction à prendre.
J'esquisse un rapide MindMap* pour dégager quelques grandes idées. Ceci afin de tracer les chemins à emprunter. * Pour schématiser : le MindMap, technique inventée par @Tony_Buzan, vous aide à générer une liste d'idées par association. Lecture recommandée : « MindMap : dessine-moi l'intelligence » par Barry Buzan et Tony Buzan
Je regroupe divers visuels en rapport avec la société Fayat et les diverses activités qu’elle exerce : bâtiment Travaux Publics, construction métallique, matériel routier... Cette planche me sert d’appui afin de m’inspirer des codes du domaine : couleurs, lignes, formes, espace, texture, échelle...
J'utilise le service Web Niice.co pour générer rapidement cette planche tendance. Une application extrêmement pratique pour collecter à la volée des images sur les différents sites. Qui plus est, @Niiceapp vous met automatiquement en page ces images issues de votre collection selon leurs dimensions et orientations.
Je découpe grossièrement le contenu. Les dimensions des blocs indiquent leur importance. Le zoning me sert de mémo pour l’étape du wireframing. Quels éléments doivent y figurer ? Quels hiérarchies occuperont-ils au niveau architecture de l'information ?
Le sketch est l’élaboration d’une piste dans le découpage du contenu et du système de navigation.
Je bascule le wireframe papier sur support numérique car des idées nouvelles peuvent survenir au cours de cette étape. Cette version numériaue est une révision qui me permet de l’améliorer et de l’affiner. C’est pourquoi, le wireframe peut varier par rapport à la version papier. Les éléments qui le composent peuvent être corrigés s’appuyant sur des idées de solutions les meilleures. À cet instant, le système de navigation est déjà validée.
Je m’appuie sur la version papier et j’apporte les améliorations et corrections nécessaires au passage de la version numérique. À cette étape, le périmètre d’une mise en forme se dessine. Voilà pourquoi, je réalise des wireframes hautes-fidélités (hi-fi)(1). J’opère de manière itérative durant le wireframing : teste et valide les diverses options. Les choix fonctionnels sont établis.
Lorsque la version desktop est terminée, je décline sur iPad portrait et smartphone portrait.
En procédant ainsi, j'anticipe 60% du travail de wireframing pour la page de contenu : sytème de navigation et fonctionnalités validées. Je ne passe plus par l’étape papier. J’attaque directement from scratch sur UXPin(2) : teste et valide de manière itérative pour la page de contenu.
Cette étape de wireframing sur UXPin est primordiale car l’orientation du design graphique est déterminant. La haute-fidélité aidant. De fait, je considère, pour ma part, comme une étape de validation du Design et du Sketching du wireframe produit précédemment. En plus, ce wireframing est l'occasion de traduire les intentions des animations (si l'outil le permet, bien évidemment).
À noter, je veille à utiliser le vrai contenu afin que le nouveau design puisse s’ajuster et recevoir sans encombre le contenu existant.
(1) Cependant durant la phase exploratoire, il est préconisé de produire des wireframes lo-fi en mode sketching (lire l'article de @NewflUX_Fr : « Utiliser le prototype Lo-Fi pour une meilleure UX »). Et doivent être conçus bien en amont de l'étape dans laquelle nous sommes.
(2) @uxpin permet la réalisation de wireframes ou de prototypes Lo-Fi/Hi-Fi avec possibilité d'injecter des zones interactives. La nouvelle feature d'UXPin, « Avdvanced Animation », facilite la création de ces interaction.
Passer l’étape du Wireframe, le Design graphique peut subir quelques ajustement et m’appuyant sur les wireframes hi-fi. Je coule le Design dans le gabarit PSD Twitter Boostrap pour anticiper la contrainte responsive sur les trois devices conventionnels : desktop, tablette et smartphone.
Un extrait des argumentaires* avancés pour la Home en vue de justifier mes choix graphiques, fonctionnels, ergonomiques... Documents de synthèse incontournables pour la bonne compréhension des partis-pris servant à la compréhension du commanditaire et personnes en charge de la production du projet. Lecture recommandé : « Révélez votre process. Un bon design ne se vend pas tout seul » par @Cabaroc. * Les arguments ne sont pas visibles dans le Drive de Google. Vous pouvez les lire avec votre lecteur PDF (Adobe Acrobat Reader, par exemple).
Je réalise, lorsque le temps imparti me le permet, du Motion des intentions d’animation des interactions. Ceci afin d’éclairer le client, ainsi que l'équipe en charge du développement, sur le système de navigation et les différentes interactions. Cela contribue souvent à l’adhésion des partis-pris.
* À noter : ces intentions d’animations peuvent être transposer dans la page de contenu, lors d'événements d’apparition, de masquage, de mouvement s’appliquent sur les composants sur lesquels l’utilisateur intéragit.
Voir également la sélection de mes réalisations Book Up Position.
| Technos utilisées |
|---|
| UX Pin |
| Adobe Photoshop |
| Adobe After Effects |
Lire aussi : Comment être efficient dans la prise de note d'un rendez-vous ?
