les tendances graphiques pour avoir un site agréable et moderne - agence pilot'in

36
Les tendances graphiques pour avoir un site agréable et moderne.

Upload: julien-dereumaux

Post on 08-Apr-2017

157 views

Category:

Design


0 download

TRANSCRIPT

Les tendances graphiques pour avoir un site agréable et moderne.

User InterfaceGraphismeÀ la mode

User ExperienceErgonomieInteractif

Composants UI Pratiques UX

Material Design ou semi Flat Design

Couleurs

Illustrations

Photos

Typographies

Géométrie

Vidéo, gif & motion design

Cassez la grille

Partagez votre écran

Le mobile en premier

Les micros-interactions

Un, deux, trois, scrollez !

Composants UI

Le Material Design

Un ensemble de règles et de bonnes pratiques pour le design web ou d’appli, dicté par Google.

Le Material Design

Material Design Flat Design

Considéré comme une évolution du flat design et inspiré du material design, ce style joue beaucoup avec les ombres et la profondeur. Il est plus minimaliste.

Le semi Flat Design

Des couleurs plus fortes, audacieuses marquent plus l’esprit de l’utilisateur. Le dégradé revient aussi sur le devant de la scène.

Osez la couleur

Evitez les couleurs ternes

Elles vous offrent un moyen d’expression et d’argumentation qui vous différencie et renforce votre identité, si elles sont faîtes sur-mesure.

Personnalisez vos illustrations

Mal choisies, ces dernières peuvent altéré la cohérence de votre image de marque, et vous perdrez en crédibilité.

Attention aux illustrations issues de stock

Une photo vous représente et affirme votre identité. Essayez au maximum de prendre des photos de «vous».En vous dévoilant à l’internaute c’est sa confiance que vous gagnez.

Donnez de l’âme à vos photos

Si vous devez choisir des images payantes ou libres de droit, privilégiez des banques d’images telles que unsplash.com ou pexel.com

Attention aux photos stock

unsplash fotolia

unsplashfotolia

Il ne faut pas hésiter à utiliser des typographies grosses, grasses, accidentées, avec ou sans sérif en fonction du message à faire passer.

Un message court, écrit en gros a un impact fort dans l’esprit de l’in-ternaute. Et cela permet de structurer votre discours

Des typographies imposantes

S’appuyer sur des formes géométriques est une façon minimaliste et élégant de construire son identité. La tendance a vraiment émergée l’année dernière, et le résultat est plutôt réussi pour certains.

Dites-le avec des ronds et des triangles

Aujourd’hui la vidéo rassure, explique et démontre mieux que n’importe quel contenu web.

Le motion design ou la vidéo commerciale restent les plus utilisés.

getfinal.comprescribewellness.com

Animez vos contenus

Pratiques UX

Le webdesign évolue, et la manière d’interpréter «la grille» aussi. Les éléments flottent sur la page, textes et photos se superposent, et cela donne plus de dynamisme dans la lecture du contenu. Attention tout de même à la lisibilité, et à la cible

lookbook.quechua.com/s-pring-summer-2016/fr

adamunderwear.com/

Cassez la grille

Vous voulez guider votre utilisateur de manière originale sur votre site ? Lui présenter plusieurs informations sur le même écran en restant clair ? Ou encore attirer son attention sur un élément en particulier ?

Partagez votre écran

Le design mobile first est conçu pour être affiché sur smartphone, et pour d’adapter aux écrans plus grands.

Les enjeux de développement et de SEO associés imposent de nouvelles règles dans le webdeisgn

Tendance Mobile First

Les micros-interactions peuvent être considérées commes des petites animations qui ré-pondent à une action de l’inter-naute, et contribue à le guider, à le divertir ou à le surprendre tout au long de sa navigation

Les micros-interactions

God is in the details Ludwig Mies van der Rohe

https://dribbble.com/zeeyoung

Grâce au mobile, le scroll est rentré de plus en plus dans les moeurs chez l’utilisateur.

Il existe plusieurs façon de jouer avec.

Un, deux, trois, scrollez !

http://www.maelo.com/en/http://zest.is/

Merci de votre attentionne manquez pas le prochain webinar de Pilot’in !

[email protected] - www.pilot-in.com

webdesignertrends - muzli - dribble - drama - aime - google - tripfinder - behance - pomerlau - famigliacecchi

- freepik - fotolia - airbnb - shutterstock - pres-criblewelness - bigyouth - mind - stink - ode - maelo -

zedst - zeeyoung - studiometa - dropbox - getfinal