Genèse d’un design – 2 : la conception

Share

Comment construit-on un design Web ? Les recherches préliminaires.

Mise en gardePréambule :

Tous les noms et marques cités dans cet article sont fictifs (nous avons effectué une recherche à ce sujet). Si par hasard, vous exploitez déjà un nom ou une marque cités dans le texte suivant, merci de nous contacter afin que nous supprimions les données concernées.
Si vous désirez utiliser tout ou partie des éléments graphiques de cet article, merci de nous contacter : les images ont été créées spécifiquement a des fins d’illustration de l’article et ne sont pas libres de droits.

Cet article n’est pas un tutoriel concernant la création d’un design, mais plutôt une explication de notre mode de fonctionnement en webdesign.

Les recherches.

On ne se lance pas directement sur un document vierge, c’est le plus sûr moyen de bosser pour rien.
On a les indications du client et/ou son cahier des charges et souvent, il nous fournit au moins 2-3 liens qu’il trouve intéressants en matière de design.
Même si on dispose du logo et de la description de l’architecture, il reste beaucoup à faire.

Les esquisses.

1ère chose : on visualise les liens proposés par le client et on en retient ce qui l’intéresse.
On peut avoir à recadrer le client par rapport à ce qu’il veut. Par exemple, nous avons eu parfois affaire à des clients qui voulaient « des animations », que ça clignote de partout, etc…
On explique donc que bon, les sites façon « sapin de Noël », c’est sympa, mais ce n’est absolument pas professionnel et que c’est très lassant/gênant pour les visiteurs. La plupart du temps, les clients prennent note de nos propositions. Mais il arrive aussi qu’ils s’obstinent. En ce cas, la règle « le client est roi » s’appliquera toujours.

2ème chose : on réalise une esquisse (appelée aussi mockup, ou draft) de la page.
Certains prestataires le font sur papier (c’était encore notre cas il y a quelques années), mais il y a maintenant des logiciels appropriés.
De notre côté, nous utilisons Pencil (en anglais, gratuit).
Le rendu est assez sommaire, le but étant surtout de nous assurer auprès du client que les blocs demandés sont tous là et bine positionnés.
On ne travaille bien entendu pas au pixel près pour ce type de rendu, c’est une esquisse avec de simples annotations.

Le rendu de la page d'accueil via Pencil

Cliquez sur l’image pour la voir en taille réelle (ouvre une nouvelle fenêtre).

 

 

Si le client valide cette esquisse, on va pouvoir passer à la suite, à savoir la recherche stylistique.

Les couleurs et le style global.

Dans le cas qui nous occupe, le client veut un site « tendance ». On va donc se documenter sur les tendances actuelles et à venir : il ne s’agit pas que le site apparaisse trop vieux dans 6 mois.
Pour cela, le site SmashingMagazine (en anglais) est une référence, mais une recherche Google sur « web design trends » suivi de l’année en cours donnera aussi de bonnes indications.
Par ailleurs, nous visitons aussi d’autres sites de sandwicheries/restauration rapide (quand il y en a) dans les environs de celle de notre client, pour voir comment on peut faire mieux et rendre le site plus attractif que celui de la concurrence.
Bref, on réalise une étude à la fois des tendances générales et des tendances locales, pour proposer le meilleur compromis possible.

Logo BioCas'Dal (fictif)Quant aux couleurs, elles seront déterminées par le logo, de façon basique.
Pour leur emploi dans le design, il y a évidemment plusieurs solutions : fond blanc, fond dégradé en vert (on évitera le dégradé orange, trop agressif), auquel cas le contenu sera sur fond blanc, etc…
Il est de toute façon normal de prévoir des retouches : il est rare qu’on ait la validation du client au premier jet. Peut-être le client souhaitera-t-il voir le résultat avec un fond blanc ET avec un dégradé de vert, par exemple. Ceci dit, ce type de modification s’effectue assez rapidement.

Bref, on commence à avoir une bonne idée de ce qu’on peut proposer à notre client, qui a validé notre mockup, on a pris des notes, on dispose du logo et des codes couleur employés. Reste donc à modéliser un premier jet de la page d’accueil.

Demander un devis

Share

Laisser un commentaire