Essential Design Trends, décembre 2016
Avez-vous déjà remarqué que certains éléments de conception ne cessent de surgir? Même ces minuscules détails qui semblent quelque peu insignifiants peuvent être des indicateurs des tendances de la conception. Cela est particulièrement vrai avec les éléments de la revue de ce mois-ci.
Chacune de ces tendances-bords blancs encadrant une conception de site Web, des cinemagraphs et des minuscules animations de chargement - sont des détails apparemment simples qui améliorent l'expérience visuelle pour les utilisateurs.
Voici ce qui est tendance dans la conception ce mois-ci:
1) bords blancs
Plus de conceptions Web utilisent des bords blancs ou un cadrage autour du périmètre de la conception dans le navigateur Web. C'est une nouvelle tournure sur une vieille idée quand plus de sites Web ont été construits à certaines tailles et que le cadrage a été utilisé pour des largeurs de navigateur inhabituelles.
C'est quelque chose qui s'est évanoui au fur et à mesure que de plus en plus de concepteurs optaient pour des designs réactifs sur toute la largeur.
La nouvelle tournure avec le cadrage est intéressante et constitue un bon moyen de créer une toile pour le design. La plupart des sites utilisant cette tendance incluent un contour commun, mais pas obligatoire, autour de la conception. Il est large de quelques pixels et est généralement placé sur trois ou quatre côtés du dessin. (Certains choisissent de laisser le cadre au bas du dessin pour encourager le défilement.)
Ce qui est bien avec le bord blanc, c’est que le dessin est net, avec des lignes blanches qui permettent de choisir les couleurs les plus fortes, d’attirer l’œil du bord de l’écran vers d’autres éléments légers (zones de texte ou appels à l’action). edging peut aider à créer une toile de fond pour le défilement de parallaxe ou d'autres effets animés.
Camden Town Brewery le fait exceptionnellement bien. Le cadrage blanc remplit les éléments de la conception pour créer de la profondeur et de la mise au point pour l'utilisateur. La séparation des blancs distingue chaque nouvelle section de contenu sur l'écran et contribue à l'organisation globale de la conception. (De plus, les accents blancs font ressortir la forte palette de couleurs rouge et noire pour empêcher la combinaison de se sentir trop écrasante.)
2) Cinemagraphs
Les cinémogrammes sont des photos avec un élément de mouvement. Cela peut être n'importe quoi à partir d'une photo d'une personne qui cligne des yeux sur le mouvement subtil des nuages dans le ciel où rien d'autre ne bouge. Bien que les utilisations les plus courantes de la tendance du design semblent toujours être dans les publicités et les médias sociaux, les concepteurs Web commencent également à intégrer cette technique de "photo en direct".
Cela fonctionne parce que les utilisateurs sont intrigués par le mouvement. Il est efficace pour la plupart des raisons pour lesquelles la vidéo est une bonne option pour attirer l'attention d'un utilisateur. Le mouvement et l'action sont engageants. C'est intéressant. C'est réel
Quand il s'agit de travailler avec des cinemagraphs, le bonus est que vous pouvez créer un design avec un mouvement mais sans une partie de la production élevée qui accompagne un projet vidéo.
L'astuce pour faire fonctionner les cinémagraphes est d'enraciner le mouvement dans la réalité. Même si la scène est plus imaginée, telle que Monochrome Paris , les lois de la physique devraient s'appliquer au mouvement sur l'écran. L'eau devrait couler en aval, par exemple, la gravité devrait être une force dans la façon dont le mouvement se produit.
Le mouvement doit également être simple et subtil. Trop de mouvement et une vidéo pourraient être une meilleure option. Ce qui attire les utilisateurs dans un cinémagraphe est cet élément de surprise. Ce qui ressemble à une photo fixe dans une image de héros contient en réalité quelque chose. Ce petit écart aidera à attirer les gens, à les garder engagés dans la conception plus longtemps et, espérons-le, à créer un site Web.
3) Petites animations de chargement
Les temps de chargement sont un gros problème. Mais vous ne pouvez pas toujours tenir compte de la vitesse du réseau sur lequel se trouve un utilisateur; c'est là que de minuscules animations de chargement peuvent devenir un gros problème.
Ce qui est différent avec la petite tendance à l’animation de chargement, c’est que parfois on la voit, parfois on ne conçoit pas d’élément. Quoi qu’il en soit, l’équipe de conception a pris des précautions particulières pour s’assurer que chaque utilisateur accède au site Web avec une expérience positive.
Ces minuscules animations sont identifiables par le fait qu'elles ne font pas vraiment partie de l'expérience utilisateur qui compte pour l'objectif général du site Web. C'est un petit élément simple qui attire votre attention pendant une seconde, tandis que la conception du site principal est assurée.
Ce qui est cool avec la tendance, c'est que ces minuscules animations de chargement sont vraiment minuscules, de la taille du visuel à l'action sur l'écran, il n'y a pas grand chose à voir, mais ce qu'il y a là est absolument délicieux.
Voici trois excellents exemples:
- Hannah Purmort l'animation de chargement est un trait simple dans la combinaison de couleurs opposée de l'écran principal. Le trait traverse également le motif dans l’effet de défilement.
- Susa Ventures dispose d'une petite icône avec une barre de chargement minuscule. Celui-ci attire votre attention parce que le minuscule gorille est visuellement intéressant et vous rend curieux à propos du contenu du site.
- FPG utilise une esquisse qui semble être dessinée à l'écran lorsque le reste de la page d'accueil est chargé. La seule indication que c'est une animation de chargement est que le reste de l'écran est beaucoup plus élaboré une fois chargé avec la vidéo en cours d'exécution et encore plus de croquis. L'effet est transparent et se termine presque avant que l'utilisateur se rende compte qu'il a commencé.
Conclusion
Les détails sont au cœur de tout bon design. Il est important de se rappeler que la conception (et la comptabilisation) de choses que tous les utilisateurs ne remarqueront pas est importante. C'est ainsi que chacune de ces tendances se connecte à travers de petits éléments de conception qui ne font pas partie de l'esthétique générale.
Ces éléments minuscules peuvent être la chose qui distingue vraiment votre site Web pour un utilisateur. Cela pourrait être l'élément de plaisir qui ramène quelqu'un à votre conception. Les détails peuvent faire la différence entre le succès et l'échec.
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.