Webdesign : Tendances d'aujourd'hui

01/07/2014 Design design, responsive, tendances

Le webdesign est plus que jamais au coeur de la conception web.
2 enjeux principaux nous poussent à constamment repenser l’ensemble de nos créations afin de proposer une expérience utilisateur correspondant aux attentes des internautes.

1 - L'évolution des supports

Entre les mobiles, les tablettes, les ordinateurs portables et les écrans de TV XXL, le web design doit prendre en compte l’ensemble des types d’écrans. Au-delà de l’aspect graphique des sites, c’est l’ensemble du parcours utilisateur qui doit être réfléchi en amont du projet afin de faciliter sa portabilité, peu importe la taille du support.

2 - L'évolution des technologies

L’augmentation du débit Internet et de la puissance de nos machines ainsi que le développement de nouvelles technologies, comme le format SVG, nous permettent de proposer des concepts graphiques toujours plus complexes et animés.

-----

Nous vous proposons de mettre en avant quelques tendances webdesign amenées à se développer en 2014.

1 - Full screen menu

Le full screen menu consiste à proposer à l’Internaute un menu discret, typé mobile, qui prendra l’intégralité de l’écran une fois activé.
Cette tendance nous vient tout droit du “mobile first” et démontre l’influence de la navigation sur smartphones.

Les avantages :

  • • Structure de page allégée : le menu laisse sa place au contenu et vice versa
  • • Menu enrichi : disposant d’une page dédiée, le menu de navigation peut proposer de nombreuses informations
  • • Mobile first : le responsive design est au coeur de la conception graphique


Quelques exemples de sites :


2 - Background vidéo

L’usage de la vidéo est de plus en plus présent sur les sites Internet, notamment comme élément de background. L’amélioration des formats d’encodage permet d’obtenir des fichiers vidéos légers et de qualité, idéal pour un usage web.

Les avantages :

  • • Idéal pour habiller les sites ayant peu de contenu
  • • Apporte dynamisme et modernité
  • • Impact visuel garanti


Quelques exemples de sites :


3 - Utilisation des diagonales

La très grande majorité des sites Internet sont encore organisés en “blocs” de contenu.
2 explications à cela :

  • • Un code HTML qui organise naturellement le contenu en box qui se superposent
  • • Le responsive design qui impose de découper son site selon une grille composée de perpendiculaires et de parallèles.


Cependant, l'utilisation du CSS nous permet de casser ces codes et de ne plus limiter notre créativité.

Les avantages :

  • • Permet de créer une réelle identité de marque
  • • Structure de site différenciante
  • • Idéal pour valoriser une marque, un produit, un service créatif


Quelques exemples de sites :


4 - Importance des HOVER

L’âge des sites “statiques” est décidément révolu. Les technologies comme le HTML5 et le CSS3 permettent de créer facilement des animations déclenchées au passage de la souris (le “roll-hover”).
Cela permet de révéler certaines informations en fonction du comportement de l’internaute.
Attention cependant à l’abus du “roll-hover”. Ces animations doivent rester au service de l’internaute et ne pas alourdir la navigation.

Les avantages :

  • • Permet de distiller l'information proposée aux internautes
  • • Dynamise et modernise le site
  • • Incite à la découverte de contenu (que se passe-t'il lorsque je survole cette image ?)


Quelques exemples d'animations en roll-hover :


5 - Les images SVG

Le format SVG (Scalable Vector Graphics) est un format de données basé sur le XML et permettant de créer des visuels vectoriels, c’est à dire pouvant être agrandis ou rétrécis sans perte de qualité (idéal pour le responsive design !).
Initialement utilisé pour créer des formes simples (carrés, ronds, triangles, etc.), le format SVG permet aujourd’hui de créer des objets complexes, animés et même en 3D.

Les avantages :

      • • Format léger
      • • Aujourd'hui lisible par l'ensemble des navigateurs
      • • L'utilisation du CSS permet d'ajouter des styles au SVG
      • • Redimensionnement automatique sans perte de qualité


Quelques exemples d'utilisation du SVG :


Conclusion

Les technologies actuelles nous permettent une liberté créative totale.
Cependant, il est important de garder à l’esprit qu’un site Internet doit être au service d’une idée (contenu du site) et d’une cible (visiteurs du site). L’intégration des éléments de webdesign cités plus hauts doit être en adéquation avec vos besoins et apporter une réelle valeur ajoutée à votre site.

Venez discuter avec nous afin que l’on conçoive ensemble un site moderne et dynamique, adapté à vos besoins.