Maquette « maison » ou maquette tirée d’une banque de maquettes ?

Généralement, dans les entreprises spécialisées en Web, un graphiste se chargera de créer la maquette qui répondra aux besoins du client. On dira que le graphiste développe une maquette « maison », c'est-à-dire une maquette bâtie de toute pièces par le graphiste.

Dans le cas où le site Web est développé par une seule personne ou par un groupe restreint de développeurs, trois options sont possibles :

  • Si le développeur possède des talents de graphisme, bâtir lui-même une maquette maison;
  • Retenir les services d'un graphiste à la pige pour développer une maquette maison;
  • Utiliser une maquette tirée d'une banque de maquettes, gratuite ou payante.

▼Publicité

Banque de maquettes

Si vous choisissez de travailler à partir d'une banque de maquette, sachez que la recherche de la maquette idéale ne se fait pas à coût zéro. En effet, bien que plusieurs maquettes soient offertes gratuitement, il faut prévoir les coûts suivants :

  • du temps pour rechercher la maquette qui conviendra aux besoins du client (le temps, c'est de l'argent!);
  • dans le cas où la maquette n'est pas offerte gratuitement, les coûts d'achat de la maquette;
  • possiblement du temps pour adapter la maquette aux besoins du client.

Maquettes achetées

Plusieurs sites spécialisés vendent des maquettes très diversifiées. Ces maquettes sont généralement offertes à très bon prix (entre 10 $ et 200 $). Ces prix sont très avantageux si on tient compte du fait qu'un graphiste professionnel peut mettre facilement 8 heures pour développer une seule maquette maison.

Les maquettes achetées répondent généralement aux normes du marché quant à la taille de la maquette, l'adaptatibilité pour les appareils mobiles (responsive), les tendances actuelles au niveau du design, etc.

Ces maquettes, qui sont généralement de meilleure qualité que les maquettes gratuites, sont livrées avec le HTML, le CSS et les images nécessaires. Généralement, on retrouve également des éléments JavaScript qui dynamisent l'affichage du contenu.

Elles sont souvent livrées avec les fichiers .PSD originaux, incluant les calques, ce qui facilite le travail d'adaptation lorsque requis.

Maquettes gratuites

Il est également possible de trouver la maquette idéale dans une banque de maquettes gratuites. Ces maquettes sont généralement distribuées sous licence « Creative Commons Attribution ». Les termes de cette licence peuvent être consultés sur le site Web proposant les maquettes (ex : http://creativecommons.org/licenses/by-nd/3.0/). Généralement, ils stipulent que la maquette peut être utilisée à condition de mentionner l'auteur. Certains sites permettent également que la maquette soit modifiée.

Deux types de maquettes gratuites sont offerts sur le marché :

  • Celles qui ne comportent que le fichier .PSD;
  • Celles qui sont livrées avec le HTML, le CSS, le JavaScript et les images nécessaires. Le fichier .PSD est parfois également présent mais ceci est plutôt rare.

Attention : il arrive que le fichier .PSD soit présent mais que les calques aient été fusionnés, ce qui limite les ajustements possibles.

Malgré ces limites, il est possible de trouver LA maquette idéale dans une banque gratuite.

Attention : il est de votre responsabilité de vérifier les conditions d'utilisation d'une maquette avant de vous en servir pour développer le site Web. Vous devez également vous assurer que la maquette choisie est effectivement gratuite car certains sites attirent les développeurs avec quelques maquettes simples gratuites puis leur proposent des maquettes plus intéressantes... et payantes.

Conseils pour bien choisir une maquette

Lorsqu'on parcourt les banques de maquettes, il devient difficile de choisir celle qui répondra vraiment aux besoins du client. Voici quelques pistes pour vous guider :

  • Ne vous laissez pas séduire par les photos qui sont présentées sur la maquette. Gardez en tête que ce seront les images correspondant à l'entreprise de votre client qui seront utilisées. Parfois, lorsque les photos de la maquette originale sont enlevées, le design perd tout son charme.
  • Méfiez vous des maquettes qui présentent une zone d'entête trop longue. Il faut que les internautes aient accès au contenu principal du site sans devoir faire défiler l'écran.
  • Plusieurs maquettes offrent une zone dans laquelle on peut faire défiler des images. Il s'agit d'une façon intéressante d'attirer l'attention de l'internaute. Cependant, cette zone n'est pertinente que si votre client a effectivement du contenu à faire défiler à l'écran. Rappelez-vous également que cette zone ne sera présente que sur la page d'accueil. Est-ce que le look des autres pages du site sera tout de même intéressant sans cette zone ?
  • Essayez de visualiser la maquette dans différentes palettes de couleurs. Ce n'est pas parce qu'une maquette est présentée avec des accents de vert lime que cette couleur doit absolument primer sur le site. Dans la plupart des cas, il vous sera possible de changer cette couleur pour celle de votre choix.
  • Vérifiez la largueur de la maquette qui vous plaît. En effet, on retrouve encore des maquettes gratuites ainsi que des maquettes à bon marché conçues pour un écran de 800 x 600 pixels, ce qui est largement inférieur aux standards actuels.
  • Évitez les maquettes qui présentent du texte clair sur un fond sombre puisque le texte y est plus difficile à lire.
  • Portez votre attention sur l'apparence du menu, sur le fond d'écran, sur les détails graphiques et sur le pied de page. Ce sont ces éléments qui détermineront l'apparence réelle du site une fois que les images de votre client y auront été intégrées.

Outils pour développer ou adapter la maquette

La maquette peut être développée avec n’importe quel logiciel de dessin. Le logiciel Gimp fait très bien l’affaire. Il s’agit d’un logiciel tout à fait gratuit et disponible sous Windows, Mac ou Linux. Dans les entreprises, cependant, le logiciel Photoshop est plus utilisé.

Si vous travaillez à partir d'une maquette tirée d'une banque et que vous avez en main le fichier .PSD, sachez que ce fichier pourra être édité autant avec Photoshop qu'avec Gimp.

Largeur de la maquette

Il existe une variété impressionnante de résolutions d'écrans. Avant que les téléphones intelligents et les tablettes deviennent populaires, il était d'usage de développer la maquette à l'aide d'un fichier .PSD pour une seule largeur d'écran. La largeur d'écran à laquelle la maquette s'adressait était déterminée selon les standards du marché, que l'on peut obtenir entre autres sur le site de W3 Counter : http://www.w3counter.com/globalstats.php.

Bien que ces statistiques soient toujours intéressantes, il est maintenant d'usage de développer des maquettes adaptatives afin que le site Web ait un rendu optimal sur les différentes tailles d'écran. Les techniques rendant un site adaptatif ne se contentent pas de rapetisser le texte et les images. C'est tout le design et l'ergonomie qui doivent être revus.

Maquette du site sur ordinateur Maquette du site sur tablette Maquette du site sur cellulaire
Maquette de 980 pixels de largeur
On a prévu que sur un écran plus large, on aurait du blanc de chaque côté
Maquette de 980 pixels de largeur Maquette de 320 pixels de largeur

Vous trouverez quelques autres exemples de maquettes déclinées en trois versions ici :http://www.thedesignwork.com/responsive-web-design-tools-techniques-templates-and-frameworks/.

Uniformité

Afin de rendre le site plus agréable à l'oeil et plus facile d'utilisation, le graphiste devra tenir compte des conseils suivants :

  • Éviter les fonds sombres
  • Limiter le nombre de polices à 3
  • Limiter le nombre de grosseurs de caractères à 3
  • Éviter d’utiliser du texte entièrement en majuscules et ce, même pour les options de menu
  • Conserver une disposition uniforme des éléments d’une page à l’autre (ex : même charte graphique partout : couleurs utilisées, style des tableaux, titres <h1> et <h2> toujours situés au même endroit, justification du texte uniforme, etc.)

Une maquette par type de page

Une maquette doit être produite pour chaque type de page que le site affichera : liste d'items, détails d'un item, page de coordonnées, etc. De plus, si certaines pages présentent deux colonnes de contenu alors que sur d'autres, une seule colonne occupe toute la largeur, cet aspect devra être clairement présenté dans les maquettes.

Au minimum, on présentera une maquette de la page d'accueil, qui est généralement très différente des autres pages, et une maquette d'une page intérieure.

Maquette de la page d'accueil Maquette d'une page intérieure Maquette d'une page intérieure sur une colonne
Maquette de la page d'accueil Maquette d'une page intérieure sur deux colonnes Maquette d'une page intérieure sur une colonne
Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories