Support de présentation de l'atelier ENP de la CCI de l'Yonne sur les tendances du web design en 2018.

1. Avant-propos
68 % des entreprises
françaises ont un site web
35 % sont présentes sur au
moins un réseau social
2017

2. « Tendances WEB DESIGN 2018 »
1/ GAFAM DESIGN
2/ UX First !
3/ Tendances In et Out

3. GAFAM DESIGN
GAFAM et
followers*:
Le web leur appartient,
le web design aussi
*GAFAM :
Google (Alphabet)
Apple
Facebook
Amazon
Microsoft
Followers : satellites des GAFAM

4. GAFAM DESIGN
Android :
La puissance pour
les écrans de
toutes tailles

5. GAFAM DESIGN
Apple :
Des interfaces
toujours plus
orientées vers la
mobilité

6. GAFAM DESIGN
Windows 10 :
La cohérence
fonctionnelle et
graphique à 360°

7. GAFAM DESIGN
SOCIAL

8. GAFAM DESIGN
DYNAMIC GRID
Des chaussures à
la musique,
la même grille
centrée sur les
produits et
l’utilisateur

9. GAFAM DESIGN
DYNAMIC GRID
Grilles
dynamiques et
responsives
optimisées
desktop et mobile

10. GAFAM DESIGN
FLAT 2.0
Skeuomorphisme
Ou skeuomorphe est un terme formé à partir
du grec skeuos et définissant un élément de
design dont la forme n'est pas directement
liée à la fonction, mais qui reproduit de
manière ornementale un élément qui était
nécessaire dans l'objet d'origine
Flat Design

11. GAFAM DESIGN
FLAT 2.0
Plus frais,
Material design
(Google) lancé en
2014 a pris
l’ascendant sur
ses rivaux
Plus de ressources :
https://www.codeur.com/
blog/material-design-
ressources

12. GAFAM DESIGN
FLAT 2.0
Les ombrages ne sont pas un
nouvel effet mais prennent tout
leur sens aujourd’hui avec des
designs très épurés,
Les ombrages légers sur les
boutons d’action sont essentiels
pour les mettre en avant, créer
de la profondeur et ainsi attirer
l’oeil des internautes.

13. GAFAM DESIGN
Ces éléments sont bien plus qu’un simple plaisir des yeux :
ils créent de la hiérarchie, du sens et le focus sur une interface, une image, un système.
L’accent a donc été mis sur les actions des utilisateurs afin de rendre les fonctionnalités de base immédiatement
apparentes et fournir alors des points de validation mentale et visuelle pour l’utilisateur.

14. GAFAM DESIGN
FLAT 2.0
Couleurs franches
+ gris et blanc,
importance des
icônes et du data
design, grilles
structurées…

15. GAFAM DESIGN
MINIMAL
« Less is more »
Tout se joue dans
la composition

16. GAFAM DESIGN
Le vide s’installe
« Less is more »

17. GAFAM DESIGN
MONOPAGE
Gamme, produit,
descriptif,
utilisation, avis…
Sur une seule
page

18. GAFAM DESIGN
MONOPAGE
Images / vidéos en
plein écran + mise en
scène de la typo
https://videos.pexels.co
m

19. GAFAM DESIGN
STORYTELLING
Créer des histoires en combinant textes et images
Prime aux images originales et uniques. Larges
typographies et couleurs brillantes

20. GAFAM DESIGN
STORYTELLING
Ne vendez pas un
produit, donnez le
premier rôle à
l’internaute

21. GAFAM DESIGN
PICTOS
Pictos et polices
de caractères en
ligne : efficace et
rapide
Voir aussi : FontAwesome,
designscrazed.org
Typekit (Adobe)

22. GAFAM DESIGN
Illustrations
L’avantage indéniable des dessins
est de pouvoir illustrer des
humains, des expressions, des
services plus abstraits pour qu’on
puisse plus simplement se
projeter
https://undraw.co/illustrations

23. GAFAM DESIGN
SVG (graphique vectoriel adaptable)
Si le material design permet de gagner en temps de
téléchargement, avec une iconographie simple, les interactions
renforcent le lien avec l’internaute.
On verra ainsi de plus en plus de boutons animés, grâce à
l’effet « hover » (qui changent de couleur au passage de la
souris, par exemple) ou des menus « hamburger » qui se
transforment pour inciter à cliquer.
Ces animations, grâce au CSS et au javascript, sont maintenant
compatibles avec tous les navigateurs.

24. GAFAM DESIGN
SVG (graphique vectoriel adaptable)
Les Logos responsives vont devoir se présenter sous
différentes versions, en gardant la plus grande, la plus
élaborée, uniquement pour les publications disposant
d’un maximum d’espace.

25. GAFAM DESIGN
Dégradés de couleurs vives
Couleurs vibrantes plus que jamais à la
mode en 2018 ( Retina display)
Présentation bitonale / dégradé (qui
met en avant les éléments en flat
design)

26. GAFAM DESIGN
Couleur de l’année 2018
Complexe, contemplative, provocatrice,
profonde… Les adjectifs ne manquent pas
pour décrire cette teinte si particulière,
évoquant l’espace et le cosmos.

27. GAFAM DESIGN
Couleur de l’année 2018
Le violet semble déjà se faire une place de plus en
plus importante dans le cœur des designers.
Particulièrement propice avec des photographies NB

28. GAFAM DESIGN
INSPIRATIONS…
GAFAM ont capté
les tendances,
pour mieux nous
les imposer.
Le monde suit…

29. GAFAM DESIGN
Mais…
Asymétrie et brutalisme
Une tendance graphique comme un mouvement de
révolution par rapport à un design aseptisé.
http://brutalistwebsites.com

30. GAFAM DESIGN
Mais…
Broken Layout et Scroll reveal
La mise en page cassée consiste à changer la donne
avec des images et des contenus textes qui
s'entremêlent avec les grilles pour venir se superposer
ou se croiser, apportant ainsi un effet moderne et très
inspiré du print et des magazines.
http://berdanrealestate.com

31. UX First !
UX : expérience utilisateur
User eXperience :
Utilité, efficacité, facilité, ergonomie, architecture…
UI : interface utilisateur
User interface :
Concept graphique, typographie, branding…

32. UX First !
L’efficience d’abord ! Mais c’est quoi l’UX ?
1. L’apparence du site et son ergonomie
Cohérence, placement des éléments…
2. La capacité à rassurer, la crédibilité
Utilité et pertinence du contenu, de la mise en forme
3. Les performances, l’efficacité
Performances pour effectuer une tâche
4. La facilité d’utilisation
Par exemple pour passer une commande…
5. L’accessibilité
Pour tous et tous types de supports
6. Le référencement
Sur les différents moteurs de recherche

33. UX First !
Le design est conçu sans logiciel graphique…
Papier, crayons, ciseaux…
Puis vient le wireframe
Kit illustrator (http://www.jankoatwarpspeed.com)

34. UX First !
L’atomic design
est une méthode
qui consiste à penser
le design d’interface
par composants
et non plus
par pages.

35. UX First !
MENU
Menu caché, coulissant, en
perspective…
Du sticky menu (Navigation
principale fixée en haut de
l’écran)
Au tableau de bord
(libération.fr)

36. UX First !
MOTION UI
Sur mobile il renforce
l’affordance*, la fluidité
et l’impact émotionnel
*l’affordance désigne la capacité
d’un élément visuel ou graphique
à suggérer sa finalité par son apparence
http://capptivate.co/

37. UX First !
Tester vos couleurs
http://www.etre.com/tools/colourblindsimulator
Principes et normes accessibilité web
https://lc.cx/JcgW
ACCESSIBLE
L’attention portée
aux couleurs
et aux contrastes

38. UX First !
Popchartlab.com
Lecoqsportif.com
Wetransfert.com
FOOTER
Des pieds de page clairs
et fonctionnels

39. UX First !
S-DATA
Infographies, design
géométrique, dynamique,
Data motion …
Du big data
au smart data
via le design

40. UX First !
S-DATA
Infographies, design
géométrique, dynamique,
Data motion …
Du big data
au smart data
via le design

41. UX First !
LA COHERENCE
SUR TOUS
LES ECRANS

42. 360°
360° Post-responsive
design
Explosion des écrans : auto,
domotique, hybride, RV,
wearable…
Une multitude d’appareils,
de formats et d’interfaces

43. 360°
DES OUTILS EN MUTATION !
On assiste à une mutation des outils de
développement face à la transformation
profonde du web, de la mobilité et des objets…
AngularJS
Framework JavaScript libre et open-source (monte face à jQuéry)
Bootstrap
Site responsive et applications Web
Flexbox
CSSS3
Foundation
Sites responsive, applications, e-mails
Node,Js
Plateforme de développement Javascript
PhoneGap
Applications mobiles hybrides (web encapsulé)
ETC.

44. Tendances In
Semi-flat
« photoréaliste »
Le flat influencé par
Material. Effets de
remiefs et d’ombres
naturelles pour donner
de la consistance

45. Tendances In
Haute résolution
Les écrans haute
résolution se sont
généralisés, Idéal pour
les interfaces, moins
pour les bas débits…

46. Tendances In

47. Tendances In

48. Tendances In

49. Tendances Out

50. Tendances Out

51. Tendances Out

52. Tendances Out

53. Tendances Out