(Dutch) Het web is klaar voor geweldig grafisch ontwerp

Het web is klaar voor geweldig grafisch ontwerp HIDDE DE VRIES, 15/10/2019, TILBURG TECH MEETUP @hdv

Hidde de Vries @hdv Freelance front-end ontwikkelaar, accessibility specialist, blogger, bij hiddedevries.nl Sinds 2019 werkzaam voor W3C/WAI, daarvoor o.a. Mozilla, Gemeente Den Haag, Ministerie van BZK. @hdv

GRAFISCH ONTWERP en het WEB @hdv

“We’re going to run a few workshops to collect feedback and to get your help with making the spec better and easier to understand ” — Fantasai http://fantasai.inkedblade.net/style/events/grid-workshop @hdv

Amsterdam, 2016. Photo: Michiel Bijl @hdv

@hdv

Er is een nieuwe tijd aangebroken voor grafisch ontwerp op het web @hdv

wat is GEWELDIG GRAFISCH ONTWERP? @hdv

Modernisme in grafisch ontwerp @hdv

Die neue Typography Jan Tschichold, 1928 @hdv

Moderne tijden vragen om functie boven vorm. Duidelijkheid, ipv ‘schoonheid’. @hdv

Asymmetrische uitlijning is effectiever Source: Jan Tschichold, Die Neue Typographie. @hdv

Ontwerp zodanig dat de ogen van het ene woord naar het andere worden geleid Source: Jan Tschichold, Die Neue Typographie. @hdv

“ If we think clearly and approach each task with a fresh and determined mind, a good solution will usually result. — Jan Tschichold In: The New Typography, 69. @hdv

Raster systeme für die visuele Gestaltung Josef Müller-Brockmann, 1981 Photo JMB: MoMA @hdv

functioneel Waarom grids? logisch ziet er mooier uit @hdv

“ The grid makes it easier to give the surface or space a rational organization. — Joseph Müller-Brockmann In: Grid systems 11. @hdv

“Grid fields” @hdv

Josef Müller Brockmann, Grid systems. @hdv

Gebruik van proportie voor grootte van grid areas Poster: Josef Müller-Brockmann. Source: grafik.net @hdv

Photo: Dezeen, https://vimeo.com/21969124. @hdv

@hdv

Posters: Wim Crouwel @hdv

Spreads from Vrij Nederland @hdv

Corporate identities / huisstijlen @hdv

Design systems 1.0 @hdv

“Finch logo” by Dirk Roosenburg @hdv

Logo by KLM Design Department @hdv

Logo analysis by David Ogilvy @hdv

Redesign by F. Henrion @hdv

Various examples from the Total Design portofolio, source: https://totalidentity.nl/1974-1983 @hdv

@hdv

Standaardisering van papiergroottes, kleuren, etc… @hdv

Grids gemaakt voor het (automated) verwerken van formulieren Bakker, Droom van Helderheid, 298. @hdv

grids neutrale lettertypes De revolutie van modernistisch grafisch ontwerp wiskundige verhoudingen function over form @hdv

Niet iedereen was fan. @hdv

@hdv

“ “TD brengt een stijl als ieder andere. Ik zou het zelfs een stijltje willen noemen” — Piet Schreuders In: Piet Schreuders, Lay in, lay out. @hdv

“ “dodelijk saaie affiches van het Stedelijk Museum” — Piet Schreuders In: Piet Schreuders, Lay in, lay out. @hdv

Teveel objectiviteit leidt tot hele saaie layouts (Dit zien we ook op het web) @hdv

Laten we de goede dingen van modernisme gebruiken @hdv

CSS = regels voor hoe websites eruit zien @hdv

Als front-end ontwikkelaar abstraheer ik ontwerp in herbruikbare regels @hdv

Geweldig grafisch ontwerp in CSS @hdv

https://markboulton.co.uk/journal/anewcanon @hdv

Floats die niet vierkant zijn Variabele fonts box-sizing: border-box Controle over woordafbreking HSL kleuren Blend Modes object-fit @hdv

Nieuwe layout modes: flexbox en grid @hdv

Gelijke hoogten @hdv

Style Style Style Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @hdv

Style Style Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate stra-tegy foster collaborative thinking further the overall value proposition. A longer heading Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @hdv

Stretch als default .container { display: flex; // not default align-items: flex-start; } @hdv

Stretch als default .container { display: flex; // the default align-items: stretch; } @hdv

Witruimte en bewuste plaatsing @hdv

“ Pencil and paper is cheap and quick. It lets me iterate in my head how I want my tracks to behave, while helping me visualise the final effect. — Hui Jing Chen, “How I design with CSS Grid” https://www.chenhuijing.com/blog/how-i-design-with-css-grid @hdv

“ https://www.chenhuijing.com/blog/how-i-design-with-css-grid/ @hdv

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. Collaboratively administrate empowered markets via plug-and-play networks. @hdv

@hdv

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.

<div class=”container”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. @hdv

.container { display: grid; grid-template-columns: repeat( 4, 1fr ); } @hdv

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. https://codepen.io/hidde/pen/bKGWpr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in realtime will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Collaboratively administrate empowered markets via plugand-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. @hdv

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in realtime will have multiple https://codepen.io/hidde/pen/bKGWpr Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnolog y immersion along the information highway will close the loop on focusing solely on the bottom line. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

<div class=”container”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> @hdv

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table

<div class=”container”> <div class=”container”> <div class=”content”> <div class=”content”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> <p>(…)</p> </div> </div> </div> https://codepen.io/hidde/pen/bKGWpr @hdv

1 2 3 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for https://codepen.io/hidde/pen/bKGWpr 4 5 .content { grid-column: 2 / 4; } .content { grid-column: 2 / 4; } @hdv

1 2 3 4 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for https://codepen.io/hidde/pen/bKGWpr 5 .content { grid-column: 3 / 5; } .content { grid-column: 2 / 4; } @hdv

1 2 3 4 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. 5 .content { grid-column: 2 / 5; } .content { grid-column: 2 / 4; } Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. https://codepen.io/hidde/pen/bKGWpr @hdv @hdv

In Grid Layout is een ruimte leeglaten net zo makkelijk als ‘m vullen @hdv

Je kunt met Grid Layout dus bewuste keuzes maken over plaatsing en witruimte @hdv

“ a webpage […] doesn’t have one single composition — Vasilis van Gemert, “Layout is like a sculpture” https://vasilis.nl/nerd/layout-on-screen-is-like-a-sculpture/ @hdv

Wiskundige verhoudingen @hdv

Triviale ratio’s: flexbox .container { display: flex; } #item-1 { flex: 2 flex: 1 flex: 2; } #item-2 { flex: 1; } https://codepen.io/hidde/pen/QxLeGK @hdv

Triviale ratio’s: grid .container { .container { display: grid; display: grid; grid-template-columns: 1fr 3fr 2fr 1fr; grid-template-columns: } 1fr 3fr 2fr 1fr; 1fr 3fr https://codepen.io/hidde/pen/ZRzgBX 2fr 1fr } @hdv

In verhouding tot gestandaardiseerde papiergroottes @hdv

A1 A0 A3 A2 A4 A5 @hdv

@hdv

In verhouding tot gestandaardiseerde papiergroottes viewport @hdv

In verhouding tot gestandaardiseerde papiergroottes elke willekeurige viewport @hdv

Viewport units: vw, vh @hdv

Een grid met viewport units .container { display: grid; grid-template-columns: repeat( 8, 12.5vw ); grid-template-rows: repeat( 8, 12.5vh ); } https://codepen.io/hidde/pen/odyZeL @hdv

Een grid met viewport units .tomato { grid-column: 2 / 4; grid-row: 2 / 4; background: tomato; } https://codepen.io/hidde/pen/odyZeL @hdv

Een grid met viewport units .gold { grid-column: 4 / 8; grid-row: 3 / 8; background: gold; } https://codepen.io/hidde/pen/odyZeL @hdv

Een grid met viewport units https://codepen.io/hidde/pen/odyZeL @hdv

Overlappende content @hdv

Foto’s in grids .photo { grid-column: 3 / 8; grid-column: 1 / 4; } @hdv

Foto’s in grids .photo { grid-column: 3 / 8; grid-column: 1 / 4; Ximending, it’s busy! Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. } .content { grid-column: 1 / 4; Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. grid-row: 3 / 8; } @hdv

Overlap en z-index .photo { (…) z-index: 1; Ximending, it’s busy! } Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. @hdv

Overlap en z-index .content { (…) z-index: 1; Ximending, it’s busy! } Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. @hdv

Multi-column CSS Masking Niet-vierkante floats Writing modes en nog heel veel meer @hdv

Zijn we er KLAAR voor? @hdv

Gaat alles er wel hetzelfde uitzien in elke browser? @hdv

terrible layout beautiful grid layout @hdv

terrible layout beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

In browsers that don’t support Grid Layout. terrible layout beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

terrible layout simpler, but pretty ok fallback In browsers that don’t support Grid Layout. beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

In code betekent dat… @supports, the cascade en floats overrides https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/ @hdv

@supports @supports ( display: grid ) { // Specificeer de regels die je wilt laten volgen // als de browser Grid Layout ondersteunt } @hdv

Een waarschijnlijke @supports @supports ( display: grid ) { .thing { margin: 0; width: auto; } } @hdv

Floats ongedaan maken .thing { float: left; } @supports ( display: grid ) { // Floats hoef je niet ongedaan te maken; de spec // heeft dit ingebakken. Browsers die Grid ondersteunen, // negeren floats automatisch als je Grid gebruikt. } @hdv

In code betekent dat… Houd je fallbacks zo simpel mogelijk @hdv

Qua samenwerking betekent dat… Experimenteer samen! https://fronteers.nl/congres/2014/jam-session/call-to-arms @hdv

https://twitter.com/stephenhay/status/1001547819969318912 @hdv

Qua samenwerking betekent dat… Laat je collega’s de realiteit zien, en simpele manieren om ermee te dealen @hdv

code is complexer overleg is complexer beter op termijn @hdv

“ Web design is engineering: it’s not about finding perfection, it’s finding the best compromise. — Oliver Reichenstein In: Responsive typography: the basics (2012). https://ia.net/topics/responsive-typography-the-basics @hdv

Het web is klaar voor geweldig grafisch ontwerp @hdv

Dingen die je vroeger lastig voor elkaar kreeg, zitten nu in de browser @hdv

“ Can web design inspire graphic design? How can we lead the way? — Vasilis van Gemert @hdv

Hoe kunnen we het meest uit dit NIEUWE TIJDPERK halen? @hdv

interactief flexibel standaarden toegankelijk @hdv

Het web is flexibel by default @hdv

Canvas staat vast Tekst al bekend Voorspelbare kleuren @hdv

Canvas staat vast is flexibel Tekst al bekend n e r e d n a r e v t n a t s kan con Voorspelbare kleuren Overal andere @hdv

“ It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility (…) — John Allsopp In: A dao of web design. http://alistapart.com/article/dao @hdv

Als we flexibiliteit omarmen, kunnen we effectiever werken (En hebben we meer tijd om te zorgen dat de gebruiker kan doen waarvoor ze kwam) @hdv

minmax() fr min-content / max-content ch @hdv

Een kolom van 50 karakters Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. 1fr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. .content { display: grid; grid-template-columns: 1fr 50ch 1fr; 1fr } Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to 50ch https://www.w3.org/TR/css3-values/#font-relative-lengths @hdv

Een kolom van 45-70 karakters Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. 1fr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. .content { display: grid; grid-template-columns: 1fr minmax(45ch, 70ch) 1fr; 1fr } Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to minmax( 45ch, 70ch ) https://codepen.io/hidde/pen/GGKVJb @hdv

Het web is toegankelijk by default @hdv

Het is vooral tekst. @hdv

selecteerbaar kopieerbaar Het is vooral tekst. klaar voor screenreaders vergrootbaar vertaalbaar @hdv

Door tekst gaat veel toegankelijkheid vanzelf @hdv

@hdv

Photo: Joanne Meister, https://ilovetypography.com/2013/01/12/a-firm-turn-toward-the-objective-josef-muller-brockmann-1948-1981/. @hdv

https://codepen.io/hidde/pen/bMBprB @hdv

Tekst > plaatjes van tekst @hdv

The web is interactief by default @hdv

Focus indicators: kan ik zien waar ik ben zonder muis? @hdv

Hide en show: verberg een deel van de content voor een minder drukke UI @hdv

Maken transitions een ontwerp fijner? @hdv

https://swissincss.com @hdv

Het web is gebouwd op webstandaarden @hdv

Het loont om dicht bij de standaarden zelf te blijven @hdv

webstandaarden frameworks die ze abstraheren @hdv

frameworks die ze abstraheren webstandaarden display: flex; @include flex; class=”col sm-2 md-3” Suzy @hdv

“ Grid systems are overkill. I haven’t used Suzy in 5 years and I recommend that you stop [using it, too]. — Miriam Suzanne, creator of Suzy In Don’t use my grid system, presented at Beyond Tellerand (8 May 2018). https://vimeo.com/268576559 @hdv

Bootstrap’s ingebouwde grid heeft 204 classnames om jouw layout te definiëren en alle andere mogelijke lay-outs Based on unique classnames in Bootstrap 3.1.0 starting with col- @hdv

Kies vanilla! @hdv

webstandaarden frameworks die ze abstraheren be here! @hdv

http://jensimmons.com/post/aug-15-2017/heres-super-quick-way-try-out-css-grid @hdv

https://gridbyexample.com / https://thecssworkshop.com @hdv

http://flexboxfroggy.com / http://cssgridgarden.com @hdv

~ Dit kunnen we nu: ~ vlakken even hoog wiskundige verhoudingen bewustgekozen witruimte verhouding met viewports compositie met overlappende content @hdv

~ Ontwerp voor web is ideaal, want het web is: ~ flexibel toegankelijk interactief gestandaardiseerd @hdv

Bedankt! Veel dank aan Vasilis van Gemert, Krijn Hoetmer, Jenny Shen en Peter van Grieken. @hdv hidde@hiddedevries.nl https://hiddedevries.nl/en/blog https://noti.st/hdv @hdv

(Dutch) Het web is klaar voor geweldig grafisch ontwerp

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75