core-techs2.png
Ë
Par Core-Techs • mercredi 14 mai 2014

Les 10 tendances 2014 du web design

Julie Dublanc et Solange Derrey, respectivement responsable
Business Unit et Chargée de communication et des études digitales
chez Vanksen, nous ont présenté cette conférence.

De plus en plus d’utilisateurs naviguent via leur tablette ou
leur mobile, entraînant ainsi une évolution de l’ergonomie et de
l’expérience utilisateur des sites.

Différentes tendances ont ainsi pu être décelées pour l’année à
venir :

  1. L’adaptation aux multiples écrans, mobiles, tablettes et
    pc.
  2. L’augmentation des visuels, pour permettre un accès
    simplifié, avec plus d’attractivité et de visibilité. Cette
    tendance s’observe également sur les sites desktop.
  3. L’utilisation du scroll, dans les deux sens. Seules les
    informations essentielles sont affichées avec des images, des
    pictogrammes ou des vidéos, le tout pour plus d’attractivité.

    Bel exemple de scroll sur "http://www.fadeoreddy.com" target="_blank">fadeoreddy :

    "http://www.core-techs.fr/sites/ct/files/reprise-blog/fadeoreddy1-300x149.png"
    target="_blank"><br "fadeoreddy" src=
    "http://www.core-techs.fr/sites/ct/files/reprise-blog/fadeoreddy1-300x149.png"
    width="230" height="114">   "http://www.core-techs.fr/sites/ct/files/reprise-blog/fadeoreddy2-300x148.png"
    target="_blank"><br "fadeoreddy scroll" src=
    "http://www.core-techs.fr/sites/ct/files/reprise-blog/fadeoreddy2-300x148.png"
    width="230" height="113">

    Il y a également une volonté de mise en avant des visuels par des
    images de haute qualité.

    Exemple : menu dans l’image (webcam des bureaux) sur "Site Sagmeister & walsh" href=
    "http://www.sagmeisterwalsh.com/" target="_blank">Sagmeister
    &Walsh :

    "http://www.core-techs.fr/sites/ct/files/reprise-blog/sagmeisterwalsh1-300x148.png"
    target="_blank"> alt="sagmeisterwalsh" src=
    "http://www.core-techs.fr/sites/ct/files/reprise-blog/sagmeisterwalsh1-300x148.png"
    width="300" height="148">
  4. L’apparition des blurred images (ou image
    floues), permettant de colorer un site, de remplir le background,
    avec un temps de chargement moins important.
  5. La présence croissante des vidéos : d’ici 2017
    elles devraient occuper 90% du trafic web.

    Site "_blank">any.do :

    "http://www.core-techs.fr/sites/ct/files/reprise-blog/any.do_-300x150.png"
    target="_blank"> alt="any.do" src=
    "http://www.core-techs.fr/sites/ct/files/reprise-blog/any.do_-300x150.png"
    width="300" height="150">
  6. L’évolution du graphisme en flatdesign, pour un
    design minimaliste avec des couleurs vives. Une sous-tendance
    existe : le long shadow pour plus de profondeur.
  7. La disponibilité des typographies, adaptées au web.
  8. La création d’un design géométrique, avec un jeu
    de formes directement dans le graphisme. (menu, placement des
    visuels…)
  9. L’utilisation de la parallaxe (différents plans en
    décalage au scroll) pour une mise en avant d’un produit (mais
    déconseillé pour une arborescence complexe).

    Bel démontration sur "http://www.noleath.com/noleath/" target="_blank">no leath:

    "http://www.core-techs.fr/sites/ct/files/reprise-blog/noleath-300x148.png"
    target="_blank"> alt="noleath" src=
    "http://www.core-techs.fr/sites/ct/files/reprise-blog/noleath-300x148.png"
    width="300" height="148">
  10. L’apparition de la navigation synchronisée,
    permettant l’interaction avec plusieurs supports sur un même site
    de jeu par exemple.

Une question peut en revanche se poser la question de
l’accessibilité pour quelques-unes de ces tendances, empêchant
certains utilisateurs de profiter de l’avancée du design.

"http://www.core-techs.fr/sites/ct/files/reprise-blog/t%C3%A9l%C3%A9chargement.jpg"
target="_blank"> alt="AgoraCMS logo" src=
"http://www.core-techs.fr/sites/ct/files/reprise-blog/t%C3%A9l%C3%A9chargement.jpg"
width="212" height="72">