O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Workshop design graphique (HE-Arc, novembre 2017)

226 visualizações

Publicada em

Workshop design graphique, pour les étudiants de la HE-Arc Ingénierie, Neuchâtel

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Workshop design graphique (HE-Arc, novembre 2017)

  1. 1. Workshop design graphique HE-Arc
 novembre 2017
  2. 2. Manuel Schmalstieg HEAD ERACOM
  3. 3. cours-web.ch
  4. 4. fontes et typographie
  5. 5. Webfonts
  6. 6. Open Font License
  7. 7. Fontforge
  8. 8. Google Fonts
  9. 9. les “Hot 30”, une sélection de 30 fontes libres
  10. 10. open-foundry.com/ hot30
  11. 11. OSP
  12. 12. les fontes d’Alfredo Marco Pradil
  13. 13. Use & Modify, sélection de fontes maintenue par Raphaël Bastide
  14. 14. fonts.greatsimple.io
  15. 15. OSP
  16. 16. OSP
  17. 17. fontsquirrel.com
  18. 18. OSP
  19. 19. modular scales
  20. 20. couleur
  21. 21. In visual perception a colour is almost never seen as it really is[…] This fact makes colour the most relative medium in art. Josef Albers, Interaction of Color, 1963
  22. 22. selon sondage de 2003
  23. 23. selon sondage de 2012
  24. 24. .black .blue .green .red .pink
  25. 25. palettes de couleur
  26. 26. accessibilité des couleurs
  27. 27. CSS et mise en page
  28. 28. 1996
  29. 29. contenu ≠ présentation
  30. 30. CSS1 = essentiellement les propriétés de rendu typographique du texte
  31. 31. 1998
  32. 32. CSS 2 = ~ 70 propriétés supplémentaires
  33. 33. CSS3
  34. 34. CSS 3 = modules indépendants
  35. 35. p.ex. WebFonts, Media Queries, Flexbox, Backgrounds & Borders
  36. 36. 2010
  37. 37. CSS Bling
  38. 38. CSS Bling • Les dégradés de couleurs • Les ombres portées (box-shadow) • L’opacité (opacity) • Les bords arrondis (border-radius) • Les fontes web (@fontface)
  39. 39. Mise en page & CSS
  40. 40. 2000 - 2004 : table  float
  41. 41. Responsive Web Design Concepts et implications
  42. 42. CSS Grid Systems
  43. 43. Flexbox
  44. 44. “Working Draft” (depuis 2009)
  
 “Candidate Recommendation” Flexbox
  45. 45. bien supporté par les navigateurs en 2016! Flexbox
  46. 46. GSS Grid Style Sheets
  47. 47. GSS Grid Style Sheets
  48. 48. GSS is a CSS preprocessor & JS runtime that harnesses Cassowary.js
  49. 49. Technologie liée à la startup The Grid
  50. 50. Slogan: “The Grid Is The Website Of The Future: It Builds Itself”
  51. 51. CSS Grid Layout
  52. 52. CSS Grid Layout proposé en 2011 par Microsoft
  53. 53. CSS Grid Layout implémenté à fins de test dans IE 10 et 11
  54. 54. CSS Grid Layout repris par le W3C, en cours de développement
  55. 55. CSS Grid Layout en mars 2017
  56. 56. en avril 2017

×