LES TENDANCES 2014 DU WEBDESIGN

Bonjour à tous l’année arrive à son terme et comme à chaque fois vient l’heure du bilan et surtout l’heure de savoir ce que nous allons rencontrer comme tendances pour cette année 2014 cet article fait écho au podcast n°37 de podsource ( pas encore diffusé à l’heure actuelle) mais le concept est là, voici donc mon état d’esprit en cet fin d’année et ma vision du futur!

je vais partager en groupes cela simplifie en tous cas pour moi:

1er groupe le design:

  • Les couleurs
  • graphisme
  • typo

2ème groupe la technique.

  • responsive
  • paralax
  • animation
  • SVG
  • FontIcon
  • js

2ème groupe plus général

  • UX
  • podcast

Commençons avec le design:

Les couleurs:

la première chose est la couleur de l’année selon Pantone©:
Pantone Reveals Color of the Year for 2014: PANTONE 18-3224 Radiant Orchi

http://www.pantone.com/pages/index.aspx?pg=21129

un violet pâle qui nous envoie tout droit dans les pastels. Intéressant quand on voit les couleurs des iphones 5C

Couleurs des Iphones 5c

qui sont très très pastels

A mon avis ce sera plus dur de faire des créations sur ces bases pour le “ grand public” bien sûr le super site hype c’est un peu différent: si on regarde les couleurs précédentes:

Pantone© of the year
2013 | 2012 |2011| 2010| 2008

je me demande toujours quelle est l’influence des couleurs de l’année si c’est

vraiment une référence, si plus on en voit, plus notre inconscient nous donne une envie de les utiliser … mais pour ce qui est de 2013

http://www.brazil.ch |https://vine.co/

je pourrais en ajouter bien plus …

LA TYPO:

pour faire suite à une discussion sur Twitter avec @loriskumo et @manuDejean.

La typo va prendre un penchant pour les choses je cite: “ kernée très condensées “

Là de nouveau l’influence d’Apple et IOS.7 , on pourra dire ce que l’on veut mais je vais dans ce sens et je trouve ça beau.

Pour les sites, la typo est de plus en plus importante donc la taille des
“ fonts” grossit à vue d’oeillà où il y à 3-4 ans on était avec du 10-12pt on se rapproche régulièrement des 20. le plus souvent en EM ou REM.

Dans ce qui est du graphisme :

– le falt design a toujours une bonne place dans les créations et va encore durer.

les longues shadows vont arriver au grand public mais de manière distillée..

Je ne sais pas exactement où va la tendance. Je pencherais pour plus de formes géométriques simples. Le losange me semble arriver en force mais c’est dans cette mouvance …

http://midoriaoyama.jp/

le côté Hipster a pas terminé son chemin. Grandes images de fond avec de la typo et un bouton vide seulement un bord …

http://papertiger.com/

les Icon “ au trait” là aussi arrive, suite à tous les re-designs de IOS fait par tous les designers.

http://fixate.it/

Après difficile de dire quelle sera la prochaine mouvance. Je dois bien dire que j’aime bien ce qu’il se fait maintenant. Ce côté “hipster” et les logos en X me plaisent toujours autant.

je suis peut être moins fan des icons au trait. mais cela pourrais changer à force d’en voir…

2ème groupe la technique.

Pour la technique là aussi pas mal d’axes à explorer:

les faciles en 1er:

Plus de responsive !

Cela me paraît claire un site en 2014 ne peut pas être autre chose que responsive… maintenant que même pour les e-commerces on trouve des thèmes responsive maintenant la question est: Comment va-t-on on faire du responsive ? je crois en la technique des Medias Queries en “EM” et de l’avènement de taille de site du type “ S/ M/ L/ XL “ que ciblée sur des tailles d’écran qui deviennent trop nombreux .. sur ce sujet je vous renvoie sur la vidéo de Paris Web de : Nicolas Hoizey sur les EM :

http://vimeo.com/79204119

le site de Marie Guillaumet cité dans la conférence ci-dessus:
http://marieguillaumet.com/refonte-mon-portfolio-du-responsive-en-em-seconde-partie/

http://marieguillaumet.com

PLUS de Paralax

les effets paralax sur les sites ne sont non plus en voie de disparition contrairement à ce qu’on disait l’année passée. Ils ont réussi à se faire plus discret et bien amener fini (dans la plus part des cas) les grosses démos où tout bouge de partout et au final on arrive rien à voir. Les animations se font discrètes au défilement avec des outils comme “ superscrollorma “ facile à mettre en place le gros plus dans cette histoire c’est que les clients commencent à accepter qu’un site ne doit pas être contenu dans un 800X600px.

http://johnpolacek.github.io/superscrollorama/

Continuons de ce côté animations:

PLUS de SVG et d’animations:

Le svg se démocratise et c’est vraiment une évidence avec les écrans rétina c’est une solution légère et facile à mette en place avec quand même un petit fall back .png au cas où.

Et avec les SVG arrivent plus d’animations le format vectoriel des SVG permet de les animer simplement mais là je vois aussi arriver les dérives que nous avions enfin éradiquées avec la lente mort de Flash: des animations cheap qui n’apportent rien et qui sont moches juste pour monter que “ je sais animer trois polygones” .. Mais bon tant que ce ne sont pas des chiens qui volent sur des petit nuages … ( inside joke) .

http://snapsvg.io/

toujours dans la suite de ma réflexion :

PLUS de FONT ICON

Comme dit plus haut, les écrans rétina sont de plus en plus présents et une façon facile d’avoir des Icons qui restent de bonne qualité et d’utiliser une font avec des outils comme “ icomoon” et des bibliothèques de plus en plus fournies type: “ entypo” “font awsome” et tout celles plus spécifiques type météo et maintenant de saison “Noel” “Halloween”:
http://www.flaticon.com/

http://icomoon.io/

Pour ma part j’utilise principalement “ Icomoon” ce qui me permet de créer et importer mes propres Incon et de même ajouter des logos :http://www.aubergemontblanc.com/
Ici tous les Icons et logos sont dans ma typo.

Plus de JS?

Entre Jquery qui devient de plus en plus la norme et les CMS et autres techniques qui se basent sur du node.js comme “https://ghost.org” mais là je dérive dans une partie plus DEV où je vais asse vite perdre pied … mais pour moi cette année je vais aussi plus allez du côté de .git et autres joyeusetés ….

https://ghost.org/

3ème groupe généraliste.

une partie plus générale sur le métier

PLUS d’UX !

les spécialisation rentre dans les meurs on parle plus de UX (users experiences) et on commence à comprendre l’importance d’avoir des spécialistes par étapes de création d’un site : UX — créateurs de contenu — designers — developers — intégrateurs .

Cette année sera bien sûr plus que jamais UX pour nous en Suisse Romande avec une super conférence UXlausanne : http://2014.uxlausanne.com/ au mois de Mai …

PLUS de Lettering !

le lettering fais aussi un gros retour sur le devant de la scène pas qu’il n’était plus là, mais la tendance est assez forte et le résultat va vers le côté “hipster” précédemment cité :

Lettering

et la dernière qui est plus un souhait mais bon :

 

Laisser un commentaire