Éléments d'un excellent design Web le polonais

Quand je compose des dessins, je le fais habituellement en deux phases. - Mise en page et polonais. Pendant la phase de mise en page, je place les objets principaux sur la page en finissant généralement par quelque chose d'assez complet. Dans la deuxième étape - le polonais - je passe en revue le dessin et ajuste les couleurs, les traitements de texte, les ombres, les calques et le nettoie en général. Dans cette première d'une série de didacticiels sur la conception Web, nous examinerons le polonais.

Une courte préface

Contrairement aux effets Photoshop, la conception Web ne peut pas être enseignée en un ensemble d'étapes facilement répétables. Si vous regardez les meilleurs designs Web, ils ne sont pas difficiles à reproduire techniquement. Vous pouvez probablement capturer un dessin, le placer dans Photoshop, puis reproduire le même dessin couche par couche. Le truc, cependant, est de proposer ce design en premier lieu.

Pour cette raison, dans ces tutoriels sur la conception Web, je vais essayer différentes techniques pour décrire différents aspects du processus que je suis personnellement amené à suivre lors de la conception d'un site Web..

Aujourd'hui, nous examinons un site que j'ai créé plus tôt cette année et qui s'appelle Not By The Hour. Il s'agit d'un sous-site pour un autre de nos blogs appelé FreelanceSwitch. Heureusement, lorsque je l'ai conçu il y a quelques mois, j'ai conservé une version du fichier PSD avant et après l'avoir finie. Ainsi, tout comme dans une publicité sur la perte de poids, nous allons faire un peu «avant et après»…

Avant d’expliquer certaines des choses que j’ai faites pour peaufiner mon site Web, il est important de regarder avant et après..

VUE AVANT ET APRÈS

Étape 1 - Clarté:

Vous allez m'entendre dire cela encore et encore, mais lorsque vous concevez pour le Web, tout est question de pixels. Un de vos objectifs devrait toujours être de garder les choses claires et propres. Cela signifie par exemple:

Clarté du texte
Lors de la mise en page du texte, vous devez réfléchir au type d'anti-aliasing que vous utilisez. Pour ce faire, ouvrez le panneau Caractère, que vous pouvez faire en allant dans Fenêtre> Caractère ou lorsque l’outil Texte est sélectionné et que du texte est en surbrillance, appuyez sur Ctrl-T (oui, c’est le même raccourci pour transformer. assurez-vous que le texte est sélectionné). Dans le panneau de votre personnage, en bas à droite, vous pouvez choisir entre Aucun | Sharp | Crisp | Fort. Expérimentez avec différentes polices et tailles. J'utilise principalement le paramètre Sharp, ce qui oblige certains pixels à être alignés et déforme parfois un peu la police lorsque les paramètres sont plus petits. Mais par exemple dans l'image ci-dessous le texte Fabrication est défini à forte, ce qui explique pourquoi lorsque j'applique un contour 1px, il est très clairement défini.
Doublure
Comme vous pouvez le voir entre les barres gris clair et gris foncé, j'ai ajouté une ligne pâle 1px. Cette astuce imite l’effet du filtre de netteté. Si vous avez déjà utilisé trop souvent l'un des filtres de netteté sur une photo, vous remarquerez que de petites bordures apparaissent. En effet, le fait de souligner la frontière entre les deux parties vous semble plus séparé et donc plus net. Je vais souvent utiliser une faible ligne pour souligner la frontière et rendre les deux parties plus claires..
Coloration
La couleur peut également faire une grande différence en aiguisant les choses. Dans ce cas, j'ai désaturé le fond d'une sorte de gris / vert cassé à gris pur. Cela signifie que le coffre-fort, qui a un ton verdâtre, se distingue davantage du fond et finit par paraître plus net..
Nettoyage d'objets
Une autre chose que je n'ai pas faite dans cette image, mais que vous pouvez faire pour aiguiser les choses, est de passer par des objets comme le logo ou le coffre-fort et de vous assurer que les contours sont alignés au pixel près. Ainsi, par exemple, examinez le bord gauche du coffre-fort par rapport au bord droit. Vous verrez que le bord droit est légèrement flou. Nous pourrions résoudre ce problème en utilisant l'outil Lasso polygonal (L), en sélectionnant un petit bord sur le côté droit et en appuyant sur Supprimer. Bien sûr, cela n’est pas essentiel et je ne veux pas paraître tatillon, mais c’est une bonne idée de réfléchir à ces détails et de s’assurer que tout est beau et net.!

Un autre élément à discuter ici est que sur le texte, vous verrez un léger dégradé / effet de trait. Ceci est réalisé avec deux styles de calque, un trait intérieur de 1px et un dégradé subtil. Je l’utilise ici parce qu’il fait partie de la marque FreelanceSwitch et qu’il s’agit également d’un effet assez Web 2.0. Il vaut mieux utiliser le texte Sharp, comme mentionné précédemment. Vous pouvez voir les styles de couche exacts dans l'exemple de PSD ci-dessous.

Étape 2 - Lumière et ombre:

Gradients, Gradients, Gradients. Certains diront qu'ils sont la marque du design Web 2.0 et je dois admettre que je les utilise constamment dans mes conceptions. Dans l'image ci-dessous, vous verrez que j'ai ajouté des ombres et des dégradés à quelques endroits différents pour donner plus de profondeur à la conception..

À mon avis, l’une des principales différences entre la conception imprimée et la conception Web réside dans la profondeur dont vous avez besoin pour la conception. Ce que je veux dire par là, c’est que dans la conception imprimée, si vous deviez avoir une couverture de brochure avec une couleur droite et plate, cela aura souvent l’air ravissant à cause du papier ou d’un vernis cellulaire qui pourrait être appliqué et de la réaction de la lumière à ce papier / revêtement. Ainsi, dans la "conception", cela peut ressembler à une simple couleur unie, mais dans la sortie, il aura néanmoins de la profondeur. Sur l'écran, vous n'avez pas cet effet.

Cela ne veut pas dire que vous ne pouvez pas avoir des arrière-plans ni des panneaux de couleur plats dans la conception Web. Cependant, tous les concepteurs d’impression que j’ai jamais orientés vers l’art pour créer des sites Web, les deux erreurs les plus courantes que j’ai remarquées sont:

Ne pas se concentrer sur la netteté et la clarté du design
En impression, vous effectuez rarement un zoom avant pour modifier des pixels individuels. En effet, lorsqu’un document est imprimé, ce niveau de détail échappe souvent à l’œil. Vous pensez en millimètres et non en pixels.
A défaut d'ajouter des indices de profondeur et un intérêt visuel suffisant
Les dégradés ne fonctionnent généralement pas très bien en version imprimée, mais à l'écran, ils fonctionnent à merveille. De même, l'ajout d'ombres et de reflets clairs fonctionne bien à l'écran. Ensemble, ils peuvent rendre un site beaucoup plus attrayant visuellement lorsque les différents éléments à l'écran se font face. Dans l'image ci-dessous, par exemple, les sacs d'argent, qui étaient initialement des images vectorielles droites avec une coloration à plat, ont reçu des graduations très subtiles à l'aide de l'outil de gravure (O) afin qu'ils aient l'air plus doux..

Étape 3 - Préséance:

La priorité est l’aspect visuel le plus important de la conception de l’information. Et puisque la conception Web concerne en grande partie la façon dont vous présentez et présentez les informations à votre utilisateur, la priorité est donc primordiale..

Qu'est-ce que je veux dire par préséance? Eh bien, quand vous regardez la page, vous devez vous demander ce que je regarde en premier, quelle est la prochaine étape, après quoi, et ainsi de suite. Et pourquoi regardez-vous certaines choses dans un certain ordre?

La préséance visuelle est un mélange de facteurs:

Taille
Il est assez évident que quelque chose de grand va prendre le pas sur quelque chose de petit. Donc, dans cette conception, le coffre-fort et le titre principal ont la priorité absolue. Quand on regarde la page, on remarque tout d’abord ces deux éléments..
Couleur
La couleur crée également une priorité. Par exemple, dans l'image Avant, vous verrez que les sous-titres de la zone marquée 4 dans l'image ci-dessous étaient initialement le même bleu foncé que les mots. Salut! Cela signifiait qu'il y avait moins de distinction entre les deux et il n'était pas aussi clair de savoir ce qui devait être lu en premier. En les ramenant à un beige, on leur attribue moins d'importance et il est plus évident qu'elles le sont moins dans la hiérarchie de l'information..
Couleur de fond
Avec la couleur de fond et la couleur en général, l’important n’est pas tant de savoir quelle couleur est quelque chose en particulier que de voir quelles couleurs sont en relation. Ainsi, par exemple, si tout est noir sur une page et qu'il y a un objet blanc, cet objet blanc va évidemment vous sauter dessus. Dans ce cas, nous mettons l'accent sur le contraste entre le jaune vif et le gris foncé. Donc, bien que la toute première chose sur la page que vous voyez puisse être le coffre-fort et les mots Faire un revenu passif, vous remarquerez probablement Un guide pour ensuite, et le Partie 1 | Partie 2 |… Navigation en second. C’est exprès, car je veux que l’utilisateur voie en premier une image visuelle et un titre afin de savoir ce qu’il regarde, puis je veux qu’ils voient la navigation principale afin qu’ils comprennent comment se déplacer sur le site..
Position
Enfin, la position dans la présentation influe également sur la perception des éléments. Comme vous l'avez probablement entendu dire, des études montrent que l'œil de l'utilisateur va de haut en bas à droite dans une certaine variation (j'ai vu les deux études dire que cela va de haut en gauche à droite puis de bas en gauche à bas à droite et alternativement va dans une sorte d'arc d'un coin à l'autre.) La chose importante ici est qu'avoir quelque chose de plus haut donne habituellement plus de priorité, et avoir quelque chose de plus laissé donne habituellement de plus de priorité.

Étape 4:

Je l'ai déjà dit, je le répète… Tout est question de pixels!

Dans cette image, vous verrez ce qui semble être un dégradé assez simple. En fait, trois gradients sont dessinés et trois lignes de 1 pixel sont utilisées. C'est assez subtil et ne fait sans doute pas autant de différence, mais à mon avis, chaque détail compte pour la fin..

Étape 5:

Quelqu'un dans les commentaires a posé des questions sur les styles de styles Web 2.0. Voici un effet simple dans lequel vous définissez un contour de 1 ou 2 pixels, puis un léger dégradé pour un arrière-plan. Si vous ne l'aviez pas déjà remarqué, vous allez commencer à comprendre que c'est un peu partout, peut-être un peu surutilisé, mais plutôt sympa quand même..

Étape 6:

Dans cette image, vous pouvez voir comment parfois, pendant le polissage, vous pouvez même modifier les informations réelles sur la page. Dans ce cas, j’ai décidé que même si c’était plus riche sur le plan infrastructurel avec tous les titres des différentes parties situées sous les sacs, il me semblait si compliqué que je ne pensais pas que c’était particulièrement instructif - même si cela reste quelque peu discutable. Alors, au lieu de cela, j’ai enlevé l’excès de brun sur le texte brun et l’ai remplacé par du jaune vif sur le gris foncé, ce qui fait ressortir le contraste..

Et voila!

Il y a donc mon premier tutoriel sur la conception Web. S'il vous plaît laissez-moi savoir dans les commentaires si cela est informatif. C'est difficile d'expliquer la conception Web! N'oubliez pas non plus que mon style de conception de sites Web est bien sûr mon goût, d'autant plus que je suis mon propre client dans 99% des projets que je réalise actuellement :-)

La prochaine fois que je concevrai un site Web, je prévois d'enregistrer le tout avec un programme de capture d'écran, puis de l'accélérer en quelques minutes. Vous pouvez donc vous attendre à ça! Je pense que ça va être plutôt cool, bien que je sois un peu nerveux car, comme tous les designers, certains jours, cela devient facile, et certains jours, c'est une ardoise vierge.

Quoi qu'il en soit, espérons que vous avez apprécié le tutoriel. S'il vous plaît donner un Digg si vous avez fait!

Échantillon PSD

Une petite remarque sur ce PSD, je n’ai étiqueté aucune des couches et ne les ai pas regroupées. C’est littéralement le PSD sur lequel j’ai construit le site que j’ai compressé pour que vous puissiez le parcourir. La conception et le contenu de la PSD sont fournis purement à des fins pédagogiques. Le copyright pour la conception et les illustrations appartient aux propriétaires respectifs. S'il vous plaît ne pas utiliser des éléments de la conception ailleurs.

Téléchargez le PSD pour ce tutoriel

Design et Illustration