Comme tout Art qui se respecte, le webdesign a ses tendances. Non seulement pour l’aspect graphique mais également concernant expérience utilisateur. Plus communément on distingue l’UI et l’UX design. Pour résumer, l’UI concerne la partie émergée de l’IceBerg avec la partie graphique et l’UX représente tout le travail en amont (mettre au centre l’expérience utilisateur pour faciliter la vie de ce dernier). Vous l’aurez compris, une belle UI se base sur une bonne UX : elles sont indissociables. Simon Kern // Le Bar à Formations // SKMG Studio // Nantes

1. webdesign 2018
+ alternatives adobe
simon - @SIMON_kern
Le Bar à Formations - SKMG Studio

2. SIMON
2
Simon-K // sKMG Studio & Le bar à formations
WEB | MOTION | UI & UX | PHOTO | VIDÉO
DESIGN | WORDPRESS | AWARDS
3 Livres aux éditions
Hachette / Dunod
1 DVD aux éditions
Elephorm
Articles dans la presse
spécialisée
Graphisme Magazine,
Articles et Tutos sur le web

3. 3
Simon-K // sKMG Studio & Le bar à formations
“2 conférences en une !”
une intro
c’est toujours bien

4. 4
Simon-K // sKMG Studio & Le bar à formations
I. tendances du
webdesign en 2018
“Madame irma ? C’est ma voisine !”

5. 5
Simon-K // sKMG Studio & Le bar à formations
webdesign
=
UI + ux

6. 6
Simon-K // sKMG Studio & Le bar à formations

7. 7
Simon-K // sKMG Studio & Le bar à formations
le material design
“bye le flat, vive le flat 2.0“
#1

8. “Fat Design” ou “skeuomorphisme”“Flat design”
8
Simon-K // sKMG Studio & Le bar à formations

9. 9
Simon-K // sKMG Studio & Le bar à formations
flat design : les +
Simplicité d’utilisation
temps de création
responsive
poids
uniformisation ux

10. 10
Simon-K // sKMG Studio & Le bar à formations
flat design : les -
uniformisation graphique != innovation
site web = simple support
site web != Univers PROPRE
frustration des graphistes

11. 2010 - 2013
design site web
= univers
11
Simon-K // sKMG Studio & Le bar à formations

12. 2010 - 2013
12
Simon-K // sKMG Studio & Le bar à formations
design site web
= univers

13. 2017
design site web
= simple support
le contenu est mis
en avant
13
Simon-K // sKMG Studio & Le bar à formations

14. 14
Simon-K // sKMG Studio & Le bar à formations
material design : exemple

15. 15
Simon-K // sKMG Studio & Le bar à formations
fat

16. 16
Simon-K // sKMG Studio & Le bar à formations
material design : un mix ?
flat design + ombres + mouvements
couleurs vives
Formes géométriques
made in google (material.io)
concept global pour unifier

17. 17
Simon-K // sKMG Studio & Le bar à formations
les transitions &
ui-motion
“be smooth“
#2

18. 18
Simon-K // sKMG Studio & Le bar à formations
les transitions
éliminer la rigidité dans la navigation

19. 19
Simon-K // sKMG Studio & Le bar à formations
les micros intéractions
discrètes, subtiles & pour l’utilisateur

20. 20
Simon-K // sKMG Studio & Le bar à formations

21. 21
Simon-K // sKMG Studio & Le bar à formations
animations / motion design
interface friendly & humaine

22. 22
Simon-K // sKMG Studio & Le bar à formations

23. 23
Simon-K // sKMG Studio & Le bar à formations
les couleurs flashy
“Les années 80 / 90“
#3

24. 24
Simon-K // sKMG Studio & Le bar à formations
couleurs vives, vibrantes et flashy

25. 25
Simon-K // sKMG Studio & Le bar à formations
LE retour des dégradés

26. 26
Simon-K // sKMG Studio & Le bar à formations

27. 27
Simon-K // sKMG Studio & Le bar à formations
Story Telling +
Web Immersif
“vis ma vie“
#4

28. 28
Simon-K // sKMG Studio & Le bar à formations
storytelling
RACONTER UNE HISTOIRE, l’utilisateur en vip

29. découverte d’une journée chez un producteur de café
Navigation = timeline
Story Telling = clef de voûte du design
johos.at
29
Simon-K // sKMG Studio & Le bar à formations

30. découverte d’histroires vraies pendant la guerre
Navigation = carte temporelle
evert45.com
30
Simon-K // sKMG Studio & Le bar à formations

31. 31
Simon-K // sKMG Studio & Le bar à formations
web immersif
l’utilisateur est acteur de l’histoire

32. simulateur de masque chez décathlon
goggles.wedze.com
32
Simon-K // sKMG Studio & Le bar à formations

33. 33
Simon-K // sKMG Studio & Le bar à formations
Les exhausteurs de
(bon) goût.
“hey sympa !“
#5

34. 34
Simon-K // sKMG Studio & Le bar à formations
Le SplitScreen
diviser l’écran pour mieux présenter

35. 35
Simon-K // sKMG Studio & Le bar à formations
Fullscreen Menu
menu en pleine page

36. 36
Simon-K // sKMG Studio & Le bar à formations
Le design par algorithme
modéliser les datas clefs d’une entreprise

37. 37
Simon-K // sKMG Studio & Le bar à formations
le retour des motifs

38. 38
Simon-K // sKMG Studio & Le bar à formations
du contenu, du vrai.
“DIY“
#6

39. 39
Simon-K // sKMG Studio & Le bar à formations
le contenu
Des photos réelles
le “DIY SPIRIT”
des vidéos authentiques

40. 40
Simon-K // sKMG Studio & Le bar à formations

41. 41
Simon-K // sKMG Studio & Le bar à formations
Le Flat évolue (enfin ?)
Passage d’un design graphique à un design d’expérience.
Un beau site mais avec du motion
A l’époque : facile d’être dans le mouv (un header, un diapo..)
Aujourd’hui : designer et développeur front-end = love
conclusion 1/2

42. 42
Simon-K // sKMG Studio & Le bar à formations
II. alternatives
à Adobe
“plus y a de copains plus c’est rigolo !”

43. 43
Simon-K // sKMG Studio & Le bar à formations
bar-formations.com/blog

44. 44
Simon-K // sKMG Studio & Le bar à formations
adobe

45. 45
Simon-K // sKMG Studio & Le bar à formations
alternatives
-------
-------
-------
-------
-------
-------

46. 46
Simon-K // sKMG Studio & Le bar à formations
affinity Photo / designer
-----
-----
une interface mieux optimisée
effets non destructeur
compatible 100% photoshop
société taille humaine = Réactivité
64bits natif = Meilleur réactivité = confort
mac & pc
fichier .af commun
Symboles
artboard responsive (AF designer)
Peindre une forme vectorielle avec du pixel
54,99 € à vie.

47. 47
Simon-K // sKMG Studio & Le bar à formations

48. 48
Simon-K // sKMG Studio & Le bar à formations

49. 49
Simon-K // sKMG Studio & Le bar à formations

50. 50
Simon-K // sKMG Studio & Le bar à formations
Pourquoi cela risque de durer ?
-----
-----
serif = Une société existante depuis 1987.
Affinity Reprend avec brio les interfaces
d’Adobe en les améliorant.
AFFINITY PHOTO POUR IPAD NOMMÉ APPLICATIONS DE
L’ANNÉE PAR APPLE.
partenariats avec des ecoles françaises et
nord américaines - John Atkin (Public relation).

51. 51
Simon-K // sKMG Studio & Le bar à formations
davinci resolve
blackmagic = fabrique aussi des caméras pros
chouchou dans le cinéma
temps de rendu plus rapide
Windows, Mac, Linux
interface plus intuitive
reconnu pour l’étallonage et le montage
Effets spéciaux avec fusion 9 (gratuit)
gratuit
-------

52. 52
Simon-K // sKMG Studio & Le bar à formations

53. 53
Simon-K // sKMG Studio & Le bar à formations

54. 54
Simon-K // sKMG Studio & Le bar à formations
conclusion 2/2
freeeeedom

55. 55
Simon-K // sKMG Studio & Le bar à formations
“raclette, What else ?”
merci !!!

56. this is the END
in the raclette, we trust
Simon Kern
sKMG Studio & Le bar à formations
www.simon-k.com