Optimisons les maquettes pour le Web

Les maquettes sont aussi des documents techniques qui seront livrés à votre intégrateur HTML puis à votre équipe de développement.

Les gabarits

La création de pages sous Photoshop donne un aspect visuel et artistique du site. Afin d'avoir des maquettes techniques et fonctionnelles pour votre interface utilisateur Web, il est souvent nécessaire d'étendre la charte graphique.
Cela permet de savoir combien de gabarits votre équipe de développement doit créer et comment les blocs de contenus sont disposés dans les pages.

C'est pour cela que je vous propose la création des maquettes spécifiques pour déterminer le nombre de gabarits à créer et les côtes de chaque composant (leurs tailles, la typo utilisée, les couleurs au format hexadécimal, les dimensions exactes...).

 

Création de gabarits

 

Créer des boutons en CSS sans Javascript

Les effets de survols

Le fichier Photoshop doit comporter les indications d'interactions. Que se passe-t-il lorsque l'on passe la souris sur un lien ou sur un bloc ? Il faudra que les calques soient bien identifiés. Les polices de caractères

Les polices de caractères

Le nombre de polices de caractères universel (que l'on va trouver aussi bien sur PC, MAC ou sur portable) sont très limitée. Ainsi, on évite dans les maquettes d'utiliser des polices exotiques ou dédiées au Print comme la police Myriade. On utilisera plutôt les polices standards (Arial, Verdana, Geneva, Times ...)

 

La découpe des images

Les logiciels tels que Photoshop vont utiliser des shapes avec des débords qu'il faut éviter, en effet, si dans les gabarits on trouve une colonne de 150 pixels de large, les débords de blocs seront coupés et produirons un effet peu souhaité.

L'intégralité des informations

Pour l'accessibilité, il est bon de ne pas cacher l'information dans ses pages Web. Lorsque l'intégrateur HTML va créer des pages WEB à partir des maquettes, il disposera sur sa page toutes les informations, le développeur y ajoutera ses Javascript. On verifiera que si le javascript est désactivé, toutes les informations de la page restent lisibles.

 
 
 
 
 

mise à jour : 13 mai 2009