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

1. Workshop
design
graphique
HE-Arc
novembre 2017

2. Manuel
Schmalstieg
HEAD
ERACOM

9. cours-web.ch

10. fontes et
typographie

30. Webfonts

36. Open Font
License

38. Fontforge

40. Google Fonts

46. les “Hot 30”, une
sélection de 30
fontes libres

47. open-foundry.com/
hot30

48. OSP

49. les fontes d’Alfredo
Marco Pradil

51. Use & Modify,
sélection de fontes
maintenue par
Raphaël Bastide

53. fonts.greatsimple.io

54. OSP

55. OSP

56. fontsquirrel.com

57. OSP

60. modular scales

65. couleur

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

67. selon sondage de 2003

68. selon sondage de 2012

69. .black
.blue
.green
.red
.pink

80. palettes de
couleur

90. accessibilité
des couleurs

94. CSS et
mise en page

96. 1996

97. contenu
≠
présentation

98. CSS1 =
essentiellement les
propriétés de rendu
typographique du
texte

99. 1998

100. CSS 2 =
~ 70 propriétés
supplémentaires

105. CSS3

106. CSS 3 =
modules
indépendants

107. p.ex.
WebFonts,
Media Queries,
Flexbox,
Backgrounds &
Borders

108. 2010

109. CSS Bling

110. 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)

111. Mise en page & CSS

113. 2000 - 2004 :
table  float

131. Responsive Web
Design
Concepts et implications

132. CSS Grid Systems

133. Flexbox

134. “Working Draft”
(depuis 2009)

“Candidate
Recommendation”
Flexbox

135. bien supporté
par les
navigateurs en
2016!
Flexbox

138. GSS
Grid Style Sheets

139. GSS
Grid Style Sheets

140. GSS is a CSS
preprocessor & JS
runtime that
harnesses
Cassowary.js

141. Technologie liée
à la startup
The Grid

142. Slogan:
“The Grid Is
The Website
Of The Future:
It Builds Itself”

144. CSS Grid Layout

145. CSS Grid Layout
proposé en 2011 par
Microsoft

146. CSS Grid Layout
implémenté
à fins de test
dans IE 10 et 11

147. CSS Grid Layout
repris par le W3C,
en cours de
développement

148. CSS Grid Layout
en mars 2017

149. en avril 2017