Conception Web de haute qualité : exemples et astuces 2 (Pixel Perfect)

Il existe un moyen de savoir si quelqu'un a vraiment mis tout son cœur dans la conception d'un site Web. Parfois, ce sont les petits détails qui créent des miracles, des détails qui sont à peine perceptibles pour les autres. Par « pixel parfait », j'entends une attention particulière aux lignes, aux bords et aux traits de bordure. Plutôt que d’utiliser une seule ligne, ajoutez quelques détails supplémentaires. Le détail peut être un dégradé subtil ou une fine ligne de 1 pixel de large (utilisée pour représenter les ombres ou les reflets). Avec ces détails, votre design sera complètement différent. Certains designers sont particulièrement doués dans ce domaine : Collis Ta'eed, David Leggett et Wolfgang Bartelme.

Exemples de détails parfaits au pixel près
Appréciation des détails par Envato
Exemple 1 ci-dessous), la zone de contenu verte a une ligne verte plus brillante autour de son bord. Dans l'exemple 2, il y a une ombre légèrement dégradée sur le bord du bloc et un trait blanc d'un pixel sur le bord. Il s'agit d'une approche très intelligente, utilisant des ombres pour souligner les reflets. La zone verte derrière a un effet d'ombre et de lumière très doux et subtil, ce qui permet d'attirer l'attention sur les détails nets et nets de la zone blanche en dessous. Bien que ces pratiques ne donnent pas toujours à vos créations un aspect plus soigné, elles vous aident à donner à vos créations un sentiment de réalisme tridimensionnel. Les éléments de conception deviennent alors des joyaux incrustés sur la page, plutôt qu'un morceau de papier sans vie posé à plat dessus.

Détails sur Tutorial9.net
David Leggett a une grande compréhension de la façon de créer des barres supérieures d'un seul pixel. Son tutoriel9 récemment repensé est une collection d'excellentes techniques de pixellisation. Vous pouvez voir dans l'exemple 1 comment il a rendu l'étiquette de navigation plus texturée simplement en ajoutant une surbrillance de 1 pixel. L'exemple 2 utilise plus de techniques. L'ombre de l'icône de la caméra, l'ombre et la surbrillance de la zone blanche ci-dessous et la surbrillance de 1 pixel sur la barre de navigation.

Détails au pixel près sur les boutons et les séparateurs sur RedBrick Health
Ce magnifique menu de navigation, créé par Ryan Scherf, utilise des détails au pixel près pour améliorer le design Excellent exemple de qualité. Les boutons rouges ont une surbrillance de 1 pixel et les lignes de séparation entre les liens ont la même qualité et les mêmes détails. Comme vous pouvez le voir, il ne s'est pas contenté d'une simple ligne grise à diviser, Ryan a également ajouté une ligne de surbrillance de 1 pixel de large en dessous pour éviter que le design ne paraisse trop plat.

Les détails parfaits au niveau des pixels conviennent également au style Grunge : AvalonStar
Traduction : le style Grunge inclut "vieux", "rock psychédélique", "sale", etc. . Il comporte plusieurs niveaux de signification et peut être considéré comme un genre de l’art graphique.

L'exemple ci-dessous est un magnifique blog sur le thème AvalonStar : Distortion avec un superbe style grunge. Cependant, même dans un style grunge sale et ancien, l'utilisation d'une surbrillance de 1 pixel peut faire une grande différence. Dans l'exemple 1 ci-dessous, la zone brune au-dessus a une ombre dégradée et la zone verte en dessous a une ligne de surbrillance de 1 pixel en haut. La combinaison d'ombres et de lignes de 1 pixel donne à ces zones un aspect plus raffiné.

Conseils pour des détails parfaits
Pour atteindre la perfection dans cette technique, une pratique continue est particulièrement importante. Comme vous pouvez le constater, quelque chose d'aussi simple qu'une ligne de 1 pixel peut ajouter une sensation de profondeur vraiment intéressante à un design. Vous n'êtes même pas nécessairement obligé d'utiliser ces biseaux ou ces dégradés, prenez la peine de faire quelque chose qui est réellement placé au-dessus de quelque chose.

Ce doivent être des détails
Les petits détails sont la clé pour améliorer le sens du contenu.
Pensez aux problèmes au niveau des pixels
Les traits, les dégradés, les lignes, les ombres, etc. peuvent améliorer efficacement le design sans être trop large
Avant et après la comparaison
Veillez à comparer après avoir appliqué le. effet avec avant sans cet effet. Vous pouvez donc savoir quels changements ces détails ont apportés

Ce qui précède est le contenu de Conception Web de haute qualité : Exemples et techniques 2 (Perfection au niveau des pixels). Pour plus de contenu connexe, veuillez faire attention au PHP). Site chinois (www.php.cn) !