Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)

Les processus à l’oeuvre lors de la création d’un site web sont généralement chargés d’affects. Tout semble compliqué alors qu’il ne s’agit souvent que de choses complexes que l’on peut facilement partitionner. Dans le meilleur des cas, la réflexion part d’un brief qui présente la société, le projet, la cible, les attentes, etc. à partir duquel l’équipe créative (ou votre cerveau droit si travaillez seul) doit proposer une ou plusieurs propositions graphiques qui, une fois affinées, donneront naissance à un site Web.

J’ai tendance à considérer ce brief comme un problème — au sens mathématique du terme. Chaque composante du brief est une partie de l’équation à résoudre pour passer au niveau supérieur en attendant d’avoir affaire au boss de fin de niveau 😉 Entre le brief et les propositions graphiques, le concept représente l’équation que les éléments du design devront résoudre. Il faudra ensuite concrêtiser ce concept par des pistes graphiques ou ou des Mood Boards (proposition d’univers graphique) que le client devra s’approprier et valider.

Les graphismes bousculent le planning

Les aspects visuels qui devraient éclore tout à la fin d’un long processus de réflexion bousculent souvent le planning et finissent par occuper le devant de la scène plus souvent qu’à leur tour. Il faut dire que la partie visuelle d’un projet est un des rares aspects d’un site web où le client pense avoir quelques compétences (qui n’a pas de couleurs préférées ?). Par ailleurs, cette partie graphique concrêtise le projet et le rend tangible : dans son for intérieur, le client paie pour le design. Malgré tout, il est important de ne pas s’enfermer dès le début dans une proposition graphique trop marquée. A cet égard, la mise en place de Mood Board ou «panneaux d’humeur» permettra au client de se concentrer sur le fond, sur ce qu’il veut communiquer, plutôt que de s’attarder sur les détails.

Creating a Mood Board

Une seule proposition graphique

On parle souvent de trois propositions : la première qui permettrait au graphiste de se faire plaisir, la deuxième censée correspondre aux besoins du client et la troisième servant de repoussoir au deux autres. Un graphiste peut-il concevoir plusieurs propositions graphiques sur un même sujet ? C’est possible, bien sûr, mais pas souhaitable. Il vaut mieux mettre le paquet sur une seule proposition et affuter ses arguments pour la défendre plutôt que se disperser. Prenons le temps de mieux cerner les besoins du client. Il arrive souvent que ses attentes (un site Web en Flash qui bouge) entrent en conflit avec ses besoins (optimiser la présence du site dans les moteurs de recherche, par exemple). Ce qui ne doit pas vous empêcher d’explorer plusieurs pistes graphiques : il n’y a rarement qu’un seul chemin permettant de résoudre une équation.

Pas de Wireframes

Avant, pendant ou après la phase des recherches créatives, les Wireframes permettent de mettre en lumière l’ergonomie, l’expérience utilisateur et la granularisation de l’information. On peut aussi à cette étape commencer à s’interroger sur la mise en place d’une taxonomie adaptée. Il existe de nombreux outils en ligne (ou hors-ligne) pour faciliter la création de Wire-Frames, même si un crayon et une feuille de papier suffisent largement. Faire des Wireframes peut s’avérer indispensable dans certains projets où les étapes de validation sont longues et/ou impliquent de nombreuses personnes et/ou services différents, mais en général, on peut aisément s’en passer.

The Right Way to Wireframe

Designez dans le navigateur !

A la place, je privilégie le travail dans le navigateur. Pourquoi perdre du temps à dessiner (encore !) une pseudo-maquette quand on peut faire avancer le projet en commençant par le marquage HTML ? Hérésie ? Bridage de créativité ? Que nenni : quand je vois le niveau de détail de certains Mockups, je me dit qu’il reste finalement peu de place pour l’équipe créative. Autant mettre en page le fil de fer directement dans navigateur.

Cette méthode offre l’avantage de ne pas apprendre un nouveau logiciel pour vos Wireframes. A la place, vous pourrez vous aider de l’un des nombreux frameworks CSS existants. Ils offrent toute la souplesse nécessaires pour ajouter, supprimer, modifier les blocs, qu’il s’agisse de leur taille ou de leur emplacement. Cerise sur le gâteau, lorsque le Mood Board et le Wireframes sont validés, il reste juste un peu de travail d’intégration à faire, et voilà !

Je vous laisse avec l’article Frameworks CSS + Mockup = Mockup CSS pour approfondir la création des Mockup ou Wireframes directement dans le navigateur grâce aux frameworks CSS et aux grilles de mise en pages.

Linkographie

• Mood Board — Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
• Le concept board webdesign — Que ce soit dans le cadre d’une avant vente ou au cours d’un projet, la présentation d’une maquette aux représentants de la marque ou de l’entreprise qui a commandé un site s’avère toujours délicate.
• Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ? — Travailler sur un sujet c’est surtout faire des choix, retenus eux aussi parce qu’on les estime meilleurs que les autres car plus adaptés au contexte du sujet. Un choix construit sur une analyse fine du sujet et de son contexte forge des certitudes.
• Frameworks CSS + Mockup = Mockup CSS — En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur procurent des avantages à l’équipe de développement et au client qui pourra manipuler la maquette à l’échelle 1:1.
• La Taxonomie pour éviter le cagibi de l’oubli — Le terme taxonomie (taxonomy en anglais) désigne une méthode de classification des informations dans une architecture évolutive. Le terme est couramment employé dans le cadre des systèmes de gestion de contenu (CMS).
• Wireframes : 4 styles pour 4 types d’outils — Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement
• Tools Une dizaine d’outils en ligne pour réaliser des Wireframes.
• Paper Prototyping — As interfaces become ever more complex and development schedules seem to get shorter and shorter, you may find it useful to give up your user-interface modeling software for awhile in favor of something simpler. All you need is paper, pens, scissors, and your imagination.
• 5 Reasons to Design with Mood Boards — If you’re a designer, the most dreaded thing a client can say is, “my wife really loves purple; so why can’t we make it purple?”
• Getting Moody — Mood boards, being a lot like they sound, are typically used to help establish a style, theme, expression, environment, atmosphere, or feeling. They often consist of found objects from magazine tear outs or digital imagery to fabric or color swatches, but really can be anything that inspires (like a favorite saying, or phrase, for example).
• Website Mood Boards a Successful Precursor to Visual Prototyping — One final note on our mood boards. This exercise gave us some incredible insight into the different designer’s styles and thought processes. As mentioned, each designer offered a brief explanation of their choices and by doing so, really enhanced our understanding of the designers skills and vision and ultimately the client’s understanding of the emotions and mood they were trying to create.
• Why Mood Boards Matter — Words fail miserably when trying to translate design concepts. What one person calls “edgy” another might see as chaotic.
• Moodboard Webdesign — I have to redesign 8 HTML pages and also showing 3 levels of content structures. So I have to analysis and study the current website to make a new proposal for the new website.
• www.moodshare.co — Selling ideas just got easier (version bêta sur pré-inscription)
• 40 Brilliant Examples of Sketched UI Wireframes and Mock-ups
• Moodboards – das Design vor dem Design