tendances 2016
Le guide qui va marquer vos futures créations
Avant-propos
avant de commencer les
choses sérieuses
Après avoir passé une année 2015 basée sur la mobilité,
nous allons continuer sur ce chemin :
Le webdesign doit s’adapter à l’ensemble des supports
sans aucune rupture !
On y est, le webdesign n’est plus considéré comme une
création artistique ou décorative, mais il sert bien à
délivrer un message à l’utilisateur.
C’est le liant entre les données et l’utilisateur. Il se veut
simple, efficace et accessible à tous.
Pour 2016, on scénarise, on crée des expériences
uniques et on délivre des messages percutants !
Le style éditorial
pour donner du style à vos
sites
Inspirez-vous des magazines et des journaux pour la mise
en page de vos pages web. Recentrez-vous sur les mots,
afin que les messages à diffuser soient percutants. Avec
un minimum de mots il faut dire le maximum de choses !
Pour mettre en avant votre contenu reprenez les codes
éditoriaux : travaillez autour d'une grille, de la
hiérarchisation et de l'organisation des contenus.
Pour bien délivrer les messages, intégrez le texte à l'image
afin de créer un univers unique et singulier.
Nota bene : Un site internet sans contenu c’est comme un
journal sans articles.
Nos exemples préférés
http://www.assos.com/
Plongez dans l’univers d’une marque pour cyclistes grâce
à un site digne d’un catalogue vivant !
Ce qui nous a séduit
➔ La hiérarchisation des informations aux petits
oignons
➔ Des blocs colorés pour structurer l’espace
➔ Des visuels pertinents
Préparez vos prochaines vacances au Canada via un site
qui possède tous les codes d’une sublime brochure papier.
http://parcourscanada.com/
Pourquoi tomber amoureux ?
➔ Pour sa structuration qui offre une nouvelle
expérience de réservation de voyages
➔ Pour ses photographies à couper le souffle
➔ Pour ses textes qui nous emmènent là-bas
Découvrez et appréciez les différentes collections de
cette boutique web au style éditorial très marqué.
http://compliments.dk/
Pour se sentir comme dans un cocon
➔ De l’espace, beaucoup d’espace
➔ Des couleurs toutes douces et des typographies qui
reposent les yeux
➔ Une expérience d’achat unique
La couleur
pour communiquer
Le choix des couleurs dans la réalisation d'un design est une
étape primordiale qu'il ne faut en aucun cas négliger.
Fini les couleurs ternes et pastels, affirmez-vous et
démarquez-vous en choisissant des couleurs vibrantes et
tendances. Inspirez-vous des gammes colorées du Matérial
Design, c’est la solution gagnante pour 2016. Mais attention,
il ne faut pas oublier que chaque couleur a une signification
qui lui est propre...
En conclusion, pour 2016 on arrête les sites “arc-en-ciel”
dénués de sens aux yeux des utilisateurs !
Nota bene : Pour une création réussie, nous vous conseillons de
jouer avec de la bichromie ou avec une palette assez réduite en
couleurs.
Ils l’ont fait !
http://www.eyeheartworld.org/
Voici comment utiliser la combinaison du noir et du orange
pour apporter un côté raffiné au message véhiculé.
Utiliser le pep’s de l’orange
➔ Des éléments bien mis en avant
➔ Un équilibre subtil avec des couleurs neutres
➔ Un nouveau visage pour les oeuvres de charité
On peut aussi prendre le parti d'utiliser le noir et des nuances
colorées pour laisser les photographies s'exprimer...
http://www.neufdeuxtroisa.fr/
Et la couleur fût !
➔ Des éléments qui respirent
➔ L’absence de couleur qui fait ressortir les
photographies
➔ L’utilisation des textes comme illustrations
Et faire le choix d’associer une couleur à un produit, c’est
lui créer une identité, un univers qui lui est propre.
http://special.bose.eu/fr/
Un produit, une couleur
➔ Un univers coloré pour chaque produit
➔ De grands aplats de couleurs
➔ Choisir son produit comme un accessoire de mode
Les interactions
pour captiver l’internaute
Suscitez la curiosité de l'internaute et captez son attention via
un site vivant et animé !
Avec un peu de créativité et des compétences techniques, les
interactions sont illimitées et permettent avec subtilité
d'encourager l'internaute à interagir.
En faisant participer l'internaute, vous lui proposez une réelle
immersion dans votre univers, il sera alors plus enclin à
naviguer et à rester sur votre site.
Et on va pas se le cacher, c'est visuellement plus agréable
qu'une page internet fixe sans interactions.
Nos coups de coeur
qui ont du style !
Grâce aux animations, scrollez dans l'univers gourmand
du restaurant Mugs.
Test pourjhhj
http://le-mugs.com/
Beaucoup de gourmandises
➔ De beaux produits appétissants
➔ Des animations toutes douces activées lors du scroll
➔ Une immersion totale dans l’univers du restaurant
Comme ils le disent si bien “Le goût est ROI”, salivez en
découvrant un site hautement interactif.
Test pourjhhj
https://www.burgerking.fr/
Comme à la maison
➔ Des micro-intéractions et des animations partout
➔ Les burgers stars du site internet
➔ Une image de marque travaillée jusqu’à la page 404
La vitesse
pour des internautes de plus en
plus exigeants
Les internautes sont de plus en plus impatients, ils veulent
accéder à l'information quasi instantanément et peu
importe le périphérique utilisé. Il est bien loin le temps du
minitel !
L’expérience utilisateur façonne le design. En effet,
plusieurs des tendances 2016 découlent directement du
fait qu’il devient impératif de rendre le site plus léger et d’
augmenter la vitesse de chargement de ce dernier.
Ainsi, la minimalisation et la suppression des éléments de
design inutiles correspondent aux exigences de légèreté,
de rapidité, de lisibilité, d’accessibilité liées au web et à la
mobilité d’aujourd’hui.
Ils ont adopté la tendance
Test pourjhhj
Ce site est l’exemple parfait d’un site 4 en 1 : rapide,
dynamique, accessible et mobile !
http://www.laregiondesmusees.fr/
A l’assaut des musées
➔ Pour sa structuration qui offre une nouvelle
expérience de réservation de voyages
➔ Pour ses photographies à couper le souffle
➔ Pour ses textes qui nous emmènent là-bas
Test pourjhhj
Feuilleter un portfolio fluide, ça n’arrive pas tous les
jours !
http://www.oursroux.com/
Aussi fluide qu’étonnant
➔ De beaux visuels qui se chargent rapidement
➔ De petites animations bien placées
➔ Une navigation tout en souplesse
Pour 2016,
soyez simple, efficace et accessible !
Et surtout n'oubliez pas l'utilisateur ;)
Pour nous contacter : studio@telmedia.fr
Dossier réalisé par le studio de telmedia*

Tendance webdesign 2016

  • 1.
    tendances 2016 Le guidequi va marquer vos futures créations
  • 2.
    Avant-propos avant de commencerles choses sérieuses Après avoir passé une année 2015 basée sur la mobilité, nous allons continuer sur ce chemin : Le webdesign doit s’adapter à l’ensemble des supports sans aucune rupture ! On y est, le webdesign n’est plus considéré comme une création artistique ou décorative, mais il sert bien à délivrer un message à l’utilisateur. C’est le liant entre les données et l’utilisateur. Il se veut simple, efficace et accessible à tous. Pour 2016, on scénarise, on crée des expériences uniques et on délivre des messages percutants !
  • 3.
    Le style éditorial pourdonner du style à vos sites Inspirez-vous des magazines et des journaux pour la mise en page de vos pages web. Recentrez-vous sur les mots, afin que les messages à diffuser soient percutants. Avec un minimum de mots il faut dire le maximum de choses ! Pour mettre en avant votre contenu reprenez les codes éditoriaux : travaillez autour d'une grille, de la hiérarchisation et de l'organisation des contenus. Pour bien délivrer les messages, intégrez le texte à l'image afin de créer un univers unique et singulier. Nota bene : Un site internet sans contenu c’est comme un journal sans articles.
  • 4.
  • 5.
    http://www.assos.com/ Plongez dans l’universd’une marque pour cyclistes grâce à un site digne d’un catalogue vivant !
  • 6.
    Ce qui nousa séduit ➔ La hiérarchisation des informations aux petits oignons ➔ Des blocs colorés pour structurer l’espace ➔ Des visuels pertinents
  • 7.
    Préparez vos prochainesvacances au Canada via un site qui possède tous les codes d’une sublime brochure papier. http://parcourscanada.com/
  • 8.
    Pourquoi tomber amoureux? ➔ Pour sa structuration qui offre une nouvelle expérience de réservation de voyages ➔ Pour ses photographies à couper le souffle ➔ Pour ses textes qui nous emmènent là-bas
  • 9.
    Découvrez et appréciezles différentes collections de cette boutique web au style éditorial très marqué. http://compliments.dk/
  • 10.
    Pour se sentircomme dans un cocon ➔ De l’espace, beaucoup d’espace ➔ Des couleurs toutes douces et des typographies qui reposent les yeux ➔ Une expérience d’achat unique
  • 11.
    La couleur pour communiquer Lechoix des couleurs dans la réalisation d'un design est une étape primordiale qu'il ne faut en aucun cas négliger. Fini les couleurs ternes et pastels, affirmez-vous et démarquez-vous en choisissant des couleurs vibrantes et tendances. Inspirez-vous des gammes colorées du Matérial Design, c’est la solution gagnante pour 2016. Mais attention, il ne faut pas oublier que chaque couleur a une signification qui lui est propre... En conclusion, pour 2016 on arrête les sites “arc-en-ciel” dénués de sens aux yeux des utilisateurs ! Nota bene : Pour une création réussie, nous vous conseillons de jouer avec de la bichromie ou avec une palette assez réduite en couleurs.
  • 12.
  • 13.
    http://www.eyeheartworld.org/ Voici comment utiliserla combinaison du noir et du orange pour apporter un côté raffiné au message véhiculé.
  • 14.
    Utiliser le pep’sde l’orange ➔ Des éléments bien mis en avant ➔ Un équilibre subtil avec des couleurs neutres ➔ Un nouveau visage pour les oeuvres de charité
  • 15.
    On peut aussiprendre le parti d'utiliser le noir et des nuances colorées pour laisser les photographies s'exprimer... http://www.neufdeuxtroisa.fr/
  • 16.
    Et la couleurfût ! ➔ Des éléments qui respirent ➔ L’absence de couleur qui fait ressortir les photographies ➔ L’utilisation des textes comme illustrations
  • 17.
    Et faire lechoix d’associer une couleur à un produit, c’est lui créer une identité, un univers qui lui est propre. http://special.bose.eu/fr/
  • 18.
    Un produit, unecouleur ➔ Un univers coloré pour chaque produit ➔ De grands aplats de couleurs ➔ Choisir son produit comme un accessoire de mode
  • 19.
    Les interactions pour captiverl’internaute Suscitez la curiosité de l'internaute et captez son attention via un site vivant et animé ! Avec un peu de créativité et des compétences techniques, les interactions sont illimitées et permettent avec subtilité d'encourager l'internaute à interagir. En faisant participer l'internaute, vous lui proposez une réelle immersion dans votre univers, il sera alors plus enclin à naviguer et à rester sur votre site. Et on va pas se le cacher, c'est visuellement plus agréable qu'une page internet fixe sans interactions.
  • 20.
    Nos coups decoeur qui ont du style !
  • 21.
    Grâce aux animations,scrollez dans l'univers gourmand du restaurant Mugs. Test pourjhhj http://le-mugs.com/
  • 22.
    Beaucoup de gourmandises ➔De beaux produits appétissants ➔ Des animations toutes douces activées lors du scroll ➔ Une immersion totale dans l’univers du restaurant
  • 23.
    Comme ils ledisent si bien “Le goût est ROI”, salivez en découvrant un site hautement interactif. Test pourjhhj https://www.burgerking.fr/
  • 24.
    Comme à lamaison ➔ Des micro-intéractions et des animations partout ➔ Les burgers stars du site internet ➔ Une image de marque travaillée jusqu’à la page 404
  • 25.
    La vitesse pour desinternautes de plus en plus exigeants Les internautes sont de plus en plus impatients, ils veulent accéder à l'information quasi instantanément et peu importe le périphérique utilisé. Il est bien loin le temps du minitel ! L’expérience utilisateur façonne le design. En effet, plusieurs des tendances 2016 découlent directement du fait qu’il devient impératif de rendre le site plus léger et d’ augmenter la vitesse de chargement de ce dernier. Ainsi, la minimalisation et la suppression des éléments de design inutiles correspondent aux exigences de légèreté, de rapidité, de lisibilité, d’accessibilité liées au web et à la mobilité d’aujourd’hui.
  • 26.
    Ils ont adoptéla tendance
  • 27.
    Test pourjhhj Ce siteest l’exemple parfait d’un site 4 en 1 : rapide, dynamique, accessible et mobile ! http://www.laregiondesmusees.fr/
  • 28.
    A l’assaut desmusées ➔ Pour sa structuration qui offre une nouvelle expérience de réservation de voyages ➔ Pour ses photographies à couper le souffle ➔ Pour ses textes qui nous emmènent là-bas
  • 29.
    Test pourjhhj Feuilleter unportfolio fluide, ça n’arrive pas tous les jours ! http://www.oursroux.com/
  • 30.
    Aussi fluide qu’étonnant ➔De beaux visuels qui se chargent rapidement ➔ De petites animations bien placées ➔ Une navigation tout en souplesse
  • 31.
    Pour 2016, soyez simple,efficace et accessible ! Et surtout n'oubliez pas l'utilisateur ;) Pour nous contacter : studio@telmedia.fr Dossier réalisé par le studio de telmedia*