Principes de conception pour les développeurs: processus et conseils CSS pour une meilleure conception Web

Il est techniquement vrai que tout le monde peut cuisiner. Mais il y a une différence entre vraiment savoir comment cuisiner de délicieux plats et jeter plusieurs ingrédients dans le pot pour tenter votre chance. Il en va de même pour le développement Web. Vous pouvez comprendre les "ingrédients" - background-color , .heading-1 - mais tout le monde ne sait pas comment convertir ces ingrédients en sites Web beaux et faciles à utiliser.

Chaque fois que vous utilisez HTML et CSS, vous concevez - donnant une forme et une structure de contenu pour que les autres puissent comprendre. Les gens conçoivent depuis des centaines d'années et ont développé des principes dans le processus qui s'appliquent également aux interfaces numériques d'aujourd'hui. Ces principes se reflètent dans trois domaines clés: comment le texte est affiché (composition), comment le contenu est organisé (espacement) et comment l'ajout (couleur) personnalisé. Explorons comment utiliser ces «ingrédients» de conception Web du point de vue d'un développeur, tirez parti des propriétés et guides CSS pour éliminer les ingrédients de la devinettes dans la conception Web.

Table des matières

• composition
• espacement
• couleur

composition

Les sites Web faciles à lire ne sont pas un accident. En fait, Taimur Abdaal a écrit un article sur ce sujet, qui contient beaucoup de conseils de développeurs traitant de la typographie. Nous nous concentrerons sur deux principes de conception de base qui peuvent vous aider à afficher du texte dans un plus agréable et plus facile à lire: la répétition et la hiérarchie.

Utilisez la duplication pour atteindre la cohérence et la maintenabilité

En raison de l'importance de la réutilisabilité des logiciels, les répétitions apparaissent tout naturellement sur le réseau. Par exemple, la classe CSS vous permet de définir un style spécifique pour le texte, puis de le réutiliser sur tout le site Web. Il en résulte des styles de texte en double et cohérents de contenu similaire, aidant les utilisateurs à parcourir le site Web.

Par exemple, si vous travaillez sur le style d'un nouveau paragraphe, déterminez d'abord s'il existe un contenu existant avec un style similaire et essayez d'utiliser la même classe CSS. Sinon, vous pouvez créer une nouvelle classe avec un nom commun qui peut être réutilisé ailleurs sur le site Web. Envisagez d'utiliser .paragraph--emphasize au lieu du .footer\_\_paragraph--emphasize ou utilisez .heading-1 au lieu de .hero\_\_site-title . Les premiers exemples peuvent être utilisés sur votre site Web, tandis que ce dernier est limité à des composants spécifiques. Vous pouvez même ajouter un préfixe, comme text- , pour indiquer que la classe est spécifiquement utilisée pour les styles de texte. Cette approche réduira la taille et la complexité du fichier CSS tout en facilitant la mise à jour des styles mondiaux à l'avenir.

Dans le design, il existe d'innombrables façons d'expérimenter avec les styles. Les concepteurs sont parfois accro aux styles de police, créant de nombreux styles similaires légèrement différents. Cependant, dans le code, il est très utile de limiter le minimum des styles de texte. Les développeurs devraient exhorter les concepteurs à combiner des styles similaires pour réduire la quantité de code et améliorer la réutilisation et la cohérence.

La hiérarchie fournit une commande visuelle claire pour le contenu

La hiérarchie est quelque chose que vous ne remarquerez vraiment que lorsqu'elle n'existe pas. Dans la composition, la hiérarchie fait référence aux différences visuelles entre divers textes. C'est la différence entre les titres, les paragraphes, les liens et autres styles de texte. Cette différence est obtenue en sélectionnant différentes polices, couleurs, tailles, cas et autres propriétés pour chaque type de contenu texte. Une bonne hiérarchie facilite les informations complexes et guide les utilisateurs à parcourir votre contenu.

HTML lui-même fournit de la hiérarchie (par exemple, la taille de la police du titre est de<h1></h1> arriver<h6></h6> diminuant progressivement), mais CSS ouvre la porte à une plus grande créativité. Par<h></h> Les balises donnent des tailles de police plus grandes, et vous pouvez rapidement créer des différences dimensionnelles plus grandes entre les niveaux de titre - formant ainsi plus de hiérarchies. Pour créer plus de modifications, vous pouvez également modifier les propriétés de couleur, text-align et text-transform .

Instructions pour la sélection des polices

========================================================================================================================. ========================================================================================================================. ========================================================================================================================. ========================================================================================================================.

====================================================================. ====================================================================. ====================================================================. ====================================================================. ====================================================================. ====================================================================. ====================================================================. ====================================================================.

En ce qui concerne la typographie, nous devons nous assurer qu'il est aussi facile à lire que possible. Le facteur global avec la plus grande lisibilité est la police que vous choisissez - c'est un sujet énorme. De nombreux facteurs déterminent la «lisibilité» de la police. Certaines polices sont conçues spécifiquement pour les titres ou les courtes lignes de texte; Ceux-ci sont appelés polices "Affichage", et elles sont souvent plus personnelles que les polices conçues pour le texte. Les décorations et les bizarreries uniques le rendent plus difficile à lire lorsqu'ils affichent des polices en petites tailles et dans le cadre de grands paragraphes. En règle générale, une police plus intuitive doit être utilisée pour le texte et afficher uniquement les polices pour les titres.

Si vous êtes en panne et que vous avez besoin d'une police lisible, essayez les polices Google. Ajoutez un morceau de texte au champ d'aperçu et redimensionnez-le à la taille approximative affichée sur votre site. Vous pouvez ensuite affiner les résultats aux polices Serif ou Sans Serif et scanner la liste des polices pour les polices faciles à lire. Roboto, Noto Sans, Merriweather et PT Serif sont tous des options très lisibles.

Propriétés CSS pour améliorer la lisibilité

• La taille de la police du paragraphe principal doit être comprise entre 16px et 18px (1EM et 1.25EM), selon la police que vous choisissez.

• Définissez manuellement la hauteur de ligne (l'espace vertical entre deux lignes de texte) pour rendre votre texte moins encombré et plus facile à lire. Pour les titres, commencez par line-height: 1.25 (c'est-à-dire 1,25 fois la taille de la police), et le paragraphe est d'au moins 1,5 (mais pas plus de 1,9), et ajustez au besoin. Plus la ligne de texte est longue, plus la ligne doit être grande. Pour maintenir la flexibilité du texte, évitez d'ajouter des unités à la hauteur des lignes. Sans unités, la hauteur de ligne que vous définissez sera proportionnelle à la taille de votre police. Par exemple, line-height: 1.5 et font-size: 18px fera de la hauteur de votre ligne 27 pixels. Si vous modifiez la taille de la police en font-size: 16px sur un écran plus petit, la hauteur de ligne calculée changera automatiquement à 24 pixels.

• Notez combien de caractères sont contenus dans la ligne de texte, l'objectif étant de 45 à 75 caractères (y compris la ponctuation et les espaces). Cela réduit la fatigue de la lecture des utilisateurs en restreignant les mouvements des yeux et de la tête pour suivre les lignes de texte. En raison de la variabilité du réseau, il est impossible de contrôler la longueur de la ligne, mais vous pouvez utiliser les valeurs et les points d'arrêt max-width pour empêcher les lignes de texte de devenir trop longues. D'une manière générale, plus la ligne de texte est courte, plus la vitesse de balayage est rapide. Et ne vous inquiétez pas trop du calcul du nombre de caractères par ligne. Après avoir terminé plusieurs fois, vous vous sentirez sur ce qui a l'air bien.

espacement

Après avoir affiché la disposition, vous pouvez prendre du recul et vérifier la disposition ou l'espacement du contenu. Le mouvement et la proximité sont deux principes de conception liés à l'espacement.

Le mouvement concerne le processus de contenu

L'exercice est la façon dont vos yeux traversent une page ou le flux de la page. Vous pouvez utiliser le mouvement pour guider la vue de l'utilisateur, raconter une histoire, indiquer les principaux éléments d'action ou les encourager à faire défiler. Cela se fait en créant du contenu dans chaque composant, puis en organisant ces composants pour former une disposition de page. En faisant attention à la façon dont vos yeux traversent le contenu, vous pouvez aider les utilisateurs à savoir où chercher lors de la numérisation de la page.

Contrairement aux livres (qui ont souvent des structures très linéaires), les sites Web peuvent être plus créatifs dans leur disposition - de manière innombrable. Il est important de s'assurer que vous avez un objectif sur la façon de disposer votre contenu et de le faire disposer d'une manière qui guide les utilisateurs à travers votre contenu aussi facilement que possible.

Considérez les trois exemples ci-dessus. Lequel est le plus facile à comprendre? L'arrangement à gauche déplace votre vue de l'écran vers la gauche en raison de la position de l'image, ce qui rend difficile la recherche du bouton. Dans l'option intermédiaire, il est facile d'ignorer le titre car l'image est trop grande par rapport au titre. À droite, le titre attire d'abord votre attention et l'image est construite pour pointer vers l'élément d'action principale, le bouton.

Les blancs sont des outils utiles pour créer des mouvements puissants, mais ils sont faciles à utiliser trop ou trop peu. Pensez à la façon dont vous l'utilisez pour guider les yeux de l'utilisateur et diviser votre contenu. S'il est utilisé correctement, l'utilisateur ne remarquera pas le blanc lui-même, mais sera en mesure de mieux se concentrer sur ce que vous présentez. Par exemple, vous pouvez utiliser des blancs pour séparer le contenu (plutôt que des boîtes colorées), ce qui entraînera une disposition moins encombrée.

Proximité pour établir des relations

Lorsque les objets se rapprochent, ils sont perçus comme pertinents. En contrôlant l'espacement autour des éléments, vous pouvez faire allusion à la relation entre eux. La création d'un système d'espacement pour aider à renforcer la cohérence par répétition et éviter d'utiliser des nombres aléatoires peut être utile. Ce système est basé sur la taille de la police du navigateur par défaut (1REM ou 16PX) et utilise différentes valeurs couvrant la plupart des scénarios:

• 0,25rem (4px)
• 0,5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

Vous pouvez utiliser des variables SASS ou CSS pour maintenir ces valeurs cohérentes tout au long de votre projet. Le système peut ressembler à ceci, mais utilisez tout ce que vous vous sentez à l'aise, car le nom de choses est difficile:

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

La couleur transmet la personnalité et attire l'attention

La couleur affecte grandement la personnalité du site Web. S'il est utilisé correctement, il rendra la page pleine de vitalité et d'émotion; S'il est mal utilisé, il distrait du contenu, ou, pire, le rendra inaccessible. La couleur est étroitement liée à la plupart des principes de conception. Il peut être utilisé pour créer un mouvement en guidant la ligne de vue de l'utilisateur et peut être utilisé pour mettre l'accent en attirant l'attention sur les éléments d'action les plus importants.

Instructions pour la sélection des couleurs

Avec la couleur, il peut être difficile de savoir par où commencer. Pour vous aider, vous pouvez utiliser un processus en quatre étapes pour guider votre sélection de couleurs et créer une palette pour votre site Web.

Étape 1: Comprenez vos émotions

Avant de choisir une couleur, vous devez comprendre le ton ou l'attitude de votre site Web et de votre marque. Consultez votre contenu et décidez de ce que vous essayez de transmettre. Est-ce amusant, informatif, rétro, fort, sombre? Généralement, vous pouvez résumer le ton d'un site Web en plusieurs adjectifs. Par exemple, vous pouvez résumer le North Face comme aventureux et robuste, tandis qu'Apple est minimaliste et beau.

Étape 2: Trouvez votre couleur principale

N'oubliez pas vos émotions et essayez d'imaginer une couleur qui la représente. Commencez par la saturation de la couleur (intensité de la couleur) et de la luminosité (le degré de proximité de la couleur avec le blanc ou le noir). Si votre humeur est optimiste ou magnifique, des couleurs plus légères (plus saturées) peuvent être les meilleures. Si vos émotions sont graves ou implicites, les couleurs plus sombres (pas trop saturées) sont meilleures.

Ensuite, choisissez une teinte. Hue fait référence à ce que la plupart des gens considèrent comme une couleur - où elle tombe dans la rotation de la roue chromatique? La teinte de couleur lui donne le plus grand sens. Les gens ont tendance à associer les teintes à certaines idées. Par exemple, le rouge est souvent associé au pouvoir ou au danger, et le vert est associé à l'argent ou à la nature. Il peut être utile de consulter des sites ou des marques similaires pour comprendre les couleurs qu'ils utilisent - bien que vous n'ayez pas besoin de suivre leur leadership. N'ayez pas peur d'essayer!

Étape 3: Ajouter les couleurs auxiliaires

Parfois, deux ou trois couleurs principales sont nécessaires, mais ce n'est pas nécessaire. Pensez à différentes marques de couleurs. Certains utilisent une seule couleur, tandis que d'autres ont une couleur primaire et une ou deux couleurs auxiliaires. Coca-Cola utilise sa couleur rouge unique. Ikea est principalement bleu avec du jaune. La marée est orange avec du bleu et du jaune. Selon l'humeur de votre site Web, vous pourriez avoir besoin de plusieurs couleurs. Essayez d'utiliser des outils tels que Adobe Color ou Recolaors, qui vous permettent tous deux d'ajouter des couleurs principales, puis d'essayer différentes relations de couleurs, telles que des couleurs ou des monochromes complémentaires, pour voir rapidement si quelque chose fonctionne bien.

Étape 4: Développez votre palette de couleurs

Maintenant que vous avez rétréci et trouvé vos couleurs principales, il est temps d'étendre votre gamme avec une palette qui fournit une polyvalence et des contraintes pour vos projets - une méthode que j'ai trouvée utile. Les tons et les ombres sont l'astuce ici. Les nuances sont faites en mélangeant votre couleur principale avec du blanc, et les nuances sont fabriquées en mélangeant avec du noir. Vous pouvez rapidement créer un système bien organisé en utilisant la fonction de couleur SASS:

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

Pour perfectionner votre palette, vous aurez également besoin de plusieurs couleurs, comme le blanc et le noir. Essayez de créer un "noir riche" avec des nuances sombres, presque noires de votre couleur principale et à l'autre extrémité du spectre, sélectionnez quelques gris clairs colorés avec votre couleur principale. La coloration du blanc et du noir ajoutera plus de personnalité à votre page et aidera à créer un aspect et une sensation cohérents.

Enfin et surtout, si vous avez affaire à des produits interactifs, vous devez ajouter des couleurs pour réussir, avertissement et statut d'erreur. Habituellement, le vert, le jaune et le rouge conviennent à ceux-ci, mais considérez comment ajuster la teinte pour le faire mieux adapter votre palette. Par exemple, si votre humeur est amicale et que votre couleur de base est verte, vous devrez peut-être réduire la saturation de la mauvaise couleur d'état pour que le rouge se sente moins négatif.

Vous pouvez le faire en utilisant la fonction de couleur Sass mix en fournissant votre couleur de base, la couleur d'erreur par défaut et le pourcentage de couleur de base que vous souhaitez mélanger avec la mauvaise couleur. L'ajout de la fonction desaturate aide à réduire le ton de la couleur:

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

En ce qui concerne le réseau, il y a un principe de couleur auquel vous devez prêter une attention particulière: contraste. C'est ce que nous présenterons ensuite.

Contraste

Le contraste des couleurs - la différence de saturation, de luminosité et de teinte entre les deux couleurs - est un principe de conception important qui garantit que le réseau est accessible aux personnes à faible vision ou à la cécité couleur. En veillant à ce qu'il y ait suffisamment de contraste entre votre texte et tout arrière-plan sur son site Web, il améliorera tous les utilisateurs avec une vision normale d'accès. Lorsque vous consultez l'accessibilité, assurez-vous de suivre le guide de contraste des couleurs fourni dans le Guide d'accessibilité du contenu Web du W3C (WCAG). Il existe un certain nombre d'outils pour vous aider à suivre ces directives, y compris le panneau de contrôle dans Chrome Development Tools.

Maintenant, il est temps de mettre ces principes en pratique! Vous pouvez utiliser ces processus et conseils CSS pour aider à éliminer les éléments de devinettes dans votre conception et créer de meilleures solutions. Commencez par ce que vous connaissez, et finalement, les principes de conception mentionnés ici deviendront une seconde nature pour vous.

Si vous cherchez des conseils plus pratiques, Adam Wathan et Steve Schoger ont écrit quelques articles sur leurs conseils préférés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!