20 tendances en matière de création de sites Web à surveiller en 2017

Une autre année a passé et les concepteurs se tournent vers l'avenir. Beaucoup tendances de design prometteuses devraient éclater en 2017. L’année dernière, j’ai couvert les tendances du design 2016 et nous avons vu beaucoup de changements depuis.

Donc, pour ce post, j'ai choisi le top 20 des tendances que j'ai remarqué gagne du terrain en 2017. Ces tendances du design peut s'appliquer à n'importe quel site web, alors gardez vos yeux sur ces techniques que nous avançons en 2017 et au-delà.

1. “En vedette dans” badges

Des start-up, des blogs, des projets SaaS et même des petites entreprises utilisent désormais le “comme présenté dans” badges sur leurs sites Web. Ces badges souvent lien vers des articles sur des blogs grand public tels que HuffPo, Forbes, CNN, Fox et d’autres médias.

Le but est de valider un site web et construire la confiance avec de nouveaux visiteurs. Il est plus facile pour quelqu'un de faire confiance à un site Web lorsqu'il peut voir qu'il a été mentionné dans des publications faisant autorité.

En fait beaucoup de top blogs apprécier l'exposition, donc ça aide vraiment tout le monde impliqué. Ces grands sites souvent libérer leurs logos en ligne mais vous pouvez également trouver des fichiers PNG ou SVG transparents simplement en cherchant sur Google.

En outre, il est recommandé que vous lien vers l'article original mentionner votre site. Cela prouve que tu as vraiment été mentionné sur le site, et vous ne vous contentez pas de faire des réclamations.

2. Liens de navigation en majuscules et en majuscules

j'ai vu des dizaines de menus de navigation élégants tous reposant sur ce même design. Ces liens de navigation varient en taille et en police mais ils ont l'habitude ont des caractéristiques similaires, tel que:

• Toutes en majuscules
• En gras
• Régulièrement espacés
• Aligné sur le coin droit

La page d'accueil de Zazzle est un excellent exemple. Mais vous pouvez trouver ceci sur de nombreux sites de démarrage parce que c'est un moyen propre de partager des liens qui sont faciles à lire et à parcourir.

J'associe surtout cette tendance avec des entreprises et des startups technologiques mais il peut aussi être répandu sur les blogs.

Prenez note de la prochaine fois que vous verrez cette tendance car elle est partout. Et je m'attends à ce qu'il continue de croître jusqu'en 2017.

3. Blogs de style magazine

Le blogging était un tel concept de niche au début des années 2000. Si vous avez publié un blog en 2003, il était considéré comme un joli petit passe-temps. En un peu plus d'une décennie, cette tendance a radicalement changé. Maintenant les blogs peuvent fournir un revenu à temps plein, et ils commencent à ressemble beaucoup plus à des magazines numériques.

Revenez sur la conception originale de TechCrunch lors de son lancement en 2006. Ressemble à un blog WordPress générique right?

Regardez maintenant la page d'accueil actuelle de Techcrunch en 2017:

Non seulement ressemble à un magazine, ça aussi fonctionne comme un. TechCrunch publie des dizaines (voire des centaines) de nouveaux messages chaque jour. Ils sont la source numéro un pour les nouvelles sur le démarrage.

Les tendances du design de style magazine font une grande différence. La page d'accueil utilise un grande section de l'histoire, chaque post a sa propre vignette, et les pages de l'article centre autour du titre.

Quand vous y réfléchissez, TechCrunch n'a pas beaucoup changé. C'est toujours “juste un blog”. Mais c'est conçu et géré comme un magazine, et cela fait toute la différence.

4. Arrière-plans vidéo

La lecture automatique du son est peut-être la tendance la plus agaçante du Web. Mais étonnamment, lecture automatique de la vidéo (sans son) est une tendance en croissance rapide. Vous pouvez repérer cela sur des dizaines de sites d’affaires où un fond vidéo reprend tout l'écran.

J'aime beaucoup cette technique quand elle est appliquée correctement. Tant que le la vidéo concerne le site et ne pas obstruer le contenu, Je pense que c'est un effet cool à utiliser dans votre en-tête.

5. Boutons fantômes

Comme minimalisme nourrit plus loin dans la conception Web, de nombreuses nouvelles tendances émergent. Une de ces tendances est la montée des boutons fantômes qui n'ont pas de remplissage intérieur mais qui ont une bordure extérieure.

La plupart du temps, ces boutons contraste avec les autres attirer l'attention. Vous pouvez le voir sur la page d'accueil d'Instantmojo avec le bouton d'inscription vert. situé juste à côté le bouton fantôme qui mène à une démonstration en direct.

D'autres sites ont adopté un style purement fantomatique à leurs boutons sur tout le site. Un bon exemple ici est la nouvelle mise en page Bootstrap.

Je pense que les boutons fantômes fonctionnent sur des sites qui pencher vers le minimalisme. Ils ne conviennent peut-être pas à tous les sites Web, mais je vois leur utilisation augmenter avec chaque année..

6. Opt-ins de la fenêtre modale

Les fenêtres modales sont super énervantes, et je ne peux imaginer qu'un utilisateur les aimerait. toutefois il est prouvé qu'ils augmentent le nombre d'inscriptions, et les commerçants ne peuvent pas ignorer les techniques qui fonctionnent.

C’est pourquoi je pense que les fenêtres d’inscription modale continuer à monter en 2017.

Ils ne sont pas ce que je préfère et je ne les ajoute jamais à mes sites Web. Mais si l’objectif est d’augmenter le nombre d’inscriptions, les fenêtres modales sont un moyen infaillible de faire avancer les choses..

De nouveaux plugins peuvent même intention de sortie cible lequel déclenche un modal chaque fois que l'utilisateur tente de quitter le site. D'autres modaux apparaissent après x secondes ou sont configurés pour s'ouvrir lorsque l'utilisateur fait défiler le menu suffisamment loin.

Peu importe la façon dont les modaux sont déclenchés, comment ils sont conçus ou ce que vous ressentez à leur égard, je pense qu'ils resteront à long terme.

7. Illustration et art vectoriel

Avec les nouveaux programmes de conception de vecteurs tels que Sketch et Affinity Designer, une nouvelle vague d'illustrateurs fait son entrée sur le Web. Le design graphique et le design d'interface ne cessent de fusionner avec des designers plus multidisciplinaires, plus que jamais auparavant.

Cela signifie que nous verrons beaucoup plus d'icônes personnalisées et illustrations pleine page dans le futur proche.

De nombreux illustrateurs sont des artistes habitués, je pense que nous verrons plus de fonds de page complète fait avec le logiciel de peinture numérique, rendu en détail comme concept art.

8. Correction des barres de défilement

La première vague de design fixe axé sur les barres de navigation. Ceux-ci sont tous trop communs surtout dans les conceptions réactives où la barre de navigation fixe reproduit le sentiment d'une application mobile native.

Mais en 2017, je m'attends à voir un autre élément collant-la barre latérale collante.

Presque tous les grands blogs utilisent ce type de barre latérale collante. Il garde le contenu en vue à tout moment et augmente la probabilité que les utilisateurs interagir avec le contenu de la barre latérale.

De plus, avec des dizaines de plugins jQuery gratuits pouvant reproduire l'effet de la barre latérale collante. C'est plus facile que jamais de l'installer sur n'importe quel site web.

9. Table des matières en page

Une étude de cas récente a révélé que le contenu de la forme longue surpasse celui de la forme courte dans les classements et la qualité de la rétention des utilisateurs. Cela n’est pas toujours vrai, car il est possible de répondre rapidement à certaines questions..

Mais avec un contenu beaucoup plus long sur le Web, il est naturel de voir plus de tables des matières ajoutées aux articles. Vous verrez cela sur de longs sites de critiques ou dans des articles qui se décomposent en éléments répertoriés..

Ajouter une table des matières peut améliorer l'expérience utilisateur et aider à interrompre la lecture en plus petits morceaux. La table des matières peut aussi aidez votre site à mieux se classer! Si Google trouve que votre page a de la valeur, vous pourriez obtenir des liens de saut dans les résultats de recherche.

Il est peut-être vrai que les ToC sont assez rares en ce moment. Mais je prévois que cette tendance explose en 2017 et bien des années après.

10. dessins colorés lumineux

Je ne sais pas si cette tendance est issue du minimalisme ou en réaction à la conception matérielle de Google. Mais je suis tombé sur des dizaines de sites Web qui utilisent couleurs pastel vives mélangées à d'autres teintes vibrantes pour créer une apparence très fantaisiste.

La page d’accueil de Rentberry est un bon exemple qui utilise également des tonnes de gradients. Et il a même ce qui précède “En vedette dans” badges situés en dessous! Deux tendances sur un site.

Vous remarquerez que les couleurs ne pas imprégner toute la page, et ils sont en sourdine avec d'autres nuances de blanc et de gris.

J'en ai assez vu palettes de couleurs vives à croire qu'ils sont à la hausse.

11. faire défiler les animations

Les concepteurs Web connaissent le détournement de fichiers et son horreur. Cependant ce n'est pas ce que je voulais dire par le titre “animations de défilement”. J'ai vu beaucoup de sites maintenant animer le contenu en vue lorsque vous faites défiler une certaine section de la page.

Cette tendance est principalement réservé aux start-ups et aux entreprises SaaS qui veulent du piquant dans leur conception.

Je ne peux pas dire si c'est une tendance particulièrement utile. C'est certain saisit l'oeil mais je ne pense pas que cela offre beaucoup au-delà de l'esthétique. Pourtant, c'est une tendance qui semble se propager rapidement, et quand utilisé avec parcimonie ça peut être vraiment chouette.

12. Applications sur une seule page (SPA)

Les applications d'une page sont des sites Web construit purement avec des appels Ajax. JavaScript tire le contenu d'un serveur et le charge dynamiquement, alors la page ne rafraîchit jamais.

Des exemples courants sont des sites comme Gmail et Facebook. Mais avec plus de technologie JS, Je remarque de plus en plus de SPA développés tout le temps. Heck, même CodePen pourrait être considéré comme un SPA.

Avec de puissantes bibliothèques frontales telles que React & Aurelia, créer un SPA à partir de rien en 2017 sera encore plus facile.

13. Barres de recherche commutables

Il était ce champs de recherche étaient toujours en vue quelque part sur une page Web, dans la barre latérale ou dans la navigation. Mais récemment, j'ai remarqué beaucoup plus de champs de recherche qui obtiennent caché par défaut, et doit être basculé en vue.

Certainement une tendance pratique à économiser de l'espace sur la page tout en restant garder la fonction de recherche accessible. Si vous ne savez pas où placer un formulaire de recherche dans un nouveau modèle, vous pouvez envisager d'utiliser un champ bascule associé à une icône en forme de loupe dans la navigation..

14. Messages Adblock

On ne peut nier le fait que le blocage des publicités est à la hausse. La seule question est de savoir comment les éditeurs vont gérer cette tendance. Quelques sites poliment ajouter des messages dans les espaces publicitaires comme Time.com. Sur Hongkiat, vous remarquerez annonces internes pour combler le vide ce lien plus loin dans le site.

Une tendance sérieuse que je vois augmenter est blocs de contenu adblock. C'est une technique pour “bloquer les bloqueurs de publicité”. Cette fonctionnalité est déjà en place sur de nombreux sites importants tels que Business Insider et Forbes. Malheureusement, cela nuit à la fois à l'utilisateur et à l'éditeur, et tout découle de techniques publicitaires de mauvaise qualité..

En fin de compte, peu importe qui vous blâmez ou quelle est votre position dans le débat sur le blocage des publicités. Plus de gens installent des plugins adblock, et j'attends plus d'éditeurs à repousser.

15. Icônes SVG pures

Graphiques SVG se sont déjà infiltrés dans le Web, mais ils grandissent de jour en jour. Et j'ai le sentiment que 2017 sera une grande année pour les SVG sur le Web.

Vous pouvez trouver des milliers de jeux d'icônes SVG gratuits sur des sites comme Flaticon si vous savez effectuer des recherches. Mais vous pouvez aussi coder les SVG en HTML, par exemple en utilisant cet exemple sur CodePen.

Ainsi, les concepteurs ont un moyen d'utiliser les SVG, et les développeurs ont aussi un moyen d'utiliser les SVG. La prise en charge des navigateurs modernes semble bonne dans l'ensemble, donc il n'y a pas de problème de compatibilité. Tout ce qui est nécessaire, c’est assez de designers pour reconnaître le pouvoir des SVG et commencez à les utiliser!

16. Adobe XD

Adobe éteint une beta complète d'Adobe XD en 2016, et il a depuis augmenté rapidement. Il actuellement prend en charge Mac et Windows, et son en phase de test avant d'être complètement déployé.

Vous pouvez vous moquer de l’idée que tout programme remplace Sketch, mais Adobe est la principale entreprise de logiciels de création pour une raison quelconque. Plus Sketch n’est encore disponible que sur Mac alors que Adobe est cherche à soutenir tout le monde.

Je crois fermement que nous en apprendrons beaucoup plus sur Adobe XD au cours de la prochaine année. Il peut devenir le logiciel de référence pour conception de maquettes d'interface utilisateur-afin que nous puissions enfin utiliser Photoshop comme outil de manipulation de photos (comme prévu).

Avec l’émergence de nouveaux logiciels, des dizaines de tutoriels et kits d'interface graphique freebie ainsi que. Vous pouvez trouver beaucoup de freebies Adobe XD dans Dribbble avec deux nouveaux sites de freebie axés sur XD Designmine et XD Guru.

17. Plus de menus hamburger

Aimez-le ou détestez-le, le hamburger est là pour rester. Il y a beaucoup d'études d'utilisabilité qui argumenter contre les menus cachés. Mais avec un petit écran et seulement autant d'alternatives, il n'y a pas de meilleure alternative pour l'instant.

Les icônes de hamburger sont lentement devenir des symboles reconnaissables pour les menus de navigation. Tout comme une icône en forme de loupe implique “chercher”, l’icône hamburger à trois barres sera bientôt synonyme de “menu”.

Cela est déjà vrai pour la plupart des individus férus de technologie. Mais chaque année, de plus en plus de gens se procurent un smartphone et commencent à naviguer sur le Web mobile. Et ils apprennent à associer ce hamburger à un menu de navigation sans fin en vue.

18. Icônes de fonctionnalités du produit

J'ai écrit sur cette tendance sur Treehouse mais je ne l'ai pas mentionnée récemment. Et à partir de 2017, cette tendance est ça va être énorme. C'est probablement le moyen le plus courant de partager les caractéristiques du produit sur une page d'accueil.

Vous commencez par faire une liste de fonctionnalités pour votre produit. Le produit peut être un programme SaaS, un thème WordPress ou même un élément physique..

Ensuite, vous pouvez soit icônes personnalisées ou trouver un jeu d'icônes pour représenter ces caractéristiques. C'est mieux de éviter les fonctionnalités génériques tel que “fiable” ou “vite” parce que la plupart des gens attendent ce genre de choses.

Au lieu de cela, la liste des fonctionnalités qui compte réellement. S'il s'agit d'un thème WP premium, peut-être qu'il est réactif, combien de widgets sont-ils fournis ou comment fonctionne le menu.

Ces icônes de fonctionnalités travailler comme des visuels aider vendre chaque fonctionnalité. Le texte seul est difficile à consommer mais les visuels sont beaucoup plus faciles à comprendre en un coup d'oeil.

19. CTA au dessus du pli

Call-to-actions ont été traditionnellement placés partout sur un site web. Mais avec les visiteurs passer moins de temps sur les sites Web, il est crucial d'avoir un CTA fort juste au-dessus du pli.

Ces actions à appeler peuvent être des boutons, des formulaires d’inscription ou d’autres entrées conduire les gens à agir comme vous inscrire ou lire un article de blog.

Je ne peux pas vous dire comment concevoir un CTA ou comment l'optimiser pour les conversions. Mais je peux dire que la tendance semble placer ces CTA au-dessus du pli et bien en vue pour tous les visiteurs à voir.

20. Zones de contenu plus petites

Les moniteurs sont devenus si grands que la plupart des sites Web doivent définir une largeur maximale. Il est beaucoup plus difficile de lire des phrases de 2000 pixels de large par rapport à 700 pixels de large..

Le contenu plus petit est plus facile à consommer, et crée finalement un meilleure expérience sur les sites Web à contenu important.

Je pense que de plus en plus de designers le réalisent et vont lentement réduire la taille de leurs zones de contenu. Je préfère une largeur maximale de 750 pixels, mais vous pouvez aller aussi peu que 600 pixels ou moins.

Paragraphes plus courts avec moins de phrases et zones de contenu plus petites sera toujours augmenter la lisibilité. De grandes publications telles que le NY Times peuvent s’écarter de leurs propres directives structurelles. Mais pour un simple blog ou un site professionnel, la tendance s’oriente vers contenu plus long avec de plus petits paragraphes et zones de contenu.

Emballer

Il y a beaucoup d'autres tendances que je n'ai pas pu couvrir dans cet article, mais je pense que ces 20 sont les plus intéressantes. En 2017, il devrait être évident quelles tendances explosent et lesquelles ne le sont pas..

Et si vous avez d'autres idées ou suggestions sur les tendances de conception à venir, n'hésitez pas à laisser un commentaire ci-dessous..