5 tendances actuelles en matière de conception de sites Web pour 2016

Chaque fois que je vois un lien appelé Tendances de la conception Web pour cette année, je clique dessus avec joie seulement pour être déçu en quelques minutes. Il s’agit toujours, sans faute, de tendances de l’année dernière ou de non-tendances telles que: des illustrations. Par exemple, saviez-vous que les animations sont apparemment une grande tendance? Sérieusement, si vous écrivez une liste de tendances et incluez la vidéo d'arrière-plan en plein écran en tant que tendance pour 2016, vous devriez vraiment essayer de vous connecter et consulter des sites Web avant de rédiger votre liste. Personne comme les appâts au clic. Quoi qu’il en soit, voici une liste des cinq tendances actuelles pour le premier semestre de cette année.

1) Plein écran et non défilable

Les sites non-scrollables gagnent enfin en popularité. Lorsque les sites Web d’une page, qui parcouraient l’éternité, avec un en-tête de lien d’ancre collant en haut, sont presque devenus la méthode standard de création de pages d’accueil, il est agréable de voir les pages sur lesquelles vous devez cliquer pour naviguer. Autant que les gens détestent le scroll-jacking, ça peut être sympa parfois. La clé lors de la conception de ces sites consiste à utiliser l'écran pour les limitations. Prototype dans Keynote. La navigation au clavier est courante sur ces sites.

Notions de base sur la confidentialité Facebook

Trois exemples de sites plein écran sans défilement:

  1. Notions de base sur la confidentialité de Facebook - Un excellent site, bien que pas réactif, de Facebook, expliquant étape par étape comment la confidentialité fonctionne sur son service. Superbes illustrations!
  2. Fantasy - Le nouveau site Web très attendu de l’agence de design Fantasy, lancé plus tôt cette année, n’a pas déçu. En particulier, consultez la section Travail, tout reste à l'écran.
  3. KLM 50 Travels - Beau site de campagne pour KLM. Il vous fait parcourir 50 destinations, un écran à la fois. Naviguez avec les flèches du clavier et la barre d'espace.

2. Titre collant sur le côté

Pour les dernières tendances en matière de conception Web, il est toujours sage de consulter les sites des agences, ou plutôt les studios de design. Et récemment, c’était à la mode de faire défiler vos titres sur le côté du texte. Tous les enfants cools le font. Ceci est une tendance uniquement sur le bureau, de sorte que si vous lisez ceci sur votre téléphone, il vous suffira de me faire confiance à ce sujet, sans consulter les exemples de liens.

Code et théorie

Trois exemples de titres collants sur le côté:

  1. Code et théorie - Les titres de la ville restent dans l’image lorsque vous faites défiler les positions ouvertes sur ce magnifique site Web.
  2. Dépassement de pile - Celui-ci ne correspond pas à la facture à 100%, mais ce n'est pas un site d'agence, ce qui lui donne un laissez-passer. Lors du défilement, la sous-navigation reste collée à droite. Agréable.
  3. DDB Sthlm - Je viens de Suède, je donne donc un exemple suédois. Si vous appuyez sur Travailler dans leur menu et faites défiler l'écran vers le bas, vous verrez que le titre vertical reste sur le côté.

3) Le logo est le chargeur

Cette tendance est énorme et est devenue presque synonyme de sites Web d'agences cette année. Tout le monde l'a. Et ils devraient le faire, car il est superbe et donne au visiteur le sentiment que le site Web fait partie de la marque. Très intelligent.

Instrument

Trois exemples d'utilisation du logo en tant que chargeur:

  • Instrument - Ce site n’affiche leur logo que lorsque la page est en cours de chargement et lorsque vous ouvrez le menu de navigation. C’est nouveau et cinglant.
  • Fubiz - Ce site a fait sensation lors de son lancement et pour de bonnes raisons. Le site a un logo différent pour chaque section, toutes avec de très belles animations.
  • This Also - Grand site Web de studio de design avec beaucoup de jamais vu auparavant directeur artistique pour des sites d'agence. Bien que ce ne soit techniquement pas le logo, l’icône de navigation est le chargeur ici, mais il est situé à l’endroit où un logo est normalement placé.

4) images d'arrière-plan perturbées

Avoir des images d’arrière-plan qui occupent toute la fenêtre du navigateur n’est pas une nouveauté, c’est probablement le top du post classique Actual Web Design Trends 2013, mais cela porte à un nouveau niveau. Ajoutez des effets de survol de la souris sur votre image d’arrière-plan et vous pourrez continuer.

Théorie active

Trois exemples d'images d'arrière-plan perturbées:

  1. Make me pulse - Déplacez la souris sur l’arrière-plan pour voir les montagnes prendre vie, très bien.
  2. Théorie active - Si vous créez un site Web pour votre agence, quel meilleur moyen de démontrer vos compétences en matière de Web fou que de le faire ressembler à une expérience de Google? Aucun.
  3. Détails - Cela prendra du défilement. Cette agence de design suisse ne croit apparemment pas aux liens d'ancrage. Si vous faites défiler l'écran jusqu'au bas de la page 4/4 Nos Experts et survolez les photos, vous verrez une légère distorsion. Agréable!

5) Au-dessus des animations

C'est techniquement possible maintenant, alors pourquoi pas juste? Si cela est fait correctement, il pourrait s’agir d’une expérience très agréable et divertissante sur le plan visuel. Si elle est mal faite, les sites Flash recommencent. Mot du sage: utilisez-le avec précaution, mais dépassez vos limites quand vous l'utilisez.

Waaark

Trois exemples d’animations exceptionnelles:

  1. Waaark - Lol, ce petit studio de design a produit l'une des expériences visuelles les plus époustouflantes de cette année. Laissez les français aller au-delà en matière d'animation.
  2. Animocons - Voici quelques exemples d'icônes avec des animations de clics spectaculaires, toutes réalisées à l'aide de code Web.
  3. Rally Interactive Beta - Rally fait un excellent travail de ne pas avoir juste la bonne quantité d'animations sur leur site. Ils sont devenus fous en haut, puis gardez-le calme lorsque vous avez cliqué et sélectionné quelque chose.

Bonus: pas vraiment une tendance pour le moment, seulement vu à un ou deux endroits, mais la construction de sites Web réactifs qui évoluent indéfiniment va être énorme. Autrement dit, le site a exactement la même apparence sur un écran 1280px que sur un écran iMac 27 "Retina 5100+ px, il n’est que plus grand. Découvrez l’excellent site de l’opérateur de télécommunications brésilien Oi.

Je m'appelle Nils et je suis directeur du design chez Ape, un studio numérique situé à Stockholm, en Suède. Nous vivons pour le design, la technologie et la communication. Si vous voulez en savoir plus sur nous, consultez notre site Web, qui n'a malheureusement aucune des tendances énumérées ci-dessus.

De plus, si vous avez apprécié cet article, veuillez cliquer sur recommander ci-dessous. Cela aide beaucoup.