Upload
julien-dereumaux
View
157
Download
0
Embed Size (px)
Citation preview
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 !
Le Material Design
Un ensemble de règles et de bonnes pratiques pour le design web ou d’appli, dicté par Google.
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
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
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
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