Les avantages d’une typographie de qualité. Chargement facile des pages

• Traduction

Le monde de la conception Web est dynamique et diversifié. De grands changements ne se produisent pas ici chaque année. Ceci est confirmé par la croissance rapide de la technologie, qui a montré au cours des dernières années que les tendances importantes en matière de conception de sites Web dans un avenir proche se concentreront sur l'amélioration des conceptions existantes.

Le design plat deviendra plus texturé, les « expériences cinématographiques » deviendront plus courantes et l'utilisation de bibliothèques JavaScript permettra davantage d'expérimentation. Nous sommes convaincus que la popularité croissante de WebGL et réalité virtuelle nous permettra de transformer les sites Web que nous connaissons en quelque chose de nouveau avec des fonctionnalités interactives intéressantes.

Dans cet article, nous examinerons les 11 plus grandes tendances attendues en matière de conception de sites Web cette année. Alors installez-vous confortablement et commencez à lire !

1. WebGL (Bibliothèque graphique Web)

Parmi les dernières réalisations figure la technologie notable WebGL (Web Graphics Library). De nombreux sites étonnants apparus récemment l’utilisent.

En termes simples, WebGL est un moyen de restituer des graphiques 3D et 2D interactifs dans des navigateurs avec accélération matérielle, sans aucun plugin.

1.1 Application WebGL 3D interactive

Découvrez Curiosity (version NASA)

WebGL était l'un des sujets centraux de la conférence SIGGRAPH 2015. Présentation sur Graphiques 3D et WebGL, vous pouvez regarder sur cette chaîne Youtube.

Dans cette vidéo d'une heure et demie, vous découvrirez l'application Web Experience Curiosity de la NASA, créée pour marquer le troisième anniversaire de l'atterrissage du rover Curiosity sur Mars. L’application permet aux utilisateurs de « monter » le rover 3D de la NASA sur la surface de Mars et de le « contrôler » avec un bras robotique.

Pour créer cette ressource, nous avons utilisé Blend4Web (un framework pour créer des applications 3D basées sur un navigateur) et Blender (un package pour la modélisation et l'animation 3D).

Le site Beloola utilise three.js (une bibliothèque JavaScript)

Projet « The Boat » de SBS TV (Australie)

La chaîne de télévision australienne SSB TV a retravaillé l'histoire « Le bateau » de l'écrivain Nam Le sur sa fuite du Vietnam et l'a transformée en une histoire vidéo interactive en utilisant WebGL. L'application se compose de plusieurs parties avec une excellente animation et des illustrations coloriées à la main. Cela utilise également three.js, tout comme l'exemple précédent.

Parce queSouvenir

D'un point de vue technique, il s'agit d'une animation bidimensionnelle continue réalisée dans un espace pseudo 3D. Ça a l'air très impressionnant!

2. VR (réalité virtuelle)

La réalité virtuelle (VR) est une technologie connexe qui pourrait potentiellement bouleverser le monde des gadgets en 2016. Peut-être que très bientôt les choses deviendront beaucoup plus intéressantes.

Timeshift du site Web165

Balises : ajouter des balises

Alina Filatova

16/07/2015 | | 2 commentaires

Savez-vous quelle question les clients posent rarement pour une raison quelconque ? « Quel site est à la mode en ce moment ? » !
Oui, oui, sur Internet, comme dans tout autre domaine, il y a bien sûr sa propre mode, ses propres « babioles », « astuces » et tendances.

Si nous parlons de la mode Web moderne, plusieurs tendances de design à la mode ont émergé en 2014-2015 et se dirigent avec confiance vers l'avenir. Si vous aimez « naviguer » sur Internet, vous avez probablement rencontré récemment de plus en plus de sites qui utilisent un design plat et semi-plat (le soi-disant « style Metro »), de grandes images et une typographie complexe. En outre, l’utilisation de vidéos ou de cinémagraphes sur les sites Web devient clairement courante.
Alors, quelle est exactement la tendance cette saison du Web ?

Ainsi, en 2015-2016, toujours en tendance :

1. De grandes et belles images

Depuis 2014, les grandes images d’arrière-plan de haute qualité sont devenues à la mode.
De plus, il est souhaitable que ces illustrations soient uniques et spéciales, spécialement sélectionnées pour le site. Étant donné que presque tout le monde aime les belles images, cette tendance tient fermement sa position et, en 2015, les images sont toujours utilisées activement et, en plus, elles ont augmenté en taille et sont devenues encore plus qualitatives.

2. Conception plate

   Fin 2013 - début 2014, l'ère du flat design, appelé « style métro », a commencé.
   Les nouvelles tendances de la mode sur le marché ont été définies par des monstres tels que Microsoft et Apple, et tous les autres participants ont repris avec joie les dernières tendances. La mode du design plat se poursuit en 2015. Cette conception épurée et légère permet aux sites de paraître très modernes.

   Les principaux signes de la tendance : d'immenses espaces blancs, de gros boutons, une police claire. Le design plat exclut les ombres, les dégradés et tout autre dispositif graphique donnant aux éléments une apparence tridimensionnelle. Ces fonctionnalités de conception permettent aux sites Web de se charger rapidement sur n’importe quel appareil, y compris les appareils mobiles.

3. Contenu émotionnel

   Même si ce n'est peut-être pas la solution la plus simple, les principaux acteurs médiatiques ont commencé à tirer parti des avantages uniques d'Internet pour créer du contenu émotionnel. Son objectif principal est d'accrocher émotionnellement le visiteur, de susciter une réponse spirituelle.

   Pour y parvenir, des articles savamment rédigés, des photos et des vidéos émotionnelles sont utilisés. Cette tendance a commencé en 2012 et se poursuit encore aujourd'hui. Et les histoires racontées deviennent plus personnelles, visuellement captivantes et convaincantes.

4. Meilleure typographie

   De plus en plus de projets Web utilisent une excellente typographie. La hiérarchie visuelle s'améliore, des polices plus belles et uniques sont utilisées et des déclarations assez fortes sont faites par les concepteurs de sites Web. Cette direction a reçu l’impulsion principale en 2015.

5. Illustrations et photos personnalisées ; illustrations dessinées à la main

   Il semble que l’ère des photos sans âme provenant des banques de photos soit enfin révolue. Auparavant, seuls les paresseux n'inséraient pas sur leur site Internet une poignée de main fatiguée ou des visages identiques souriants à la table des négociations. Et étant donné que de nombreux concepteurs de sites Web utilisent des polices et des polices assez standardisées, solutions de couleurs, de nombreux sites commençaient à ressembler à des jumeaux. Assez!

   Enfin, l’individualité a remplacé les visages plastiques et les poses contre nature. Les icônes et les illustrations sont créées spécifiquement pour chaque client, la tendance principale étant les illustrations dessinées à la main. Tout cela permet à la fois au site et à l'entreprise elle-même d'acquérir une brillante individualité. Dites adieu à la photographie d’archives et bonjour à l’identité personnalisée !

6. Vidéo

   Depuis 2014, les grandes vidéos haute définition sont très impressionnantes sur les sites Web.

   En 2015, la capacité a encore augmenté. Des vitesses accrues permettent désormais une utilisation encore plus vidéo. Personne ne doute qu'une courte vidéo de trois minutes bien tournée puisse refléter pleinement l'âme de l'entreprise et « accrocher » le client.

7. Cinémagraphes ou vidéo en boucle

   Si pour regarder une vidéo sur un site Web, vous devez cliquer sur le bouton « Lecture », vous n'êtes pas obligé de le faire dans le cas d'extraits vidéo en boucle. La vidéo en boucle se déplace toute seule en cercle et peut facilement être utilisée comme arrière-plan efficace.

   Ces mini-vidéos publiées sur page d'accueil site, tous les visiteurs le remarquent. Les images en mouvement attirent instantanément l’attention, impliquent émotionnellement le spectateur et racontent une histoire courte et puissante. Souvent, directement sur la vidéo, il y a un bouton « Play » pour qu'un visiteur intéressé puisse regarder la version longue ou visiter la page de destination. De tels sites ont l’air très design et, en 2015, ces histoires interactives constituent une tendance très puissante.

8. Filet

   Une autre tendance à la mode est le design avec de gros blocs disposés en grille comme un collage. Il vous permet de présenter rapidement et clairement le produit disponible sur le site ou de démontrer des échantillons de votre travail. Une grille bien planifiée peut rendre la navigation sur un site Web très facile.

9. En-tête fixe

   Un autre « truc » de la saison est l’en-tête du site fixé en haut. Quelle que soit la façon dont le visiteur fait défiler le site, l’en-tête reste toujours « collé » en haut de la page. D'un point de vue esthétique, ce déplacement est très bénéfique : le header fixe la structure du site et relie tous ses éléments.

   Mais au-delà de la beauté, cette innovation a aussi utilisation pratique: L’avantage pour les visiteurs est qu’ils n’ont pas à chercher longtemps des liens pour naviguer sur le site : ils sont désormais toujours au même endroit. De plus, il est extrêmement pratique pour les spécialistes du marketing : les pages et les rappels les plus importants restent toujours visibles pour les utilisateurs.

10. Conception adaptative

    Peut-être le plus tendance principale la saison est un design réactif. Selon Google, le nombre d'utilisateurs qui accèdent à Internet depuis appareils mobiles, fin 2014, il était passé à 50 % !

    Par conséquent, les sites mobiles qui s'adaptent aussi bien aux smartphones, téléphones, tablettes et autres gadgets deviennent de plus en plus pertinents. De gros boutons, un menu accessible, des informations bien situées - tout cela attire les utilisateurs et les maintient sur un tel site le plus longtemps possible.

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 de design de l'année en cours avec des descriptions et des 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

Décisif en conception mobile les applications jouent la conception de micro-interactions dans le flux d’actions plus sérieuses. 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. Un style signature et reconnaissable qui ne peut être confondu avec rien d’autre.

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, cartes à jouer, etc.). L’idée est que les informations les plus pertinentes sur un sujet sont regroupées dans un seul petit conteneur.

4. Chargement des animationségayer 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 ;

Utiliser caractère gras dans des 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 de la palette de couleurs de 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.

Mélanger les couleurs avec des tons qui s’estompent progressivement est un choix populaire chez 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 des couleurs vives pour mettre en valeur des mots et des expressions comme « libre », « 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. Utilisez la bonne couleur pour évoquer l’émotion souhaité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

Appareils avec haute résolution les écrans 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 des photos d'archives et des photos originales de manière à les rendre 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 attrayant et une vitesse de chargement rapide 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 environnement moderne création de sites web. 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.

Succès commercial sur Internet - un site Web fonctionnel et une promotion. Aujourd’hui, il est évident pour tous que les sites Internet sont les plus méthode efficace promouvoir les affaires sur Internet. L'expansion des réseaux sociaux et du SMM n'a fait qu'élargir les opportunités pour les petites entreprises, mais a réduit l'intérêt pour les sites. En règle générale, les commerçants qui ne disposent pas de leur propre ressource réseau se posent de nombreuses questions liées à la fiabilité et à la réputation. Groupe dans dans les réseaux sociaux Il est aussi simple à supprimer qu'à installer. De plus, à projets majeurs Il existe souvent plusieurs groupes clonés, donc avoir son propre site internet est une sorte de signe de confiance. De plus, beaucoup dépend directement du niveau du site lui-même.

Le niveau de développement des ressources joue un rôle important. On peut dire qu'il peut être utilisé pour évaluer le degré de réussite d'une entreprise. De nombreux internautes connaissent déjà bien l'aspect technique et peuvent donc évaluer l'attention accordée à une ressource particulière. Par exemple, les sites créés en HTML simple appartiennent depuis longtemps au passé. Bien sûr, vous pouvez encore trouver de nombreuses ressources de ce type sur Internet, mais elles rappellent les mammouths du passé. Aujourd’hui, les sites Web s’adaptent à leur temps et nécessitent une mise à jour rapide. Parallèlement, des sites Internet sont créés en fonction des grandes tendances.

Chaque année apporte ses propres tendances. Artyom Ponomarev, développeur en chef de l'agence Marketing Guru, a partagé les principales tendances en matière de conception de sites Web.

Mise en page adaptative et modèles d'interface utilisateur

On s'attend à ce que les principales tendances de 2016 découlent harmonieusement de la saison dernière. Et ils persisteront jusqu’au prochain tournant. De nos jours, sur le Web, les principales tendances sont définies par les appareils mobiles. La tendance principale peut donc être appelée modèles réactifs. Ceci est à la fois bon et mauvais. Conception adaptative - excellente option du point de vue de la mise en œuvre technique, mais il y a aussi un effet secondaire important. Les sites Web basés sur des modèles d’interface utilisateur sont similaires à bien des égards, ce qui rend la tâche des concepteurs très difficile.

Conception de mosaïque

La conception du site Web a été considérablement simplifiée. Les principales tendances sont définies par les plates-formes mobiles et il est difficile de surestimer la contribution de Microsoft au développement de l'interface Windows 8, à partir de laquelle a commencé la diffusion du flat design. Les solutions graphiques simples sont populaires, sans éléments décoratifs inutiles, car cela augmente le trafic. Au lieu de la quantité, la qualité augmente. Par conséquent, les images utilisées dans les modèles de sites Web doivent être en bonne qualité. En règle générale, à cette fin, une image de haute qualité est sélectionnée, qui est utilisée comme arrière-plan principal.

Des graphiques au lieu du texte

Dans le même temps, le rôle de l’infographie s’est accru. Les icônes graphiques facilitent la perception des informations. Ainsi, lors de la présentation des informations, elles s'appuient sur des images. Cela est dû en partie au fait que lire du texte sur l’écran d’un smartphone est beaucoup plus difficile que regarder des icônes. Les polices fines sans empattement avec des interlignages généreux ont gagné en popularité. Ces polices sont faciles à lire sur les grands et petits écrans. Les icônes sont conçues principalement avec un contour.

Défilement sans fin

L'émergence des sites Web d'une page a conduit au développement d'outils de visualisation. Le défilement infini a gagné en popularité. Toutes les informations sont collectées sur le premier écran et le contenu supplémentaire est chargé progressivement au fur et à mesure que vous faites défiler. Les éléments de menu sont cachés derrière une icône distincte.

Interaction interactive

Contenu multimédia

Avec le changement des algorithmes de recherche, le contenu du site a été complètement révisé. Au stade actuel, les sites Web contiennent principalement du contenu multimédia, utilisant des graphiques, des fichiers audio et même vidéo de haute qualité. Les fichiers vidéo peuvent souvent être trouvés sur des sites Web en arrière-plan.

Marketing Guru Company est une agence à service complet spécialisée dans le développement et la mise en œuvre de projets Internet. L'équipe de l'entreprise comprend des spécialistes spécialisés. L'entreprise compte plus de 530 projets mis en œuvre avec succès.

Qu’est-ce que la conception web change ?

Avant de commencer à prévoir les tendances, il est important de comprendre pourquoi la conception Web change.

Les technologies: Les améliorations des technologies et des outils disponibles liés à la fois à la création et à l’utilisation de sites Web déterminent grandement les capacités des concepteurs et des développeurs.

Utilisateurs: La manière dont les visiteurs, les concepteurs et les développeurs de sites Web utilisent la technologie disponible modifie également le secteur de la conception Web, l'obligeant à s'adapter aux tendances les plus prometteuses.

Autres domaines créatifs : Des articles tendance issus d'autres domaines créatifs (comme conception graphique et haute couture) finiront également par faire partie de l'industrie de la conception Web et vice versa. La créativité se développe grâce au mélange et à l'association des idées, ce qui permet de mieux transmettre les émotions et de proposer des solutions intéressantes.

La plupart d'entre nous utilisent désormais plusieurs appareils pour surfer sur le Web (tablettes et ordinateurs portables, par exemple) et s'attendent à ce qu'un site Web fonctionne correctement et ait fière allure, quel que soit l'appareil utilisé pour y accéder.

Conception Web adaptative (Responsive Web Design ; RWD), qui implique de charger le même code HTML sur n'importe quel appareil et d'utiliser CSS pour le modifier apparence les pages prenant en compte les spécificités d'un appareil particulier sont une technologie courante recommandée par Google pour une utilisation lors de l'optimisation de sites Web pour les appareils mobiles. C'est pourquoi bon nombre des tendances de la liste ci-dessous reflètent des approches de conception Web qui complètent RWD.

La liste des tendances pour 2016 est la suivante :

Minimalisme et design plat 2.0

En 2015, le minimalisme était très demandé. Et en 2016, la demande pour ce concept se poursuivra. Ce option parfaiteà utiliser en conjonction avec RWD, car il évite toute confusion, se concentre sur les éléments les plus importants et utilise efficacement l'espace. En d’autres termes : moins c’est plus.

Une approche populaire de la conception Web qui correspond très bien à la philosophie du minimalisme est ce qu'on appelle le design plat (alias Flat Design). Aujourd’hui, le plus pertinent est sa dernière incarnation sous la forme du Flat 2.0.

Donne une excellente idée des principes du Flat 2.0 Conception matérielle Google: Un reflet du monde matériel avec un jeu intéressant d'ombre, de lumière et de mouvement qui fournit des repères visuels permettant aux utilisateurs d'interagir avec un site Web.

Les composants clés tels que les grilles, les espaces négatifs, les couleurs vives et les formes époustouflantes transmettent un sens et une hiérarchie, créant ainsi le potentiel d'un engagement plus profond des utilisateurs.

Jusqu'à présent, le design plat signifiait l'abandon complet de toute trace de coins arrondis, d'ombres ou de dégradés de couleurs, mais l'essor du Flat 2.0 pourrait voir le début de l'expérimentation avec des textures minimales et des dégradés doux.

Un style vintage tout droit sorti des années 80

L'ère colorée des ordinateurs encombrants et des énormes téléphones portables, qui s'étend sur les années 80 et au début des années 90, est une source d'inspiration majeure pour les concepteurs de sites Web qui adhèrent à la tendance croissante du style vintage. Icônes et textes pixélisés, arrière-plans galactiques, étoiles et planètes interactives en mouvement - tout cela constituera l'une des tendances les plus visibles dans l'industrie de la conception Web en 2016.

Expérience interactive et immersive

Les gens aiment par nature parler et écouter. bonnes histoires. Grâce à la magie de l'élément canevas HTML5, aux animations et transitions CSS3, aux API JavaScript modernes (comme WebGL et Greensock) et à la puissance de l'accélération matérielle, les histoires racontées sur le Web deviendront encore plus immersives et interactives.

La généralisation de la navigation sur Internet à l'aide d'appareils mobiles a conduit les utilisateurs à s'habituer à un défilement prolongé. Les concepteurs de sites Web capables de raconter de belles histoires et d'impliquer les utilisateurs avec leur contenu pourront amener les utilisateurs à faire défiler jusqu'au pied de page.

Illustrations et iconographie vibrantes et uniques

L'avènement des moniteurs à haute densité de pixels a montré que les formats d'image standard ne sont pas toujours adaptés à une utilisation dans Internet moderne. L'utilisation de fichiers .jpg et .png peut entraîner une pixellisation sur les écrans Retina, ce qui dégrade l'esthétique du site.

Ce problème peut être résolu en utilisant le format SVG (Scalable Vector Graphics) pris en charge par les navigateurs modernes et en utilisant des polices avec des icônes facilement implémentées. Avec ces éléments, vous pouvez vous attendre à voir davantage de solutions de conception Web dans un avenir proche, basées sur des illustrations colorées et uniques, des polices d'icônes élégantes dessinées à la main et des icônes SVG qui restent nettes et belles quelle que soit la résolution d'écran.

Les polices font une déclaration

Le travail de typographie est un élément central du design et du développement de l’image de marque. Cela est également vrai pour Internet, où la consommation d'informations est l'objectif principal des utilisateurs visitant les pages d'un site particulier.

Grâce à des services tels que Google Fonts et Typekit, qui fournissent aux visiteurs des polices uniques et faciles à utiliser, l'époque où les concepteurs de sites Web se limitaient à travailler avec seulement quelques polices système est révolue.

Le design plat et le minimalisme profitent déjà des polices de grande taille et audacieuses. En 2016, vous pouvez vous attendre à encore plus d’expérimentations avec l’utilisation de polices artistiques sur les sites Web.

Visuels haute résolution

Augmenter bande passante le Web, la prise en charge étendue des navigateurs pour l'élément vidéo HTML5 et les nouvelles façons de charger sélectivement des graphiques haute résolution sur les appareils Retina entraîneront tous une croissance continue de l'utilisation d'images d'arrière-plan haute résolution époustouflantes et de vidéos HD sur les sites Web en 2016.

La prise en charge croissante par le navigateur de la propriété background-blend-mode de CSS3 peut conduire à la prolifération d'effets artistiques très intéressants dans les images créées directement dans le navigateur avec quelques lignes de code CSS.

Les effets de la catégorie cinémagraphe sont également de plus en plus utilisés. Ils vous permettent de créer des images statiques avec des éléments animés qui attirent l'attention des visiteurs du site. Ces effets ne sont pas nouveaux, mais le succès des « Live Photos » sur les derniers iPhones et la prise en charge de l'élément de toile HTML5 dans de plus en plus de navigateurs devraient contribuer à transformer les effets cinémagraphes en l'une des principales tendances de conception Web de 2016.

Dispositions basées sur une grille plus flexibles

Les mises en page de grille inspirées de Pinterest sont toujours très populaires, même aujourd'hui. Le minimalisme, le design plat et les frameworks frontaux populaires comme Bootstrap, qui facilitent l'utilisation des grilles, contribuent tous à la popularité croissante des mises en page Web structurées basées sur des grilles.

En 2016, vous pouvez vous attendre à une popularité croissante des mises en page flexibles basées sur une grille. Le désir des concepteurs de sites Web d’accroître l’engagement des utilisateurs et l’interactivité du contenu entraîne une transition vers des mises en page basées sur des grilles plus flexibles et un abandon des options classiques.

Au lieu d'une conclusion

Les tendances en matière de conception de sites Web énumérées ci-dessus se complètent, rendant la conception de sites Web encore plus diversifiée, intéressante et unique. Mais cette liste pourrait bien s’allonger. Selon vous, quelles tendances en matière de conception de sites Web définiront 2016 ?