Mockups & Rough : gagnez du temps !


Vous devez créer un nouveau site internet… Plutôt que de foncer tête baissée dans Photoshop pour attaquer le design, optimisez votre temps !

Le secret d’un projet réussi se trouve dans une seule phrase : « Le web n’est que conception ».

Il faut éviter de se lancer si vous êtes en manque d’éléments ou de réponses. Avec l’effet boule de neige, la moindre modification peut vous faire perdre un temps précieux. Votre interlocuteur en a rarement conscience, il ne faut donc pas hésiter à lui expliquer quelles sont les implications.

Le mockup (ou zoning) est crucial pour le bon déroulement du projet. Il est la première étape du design et consiste à disposer sur un schéma toutes les fonctionnalités d’une page web en se basant sur le cahier des charges.

Un mockup regroupe essentiellement :

  • Les différentes zones du site (logo, navigation, sidebar, header, footer…)
  • Les fonctionnalités attendues (menu déroulant, slideshow, animation…)
  • Le recensement des éléments (icônes, boutons, images, input…)
  • L’agencement du contenu (niveaux de titres, citations, accroche…)

C’est un excellent test pour vérifier la qualité du cahier des charges. S’il est complet vous n’aurez aucune question supplémentaire à poser.

Avec tous ces éléments placés au bon endroit, on dispose d’un prototype sur lequel vous et votre client pouvez vous baser. C’est à ce moment précis que les modifications doivent être faites : c’est rapide et efficace. Le client aura même le droit d’être pointilleux. Après il n’en aura plus le droit (enfin… en théorie !).

Le Mockup validé, vous disposez maintenant d’un plan de construction !

Les outils

Comme d’habitude, Photoshop peut tout faire ! Mais il existe des outils dédiés qui sont beaucoup plus performants et conviviaux, pour vous faire gagner du temps. En voici une liste non exhaustive :

La plupart sont gratuits et certains vous permettent même d’éditer un Mockup de façon collaborative. Vous pouvez même utiliser la fonctionnalité dessin de Google Docs, l’essentiel est de pouvoir structurer de façon simple le document et les éléments qui le composent. Pour les plus feignants, il existe une extension (wirify) qui permet de générer un zoning à partir d’un site existant. Pratique pour une refonte graphique !

Source : http://www.alsacreations.com/
Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Retour en haut ↑

%d blogueurs aiment cette page :