Quelle conception de sites Web est à la mode actuellement ? Une réalité presque visuelle. Caractéristiques de l'utilisation du défilement long

Certaines tendances en matière de conception de sites Web changent d’année en année, tandis que d’autres restent d’actualité pendant longtemps. Voici une liste complète des tendances du design année actuelle avec descriptions et recommandations d'utilisation.

Si vous n’êtes pas en avance, vous serez inévitablement en retard.

Bienvenue dans le guide des tendances de conception Web 2016 !

Au fur et à mesure que nous décrivons chaque tendance, nous vous expliquerons pourquoi elle fonctionne et comment vous pouvez la maîtriser personnellement. Nous donnerons également plus de 40 exemples de sites Web d'entreprises telles que Intercom, Google, Beoplay, Sennheiser et autres.

Notre plan de révision est le suivant :

1. Introduction

2. Microinteractions

4. Conception minimaliste

5. Hybride de conception plate et matérielle

6. Animations juteuses

7. Typographie

8. Couleurs vives

9. Défilement long

10.Graphiques HD

11. Illustrations

12. Conclusions

Commençons sans plus tarder par explorer comment de minuscules interactions peuvent créer des expériences mémorables pour les visiteurs.

Microinteractions

L’encadrement des micro-interactions dans le flux d’actions plus larges est crucial pour la conception d’applications mobiles. Ils semblent généralement si insignifiants que les utilisateurs décident de les exécuter sans y penser du tout.

Activer/désactiver les notifications, changer la couleur d'un bouton lorsqu'on appuie dessus, les notifications sonores indiquant l'arrivée d'un nouveau commentaire sur votre photo ou autre chose - toutes ces petites choses s'ajoutent à l'image globale aux yeux de l'utilisateur et donnent l'impression d'utiliser L'application.

Bénéficie d’une bonne conception de micro-interaction

• Vous pouvez rapidement former les utilisateurs à interagir avec votre produit ;
• Le lien entre le statut, les changements et la capacité d'attirer l'attention sur certains domaines ;
• Sécurité retour sur la base des résultats des actions réalisées ;
• Ajouter des éléments agréables qui ne détourneront pas l'attention de l'expérience principale d'interaction avec le produit ;
• Renforcer la position de la marque avec l'exclusivité de l'interface ;
• Répondre aux attentes des utilisateurs (les micro-interactions sont la norme pour de nombreux sites Web et applications). Ils seront sûrement également attendus dans votre produit.

1. Formez une habitude parmi les utilisateurs.

Les micro-interactions sont un élément clé pour créer des habitudes chez les visiteurs. Ce processus se compose de trois éléments :

• Un signal (microinteraction) est un déclencheur qui initie une action ;
• Actions répétitives - une procédure familière à l'utilisateur ;
• Une récompense est le résultat de l’accomplissement d’une action.

Par exemple, un rectangle rouge et une icône blanche (déclencheur) sur Facebook indiquent la présence d'un nouveau message. L'utilisateur effectue une action de routine en cliquant sur une icône afin de discuter avec son ami (récompense). Après un certain temps, l'utilisateur, voyant de telles choses, effectue automatiquement les actions qui lui sont demandées. Plus la récompense (motivation) est élevée, plus l’habitude devient forte.

2. Conception pour un usage fréquent.

Puisque nous voulons créer une habitude d’utiliser notre produit, nous devons concevoir des éléments qui seront fréquemment utilisés. Ce qui peut paraître intéressant et mignon au début peut devenir ennuyeux avec le temps, devenant obsolète après des centaines de répétitions de l'action. Essayez d’étouffer dans l’œuf la possibilité d’un tel effet.

3. Faites en sorte que les déclencheurs aient une conception visuelle commune avec l'interface du produit.

Essayez de créer des éléments de micro-interaction de conception similaires avec une interface commune. Par exemple, la même couleur, en utilisant les mêmes animations, formes, etc. La cohérence du design augmente la reconnaissance et renforce la personnalité de la marque. Par exemple, le New York Times utilise son propre logo comme animation de chargement. De marque style reconnaissable, qui ne peut être confondu avec autre chose.

4. Utilisez des animations.

Les microinteractions sont des éléments idéaux pour injecter un peu de plaisir utilisateur dans votre conception. Les animations les rendent plus vivantes, plus excitantes et le mouvement lui-même attire l'attention. Ce dernier est souvent notre objectif principal : intéresser. Essayez-le et comparez les résultats avant et après la mise en œuvre des animations.

5. Évitez les interactions indésirables.

Une erreur courante consiste à surcharger l’interface avec un grand nombre de micro-interactions. Tout d’abord, développez-en un ensemble pour les fonctions de base uniquement et voyez comment vos utilisateurs réagissent. Les points de contact les plus courants en matière de conception sont :

• Écrans de chargement ;
• Des illustrations animées qui s'activent lorsque vous passez votre souris dessus.

La réponse positive de l'utilisateur à l'animation des éléments de base est un signal pour en ajouter davantage.

6. Utilisez l'humour dans vos écrits.

Les microinteractions comme les boutons d’appel à l’action ou autres publicités interactives (pages d’erreur 404 par exemple) seront plus efficaces si elles sont imprégnées d’humour. Vous pouvez même utiliser un enregistrement de voix humaine à certains endroits.

Cartes

Nous connaissons tous l'efficacité des cartes bien avant l'avènement du design numérique ( Cartes de visite, jouer aux cartes etc.). L’idée est que les informations les plus pertinentes sur un sujet sont regroupées dans un seul petit conteneur.

4. Les animations de chargement égayent l'attente.

Si vous n'avez pas la possibilité de supprimer la barre de chargement de la page ou de réduire le temps d'attente, une animation intéressante contribuera à rendre ce processus plus facile aux yeux de l'utilisateur.

Au lieu d'utiliser des barres de chargement traditionnelles qui affichent la progression du chargement en pourcentage, essayez d'offrir à votre public quelque chose de plus savoureux et créatif. Bien entendu, la meilleure solution pour sortir de cette situation est l’optimisation du site Web. L'utilisation d'une barre de chargement est un dernier recours. Si vous ne pouvez vraiment pas vous en passer, il est préférable de décorer le processus de routine avec de l'animation.

Typographie

Des résolutions d'appareil plus élevées, un Internet plus rapide et un accès à de nouvelles bibliothèques de polices Web ( Polices Google, Adobe Typekit, etc.) font de notre époque l'âge d'or de la typographie.

Les avantages d’une typographie de qualité

• Une résolution d'écran accrue offre plus de possibilités de mise en œuvre d'idées typographiques intéressantes ;
• La capacité de souligner le caractère unique de la marque et de la rendre reconnaissable grâce à la police utilisée ;
• Augmenter l'influence du contenu textuel ;
• Outil permettant de construire une hiérarchie visuelle d'éléments, il est particulièrement important pour mettre en avant les outils CTA (appel à l'action).

Principes d'utilisation

1. La clarté est primordiale.

Ne sacrifiez jamais la lisibilité pour une « meilleure » police : les styles typographiques ne fonctionnent pas si vous ne pouvez pas lire ce que vous écrivez.

2. Police simple mais impressionnante.

La typographie simple est plus facile à lire et se charge plus rapidement, sans compter qu'elle est essentielle pour les styles de design minimalistes. Veuillez noter ce qui suit :

Augmentez la taille de la police ;

Contrastez la couleur de la police avec son arrière-plan environnant ;

Utilisez des caractères gras aux endroits clés.

Il ne faut pas confondre les concepts d'« impressionnant » et de « fleuri ». Des polices simples aident à transmettre un message avec confiance et clarté.

3. Polices complexes et simples : Serif vs Sans Serif.

Il n'existe aucune preuve convaincante que l'un d'eux soit toujours plus pointilleux que l'autre. C'est juste une question de style, rien de plus. Les polices complexes rendent le texte plus riche et plus formel, tandis que les polices simples se marient bien avec un design minimaliste.

Polices sans empattement populaires :

1. Proxima Nova
2. Futura
3. Avenir
4. Ouvrir Sans
5. Helvetica Nouvelle
6. Polices serif populaires :
7. Caslon
8. Garamond
9. Texte de fret
10. Serviteur
11. FF méta-serif

5. Superposition de polices manuscrites.

De telles polices sont un bon ajout pour ceux qui souhaitent créer un style « convivial ». La lisibilité de ce type de typographie étant très discutable, limitez-la à de gros titres superposés aux images.

6. Texte qui dépasse l'espace désigné.

Un des les meilleurs moyens prêter attention au texte, c'est se superposer à d'autres éléments et dépasser leur portée. Une partie d'un mot ou un mot entier peut s'étendre, par exemple, au-delà des limites de l'image, chevauchant la zone adjacente. Cela fusionne l’écran en un seul tout et semble impressionnant, et parfois même choquant.

7. Polices par défaut.

Dans la plupart des cas, vous ne devez pas utiliser plus de deux familles de polices. Si vous souhaitez diversifier votre contenu, modifiez les tailles et types de polices au sein d’une même famille.

Couleurs vives

Tout au long de l’année 2015, nous avons constaté une tendance à l’introduction de couleurs vives. En 2016, cette direction a continué à prendre de l'ampleur. La popularité des couleurs vives ne fera que croître à l’avenir. Utilisez plus de palettes et de nuances si vous souhaitez suivre la mode.

Avantages de l'utilisation de couleurs vives

• Différentes nuances et dégradés de couleurs vous aideront à mieux distinguer les contenus qu’elles mettent en valeur ;
• L’utilisation de la stimulation visuelle est particulièrement utile pour les petits sites.

1. Duotone.

• L’utilisation de couleurs bicolores est une tendance en soi et restera populaire pendant longtemps, tout comme l’introduction de couleurs vives.
• Il est clair que le bichromie est une combinaison gamme de couleurs deux couleurs. Il peut s'agir de nuances de la même couleur ou de tons complètement opposés.
• Dans la conception Web, la bichromie est souvent utilisée pour mieux présenter les images et les photographies. Ça a l’air excitant et moderne.
• Gardez les points suivants à l’esprit :
• Utilisez des photographies simples avec un thème fort et unifié. Les images riches en éléments (comme les paysages) peuvent être difficiles à voir, en particulier sur les écrans mobiles ;
• La bichromie contrastée facilite la distinction des détails d'une photo ;
• Séparez votre photo du reste de la zone de visualisation avec des bordures colorées ou un défilement plein écran ;
• Utilisez des images claires avec des limites clairement visibles des objets qu'elles contiennent.

De même, la bichromie est souvent utilisée comme superposition de photos, comme le montre l'exemple ci-dessous.

2. Superposition.

Une autre tendance intéressante en matière d’utilisation de couleurs vives consiste à les superposer sur les photographies.

La couleur superposée renforce la signification de l'image et le désir d'en examiner les détails. La couleur peut aider à changer l’interprétation d’une photo. Par exemple, une superposition rouge rendra l'image plus vivante et plus ennuyeuse, tandis qu'une superposition bleue créera une sensation de calme dans la scène que vous voyez.

3. Dégradés spectaculaires.

Couleurs mélangées les unes aux autres avec une décoloration progressive des tons - choix populaire de nombreux designers modernes. Il n’est pas nécessaire de mélanger plus de 2 ou 3 couleurs – ce n’est pas nécessaire.

4. Mettez en surbrillance les mots-clés et les boutons.

Dans les textes monochromes, utilisez couleurs vives pour mettre en évidence des mots et des expressions comme « gratuit », « aujourd'hui », etc. Cela leur donnera un poids supplémentaire, augmentant ainsi le pouvoir de suggestion.

Dans la même veine, vous pouvez agrandir certains boutons que d’autres, en veillant à les mettre en valeur avec une bordure ou un arrière-plan coloré. Cela fonctionne très bien.

5. Changer l'état d'un élément lors du survol du curseur.

Comme nous l’avons déjà mentionné en parlant de cartes, les couleurs sont un outil idéal pour différencier les éléments. Changer la couleur au survol de la souris est un moyen de communication visuelle sûr et simple qui augmente le degré d'interactivité d'un site ou d'une application.

6. Utiliser couleur correcte pour évoquer l'émotion désirée.

Différentes couleurs évoquent différentes émotions. Voici un petit aide-mémoire pour certaines couleurs couramment utilisées sur les sites Web :

• Rouge – transmet à la fois un sentiment de passion et de prudence. Cette couleur augmente l’intensité de la circulation sanguine ;
• Bleu – crée un sentiment de calme et de stabilité, c'est pourquoi il est souvent utilisé lors de la conception des sites Web de diverses institutions financières ;
• Vert – établit un bon équilibre entre les couleurs chaudes et froides, transmet une sensation de naturel, de pureté et de prospérité ;
• Violet - historiquement associé à quelque chose de royal, créant un sentiment de luxe et de mystère ;
• Le blanc est une couleur neutre idéale qui, lorsqu'elle est associée à d'autres couleurs, transmet un sentiment d'élégance, renforçant l'effet de ces dernières ;
• Le noir est une couleur sophistiquée et puissante, toujours à la mode pour tout type de projet.

Défilement long

Les sites à défilement long ou à défilement sans fin ont rapidement gagné leur place comme une constante dans la conception Web.

Caractéristiques de l'utilisation du défilement long

• Idéal pour les appareils mobiles. Des écrans plus petits signifient plus de défilement et le format fonctionne bien avec les commandes tactiles ;
• Une forme narrative pratique dans laquelle le contenu est ainsi immergé peut intéresser les visiteurs ;
• Simplification de la navigation ;
• Le défilement infini ajoutera un élément de surprise à l'expérience utilisateur.

1. Utilisez des repères visuels.

Une icône ressemblant à une flèche indiquant le sens de défilement et située en dehors de la zone de contenu semblera appropriée et informative. Il vous indiquera combien de temps il reste pour faire défiler jusqu'à la fin de la page et vous informera de la disposition linéaire du contenu.

2. Les écrans sont comme des pages.

Le défilement peut être non seulement fluide, mais également page par page. Faites défiler et tout l’écran a changé. C'est à la mode et beau.

Ajustez chaque écran de la mise en page afin qu'il remplisse complètement toute la zone visible. Créez des styles personnalisés pour chaque bloc de défilement qui correspondent au thème général. Parfois, il est utile de dupliquer les éléments CTA sur chaque écran. Cette approche permet aux utilisateurs de percevoir le site de manière globale et de comprendre rapidement vers quoi les créateurs du site les conduisent.

Pour les petits sites comportant plusieurs pages, vous pouvez utiliser la navigation par défilement au lieu du défilement long. Autrement dit, l'utilisateur pourra accéder à une autre page en faisant défiler la souris, évitant ainsi d'avoir à cliquer sur les éléments de menu. Vous pouvez animer la transition entre les pages pour renforcer la communication visuelle avec l'utilisateur, comme le montre la capture d'écran ci-dessous.

3. Menu de navigation collant.

L'un des plus grands risques d'un défilement long est la possibilité de désorientation de l'utilisateur. Il pourrait bien se perdre en cours de route. La solution la plus simple est un menu de navigation collant qui restera au même endroit sur l'écran lorsque vous faites défiler la page.

Si cela prend beaucoup de place à votre avis, vous pouvez au moins inclure une option de saut dans le menu afin qu'une personne puisse passer rapidement à une autre section. Au minimum, disposez d'un bouton « Retour en haut », surtout si vous disposez d'un site à défilement infini.

4. Animations activées par défilement.

Les animations rendent le défilement plus amusant et entraînent l'utilisateur dans le processus de communication avec le site. Rendre le défilement plus fluide et plus intéressant visuellement avec des effets d'animation. Cela incitera l'utilisateur à prêter attention et à poser des questions telles que « Que va-t-il se passer ensuite ? » Vous pouvez définir vos propres règles du jeu en construisant une séquence d'animations à la manière des miettes de pain d'un célèbre conte de fées. Une personne voudra voir votre idée jusqu'au bout si elle est bien mise en œuvre.

Le défilement parallaxe est une solution simple, mais pas la seule. Faites appel à la créativité, il n’est pas nécessaire de répéter exactement les séquences d’effets inventées précédemment.

5. Atténuez les inconvénients SEO des pages à défilement long.

Les sites à défilement infini ont leurs limites en termes de promotion SEO. Mais ils peuvent être adoucis. Neil Patel fournit des conseils utiles sur ce sujet.

Graphiques HD

Les appareils dotés d'écrans haute résolution sont depuis longtemps un standard et 2016 est l'année du design HD. Des vidéos captivantes, des photographies puissantes et des graphiques riches ouvrent la voie à un contenu visuel de qualité.

Avantages de l'utilisation de graphiques de qualité

• Les utilisateurs d'appareils dotés d'écrans HD attendent un contenu de qualité appropriée ;
• Des vidéos de haute qualité peuvent augmenter considérablement le temps que les visiteurs passent sur un site ;
• Une approche créative donne aux concepteurs plus de contrôle sur l'humeur des visiteurs.

1. Combinez des photos d'archives et des photos personnalisées.

Bien sûr, les photos uniques sont meilleures, mais toutes les entreprises ne peuvent pas se permettre d’embaucher un photographe. En guise de compromis, vous pouvez combiner stock et photos originales de telle manière qu'ils sont uniques. Trouvez des photos d'archives sur le thème souhaité, ajoutez votre logo, changez les couleurs si nécessaire, et le tour est joué ! Si vous recherchez du matériel pour créer des images de marque, vous pouvez visiter Unsplash, Pixabay ou Pexels.

2. Préparez des images de haute qualité.

Les images d'arrière-plan et les vidéos en plein écran attirent instantanément l'attention des utilisateurs et constituent la présentation parfaite pour les sites Web minimalistes.

Comme le montre la capture d'écran ci-dessous, une image à contraste élevé attire facilement l'attention sur le contenu textuel superposé. Étant donné que la plupart des appareils ne prennent pas en charge le format d'image standard 1:15 pour les appareils photo, vous devrez recadrer l'image à l'avance pour l'adapter à différentes résolutions d'écran. L’image doit être tout aussi claire et lisible sur n’importe quel appareil.

3. Graphiques SVG ou raster ?

Les formats graphiques raster (.jpg, .gif, .png) ont nativement une résolution en pixels spécifique, tandis que les graphiques scalaires peuvent s'agrandir ou se réduire pour s'adapter à l'écran sans perte de qualité.

Utilisez SVG pour des graphiques uniques, tandis que pour les photographies, les formats raster avec un nombre de pixels en résolution strictement limité sont les meilleurs. Il est important d’acheter du matériel photographique avec une bonne résolution à ces fins.

4. Fond vidéo dans les en-têtes.

À mesure que les vitesses Internet moyennes augmentent, les arrière-plans vidéo gagnent en popularité. Leur utilisation peut prolonger le temps que les gens passent sur votre site. Veuillez noter les points suivants :

Les segments vidéo de 10 à 30 secondes offrent un bon équilibre entre un contenu engageant et grande vitesse chargement des pages ;

Le son de la vidéo est désactivé par défaut - le plus souvent, les utilisateurs ne s'attendent pas à entendre le son immédiatement après avoir accédé au site, cela peut être ennuyeux pour beaucoup. Il vaut mieux l'éteindre, laissant le bouton d'alimentation à ceux qui veulent écouter.

La vidéo attire les utilisateurs dès la première seconde d’entrée sur le site, ce qui constitue une raison sérieuse pour l’utiliser.

Illustrations

Pour créer des images plus uniques que les photos d’archives habituelles, les designers se tournent de plus en plus vers les illustrations. Ils sont devenus une alternative populaire aux solutions de diverses banques de photos.

Avantages de l'utilisation d'illustrations

• Appel direct à l’imagination de l’utilisateur, ce qui lui permet de renforcer son lien personnel avec le site ;
• Plus de contrôle sur le contenu et les détails des images ;
• C'est généralement moins cher que de réserver une séance photo et offre une plus grande liberté de création ;
• Les illustrations expriment clairement des concepts complexes à travers des images visuelles familières.

1. Coordonnez l’illustration avec le thème général de la mise en page.

Les illustrations dans la conception Web prennent la forme d’icônes et d’autres éléments secondaires. Si vous souhaitez mettre ce style au premier plan, vous devez alors l'unifier avec le thème principal du site en termes de conception et de contenu.

2. Ajoutez des effets créatifs.

Les illustrations donnent aux concepteurs plus de liberté pour utiliser des effets créatifs, et ces deux-là sont particulièrement populaires :

Animations - elles vont toujours de pair avec des illustrations ;

Calques - En raison de leur polyvalence, les illustrations vous permettent de simplifier les effets en introduisant des calques pour ajouter de la profondeur à l'image.

3. Utilisez des illustrations dans les instructions et les manuels.

Même les sites qui n'utilisent pas de graphiques dessinés à la main peuvent toujours les inclure dans leurs instructions et guides. Les images en diront encore plus que les mots : une personne s'y habituera plus rapidement. De plus, le positionnement sans stress grâce aux images de dessins animés aidera l'utilisateur à oublier qu'il est en train d'apprendre, rendant le processus plus facile et plus amusant.

4. Utilisez un design plat dans les illustrations.

Bien sûr, le design plat a acquis ses propres couches au fil du temps, mais il peut également être utilisé pour créer des illustrations. Il n'a pas perdu la plupart de ses avantages les plus significatifs (facilité de création et de perception, rapidité de chargement de ces graphiques) et est toujours utilisé avec succès dans la conception d'illustrations.

conclusions

Vous avez appris quelques techniques populaires dans l’environnement de conception Web actuel. Appliquez-les dans le contexte de votre projet. N’oubliez pas que vous ne devriez jamais suivre aveuglément une tendance simplement parce que sa mise en œuvre semble excellente en soi. Nous devons utiliser toutes ces choses de manière judicieuse et rentable, de manière sélective et significative. Nous sommes sûrs que parmi ce qui précède, il y aura des idées qui vous aideront à mettre en œuvre un projet efficace d'un point de vue commercial et utile pour les utilisateurs.

Sous Nouvelle année quelqu'un prédit l'avenir sur le marc de café et jette ses pantoufles par-dessus son épaule. Et les designers tentent de sonder l’avenir et d’identifier les tendances qui deviendront le thème principal de 2017. Essayons aussi. Nous nous fierons non seulement au goût et au fait que « le directeur artistique l’a dit », mais aussi à l’analyse.

1. La vidéo est un élément fonctionnel

Les textes sont trop difficiles, il faut se concentrer. Les images ne sont pas informatives. Et la vidéo est le type de contenu qu’un internaute moderne est prêt à consommer et à siroter. Et lorsque vous racontez une histoire à l'utilisateur - par exemple, comment créer processus difficile développement de sites Web - utilisez-le. Filmez et montrez comment un analyste réalise des prototypes et un designer dessine des maquettes. Plongez l'utilisateur dans l'histoire et répondez aux questions qu'il pourrait se poser.

Et arrêtez de diffuser des vidéos partout où le client demande quelque chose à couper le souffle dans les limites du budget. Vidéo pour la beauté - l'espoir brisé de l'utilisateur. Il regarde et espère qu'ils lui montreront quelque chose d'utile, lui raconteront une histoire. Mais non. Par conséquent, en tant qu’élément décoratif de la conception Web qui ne remplit pas de fonction utile, la vidéo reste en 2016.

Oui: Une vidéo qui répond aux questions des utilisateurs et résout les problèmes du site Web.
Non: La vidéo est en arrière-plan parce qu’elle est belle et que tout le monde le fait comme ça.

2. Des cinémagrammes au lieu de vidéos

Utilisez des cinémagrammes. Elles sont plus intéressantes que les images statiques, mais ne donnent pas de faux espoirs aux utilisateurs, comme des vidéos sans histoire ni but.

Soigneusement! Les cinémagrammes sont terriblement collants.

3. Graphiques de police

Une autre alternative aux vidéos et aux images est la police graphique. Cela décore à la fois le site et le rend plus informatif. La principale préoccupation ici est la qualité du contenu. Mais c'est une histoire complètement différente.

4. Les icônes sont le principal élément décoratif

Pourquoi avez-vous besoin d’images, de vidéos et de polices de caractères, si vous pouvez ajouter « wow » aux icônes qui seront déjà sur le site ? Sérieusement, ajoutez une animation personnalisée et arrêtez-vous. Vous serez le plus tendance.

5. Infographies collantes

Le problème pour les utilisateurs est qu’ils deviennent moins assidus. Et oublieux comme des poissons rouges - ils sont allés sur le site, puis le téléphone a cligné (oh, une fausse alarme - juste un reflet de soleil), sont revenus au moniteur et ne se souviennent plus de ce qu'ils faisaient ici. Et ils partent.

Le problème s'aggrave chaque année. Par conséquent, la tâche du concepteur est d’accrocher l’utilisateur et de le forcer à interagir avec le contenu, même s’il s’agit de statistiques ennuyeuses. Surtout (!) si ce sont des statistiques ennuyeuses.

Animez-le, peignez-le avec des couleurs vives, forcez l'utilisateur à interagir avec lui - faites tout pour attirer l'utilisateur et ne le lâcher qu'à la fin de la page.

6. Navigation combinée

Une technique qui gagne en popularité - combinant le défilement horizontal et vertical - va également égayer le quotidien morne de l'utilisateur, l'intéresser et l'obliger à interagir de manière réfléchie avec le site.

7. Éviter le menu hamburger

Dans 99,9 % des prévisions de conception de sites Web pour 2015 et 2016, les auteurs promettent que cette année, les concepteurs abandonneront certainement le menu hamburger. Juste comme ça. Bon, soutenons la tradition et disons aussi : en 2017, la carte hamburger ne sera pas à la mode, ne fais pas ça, pouah !

Le problème avec l’icône à trois barres est qu’elle n’est pas intuitive. Il est reconnu par les Kalachi chevronnés qui ont déjà interagi avec lui et savent ce qui se cache derrière le symbole. Mais de plus en plus de nouveaux arrivants apparaissent sur Internet : aussi bien de très petits têtards que des personnes âgées. Et l’icône du menu hamburger ne leur est ni familière ni compréhensible. Ils ne peuvent découvrir ce qu'elle cache et où se trouve le menu qu'après avoir vécu une expérience douloureuse.

Soyons réalistes : il est peu probable que vous puissiez abandonner complètement le menu hamburger. Mais avant de vous lancer, recherchez une alternative possible pour chaque projet.

studio-spoon.co.jp

8. Encadrement autour du site

Une solution populaire consiste à ne pas étirer le site pour remplir tout l'écran, mais à le placer dans un cadre soigné. C'est sympa et il y a de l'espace libre qui peut être utilisé pour la navigation (pourquoi pas, puisque le menu hamburger est en train de mourir).

télétype.en ligne

9. Plus d'émoticônes

Moins l’utilisateur déploie d’efforts pour réagir, plus il sera disposé à le faire. Et ils n’ont pas trouvé de réactions plus simples que les emojis. Pour l'instant, sur les sites Web, vous ne pouvez aimer que le contenu, le maximum est de donner une Emote Facebook. Mais il est temps de passer aux emoji, chers collègues designers.

10. Conception matérielle

Oui, il est toujours avec nous.

11. Plus de mobile d’abord

De plus en plus d'utilisateurs consultent des sites Web à partir de téléphones mobiles, c'est pourquoi l'approche Mobile First est chaque année plus facilement acceptée par les clients. Ce n’est plus une expérience étrange, mais une méthode qui se justifie. Préparez-vous donc à une avalanche de sites du même type, mais tellement pratiques pour les téléphones portables.

12. Plus de micro-interactions

Les sites Web absorberont davantage de fonctionnalités des applications mobiles. En 2017, il y aura des micro-interactions étonnantes qui feront frissonner vos doigts. Comme un cœur sur Twitter – eh bien, c’est une œuvre d’art ! Je veux le presser pour toujours. Il y en aura davantage dans les projets Mobile First et classiques.

13. Les CTA sont encore plus intrusifs

Le créateur attise la beauté pour la beauté uniquement sur la table et sur Dribbble. Dans d'autres cas (dans ceux pour lesquels de l'argent est payé), les spécialistes du marketing respirent fort dans son oreille, qui ont besoin de quelque chose de plus brillant ici et d'un bouton plus gros là. Il semble qu'en 2016 il y ait eu un tournant et une refonte de ces exigences - attendez-vous à de gros blocs CTA juteux et accrocheurs en 2017. De telle sorte que les marketeurs n’ont rien à y ajouter.

strv.com

14. Nostalgie des années 80

Sur l'Internet raffiné, les concepteurs regrettent les pixels des lampes à tête d'allumette, le son huit bits des décodeurs et le bruit des téléviseurs à tube. Et ils compensent leur nostalgie des années 80 et 90 dans la conception de sites Web. Soyez à la mode : ajoutez des couleurs acides, des interférences et des pépins à vos projets.

rétrominder.tv

15. Évitez les photos d’archives

Les images d’archives nous font déjà grincer des dents, sérieusement. Le menu des hamburgers est pire et il est plus facile de les remplacer. Alors filmons le nôtre.

Le 21ème siècle est dans la cour, kamon. Les téléphones sont devenus tels qu'ils prennent des photos de haute qualité. Ce n’est donc pas un problème de filmer les employés ou le processus de travail en ce moment sur votre téléphone. L'essentiel est le temps et l'envie de réaliser un bon projet.

16. Verts

Les gars de Pantone pensent que la couleur de 2017 est cette petite verdure verte. Écoutons-le et ajoutons-le à notre liste.

17. Une nouvelle approche du prototypage

Quel que soit le merveilleux dessin que vous dessinez, l'essentiel est de le présenter de manière à ce que le client tombe amoureux. Ou du moins, je l'ai vu comme vous le voyez.

Une mise en page statique peut à peine faire face à cette tâche, vous devez donc en 2017 améliorer vos compétences en présentation. De sorte qu'immédiatement, avant l'aménagement, le client voit tous les bancs inventés, et ne les imagine pas dans son esprit. Sinon, il imaginera quelque chose qui ne va pas, créant des attentes que les développeurs ne pourront pas justifier.
Ce n’est plus comme il faut pour un designer de simplement dessiner et montrer une image. Vous devez être capable de gérer l'un des outils de prototypage pour créer un modèle interactif ou améliorer vos compétences en animation.
Voici votre arsenal pour l’année à venir, chers collègues. Mais ne vous disputez pas avec un client qui veut un visiophone. Ne placez pas d'éléments de pixels et d'émojis là où vous avez besoin d'un commerce électronique propre et minimaliste. Et ne bombardez pas les clients réticents sur Skype avec des liens vers cet article. Utilisez les tendances à bon escient – ​​ou ne les utilisez pas du tout. Quoi qu'il en soit, dans trois ans, ils seront complètement mis à jour :)