Tendances 2013 & 2014


Brand Content

2013 année riche en tendances, avec notamment la simplification des structures web et du design qui continue sa progression.

Si nous remontons un peu dans le temps, les sites utilisant des textures et des typographies originales semblent révolus et ont laissé place à l’épuré.

En 2014, les sites vont continuer à progresser afin que l’expérience utilisateur soit simplifiée tant sur mobiles que sur tablettes ou desktop.

 

TENDANCES 2013

 

A. LE FLAT DESIGN ET LES ICÔNES MINIMALISTES

 

On peut dire que cette année, le flat s’est révélé être l’une des principales tendances et ne cesse de dominer le Web.

Ce style a très bien fonctionné en 2013 car il propose pour les petits écrans, particulièrement pour les applications ou le design mobile, moins de boutons et d’options, ce qui donne une interface plane assez facile à utiliser. Pour beaucoup, c’est tout aussi idéal pour les grands écrans.

En bref, le Flat continue son ascension, la preuve par Apple qui a modifié le design de son iOS7 pour lui offrir un look épuré et « plat ».

Un exemple de site qui réunit bien les deux tendances :

TRIPLAGENT

 Tendances 2013 & 2014

IPhone IOS 7

 Tendances 2013 & 2014

Les icônes

Les icônes sont des éléments indispensables, idéaux pour une compréhension immédiate et adéquate sur écran mobile.

La philosophie du « less is more » est devenue incontournable en webdesign.

La simplification, voire la sur-simplification s’est répandue, on peut même voir des sites desktop qui masquent leur menu avec ce que l’on appelle des  « navicon » .

 Tendances 2013 & 2014

 

Les icônes «long shadows» (longues ombres), une autre tendance devenue très populaire parmi les designers, se marie très bien avec le flat.

 Tendances 2013 & 2014

 

Par ici pour en savoir plus sur le Flat design

B. LE RESPONSIVE  ET LE MOBILE FIRST

Ce n’est plus une surprise, le responsive est de nos jours une étape indispensable dans le développement d’un site.

Définition du mobile first : tout est dans le nom !

Le concept mobile first ( littéralement «mobile en premier» ) consiste à concevoir en priorité la version mobile en adaptant progressivement celle-ci pour les écrans plus larges.

Cette façon de faire est utile pour les sites et les applications web utilisés principalement sur mobile. L’avantage est d’ajouter des effets ou des fonctionnalités pour les grands écrans à la place d’en supprimer pour les petits.

Mais qui dit avantages dit inconvénients, les versions sur grands écrans étant assez limitées.

Pourquoi ça marche ?

Parce que les usages mobiles explosent en France depuis plusieurs années et l’offre des constructeurs et des opérateurs mobiles devient accessible à tous les portefeuilles.

Aujourd’hui on parle de web social, de web des données, … et bien sûr de web mobile.

 Tendances 2013 & 2014

 

Les responsive icons

On retrouve même du responsive dans les icônes !

La largeur de l’écran ne détermine pas la taille de l’icône, c’est en fait une icône différente qui est affichée en fonction de la taille.

 Tendances 2013 & 2014

C. LES SITES ONE PAGE ET FULLSCREEN

De plus en plus de sites sont construits sur une page unique, une nouvelle expérience de navigation. On y découvre la technologie du parallaxe, avec différents types de navigation : le scroll, les flèches du clavier, …

L’internaute est curieux de découvrir le cheminement du site pour en atteindre le contenu.

 

MY PIZZA OVEN

 Tendances 2013 & 2014

VALENTINA GALLO

 Tendances 2013 & 2014

 

Par ici pour en savoir plus sur les sites One page —> http://www.disko.fr/#!/blog/one-page-design-ou-lart-du-tout-en-un

D. LES WEB FONTS

Les typographies sont extrêmement importantes de nos jours sur les interfaces web. Le site Google Web Font permet au webdesigner de trouver tout un lot de typo idéales pour les sites. En seulement trois étapes simples, les webdesigners trouvent leur bonheur. Une intégration rapide sur un site, la possibilité de télécharger les polices.

Elles sont Open source, parfait pour les partager avec vos amis !

Le nombre de polices disponibles sur Google Font est certes réduit (638 familles de police  actuellement) mais elles sont en revanche toutes libres de droits : une étape de prise de tête en moins dans le choix à faire.

 

Dans tous les cas, cette collection permet de créer un design personnalisé avec des polices de qualité.

GOOGLE FONT

 Tendances 2013 & 2014

 

TENDANCES 2014

 

Les tendances pour 2014 nous emmènent vers la simplification de l’architecture d’information et de son design, permettant ainsi une transition plus facile entre les médias et tailles d’écrans ( content first, performance first, mobile first, … )

 

E. LES BACKGROUND FULL VIDEO

Une des tendances 2014 résidera dans une utilisation massive du contenu vidéo qui va jouer un rôle plus prépondérant. Les designers comme les annonceurs sont de plus en plus conscients de sa puissance et de sa portée.

L’inconvénient nous direz-vous, c’est le temps de chargement mais grâce à l’optimisation des réseaux et du poids, il sera possible d’aller plus loin plus facilement dans la conception web sans avoir un temps de chargement trop long.

 

L’avantage des ces vidéos est de présenter un produit ou un service, d’interagir avec l’internaute ou simplement d’habiller le site.

 

NIKE

 Tendances 2013 & 2014

 

L’ODYSSEE DE PI

 Tendances 2013 & 2014

 

Par ici pour en savoir plus sur le full screen

F. UX DESIGN / UI DESIGN

L’UX est certainement LE métier web design de 2014 et bientôt les clients seront spontanément demandeurs de cette compétence.

Définition : UX DESIGN = User Experience = Expérience utilisateur ou UI = user interface = interface utilisateur

Toute la conception est centrée sur l’utilisateur.

 L’UI Designer est en charge de la conception générale de l’interface, de la clarté de la navigation jusqu’à la qualité des contenus, en passant par l’optimisation des parcours.

Le design d’un site n’est plus le seul critère d’excellence, l’accessibilité utilisateur est devenue primordiale.

DESIGN EMBRACED

 Tendances 2013 & 2014

 

Par ici pour en savoir plus sur la méthodologie de conception.

G. LE BLOCKING

 

Pinterest est l’exemple type du blocking : un site conçu de blocs contenant des photos, des textes… basé sur une grille modulaire où les blocs se réorganisent en fonction de la taille de la fenêtre. L’outil de conception est simple et créée beaucoup de contrastes .

Cette tendance a commencé dans le monde de la mode : sacs , chaussures,…et se déplace maintenant dans tous les domaines, particulièrement sur les sites d’inspiration.

MERCER TAVERN

 Tendances 2013 & 2014

 

LANDOR ASSOCIATES

 Tendances 2013 & 2014

 

Par ici pour en savoir plus sur les grilles

LE MOT DE LA FIN

2013 a enclenché un grand virage en terme d’expérience utilisateur et d’architecture de l’information, 2014 sera une évolution de toutes ces tendances. On tend toujours plus vers le « Less is more », une simplification extrême centrée sur l’utilisateur, le contenu et l’expérience.

Suivre et respecter les tendances est important, mais anticiper et aller encore plus loin est d’autant plus essentiel.

A chacun de créer son univers !

 

Laisser un commentaire