Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Projet de site

Par quoi commencer ?

Après l'analyse, la pige et les inspis diverses et variées, il est enfin temsp de se lancer dans le projet, mais par ou commencer ? Quelles sont les étapes?

hulki-okan-tabak-x3kQTL7yw30-unsplash

Les croquis

Sur papier c’est bien

Les réfractaires du papier… Croyez-moi, rien de plus rapide que d’allonger ses idées sur papier avant de commencer à se lancer.

Ça permet d’essayer, d’expérimenter rapidement des formes, des structures qui nous serviront par la suite. Les annotations sont les bienvenues.

Dans le cas d’un logo, on met en place un brainstorming, on associe des mots, des formes, on étend le champ lexical…

Dans le cas d’un site, on teste donc des structures, des compositions…

web
Croquis
web
Croquis

web
Croquis

Le zoning

Du bloc en niveau de gris

Emplacement des éléments via la création de blocs en niveau de gris annotés de ce à quoi la partie servira ou ce qu’elle présentera.

Schématisation de la page web, placement des blocs afin de présenter les différentes zones et d’organiser les blocs de contenu (issu de la partie croquis).

Le zoning permet de montrer au client la « structure » du site avec ses diverses fonctionnalités.
Cette création est réalisée suite à la rédaction du cahier des charges qui lui, liste les fonctionnalités du site web.

Schématisation rudimentaire souvent en noir, blanc et niveau de gris.

Avoir la présence d’un trait présentant la ligne de flottaison (fold ou above the fold en Anglais) permet d’être certains de bien mettre en avant et au premier niveau les éléments qui doivent l’être.

Attention : Lorsque l’on parle de résolution d’écran, il s’agit bien d’écran, non pas de page web.
Votre navigateur ampute de quelques dizaines de pixels la résolution globale.
De plus, sur Firefox (FF) il est possible d’ajouter des extensions qui viennent créer une nouvelle barre d’outils, ce qui réduit encore un peu la hauteur de la page web dans le navigateur.

web
Zoning

Le wireframe

Maquette conceptuelle ou maquette filaire

web
Wireframe

Maquette « fil de fer » ou filaire issue du zoning dans lesquels l’on remplit les différentes zones avec des éléments graphiques simples et sobres afin d’illustrer les propos : Hiérarchisation visuelle.
On parle de maquette conceptuelle, car son créateur doit prendre en compte les notions d’ergonomie (placement des blocs) soumises grâce au zoning et continuer la réflexion autour du site : Point de vue fonctionnel et ergonomique.

Si votre zoning fait état d’un compte client placé en haut du header, il vous faudra le mentionner visuellement et graphiquement (toujours en restant dans du simple et du filaire ou peu détaillé).

L’utilisation d’outils graphiques destinés à la création de wireframe est une bonne aide, car ils permettent de rendre moins abstrait le passage d’une maquette « zoning » au wireframe.
Le wireframe prend en compte l’étape précédente, mais rentre plus dans le vif du sujet en y intégrant aussi la notion de taille.

[…]Travailler directement sur ordinateur semble en effet présenter l’inconvénient de diriger la concentration mentale vers la réalisation plutôt que sur la génération d’idées. […]
Source Ergonomie Web Amélie Boucher

Conseil (soulevé aussi dans le livre d’Amélie Boucher)
Lors de la création du wireframe, pour les parties textuelles, si vous utilisez du Lorem Ipsum, veuillez a ne pas le copier-coller dans chacune des zones.
Créez des diversités visuelles en utilisant des sauts de lignes, en coupant les paragraphes… Dans la vie réelle, vous n’aurez pas un texte identique dans chacune de vos parties (nombre de caractère et forme).

Style Tiles

Planches de style

Recherche de couleurs, textures et de typographies. Cette recherche s’effectue toujours en lien avec le domaine du client, son CDC (cahier des charges) et suite à l’analyse de la concurrence, réalisée au préalable. C’est grâce à ces recherches que la partie suivante sera réalisée sans trop de difficulté.

Il s’agit de planche tendance

Elle sera aussi pratique lors de la conception de la maquette graphique dans le but de bien respecter ce qui avait été décider, à savoir par exemple une typo pour le texte courant en 14px et des sous-titres en 24px

hulki-okan-tabak-x3kQTL7yw30-unsplash

Maquettage

Design graphique

Les étapes précédentes nous ont permis de déterminer une structure. Maintenant il est temps d’habiller graphiquement cette structure.

Le prototypage

L’illusion du vrai

Dans le but de dynamiser les maquettes statiques, les nouveaux outils de conception web permettent aujourd’hui de créer des prototypes de ce que sera le futur site internet. Ainsi plus de mauvaises surprises ou de non-compréhensions entre le designer et le client puisque ce qu’il voit devrait être ce qu’il aura.

Attention toutefois. Si votre client vous valide un proto, il est important que derrière la partie technique suive aussi. Rien ne sert de faire un prototype avec de belles transitions si vous êtes incapables de réaliser ceci techniquement.

Attention aussi à ne pas concevoir aussi quelque chose de dynamique qui bougera dans tous les sens, mais qui sera creux au niveau du fond.

Le codage

Technique

Tout est validé, tout est bon, arrive maintenant le code. À vous de voir si :
– Vous ne gèrerez rien
– Gérerez le front-end
– Gèrerez le front et le back

Ne pas savoir coder un minimum quand on est webdesign est à mon sens une faute grave.