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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

(Innsidia Project - Photo by Hanne Linander)

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Webdesign — L'essence précède l'existence (Wireframe, Mockup et Mood Board)”

  1. Bonjour Bruno et merci pour tes articles toujours pertinents et très documentés. Merci aussi pour la citation vers mon blog. Pour préciser ma pensée, je dis dans mon article qu’il n’est pas souhaitable de demander à un seul et même designer de produire plusieurs compositions graphiques. Cela n’empêchera jamais les annonceurs de demander plusieurs propositions graphiques, ni les agences d’en produire plusieurs. Il faut juste que tout ce petit monde s’organise pour faire produire ces propositions graphiques multiples par plusieurs graphistes.

    • jeromeM dit :

      Bonjour Laurent, Ce n’est pas justement le rôle de ce mood board d’éviter la production de plusieurs propositions mais au contraire d’aller vers un design précis ?

  2. [...] This post was mentioned on Twitter by Carole Laimay. Carole Laimay said: Webdesign — L’essence précède l’existence (Wireframes, Mockup et prototypage rapide) http://is.gd/G35dUv [...]

  3. Briegel dit :

    C’est vrai que tu as le sens de la formule pour tes titres !

  4. [...] qui a regard très pédagogique et large avec une base de réflexion intégration. webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board) Quelques notes sur les éléments graphiques du webdesign choisir un frameworks css 40 Brilliant [...]

  5. [...] Maquettes d’interfaces graphiques – Liste commentée de 18 outils disponibles sur MacOS, Windows et Linux pour réaliser des maquettes d’interface graphique (mockup ou prototype de site web). [...]

  6. [...] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board) [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site