SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
Les tendances graphiques
pour avoir un site agréable
et moderne.
User Interface
Graphisme
À la mode
User Experience
Ergonomie
Interactif
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.com
prescribewellness.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 attention
ne manquez pas le prochain webinar de Pilot’in !
julien.m@pilot-in.com - 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

Contenu connexe

Similaire à Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilot'in

Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021Agence 50A
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Vincent Pereira
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Inaativ
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...Microsoft
 
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieOlivier Dommange
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochureZélia Sakhi
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...Flupa
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileAudrey CHATEL
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Idean France
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...MXO | agence totale
 

Similaire à Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilot'in (20)

Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
 
Le web design - fullCONTENT
Le web design - fullCONTENTLe web design - fullCONTENT
Le web design - fullCONTENT
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Flat Design
Flat DesignFlat Design
Flat Design
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
 

Plus de Julien Dereumaux

10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdfJulien Dereumaux
 
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...Julien Dereumaux
 
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdfWebinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdfJulien Dereumaux
 
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdf
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdfLes 6 workflows qui transforment le plus en marketing automation 🎯.pdf
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdfJulien Dereumaux
 
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdf
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdfCréer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdf
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdfJulien Dereumaux
 
Votre stratégie réseaux sociaux pour 2024.pdf
 Votre stratégie réseaux sociaux pour 2024.pdf Votre stratégie réseaux sociaux pour 2024.pdf
Votre stratégie réseaux sociaux pour 2024.pdfJulien Dereumaux
 
Webinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdfWebinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdfJulien Dereumaux
 
Projet de CRM :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀
Projet de CRM  :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀Projet de CRM  :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀
Projet de CRM :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀Julien Dereumaux
 
Communication digitale _ Sous-traiter ou internaliser _.pdf
Communication digitale _ Sous-traiter ou internaliser _.pdfCommunication digitale _ Sous-traiter ou internaliser _.pdf
Communication digitale _ Sous-traiter ou internaliser _.pdfJulien Dereumaux
 
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdf
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdfWebinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdf
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdfJulien Dereumaux
 
Webinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfWebinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfJulien Dereumaux
 
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...Julien Dereumaux
 
Webinar - Boostez votre acquisition digitale avec Hubspot.pdf
Webinar - Boostez votre acquisition digitale avec Hubspot.pdfWebinar - Boostez votre acquisition digitale avec Hubspot.pdf
Webinar - Boostez votre acquisition digitale avec Hubspot.pdfJulien Dereumaux
 
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfJulien Dereumaux
 
Webinar - 7 scénarios de marketing automation incontournables 💣🧲
Webinar -  7 scénarios de marketing automation incontournables 💣🧲Webinar -  7 scénarios de marketing automation incontournables 💣🧲
Webinar - 7 scénarios de marketing automation incontournables 💣🧲Julien Dereumaux
 
Formation prospection LinkedIn
Formation prospection LinkedInFormation prospection LinkedIn
Formation prospection LinkedInJulien Dereumaux
 
Webinar - GA4 vs MATOMO.pdf
Webinar - GA4 vs MATOMO.pdfWebinar - GA4 vs MATOMO.pdf
Webinar - GA4 vs MATOMO.pdfJulien Dereumaux
 
Webinar - Structuration d'une agence pour le succès de vos projets.pdf
Webinar - Structuration d'une agence pour le succès de vos projets.pdfWebinar - Structuration d'une agence pour le succès de vos projets.pdf
Webinar - Structuration d'une agence pour le succès de vos projets.pdfJulien Dereumaux
 
La méthodologie de design thinking de Pilot'in
La méthodologie de design thinking de Pilot'inLa méthodologie de design thinking de Pilot'in
La méthodologie de design thinking de Pilot'inJulien Dereumaux
 
La stack et tous les outils utilisés dans une agence web - Pilot'in
La stack et tous les outils utilisés dans une agence web - Pilot'inLa stack et tous les outils utilisés dans une agence web - Pilot'in
La stack et tous les outils utilisés dans une agence web - Pilot'inJulien Dereumaux
 

Plus de Julien Dereumaux (20)

10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
 
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...
PDF : Vidéo à 1€ vs 100.000€ : On décortique le process de création vidéo pou...
 
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdfWebinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
Webinar - Votre prospection Linkedin pour faire pleuvoir des leads ☔️.pdf
 
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdf
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdfLes 6 workflows qui transforment le plus en marketing automation 🎯.pdf
Les 6 workflows qui transforment le plus en marketing automation 🎯.pdf
 
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdf
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdfCréer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdf
Créer une campagne Google Ads rentable - Pilot'in X WebmediaRM.pdf
 
Votre stratégie réseaux sociaux pour 2024.pdf
 Votre stratégie réseaux sociaux pour 2024.pdf Votre stratégie réseaux sociaux pour 2024.pdf
Votre stratégie réseaux sociaux pour 2024.pdf
 
Webinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdfWebinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdf
 
Projet de CRM :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀
Projet de CRM  :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀Projet de CRM  :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀
Projet de CRM :Comment mieux qualifier votre besoin 💻 avec Hubspot 🚀
 
Communication digitale _ Sous-traiter ou internaliser _.pdf
Communication digitale _ Sous-traiter ou internaliser _.pdfCommunication digitale _ Sous-traiter ou internaliser _.pdf
Communication digitale _ Sous-traiter ou internaliser _.pdf
 
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdf
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdfWebinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdf
Webinar - Les 3 plans marketing digital gagnants pour 2024 🧲.pdf
 
Webinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfWebinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdf
 
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
 
Webinar - Boostez votre acquisition digitale avec Hubspot.pdf
Webinar - Boostez votre acquisition digitale avec Hubspot.pdfWebinar - Boostez votre acquisition digitale avec Hubspot.pdf
Webinar - Boostez votre acquisition digitale avec Hubspot.pdf
 
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
 
Webinar - 7 scénarios de marketing automation incontournables 💣🧲
Webinar -  7 scénarios de marketing automation incontournables 💣🧲Webinar -  7 scénarios de marketing automation incontournables 💣🧲
Webinar - 7 scénarios de marketing automation incontournables 💣🧲
 
Formation prospection LinkedIn
Formation prospection LinkedInFormation prospection LinkedIn
Formation prospection LinkedIn
 
Webinar - GA4 vs MATOMO.pdf
Webinar - GA4 vs MATOMO.pdfWebinar - GA4 vs MATOMO.pdf
Webinar - GA4 vs MATOMO.pdf
 
Webinar - Structuration d'une agence pour le succès de vos projets.pdf
Webinar - Structuration d'une agence pour le succès de vos projets.pdfWebinar - Structuration d'une agence pour le succès de vos projets.pdf
Webinar - Structuration d'une agence pour le succès de vos projets.pdf
 
La méthodologie de design thinking de Pilot'in
La méthodologie de design thinking de Pilot'inLa méthodologie de design thinking de Pilot'in
La méthodologie de design thinking de Pilot'in
 
La stack et tous les outils utilisés dans une agence web - Pilot'in
La stack et tous les outils utilisés dans une agence web - Pilot'inLa stack et tous les outils utilisés dans une agence web - Pilot'in
La stack et tous les outils utilisés dans une agence web - Pilot'in
 

Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilot'in

  • 1. Les tendances graphiques pour avoir un site agréable et moderne.
  • 2.
  • 3. User Interface Graphisme À la mode User Experience Ergonomie Interactif
  • 4.
  • 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 !
  • 7. Le Material Design Un ensemble de règles et de bonnes pratiques pour le design web ou d’appli, dicté par Google.
  • 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
  • 12.
  • 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
  • 15.
  • 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
  • 18.
  • 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
  • 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
  • 23.
  • 24.
  • 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
  • 26.
  • 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
  • 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
  • 31.
  • 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