Découvrez nos conseils pour avoir un site internet moderne et agréable. Nous vous présentons les tendances graphiques 2017, des ressources utiles et des conseils simples à mettre en place.

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

3. User Interface
Graphisme
À la mode
User Experience
Ergonomie
Interactif

5. 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 !

6. Composants UI

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

8. Le Material Design

9. Material Design Flat Design

10. 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

11. 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

13. Evitez les couleurs ternes

14. 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

16. 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

17. 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

19. 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

20. unsplash fotolia

21. unsplashfotolia

22. 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

25. 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

27. 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.com
prescribewellness.com
Animez vos contenus

28. Pratiques UX

29. 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

30. 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

32. 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

33. 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

34. 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/

35. Merci de votre attention
ne manquez pas le prochain webinar de Pilot’in !
julien.m@pilot-in.com - www.pilot-in.com

36. 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