Essential Design Trends, octobre 2016
Comme dit le proverbe: Tout ce qui est vieux est nouveau. C'est vrai dans la conception à coup sûr. Ce mois-ci, certaines des plus grandes tendances en matière de conception de sites Web ne sont pas nouvelles du tout. Les designers réinventent les styles de typographie de la vieille école, reviennent à la grille et repensent les messages sur la page d'accueil.
C'est une combinaison intéressante d'éléments visuels que nous avons vus dans le passé et que nous verrons probablement à l'avenir. Voici ce qui est tendance dans la conception ce mois-ci:
1. Typographie old school
De plus en plus de designers adoptent une approche classique pour afficher la typographie. Les empattements sans plis ultra-minces ou condensés sont disparus, et les styles de type plus traditionnels y sont. Les empattements anciens, modernes et de transition constituent le nouveau style d'affichage.
C'est un peu surprenant, en fait. Pendant des années. La "règle" a été d'utiliser des sans empattements pour améliorer la lisibilité et les concepteurs l'ont fait, souvent sans poser de questions. La nouvelle utilisation des empattements pour les gros caractères - et même certains plus petits types - est rafraîchissante et assez lisible. Les designs vivent souvent dans un espace minimal, de sorte que le type ne doit pas rivaliser pour attirer l'attention et que les paires se concentrent sur les caractères sombres sur un fond clair. (Toutes les choses qui facilitent la lisibilité.)
Vous ne savez pas grand chose sur ces styles de caractères? Voici un bref aperçu de chacun de ces "nouveaux" empattements "old school":
- Old-style: le lettrage a une ambiance de vieux monde qui se dégage de certains styles de lettres et gothiques des premiers âges de l'impression. Les formes de lettre ont souvent de petits empattements (ces petits traits à la fin des cycles plus longs) et une forme arrondie. RSQ, ci-dessous, est une vitrine parfaite de la typographie à l'ancienne.
- Moderne: Ce style de lettrage est assez courant dans la conception imprimée, comme les journaux et les magazines, mais commence tout juste à faire son chemin dans les projets Web. Les empattements modernes ont des largeurs de trait épaisses et fines alternées dans chaque forme de lettre, parfois avec une grande quantité de contraste. Ink + Volt, ci-dessous, utilise un magnifique serif moderne. Mais notez également comment le lettrage est utilisé. Le type se trouve à l'intérieur d'une case blanche afin que les parties minces de chaque lettre ne soient pas perdues dans l'arrière-plan de la vidéo, ce qui limiterait la lisibilité. C'est la solution parfaite pour utiliser un serif moderne.
- Transitional: Ces lettres ressemblent beaucoup aux empattements modernes avec une grande différence: les lettres ont des largeurs de trait uniformes. Cela rend les empattements traditionnels plus faciles à utiliser car ils peuvent être plus lisibles dans des situations de conception plus complexes.
Toutes les typographies anciennes ne relèvent pas de la catégorie des serif. Certains des styles old-school qui surgissent ne font que nous rappeler une autre époque, telle que celle utilisée par The Frontend Guide, ci-dessous. Le thème funky, incliné, de la fin des années 1970 et du début des années 1980 vous amène vraiment à un autre endroit et à une autre époque. (Et c'est totalement old-school.)
2. Grilles définies
Parfois, vous pouvez voir la grille, parfois vous ne pouvez pas. Dans les deux cas, une grille solide est la base d'un design propre, organisé et facile à regarder.
Des grilles plus définies font leur grand retour. Cela peut être en partie dû à l'influence de Material Design, qui comporte de nombreux éléments dans des colonnes et des lignes bien définies, et pourrait également être la facilité de déplacer et de réorganiser des éléments dans des frameworks réactifs.
Dans les deux cas, les grilles définies peuvent être incroyables pour une grande variété de projets sur presque tous les écrans. Ce qui est bien d’utiliser une grille définie, c’est que cela rend la vie vraiment facile pour le concepteur. Une fois que vous maîtrisez le travail dans une grille, les options de placement, de dimensionnement et de conception se présentent clairement à vous.
L'astuce pour utiliser des grilles définies n'est pas d'avoir l'air trop structurée ou trop maillée. Pour de nombreux concepteurs, cela signifie qu'il faut changer de taille sur différents "écrans", par exemple avoir une image de héros pleine largeur sur une grille d'éléments. La page "Decade" de Seagulls élégante, ci-dessous fait cela bien. Le site Web présente également des maillages subtils sur la page d’accueil de l’image, qui est obscure et mystérieuse, ce qui vous conduit dans les pages de grille au thème mystère. High Tide, ci-dessous, fait quelque chose de similaire avec une superbe vidéo d'introduction au-dessus des blocs de la grille.
Mais une grille peut être bien définie et un peu moins encadrée. Zumtobel, ci-dessous, utilise les lettres de son nom pour créer des blocs de grille pour des informations produit spécifiques. Ce n’est qu’en vol stationnaire que vous voyez les cases de la taille parfaite, même si les emplacements sont idéalement espacés horizontalement et verticalement dans une grille propre.
Plus vous pensez aux grilles, plus vous les verrez à travers les yeux du designer qui les a créées. Vous pouvez commencer avec certaines des grilles Web courantes si vous n'êtes pas à l'aise avec cette idée ou si vous ne créez pas la vôtre. L'astuce est que vous devez utiliser la grille systématiquement pour un réel succès visuel.
3. Messagerie minimale au dessus du "fold"
La question du jour est la suivante: y a-t-il suffisamment d'informations au-dessus du parchemin pour vous intéresser suffisamment pour continuer à regarder le site? Il peut être difficile de répondre. Mais de nombreux concepteurs misent sur l'idée que vous cliquerez ou défilerez, même s'il n'y a qu'un seul mot à l'écran.
Avec d’autres éléments visuels tels que la vidéo, les curseurs de défilement ou les affichages de produits attrayants, les utilisateurs peuvent faire exactement cela. Mais cela peut être un pari, surtout avec des conceptions qui n'incluent pas de menu de navigation avec un minimum de messages.
Il y a ensuite ceci: Beaucoup d'utilisateurs entrent sur des sites Web à travers des pages autres que la page d'accueil, alors pourquoi ne pas prendre un risque là-bas? Regardez les données et les clics, voyez ce qui se passe.
C'est l'une de ces tendances qui sera intéressante à regarder. Il pourrait disparaître presque aussi vite qu'il est apparu, mais de nombreux sites utilisent ce modèle.
Conclusion
Il est très amusant de voir les tendances du design revenir à la mode. Ce qui est intéressant à propos de deux de ces tendances - la typographie à l'ancienne et les grilles définies - est qu'elles sont très utilisables dans un certain nombre de styles de conception.
Quelles tendances aimez-vous (ou détestez-vous) en ce moment? J'adorerais voir certains des sites Web qui vous intéressent. Laisse moi un lien sur Twitter ; J'adorerais avoir de vos nouvelles.