08/09/2014
Créativité et webdesign
Accueil > Actualités > Créativité et webdesign

La créativité est aussi une affaire de webdesign. Votre site Internet est en cours de refonte via votre agence de communication, ou votre graphiste. Ils vous proposent de nouveaux designs, en lien proche avec votre charte graphique, pour créer du neuf au niveau de votre site Internet. Alors quelles sont les tendances en matière de créativité ?

Viser mobilité

D’abord, avec 6 milliards (source : http://www.lemonde.fr/technologies/article/2012/07/17/pres-de-75-des-terriens-possedent-un-telephone-portable_1734969_651865.html) d’utilisateurs de smartphones dans le monde et en France 72% d’individus ayant déjà navigué sur Internet via leur téléphone portable il est indispensable d’envisager votre site sous la forme « responsive design ».

« Responsive design » ou « responsive web design », c’est la faculté d’un site Internet à s’adapter aux formats des écrans de tablettes ou de smartphones. Au-delà de cette simple faculté à s’adapter, en envisageant votre site Internet lisible sur téléphone mobile ou sur tablette, votre contenu, votre ergonomie, ne seront pas imaginés de la même façon.

1

Incidences sur le webdesign :

Le format de votre site Internet est lisible sur des écrans plus petits, il est donc nécessaire de créer un webdesign plus ergonomique. Pour développer ce genre de site, le webdesigner devra passer plus de temps. En effet, le travail sur une version en responsive design est plus compliqué qu’une simple version pour écran d’ordinateur. De plus, la phase de tests de votre site Internet doit être faite sur chacun des supports et non plus seulement sur un ordinateur classique. Selon Stéphanie Walter (UX Designer en freelance et au sein de l’agence Alsacreations), cette tendance à la mobilité est tellement forte qu’elle a « l’impression que l’on est passé d’un web orienté grands écrans qui a inspiré le mobile, à un web mobile qui commence à déteindre sur le grand écran. ». (Source : http://www.webdesignertrends.com/2013/12/tendances-du-webdesign-2014/)

Incidences sur les contenus :

Votre site est lisible sur téléphones portables et sur tablettes… Parfait, mais alors on arrête le blabla, on va à l’essentiel ! L’idée n’est pas de dire moins de chose, mais surtout de la mettre en forme le texte pour que les informations soient plus lisibles et plus attractives pour votre internaute ou mobinaute. Pour faciliter cet accès à l’information, on imagine des contenus plus visuels : de la datavisualisation* ou des pictogrammes, des éléments qui facilitent la lecture et lorsqu’il y a beaucoup de textes, on insiste sur une hiérarchisation claire des informations. Votre lecteur doit trouver rapidement l’information qu’il recherche quelque soit le support. L’ajout de vidéos sera toujours un plus (la vidéo représentera 90% du traffic web en 2017 ! selon Cisco). Attention cependant certains éléments vidéo Flash par exemple ne sont pas pris en compte sur le matériel Apple.

Incidences sur la navigation

Si la mobilité à des incidences sur le webdesign et les contenus elle a aussi une fort incidence sur la navigation et donc sur l’ergonomie de votre site web. Un écran plus petit est moins confortable qu’une souris et un grand écran. De plus, une navigation par écran tactile modifie les comportements des mobinautes… Votre site doit donc être efficace pour une navigation tactile, cela passe souvent par des éléments « bouton » plus grand, des photos cliquables.

Les tendances créatives 

Sites monopage

Si vous passer du temps sur Internet, vous avez dû remarquer le grand nombre de site monopage : ce sont des sites ou, grâce au scrolling (le scrolling correspond à l’action de faire défiler verticalement une page Internet grâce à la molette d’un souris, un trackpad, ou simplement à l’aide d’un doigt sur un écran tactile de tablette ou de smartphone) toutes les informations sont concentrées sur une seule et même page. (Un exemple ici d’une belle animation en scrolling : http://everylastdrop.co.uk/.) Si vous cliquer sur un bouton ou un onglet vous serez renvoyé sur un autre espace de la monopage, que vous retrouverez en scrollant de haut en bas (ici : http://journey.lifeofpimovie.com/-!/). Certains sites Internet utilisent même un double scrolling, l’écran est partagé en deux colonnes et lors du scrolling l’une défile vers le haut alors que la seconde défile vers le bas http://www.fadeoreddy.com/. Cette tendance au scrolling est directement importée de notre lecture de sites sur smartphone ou tablette. Attention cependant, le site monopage s’utilise pour rendre attrayant et attractif mais pour un sujet aux contenus complets et complexes mieux vaut conserver un site multipages.

Le scrolling peut être accompagné d’un effet de parallaxe. (La parallaxe est l’incidence du changement de position de l’observateur sur un élément.) Sur un site Internet, l’ajout d’un effet de parallaxe se concrétise par un mouvement inverse de certains éléments de la page ou une vitesse de mouvement différente que celle du fond de page. Exemple : http://www.noleath.com/noleath/

Skeuomorphisme et flat design

2

Avant, on parlait de skeuomorphisme, un mot barbare pour définir un design qui mettait en place des éléments visuels comme ils le sont dans la réalité. Le meilleur exemple est la bibliothèque ebooks d’Apple qui représentait les ouvrages avec une épaisseur, tels que des objets physiques posés dans une bibliothèque. Les boutons métallisés ou des systèmes de navigation qui s’inspiraient de mouvement de la réalité comme le fait de tourner les pages d’un site comme celle d’un livre.

3

Aujourd’hui ce skeuomorphisme est remplacé par le flat design. Les exemples les plus flagrants sont la dernière interface de Windows ou celle d’IOS7. Il s’agit d’éléments beaucoup plus simples avec des aplats de couleurs, et des icônes beaucoup plus simples que celles qu’avaient inspirées le skeuomorphisme. Les dégradées, ombres, textures… tout à disparu au profit d’une extrême simplicité.

Exemple du design de Windows

4

Exemple design IOS 6 et IOS 7

5

Récemment, le flat design a évolué pour nous emmener vers des pictogrammes très fortement ombrés qui donnent une grande profondeur…

6

Le site : magazineduwebdesign.com/icones-flat-design vous propose une petite exposition de plusieurs pictogrammes dessinés en flat design.

Images et typographies

Les tendances actuelles donnent également une très forte place aux images. Celles-ci deviennent des backgrounds de sites, sont placées pleine page, ou deviennent carrément le menu du site Internet. Ces illustrations peuvent également être travaillées, à l’image des filtre Instagram, ou comme les blurred images (fortement foutées).

Exemple de site avec une image cliquable comme background : lovecarmenrose.com

7

Exemple du site : http://hipstamatic.com/oggl/

8

La typographie reprend également une place très forte. Elles sont parfois créées pour l’occasion ou seulement utilisées de manière extraordinaire avec des découpages de syllabes, l’utilisation de plusieurs polices pour un même mot. Bien utilisées, elles sont en mesure de transmettre un message autant qu’une illustration ou qu’un pictogramme. Grâce à ces typographies, le visuel prend tout son sens, explore de nouveaux territoires alliant images et lettres.

Exemple de http://www.mooncampapp.com/ie/

9

Exemple : http://www.cindyashes.com/60.html

10

Source : http://fr.slideshare.net/Vanksen/les-10-tendances-webdesign-de-2014-by-vanksenpage 48

* Définition datavisualisation : C’est l’art de représenter des données de façon visuelle : des graphiques, des camemberts, des diagrammes, des cartographies des infographies ou chronologies ainsi les données sont plus facilement compréhensibles.