Une maquette est l’équivalent de votre site web en version imprimée. La création d’une maquette intervient souvent après l’étude des besoins du client et l’élaboration d’un cahier des charges.
Qu'est-ce qu'une maquette ?
La maquette permet de vérifier avec le client tous les aspects visuels d’un site, de la mise en page générale aux détails tels que les couleurs, les polices de caractères utilisées, certaines images, les icônes, les logos…
Elle rend la création de site plus tangible pour le client car il peut avoir un aperçu du rendu, sans attendre que les développeurs créent le site. Pour les développeurs, c’est la garantie d’être plus efficaces puisque tous les choix graphiques ont déjà été faits !
En général, elle est réalisée par un graphiste qui maîtrise les outils de PAO et qui a de bonnes connaissances en design pour le Web. Elle peut aussi être réalisée par les designers d’interface (UI designer). Les outils les plus connus sont Photoshop, InDesign ou Sketch (Mac OS X uniquement).
La maquette est le point de départ de tout intégrateur. En effet, le premier travail du développeur va être de traduire la maquette en langage web, c’est-à-dire en HTML et CSS. Il devra également parler avec le graphiste pour connaître les éléments interactifs qui nécessiteront du Javascript.
La structure générale : le HTML
La première étape va être de découper la maquette en ensembles et sous-ensembles qui recréeront une structure de page HTML. Vous commencerez par repérer les éléments qui iront dans le<header>, ceux qui constitueront le corps de page et ceux qui formeront le<footer>.
Éléments décoratifs : le CSS
Une fois la structure HTML dessinée, vous vous intéresserez au contenu que vous pouvez réaliser en CSS.
Une erreur commune, même si on la rencontre de moins en moins, est d’exporter des images “décoratives” alors que le développeur peut aisément utiliser CSS pour les recréer.
Par exemple, imaginons que vous travaillez sur une maquette qui comporte un titre avec une double barre horizontale centrée à gauche et une autre à droite, comme ceci :
Source : http://codepen.io/chriscoyier/pen/zDGkw
Le premier réflexe serait d’exporter les deux barres en images. Mais ce sera plus rapide et plus flexible en CSS !
"Ça, c’est vous qui le dites ! Je ne comprends pas pourquoi je devrais faire le plus d’éléments possibles en CSS si c’est plus facile pour moi de tout exporter en images."
Tout d’abord, rappelez-vous de l’importance du “Responsive Design”, c’est-à-dire le fait qu’une page web puisse être consultée à la fois sur un portable, une tablette ou un ordinateur sans perdre en lisibilité ni en vitesse de chargement. Compte tenu de l’augmentation très importante du trafic venant de smartphones, vous n’aimeriez pas que vos visiteurs abandonnent votre site au profit d’un autre car ils ne peuvent pas le consulter sur leur mobile !
Un élément créé en CSS s’adaptera mieux à différentes tailles d’écran qu’une image. Dans notre exemple, je suis certaine que vous aurez envie d’effacer les barres, ou de réduire leur taille, quand votre utilisateur consulte la page depuis un mobile. Si ce sont des images, vous devrez exporter plusieurs versions d’une même image simplement pour “adapter” sa taille à celle des différents écrans. Et quand vous voudrez en changer la couleur ? Vous allez devoir tout recommencer ! Tandis que si vous les réalisez en CSS, vous aurez simplement besoin de 10 secondes pour en changer la couleur.
Enfin, une image sera toujours plus longue à charger qu’une feuille de styles (CSS). Pensez à deux aspects : votre utilisateur et Google. Si votre page met plus de 3 secondes à charger, vous avez déjà perdu votre utilisateur. Et étant donné que Google préfère que ses utilisateurs soient heureux, il privilégie les pages qui se chargent vite.
Optimiser les images
Il reste néanmoins des contenus que vous ne pourrez entièrement recréer en CSS : les logos, les icônes et les photos. Encore une fois, pensons adaptabilité et rapidité. Le format à privilégier pour vos logos et vos icônes est le SVG. Il s’agit d’un format vectoriel qui, par conséquent, ne sera jamais pixellisé. Il a aussi l’avantage d’être plus léger qu’une image.
Finalement, vous ne devriez avoir des images (au format PNG) que pour les photos.
En résumé, les seuls éléments image que vous aurez devraient être des photos et, si c’est vraiment nécessaire, des icônes.
Prêt-e à commencer ? C’est parti !
