(Dutch) Het web is klaar voor geweldig grafisch ontwerp
A presentation at Tilburg Tech Meetup in in Tilburg, Netherlands by Hidde de Vries
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
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
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
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
@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
https://codepen.io/hidde/pen/bMBprB @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
Veel van ‘s werelds mooiste drukwerk is ontworpen op vaste canvassen, met vaste content en enige zekerheid over kleur. Op het web is onze tooling flexibeler. Met media queries, flexibele units, Grid Layout en flexbox kunnen we geweldig grafisch ontwerp realiseren. In deze presentatie laat Hidde CSS zien die geweldig grafisch ontwerp in de praktijk brengt, op het web. Laat je inspireren door de iconen uit de geschiedenis van grafisch ontwerp, en leer over nieuwe CSS properties die je vandaag in projecten kunt toepassen.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Grid Layout workshop
Fantasai's idea for a Grid Layout workshop.
-
Wim Crouwel at the Design Museum
Interview with Wim Crouwel.
-
Total Design 1974-1983
Examples from the Total Design portfolio
-
Mark Boulton - A New Canon
Mark Boulton applying Tschichold's principles to the web.
-
Hui Jing Chen - How I design with CSS Grid
One of the best blog posts about designing with grids, one of the tools Hui Jing shows is to sketch a grid with pencil and paper.
-
CSS Grid 2 - ratios in whitespace
There's a proposal for having ratios between rows and column spacing using the ar unit.
-
A grid with viewport units
-
Using CSS Grid: Supporting Browsers Without Grid
Rachel Andrew on supporting browsers without Grid.
-
Call to arms at Fronteers Jam Session
Maaike de Laat on working together and how developers should show designers more of what's possible.
-
Stephen Hay's tweet about designers that prototype
-
Oliver Reichenstein, Responsive typography, the basics
“Web design is about finding the right compromise”
-
John Allsopp, A Dao of Web Design
“It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility (…)”
-
Swiss in CSS
In which Swiss design posters have been recreated on the web with beautiful transitions.
-
Vimeo: Don't use my Grid System
The inventor of Suzy explains she doesn't use Suzy anymore either (great talk with fantastic Grid Layout examples)
-
Jen Simmons: here's a super quick way to try out CSS Grid
Some examples to get started with Grid Layout.
-
Rachel Andrew's Grid by Example
Great examples of many possible lay-outs using Grid.
-
Rachel Andrew's The CSS Layout Workshop
Rachel Andrew has an in-depth CSS Layout workshop
-
Flexbox froggy
A game to learn flexbox properties
-
CSS Grid Garden
A game to learn CSS Grid Layout properties
Code
The following code examples from the presentation can be tried out live.
