10 tendances de la conception Web à surveiller en 2018

Alors que 2017 s'achève, le moment est venu de réfléchir aux réalisations de l'année écoulée et de commencer à réfléchir aux concepts à venir.

En ce qui concerne les conceptions les plus récentes, les modifications apportées et même simplement les modifications de conception, quelques tendances distinctes commencent à apparaître comme les pionniers en 2018. Voici un aperçu de certaines des tendances en matière de conception de sites Web qui deviendront probablement populaires (et beaucoup d’entre elles). les concepts peuvent également être utilisés pour la conception d’impression).

1. Grilles asymétriques

L'âge de la symétrie parfaite est terminé. Bien que les conceptions d'écran partagé fussent une grande tendance en 2017, les contours visuels parfaits d'un demi-demi évoluent.

Les concepteurs divisent les éléments visuels à l’écran avec un motif de grille plus asymétrique.

Pour que ce concept fonctionne, il doit exister un équilibre distinct d'éléments afin qu'un côté du design ne soit pas trop puissant. Les éléments d'espace et de texte équilibrent souvent les visuels pour attirer l'attention sur le dessin.

Et tout cela vient ensemble parce que les dessins vivent toujours sur une grille, ce qui permet de tout organiser. (Les éléments de la conception du Club of the Waves, ci-dessus, sont organisés de telle manière que la conception asymétrique est si équilibrée.)

2. Couleur plus brillante

Les couleurs vives semblent être la tendance en matière de design qui veut rester. C'était une grande partie de la conception à plat et une importance égale pour la conception de matériel, et les deux concepts font toujours partie de beaucoup de projets.

Même en l'absence de caractéristiques de plat ou de matériau, les couleurs vives attirent l'œil et peuvent attirer un utilisateur dans un dessin. Les choix de couleurs vives et audacieuses ont une sensation de fraîcheur et attirent les utilisateurs plus jeunes.

Ces choix de couleurs peuvent également créer une esthétique inattendue et créer une ambiance plus funky pour les sites Web et les entreprises qui pourraient ne pas être connues pour ce ton. Ford, ci-dessus, ne vient pas à l'esprit en tant qu'entreprise moderne et branchée, mais le design du microsite Make it Drivable exhale ces émotions.

3. Éléments collants inférieurs

Toutes ces minuscules annonces au bas des applications et des sites Web mobiles se retrouvent également dans la conception de postes de travail et de tablettes. Et ce ne sont pas seulement les annonces dans cet emplacement en bas de l'écran, les boîtes de discussion, les fenêtres contextuelles, les notifications et même les éléments de navigation collent au bas de l'écran.

Cet emplacement moins intrusif est une zone de visionnement privilégiée et l'utilisation du mobile a permis de former les utilisateurs à l'acceptation de ces types d'emplacements.

Et si ça marche. Une annonce au bas de l'écran, telle que celle des blogs Burlap et Blue ci-dessus, semble tellement moins gênante (et moins nette à votre visage) qu'une bannière avec plaque signalétique. L'utilisateur le voit toujours, mais cela ne masque pas le contenu.

4. Recherche vocale et en langage naturel

L'avenir de la conception Web n'est pas visuel à 100%. Une partie sera audible.

De concevoir des interfaces qui peuvent? Entendre? et comprendre les commandes vocales pour intégrer des termes de recherche qui imitent le langage naturel; intégrer un monde de voix et de langage sera impératif pour les projets de conception de sites Web.

Et même si certaines de ces autres tendances pourraient ne pas être encore plus populaires fin 2018, la recherche vocale et en langage naturel ne fera que croître en termes d'utilisation et de popularité. Vous devez commencer à planifier dès maintenant afin de pouvoir l'intégrer facilement dans vos projets futurs.

5. Formes fluides

Bien que les formes et la géométrie poly plus nettes fussent grandes en 2017, les formes plus douces avec un aspect plus fluide et même les animations gagnent en popularité.

Les lignes plus lisses sont une progression naturelle de la tendance des polygones. Lorsque Design Shack a présenté la tendance des formes poly plus tôt cette année, la description se lisait comme suit: «L’une des meilleures parties de cette tendance polyvalente est que chacune de ces conceptions est si différente." Les polygones sont généralement des formes bidimensionnelles plates, bien que, dans les projets de sites Web, certains polygones se déplacent et semblent avoir davantage de caractéristiques en 3D.

La même caractéristique tient pour des formes plus fluides; La principale différence réside dans le fait qu'au lieu de lignes coupantes se croisant, chaque forme est constituée de courbes lisses qui traversent le dessin.

6. Animation subtile

De petites animations simples peuvent surprendre et ravir les utilisateurs. Ils peuvent également aider à fournir des informations et guider l'utilisateur à travers un engagement plus actif dans la conception.

Mais une animation subtile ne consiste pas en une fonctionnalité de chargement qui cache le temps de retard, mais en un mouvement dans la conception elle-même.

Des états de vol stationnaire aux illustrations cinématographiques en passant par les illustrations qui semblent prendre vie, les mouvements subtils peuvent être un excellent outil pour aider à créer un engagement des utilisateurs. Pour tirer le meilleur parti d’une animation subtile dans la conception, tenez-vous-en à quelques règles de base: choisissez une seule animation? Un tour? et respectez-le, l’animation doit être réaliste et imiter les lois de la physique, ne forcez pas le son et ne cliquez pas sur les actions pour vous déplacer et assurez-vous que l’animation se déroule sur une boucle fiable afin que les utilisateurs sachent quand elle est terminée. (C’est un signe qu’ils peuvent passer à autre chose.)

7. Images SVG

Les graphiques vectoriels évolutifs deviennent de plus en plus courants en tant que type d’image de facteur pour les sites Web. Les SVG sont des images vectorielles légères qui garantissent que les graphiques, les icônes et les logos ont une apparence parfaite, quelle que soit la taille ou la résolution de l’écran.

Tous les écrans haute résolution contribuent à la montée en puissance de ce format de fichier.

Les SVG fonctionnent également bien avec les expériences d’images fixes et multimédias, notamment les images 3D, les cinemagraphes, les animations de logo et la photographie à 360 degrés.

8. Bureau à écran divisé, empilement de téléphone portable

Les modèles de conception à écrans partagés gagnent en popularité. Même les styles les plus parfaitement divisés.

Ces conceptions sont si populaires parce qu'elles offrent une expérience inoubliable sur les écrans de bureau et sur les appareils mobiles, car le contenu divisé s'affiche également côte à côte et empilé. (De cette manière, les utilisateurs bénéficient d’une expérience cohérente mais spécifique à chaque appareil.)

Alors que de nombreux modèles à écran divisé étaient réellement divisés, de nombreux concepteurs optent pour un écran partagé, plus un calque supérieur supplémentaire avec du texte ou une image de marque pour fournir un effet plus profond.

9. Plus d'animations de défilement

Les animations de défilement de parallaxe sont si populaires que certains concepteurs commencent à les craindre. Mais cela ne signifie pas que vous devez abandonner complètement les animations de défilement.

Il y a beaucoup d'autres façons d'utiliser le défilement pour encourager l'engagement de l'utilisateur. (Et vous pouvez aussi mélanger un peu de parallaxe; ne vous en faites pas.)

Doggo for Hire, ci-dessus, utilise une animation de défilement qui dépose des confettis sur le chien représenté par le défilement des utilisateurs. Le parchemin détermine la rapidité avec laquelle les confettis tombent (et même l'expression sur le visage du chien). Faites défiler rapidement pour une expérience de style vidéo; faites défiler plus lentement pour prendre tout le contenu sur le côté gauche de l'écran.

Vous cherchez plus d'inspiration de défilement-action? Trouvez le ici.

10. Un espace blanc sans minimalisme

Les concepteurs aiment les espaces blancs. (Beaucoup d’entre nous aiment aussi le minimalisme? Même si les clients l’aiment moins.)

Le compromis consiste à concevoir avec beaucoup d’espace blanc, mais avec une sensation beaucoup moins minimaliste. En ajoutant plus de couleurs et d'éléments de conception à une conception avec beaucoup d'espace, elle peut sembler plus complète.

Design Calendar fait un excellent travail en utilisant l'espace et en le garnissant de contenu et d'éléments en même temps (assurez-vous de cliquer sur l'exemple et de le faire défiler pour le voir en action) afin de laisser suffisamment d'espace aux éléments surdimensionnés de respirer.

Les concepteurs travaillent également avec les espaces blancs de nombreuses autres manières. Jetez un coup d'œil sur nombre des autres tendances susmentionnées et sur le nombre d'espaces blancs qui y joue également un rôle.

Conclusion

Ce début d'année vous incite-t-il à essayer quelque chose de nouveau? Sera-ce une de vos résolutions?

Veillez simplement à utiliser les tendances de conception avec soin. Parfois, les meilleures idées peuvent devenir obsolètes rapidement. D'autres se retrouvent avec une sensation plus intemporelle; les interfaces vocales sont probablement là pour rester pendant un certain temps. Essayez-les, modifiez un dessin existant et amusez-vous. C’est la raison pour laquelle jouer avec les tendances du design.