Web Design: Comment établir un style de design - des nuls

Une fois la conception d'un site Web approuvée, il est judicieux d'établir un guide de style visuel qui régit la palette de couleurs, l'utilisation des polices et les traitements graphiques. Développer un guide de style en premier - ou en commencer un et l'affiner au fur et à mesure - vous aidera à rester constant tout au long du développement de vos compositions. De plus, les styles graphiques et de texte que vous définissez maintenant seront finalement traduits en styles CSS ( C ascading S tyle S heets) par les développeurs lors de la construction phase de sortie

Guides de style graphique pour les sites Web

Il y a tellement d'éléments que vous pouvez définir visuellement simplement avec du code CSS simple. Les éléments visuels tels que les bordures, les couleurs de remplissage, les couleurs de survol, les couleurs de lien, les couleurs d'arrière-plan et les lignes de règles doivent tous être définis par le concepteur. Des questions comme celles-ci doivent être documentées: Quelle est l'épaisseur des lignes de règles? Lorsque vous survolez une zone de contenu, sa couleur d'arrière-plan change-t-elle et, dans l'affirmative, à quelle couleur?

Pour les autres éléments communs de la page, tels que les arrière-plans texturés personnalisés, les boutons fantaisie et les traitements de bordure nécessitant un support graphique, vous pouvez créer une bibliothèque de ces éléments. Cette bibliothèque, créée dans un programme tel que Adobe Fireworks ou Adobe Photoshop, s'ajouterait aux compositions de page que vous avez déjà créées. Tous les fichiers de production et comps doivent être sauvegardés en tant que fichiers en couches dans le format natif du logiciel (PNG et PSD, respectivement). Les calques et les ensembles de calques doivent être clairement organisés et nommés afin que tout concepteur puisse reprendre là où vous l'aviez laissé.

Styles de boutons dans la conception Web

Une chose souvent oubliée dans la planification de la conception Web est une hiérarchie de styles pour les boutons et les liens. Vous devriez avoir un plan pour différentes catégories de boutons et de liens: un bouton important, un bouton moins important; un lien de texte important et un lien de texte moins important (ou un lien trouvé en ligne avec une autre copie de corps). Souvent, les liens et les boutons d'une page sont placés sur des arrière-plans de couleurs différentes. Si le même style ne fonctionne pas sur les deux arrière-plans, créez un style distinct pour chaque arrière-plan.

Dans l'exemple, les deux boutons de haut niveau fonctionnent bien sur un fond clair et un fond sombre. Les couleurs d'accent vert et orange pour les liens Tier 3 et Tier 4, cependant, ne fonctionnent pas bien sur les deux arrière-plans. Dans ce cas, le vert et l'orange ont été "trichés" pour être plus légers et plus brillants pour une utilisation sur un fond sombre et plus sombre pour travailler sur des arrière-plans clairs.

Styles de style dans la conception de sites Web

De nos jours, il est rare d'utiliser le graphique texte - texte qui est simplement une image graphique - sur les sites Web et mobiles.Il y a plusieurs raisons pour éviter l'utilisation de texte graphique. Tout d'abord, le texte graphique est difficile à maintenir: il est beaucoup plus facile de retaper ou de traduire des mots en HTML ou dans une base de données et d'appliquer le style approprié à CSS que de refaire une image. Deuxièmement, le texte graphique n'est pas consultable, sauf si vous appliquez des balises alt avec des mots-clés.

Dans le passé, les concepteurs utilisaient du texte graphique car les polices étaient un problème sur le Web: seul un nombre limité de polices (plutôt ennuyeuses) étaient disponibles sur le système de chaque utilisateur. Il est désormais possible de incorporer des polices - faites en sorte que votre site Web soit lié aux fichiers de polices - grâce à divers services et technologies.

Comme pour les boutons, vous devez définir des styles de conception pour tous les types de polices et les situations dans lesquelles vous les utilisez, de la copie du corps aux titres, aux sous-titres et aux légendes. Ces styles de police deviendront finalement une série de styles CSS appliqués au texte dynamique. En tant que concepteur, vous n'avez pas besoin d'écrire les classes CSS; vous pouvez simplement créer une feuille de style qui affiche tous vos styles de police dans Photoshop. Les développeurs peuvent glaner ce dont ils ont besoin à partir du fichier Photoshop en couches. CSS est étonnamment accommodant - vous pouvez obtenir beaucoup d'effets sympas.

Crédit: © Zen Elements Limited