Tendances modernes de conception de sites Web. Utilisation de cinémagraphes ou d'images

Les tendances en matière de conception Web vont et viennent. Certains persistent un peu plus longtemps, d’autres se transforment en quelque chose de nouveau et d’autres encore disparaissent pour toujours.

Que nous réserve l’année prochaine ? L'équipe awwwards.com a tenté d'identifier les principales tendances...

Je vous préviens tout de suite : il ne faut pas s’attendre à une quelconque révolution. Les grandes tendances qui ont donné le ton en 2015 continueront à dominer.

L’évolution du design réactif

Il y a quelques années à peine, créer un site Web réactif était essentiel pour travailler sur les ordinateurs de bureau, les tablettes et les smartphones. Bien que chaque plate-forme présente ses propres défis, les tablettes et les smartphones ont des systèmes d'interaction très familiers, et le principal défi consiste à garantir que le contenu est de taille suffisante et facile à naviguer.

Le design plat conquiert chaque pixel

Mais dans les montres intelligentes, par exemple, même le système de navigation doit être soigneusement repensé pour tenir compte de la manière dont nous utilisons l'appareil. Même si certains affirment que le design plat pose des problèmes dans le domaine des interfaces utilisateur, le consensus général est qu'il s'agit d'une technique bénéfique pour la conception Web.

Récemment, nous avons assisté à une montée en popularité du design réactif. Et ce n'était pas qu'un caprice des concepteurs - les circonstances se sont développées, tout doit être fait pour que le site s'affiche de manière optimale sur appareils mobiles.

D’autres tendances découlent doucement de celle-ci, la principale et la plus importante. Regardons-les de plus près.

Tout dépend de la façon dont nous consommons le contenu en ligne et de la technologie derrière la diffusion des pages Web. Le design plat repose sur des principes minimalistes, ce qui donne lieu à des sites Web médiocres et simples, rapides et axés sur le contenu. Ce n’est pas seulement esthétiquement attrayant, mais aussi très pratique, permettant aux visiteurs d’interagir facilement avec le contenu et d’en profiter sans distractions.

Ce ne sont pas seulement les textes qui vont grossir sur Internet : les images aussi ! Auparavant, il existait d'importantes restrictions concernant la taille des images en raison du nombre limité de bande passante, mais ces jours-ci, c'est de moins en moins. En conséquence, les grandes images ont envahi le Web.

Distribution des modèles d'interface utilisateur

Un des Effets secondaires la conception adaptative signifie que tous les sites deviennent quelque peu similaires les uns aux autres. Mais ce n’est pas seulement le design réactif qui est en cause. La construction de sites WordPress et le marché en croissance rapide des modèles prêts à l’emploi y ont également contribué.

Mais ce n'est pas nécessairement une mauvaise chose. Ne serait-ce que parce que nous avons changé la façon dont nous utilisons Internet, ce qui a conduit à la popularité des modèles de conception d’interface utilisateur courants. Il n’y a aucune véritable raison de réinventer la roue. Les modèles d'interface doivent donner aux utilisateurs bonne expérience, soyez simple et compréhensible.

Des techniques fascinantes émergeront pour une mise à l'échelle flexible, dessinant des couleurs dominantes pour les arrière-plans et optimisant de plus en plus les images. Les filtres de chevauchement flous et colorés permettront au texte de « flotter sur le dessus » sans compromettre la convivialité.

Effets de défilement et de parallaxe

Utiliser le défilement au lieu de cliquer comme méthode de navigation efficace. Premièrement, cela nécessite moins de temps de chargement des pages et, plus important encore, cela facilite la création de transitions fluides d'un point à un autre sans mises à jour dissonantes. Les informations circulent toujours.

Voici quelques modèles que vous devriez connaître :

- menu de hamburgers. Bien que de nombreuses personnes critiquent ce modèle, son utilisation généralisée rend la fonction facilement reconnaissable par les utilisateurs.

- Enregistrement du Compte Elle s'effectue désormais de deux manières : soit via le bouton d'inscription, soit via les réseaux sociaux. Ces deux options sont pratiques et compréhensibles pour les utilisateurs et leur évitent des actions inutiles et déroutantes.

Avez-vous entendu les conversations dans les graphiques Web ?

Nous sommes des personnes très visuelles, nous avons tendance à mieux absorber les informations lorsque nous les voyons graphiquement, ce qui a conduit à la popularité des infographies. Nous créons des infographies comme moyen simple de transmettre de grandes quantités d’informations avec des taux de rétention élevés. Comme les infographies, les sites Web véhiculent de grandes quantités d’informations, mais ils incluent des éléments qui permettent à l’utilisateur d’interagir avec les informations. Ils sont visuellement plus attrayants que les infographies et augmentent considérablement l’attention des utilisateurs.

- défilement sans fin. Hébergement de tous éléments importants en haut n'est actuellement pas pertinent. De plus, presque tout le monde est habitué à faire défiler grâce aux appareils mobiles. La technique fonctionne particulièrement bien pour les sites qui souhaitent attirer les utilisateurs à travers des histoires, et vous pouvez toujours simuler un site multipage en divisant la page en zones.

Vous pouvez vous attendre à ce que cela devienne populaire et devienne un élément essentiel de la conception Web moderne. Les tendances Web vont et viennent, mais l’ingéniosité créative des concepteurs est ce qui entraîne les changements dans les modèles de conception Web. Les designers ont la responsabilité de transformer les idées en tendances et les tendances en modèles.

Les tendances de conception répertoriées ici deviennent rapidement monnaie courante dans la conception de sites Web et gagneront encore plus en reconnaissance au cours de l'année à venir. Mais sereinement, nous n'éteindrons pas l'appartement. Regardons simplement les bons changements qui se sont produits depuis l'année dernière et dont nous pouvons prédire qu'ils seront introduits cette année. Les microinteractions sont des animations subtiles qui interagissent d'une manière ou d'une autre avec l'utilisateur.

- conception de cartes. Apparu pour la première fois sur Pinterest, le modèle de carte s'est rapidement répandu sur Internet. Cela est dû au fait que les cartes vous permettent de numériser rapidement les informations et de trouver ce dont vous avez besoin. Chaque carte représente un seul concept. Cette conception facilite grandement l'organisation du contenu pour un affichage optimal sur différents appareils.

Pour être plus clair, la microinterprétation fonctionne comme un retour d’information sur l’action ou la tâche que vous venez d’effectuer. Par exemple : l'action d'un bouton lorsqu'on l'appuie, qui interagit avec différents mouvements. Remarquez ce qui se passe lorsque vous...

Bon retour au dégradé

Ce sont ces petites interactions qui rendent votre navigation et votre expérience plus agréables et naturelles. Oui, le dégradé est de retour. L’ère du flat design touche à sa fin et le dégradé fait son grand retour. Selon la manière dont le dégradé est appliqué, il attire votre attention. C’est souvent subtil sur les yeux. Cela vaut la peine d'investir dans cette tendance.

- grandes images d'arrière-plan. Les images HD sont l'un des moyens les plus rapides d'attirer l'attention d'un utilisateur. Grâce aux progrès en matière de bande passante et de compression des données, les utilisateurs ne souffriront pas de temps de chargement lents.

C'est quelque chose qui a été adopté par les grandes marques où le minimalisme atteint un nouveau niveau. Cela en fait partie : des noms grands et épurés et des icônes plus simples et plus universelles. Mais n'oubliez pas : créez des designs minimalistes, mais pensez toujours à l'expérience utilisateur. Réduire les éléments n’est pas toujours la meilleure solution, tout dépend des réclamations réelles pour chaque projet.

Innovations de défilement et parallaxe

Gif était très années 90 et a longtemps été considéré comme ringard. Il y avait de la fièvre ces jours-ci, surtout à dans les réseaux sociaux, nous offrant une nouvelle façon d’exprimer nos émotions. Comme on dit : « une image vaut mille mots ». Cette fonctionnalité est une réinvention de la navigation. Il s’agit d’une technique très bien acceptée et utilisée sur les appareils mobiles qui a un grand potentiel pour attirer les utilisateurs car elle permet d’absorber rapidement plus de contenu sans aucune interruption.

Comme nous pouvons le constater, toutes les tendances que nous avons pu observer au cours de la dernière année restent d’actualité.

Animation riche

L'animation est de plus en plus utilisée et rend l'expérience utilisateur plus interactive et intéressante.

La parallaxe est une technique qui permet au premier plan et à l'arrière-plan de se déplacer à des vitesses différentes, créant ainsi l'illusion de profondeur et d'immersion. S’il est appliqué correctement, il aura un bel aspect dynamique et net. Et cela vous permet de raconter une histoire à l’utilisateur en utilisant uniquement des graphiques.

Contredit toutes les méthodes de conception qui cherchent à représenter la réalité à l’écran ; les ombres, les dégradés, les reliefs, les textures réalistes sont laissés de côté. Et il valorise la simplicité, la mise en page claire, l’esthétique classique et l’expression « moins c’est plus ». Pourquoi ce concept fonctionne-t-il ?

Cependant, vous ne pouvez pas l’appliquer où vous le souhaitez. L’animation doit servir à quelque chose et pas seulement être une décoration.

L'animation peut être considérée du point de vue de deux groupes :

Animations à grande échelle. Ils sont utilisés comme principal outil d'interaction, ont un impact important sur les utilisateurs et incluent des effets tels que le défilement parallaxe et les notifications toast.

Les principes du design plat sont une hiérarchie d'informations et d'éléments qui facilitent la compréhension de l'expérience utilisateur. L'interface est conçue pour la fonctionnalité, pas seulement pour un joli site Web, de sorte que les sites utilisant cette esthétique reçoivent des commentaires positifs car ils sont conviviaux.

Les images simples transmettent des messages plus rapidement et plus efficacement que les illustrations détaillées. Les icônes et les boutons aux couleurs unies attirent davantage l’attention et transmettent leur signification plus facilement sans nécessiter d’explications supplémentaires. Utiliser des éléments avec formes simples, comme les rectangles et les cercles, et en gras pour les boutons.

Petites animations. Ils comprennent des compteurs, des outils de survol et des barres de chargement, et ne nécessitent aucune manipulation de l'utilisateur.

Nous décrirons les 7 méthodes d'animation les plus populaires :

- chargement de l'animation. Il est utilisé pour améliorer le temps d’attente de chargement d’une page. Généralement populaire sur les pages de conception plate. style minimaliste, ainsi que sur des sites Web d'une page.

Il est important de savoir choisir une palette de couleurs qui ne quitte pas la mise en page et ne crée pas de contraste tout en mettant en valeur les éléments d'action comme les boutons d'achat. Dans cette esthétique, la typographie est très importante ; ils doivent être audacieux pour se démarquer, mais en même temps simples, propres et efficaces, en coordination avec le reste de la mise en page. Saisie sans empattement - un bon choix, mais les polices serif peuvent être une option si elles sont bien utilisées.

Dans le commerce électronique, les images de haute qualité constituent un grand différenciateur et sont extrêmement importantes ; attirer l'attention de l'utilisateur et contribuer à augmenter la conversion. La simplicité esthétique du design plat permet aux images et aux boutons d'action de devenir visibles plutôt que de détourner l'attention du consommateur.

Gardez les choses simples et n'utilisez pas de son supplémentaire (même si c'est à la mode ces derniers temps). N'oubliez pas que ces pièces doivent correspondre palette de couleurs et le style général de votre site.

- navigation et menu(PAS de défilement).

Bien que le principe soit « moins », il est nécessaire de savoir utiliser correctement tous ces éléments, c'est pourquoi l'aide de professionnels est recommandée car il est important que l'agencement attire le consommateur et crée une excellente expérience d'achat. De plus, il est extrêmement important que vous connaissiez votre public cible afin que le site réponde à vos besoins.

En examinant les tendances et l’évolution du secteur lui-même, nous pouvons déterminer quelles fonctionnalités seront désormais présentes sur Internet. La création de contenu pour Internet est un domaine complexe, les professionnels qui y travaillent doivent constamment se mettre à jour. La technologie évolue, et des innovations majeures et des changements de comportement peuvent signifier de nouvelles façons de créer et de publier en ligne.

Les menus cachés sont de plus en plus populaires, notamment dans les cas où ils peuvent être utilisés pour économiser de l'espace sur l'écran.

- animations de survol largement utilisé pour créer retour lorsque vous passez la souris sur un objet.

- galeries et diaporamas sont façon efficace pour afficher plusieurs images sans surcharger les utilisateurs.

La plupart des tendances du futur découlent des besoins du présent. Nous constatons que l’utilisation des smartphones pour surmonter l’utilisation des ordinateurs de bureau conventionnels, la vulgarisation des appareils portables intelligents, la réalité virtuelle, la promotion du marketing de contenu, tous ces cas créent de nouveaux besoins.

Vous trouverez ci-dessous les nouvelles orientations qui devraient se développer sur Internet à l'avenir. La typographie en ligne est autre chose. Tout comme toute typographie visuelle Web devra également s'adapter aux nouveaux appareils utilisés, la tendance est que les polices créées pour le Web gagnent en puissance et en popularité car elles peuvent s'adapter à différentes tailles et résolutions d'écran ainsi qu'aux images et aux vecteurs. .

- animation de mouvement.

Nos yeux sont naturellement attirés par le mouvement, ce qui en fait un outil idéal pour attirer l'attention de l'utilisateur. Le mouvement peut également contribuer à la hiérarchie visuelle et ajouter de l’intérêt et de l’intrigue.

Contrairement à la façon dont nous considérons les documents imprimés, la typographie en ligne doit suivre ses propres règles, suivre un chemin différent pour mieux l'utiliser à l'écran de la même manière qu'elle l'est déjà sur papier. Le concept de responsive design, adaptant la page aux smartphones et tablettes, devrait gagner plus d’importance. Avec l’avènement des montres intelligentes IoT et d’autres types d’écrans et d’appareils, le design devra s’adapter non seulement à la taille de l’écran, mais également au contexte d’utilisation.

Les sites doivent s'adapter à différentes tailles et contextes d'utilisation. Le même produit sera utile dans une application mobile, ou dans une montre, ou dans une voiture, et chaque expérience sera vécue différemment. Il s'agit déjà d'une tendance dans le monde de la conception d'interfaces et elle devrait prendre de l'ampleur car elle profite aux deux parties, les concepteurs qui créent et les utilisateurs qui accèdent au contenu. Le design plat est simple, adaptable, léger et facilite l’exploitation d’un site Web tout en étant simple, non distrayant pour le lecteur et visuellement agréable.

- défilement. Le défilement fluide s'appuie sur l'animation et donne un contrôle supplémentaire à l'utilisateur, qui peut déterminer le rythme auquel le contenu du site se déroule.

- animation d'arrière-plan (vidéo). Un simple arrière-plan animé peut être ajouté à la conception d’un site Web, mais il doit être utilisé avec modération, sinon il peut être très distrayant pour l’utilisateur.

Site Web avec toutes les images en arrière-plan. Avec le développement d’Internet et l’augmentation des vitesses de connexion, on peut s’attendre à ce que des sites utilisent des images volumineuses et de qualité supérieure. Ce style sera très similaire à ce que l'on voit déjà dans les magazines et documents imprimés, qui n'ont pas de restrictions limitant les ressources visuelles, ces restrictions disparaissant, et nous pourrons voir tout le potentiel de mises en page de plus en plus belles et immersives.

Les utilisateurs d'aujourd'hui sont plus familiers avec les techniques de navigation, par exemple sur un ordinateur, beaucoup utilisent le défilement de la souris ou un trackpad pour naviguer dans les pages, ce qui permet de créer des sites où le contenu est concentré et affiché de manière dynamique, comme les effets de parallaxe.

Les microinteractions sont omniprésentes autour de nous, à commencer par la désactivation de l'alarme de notre smartphone le matin.

Chacun d’eux est réalisé sans arrière-pensée. Il est probable que vous ayez commencé votre journée par une micro-interaction. Éteignez le réveil de votre téléphone mobile, vous n’utilisez l’interface utilisateur que pendant un instant. Et de plus en plus d’entre eux sont implémentés dans les programmes et appareils que nous utilisons.

Les micro-interactions doivent se produire naturellement et presque inaperçues pour l'utilisateur. Ils constituent un élément important de presque toutes les conceptions numériques. Il est presque impossible pour vous de créer un site Web ou une application mobile qui n'inclut pas un élément avec lequel l'utilisateur doit interagir.

Conception matérielle : une riche alternative au design plat

L’objectif du Material Design est de créer un design épuré et moderniste axé sur l’UX.

Avec son look minimaliste, le design matériel a beaucoup en commun avec une autre tendance croissante : le design plat. Mais il utilise la profondeur et les ombres, ce qui le rend plus intéressant et plus riche.

Jusqu’à présent, nous avons vu que la plupart des projets « tangibles » se limitent à la conception d’applications. L’année prochaine, le Material Design sera utilisé partout sur les sites Web.

Conception réactive

La conception Web réactive est devenue incroyablement populaire ces dernières années, grâce à l’augmentation de l’utilisation du Web mobile.

On peut affirmer sans se tromper que le design réactif ne va nulle part de sitôt, car il représente un moyen relativement simple et peu coûteux pour les entreprises de créer un site Web mobile entièrement fonctionnel.

La conception Web réactive fonctionne bien avec les conceptions de cartes et plates.

Le design plat est là pour rester

Le design plat est populaire ces derniers temps et s'adapte parfaitement à d'autres tendances telles que le minimalisme, le design Web réactif et matériel.

Pour l’avenir, il est probable que nous verrons les tendances suivantes en matière de design plat en 2016. Les éléments suivants ressortent :

De longues ombres. Ils apportent plus de profondeur aux designs plats.

Des couleurs vives. Les modèles populaires ont incité de nombreux concepteurs à commencer à utiliser davantage couleurs vives dans vos projets.

Typographie simple. Les polices simples aident à garder le texte lisible et lisible dans un design plat.

Boutons fantômes. Ils restent fonctionnels sans perturber le style général.

Minimalisme vous permet de créer une interface laconique et de vous débarrasser de toutes les choses inutiles.

Au lieu de résultats

Comme nous le voyons, l’année à venir ne nous apportera pratiquement rien de nouveau. Les mêmes tendances que nous observons depuis plusieurs dernières années, restent pertinents. Nous pourrons peut-être observer de nouvelles formes, mais les principales tendances restent les mêmes.

Un bon propriétaire de site Web s’efforce constamment de l’améliorer. Dans ce travail, il doit s'appuyer non seulement sur l'analyse de son audience, les données d'analyse Web et les avis des clients, mais également sur les tendances du secteur. Parce que les tendances contiennent de nombreux éléments utiles qui peuvent améliorer l’interaction des clients avec le site. Mais les tendances doivent être appliquées avec prudence et sagesse. Choisissez uniquement ceux qui conviennent à la résolution des problèmes actuels du site et au développement commercial.

Par conséquent, dans cet article, nous avons non seulement fourni une liste des tendances en matière de conception de sites Web, mais nous avons également formulé des recommandations pour appliquer ces tendances à votre site Web.

1. La convivialité deviendra une marchandise.

Un exemple d'amélioration de la convivialité du site http://www.telemirspb.ru/

Suivant principes de base La convivialité aide les sites Web à attirer plus de clients et à réduire le nombre d’appels d’assistance. De plus en plus d'entreprises proposent des audits de sites Web, car il existe une demande pour détecter des erreurs sur le site Web. L'habitude d'acheter et de commander des services via Internet augmente la demande de sites pratiques.

Hélas, beaucoup créent eux-mêmes des sites Web, puis nous arrivent avec la honte créée. Il est important de réfléchir à l'avance au processus d'interaction avec la ressource : quelles sections seront dans la première version et lesquelles seront ajoutées ultérieurement. Il est impossible de tout prévoir, mais une navigation planifiée à l'avance permettra d'économiser du temps et de l'argent sur les améliorations futures. Choisissez également avec soin le moteur de votre site. Vous ne devez pas choisir un moteur de blog (par exemple WordPress) si vous envisagez de vendre quelque chose sur le site ou de créer des pages de produits/services.

Si vous travaillez dans un environnement hautement concurrentiel, vous comprenez à quel point il est important de vous différencier de vos concurrents.

C'est pourquoi, lorsqu'on envisage de créer un site Web ou d'améliorer un site existant, il faut d'abord regarder l'interface à travers les yeux du client et essayer de prédire les problèmes que l'utilisateur pourrait rencontrer.

2. Les textes longs disparaîtront

Soyons honnêtes avec nous-mêmes : personne ne lit de longs textes. Les exceptions incluent les livres et les articles. Lorsqu'un client souhaite commander un service ou un produit, il est intéressé par des informations précises : prix, principales caractéristiques du produit/contenu du service, conditions de livraison/délai d'exécution. Une information brève et structurée fait gagner du temps au client et l'incite à commander. De plus, si le client compare plusieurs sites, alors la description la plus concise l'emportera certainement.

De plus, les textes longs ne sont pas pratiques à visualiser à partir d'appareils mobiles, que presque tout le monde utilise. Selon les statistiques mondiales, en octobre 2016, le nombre d’utilisateurs mobiles est devenu supérieur à celui des utilisateurs d’ordinateurs de bureau.

Examinez l'audience de votre site Web, par exemple dans Yandex.Metrica dans le rapport Résumé → Type d'appareil et voyez quel pourcentage de clients proviennent de téléphones et de tablettes. Gardez ce public à l’esprit lorsque vous publiez du contenu.

Ajoutez judicieusement une animation à votre site Web. Cela doit être aussi précis et rapide que possible. Agrandir une image lorsque vous cliquez dessus, indicateurs de progression en attendant les résultats sur le site, fenêtre pop-up apparaissant lors de l'ajout d'un article au panier, changer la couleur des boutons et des liens après avoir cliqué sont les microinteractions les plus courantes qui vont certainement aidez vos utilisateurs.

6. Utilisation de cinémagraphes ou d'images « live »

Les vidéos grand écran ont été remplacées par des cinémagraphes, des images dans lesquelles un seul élément bouge. Il est préférable de les placer sur le premier écran de la page pour attirer l'attention de l'utilisateur et créer un effet waouh.

Si vous choisissez un tel gif pour correspondre au thème du site, il aura l'air très cool. Par exemple, vous pouvez prendre une photo en direct de votre produit principal et la placer sur votre page d'accueil ou sur des bannières promotionnelles.

En Russie, les cinémagraphes sont principalement utilisés dans les réseaux sociaux, nous donnons donc des exemples de sites étrangers - un site de protection des eaux et de location de voitures.

7. Évitez les photos d’archives « typiques »

Nous espérons que toutes sortes de petites gens, de filles portant des écouteurs et de photographies de familles souriantes disparaîtront des sites. Exemple d'images d'archives :

9. Le mobile d’abord

L'essence de cette approche est que lors de la conception d'un site Web, vous devez réfléchir à la manière dont il sera affiché sur les appareils mobiles. De nombreux articles et livres ont été écrits sur ce sujet, par exemple, nous vous recommandons de lire « Mobile First » de Luke Wrobleski.

Comme mentionné ci-dessus (voir point 2), trafic mobile se développe et il y a même des utilisateurs qui n’ont pas d’expérience de bureau. C'est pourquoi, afin de ne pas perdre de clients, nous vous recommandons d'optimiser vos sites pour les appareils mobiles.

L'article répertorie uniquement les tendances les plus fondamentales. Voyons ce qui nous attend cette année. Si vous remarquez également certaines tendances et êtes sûr qu'elles vont se développer, écrivez dans les commentaires, nous serons ravis d'en discuter. Et si vous doutez que la conception de votre site Web soit à jour ou si vous avez lu l'article et trouvé des éléments obsolètes, faites attention au service de refonte.