Jen Simmons’ talk picked up essentially where Rachel’s left off, filling in a lot of the blanks that we might’ve had around CSS Grid, while also stressing that the new layout options will change how we approach the web as significantly as 25 years of filmmaking affected the film industry.
She also covers some of the core concepts of visual design as codified in the last century of graphic design and similar fields. For those of us who aren’t visual design workers on a regular basis, these are some very useful guides.
An Event Apart Seattle 2017 Designing with Grid by Jen Simmons (pdf)
CSS grid will make it much easier to code layouts. it also fundamentally changes our medium to an artistic design #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
One of the very first films – 1896 – The Kiss. Very simple, but freaked people out #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Even the actors back then didn’t really understand what it meant to be making a film #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The theme of #aeasea in one photo. pic.twitter.com/ILwL5vFcyD
— Josh Larson (@jplhomer) April 4, 2017
(I would argue that “design patterns” or “don’t do what other people are doing just to follow the trend” were also valid themes of this year’s conference.)
And now, @jensimmons about CSS Grid and The Little House on the Prairie? #aeasea pic.twitter.com/c6T9n0Sb8k
— Greg Whitworth (@gregwhitworth) April 4, 2017
Little House on the Prairie was a very different way to tell stories than House of Cards #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Our medium is similarly not done. If 1993 was the beginning, we’re at year 25. We’re in the 1917 of film. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Layout design – from text to tables to lots of circles. In large part because of table layout #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
when we switched to floats, lots of work started to look like a lot of other work #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
960 Grid became the dominant layout. Then there was a device explosion, then responsive design #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Break the pages in sections in boxes in thirds and halves. We punted on branding and differentiation #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
It’s important to have starter kits. You don’t have to start every project with a blank page #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
You want to design in a system of components. But we can add layout to what we’re doing #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Color palette
Typography palette
Layout paletteDon’t just abandon beautiful components in a boring layout #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The technology really does inform—and in some cases has constrained—our inspiration. #webdesign #aeasea
— David Watson, CPWA (@caughtexception) April 4, 2017
We don’t have to use a 12 column grid. (You can if you have to tomorrow, but in the next year maybe mix it up a bit) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What is grid really good at? What does CSS grid want us to do? #aeasea
— Anne Gibson (@perpendicularme) April 4, 2017
The nature of CSS Grid: it’s different from what you’re expecting #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Explicit vs Implicit.
You define the size and or number of rows and or columns vs browser does it #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
You place each item into a specific cell or area or you let the browser auto-layout things #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
WE HAVE ROWS – and we can work with them #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Mastering CSS Grid is mastering the art of knowing when to define what you want vs letting the browser decide for you. #aeasea
— ? Stephanie seaotta Drescher (@seaotta) April 4, 2017
You can tell the browser to size the content by the size of the track, or size the track by the content #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Content doesn’t have to fill a track. Because the content is the track before now, this is a new #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
we can align things left, right, center, stretch, top, bottom, middle, stretch…. it’s a whole new world #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Here’s a picture of what a CSS grid might look like with the blue boxes being the content within the grid.
I like puzzles #aeasea @jensimmons pic.twitter.com/i4BPr4yz0d
— jared bishop (@bishopart) April 4, 2017
You can use grid to line things up but you don’t have to line things up with CSS grid #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
How do you know where to put things? We’re going to need to go back to the last century of graphic design learning #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Visual hierarchy – you don’t have to put important things wherever you want if you use these principles to make them stand out #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Symmetry and asymmetry both have their place on the web #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Proximity principle – if you put things with other things they think they go together. (I love this principle) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Bring graphic design back to the web. Articulate theory that’s *of* the web #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A quote by Platon #aeasea pic.twitter.com/9EcTPO3UkM
— Anne Gibson (@perpendicularme) April 4, 2017
Discovery in 6 parts
1. Overlap. You can stack things over each other. it’s been hard until now #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Grid makes it easy to overlap things. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Firefox makes it easy to view grids by clicking the “waffle icon” in Inspector to see the grid lines #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Overlap – translucent circles overlapping each other – can have a cool effect #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We don’t have a mental model of an entire page all at once but that’s how we design #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What’s it mean to be designing content as an experience that has an element of time (through scrolling) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
(@scottmccloud books are a great source of info on designs over time because that’s what comics *do*) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
If you’re a designer (or developer) and you haven’t read Understanding Comics or Scott McCloud’s other books, you’re missing an incredibly accessible crash course in visual design and how the human brain turns what it sees on paper or in screens into information.
There's something a little bit broken in our process of thinking about a website – we don't design the whole experience. 1/2 #aeasea
— ? Stephanie seaotta Drescher (@seaotta) April 4, 2017
How do we show an experience over time (by scrolling down the page), the experience in the viewport? 2/2 #aeasea
— ? Stephanie seaotta Drescher (@seaotta) April 4, 2017
Even the process of storyboarding has evolved over the years, and we should be looking at them #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Break up the page into storyboards for what it will look like when people scroll down the page #aeasea
— Anne Gibson (@perpendicularme) April 4, 2017
the design of the page should always look great no matter how big the screen is. Use the up-down dimension #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Experiment with grid rows and columns, alignment, viewport units #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Framing: what does it mean to have a frame and fit things inside a frame? It’s not an easy question in film #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
How do you tell a story through a little tiny viewfinder? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Meaningful moments – a “close push” (zoom in on a face) is extremely powerful to show meaning #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What does it mean to have a reading experience or interaction experience with a frame, where things move in and out of that frame? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
White space: Ultimately the most important tool is the management of the white space in layouts. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Bad layouts have no space left for breathing – every little space is covered by a cacophony of type sizes images & screaming titles #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Grid gives us the tools we need to put space between things both vertically and horizontally. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A lot of modernists took a page, decided how many modules to use, etc. #AEASEA Grids and grids.
— Anne Gibson (@perpendicularme) April 4, 2017
Does having CSS grid mean we need modernist grids in browsers? Maybe and maybe not #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
(Ugh. I hate modernist art.)
we can’t control the size or aspect ratio of the page, but we can create white space, line things up, maintain aspect ratios #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
. @markboulton has done a lot of writing about grids #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Come up with fresh ideas and reinterpret what grid means #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Verticality. We make a lot of sites that scroll vertically. What should we do to design in the vertical direction? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
there’s a lot to be mined from responsive Mondrian but there’s a lot to be found in Arabic or Asian graphic design #aeasea
— Anne Gibson (@perpendicularme) April 4, 2017
Japan, China, Korea, languages were typeset vertically. Japan has clung to their vertical typesetting #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The Vignelli Canon (free PDF) ℅ @jensimmons #aeasea #design #CSSgrid #gridhttps://t.co/RIcHKaRHaN
— zeldman (@zeldman) April 4, 2017
Get outside of the idea that Swiss/European Modern design is THE way to design. #aeasea
— ? Stephanie seaotta Drescher (@seaotta) April 4, 2017
Horizontal text typeset into very vertical spaces. Japanese handle grids very differently than we’ve otherwise seen #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What about Asian & Middle Eastern history and art? Look for interesting and new layouts in these cultures for inspiration. #aeasea
— ? Stephanie seaotta Drescher (@seaotta) April 4, 2017
How can we use vertical space in different ways? (Lots of inspiration from Japanese graphic novels, etc.) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Japanese films and graphic novels are a good place to look for examples of verticality, where the subject of the screen is a small part of a very tall view.
Comics genius Will Eisner was also a master at using the power of verticality in his designs, and since I love Will Eisner’s work, here’s an example.
We can explore verticality much more than we have. We’re under a lot of pressure to push everything to the top #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Flexibility is being redefined as the tools change because the tools defined it until now #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Min-content
Max-content
For
Minmax()#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Max-content defines the container by the length of the full content
Min content – by the length of the longest word #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Examples of max-content and min-content #aeasea pic.twitter.com/g7phYEvOEk
— Anne Gibson (@perpendicularme) April 4, 2017
What’s an fr unit?
Right now we do a ton of algebra to figure out grid gutters and even then it’s painful #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
We generally throw bootstrap or whatever to not have to do the math #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
“Now you don’t have to use Boostrap, you can just use ‘fr’ units. (Computers are really good at math.)” @jensimmons #aeasea
— zeldman (@zeldman) April 4, 2017
An FR unit allows us to say the gutters are 2em and the inbetween sections are 1 fr – fr stands for fraction #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Can set first column to 100px and the other columns to 1fr each and they’ll squish accordingly #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
In other words CSS Grid allows us to do a whole lot of “the computer will do the math” #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We can mix units or mix numbers of fractions #aeasea pic.twitter.com/wHQHtWab9v
— Anne Gibson (@perpendicularme) April 4, 2017
Articles with examples:https://t.co/2uprrrO0bJhttps://t.co/ZQlWndTV9K#AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
“Pixel perfect” is so completely over, even if the memo didn’t get to everybody #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What happens when parts of the content/interface are missing or shorter/longer than the ideal? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Minmax gives us the ability to say “size it between 40 characters and 65 characters” #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Flexibility – storyboard one moment, storyboard a different moment, then figure out what you can do #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Even the masters of the new tech don’t know what can be done yet. Experiment #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Creativity: there is no single new way to design with grids #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
There is no “download THE grid” #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
"It's time to get creative." – @jensimmons #aeasea
— Greg Whitworth (@gregwhitworth) April 4, 2017
You can have some things that are static on a page and the rest will be super responsive and flexible #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
You can make fixed-sized elements again, and then figure out how to build around them for all screens sizes #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
“It’s definitely a time to play. It’s definitely a time to learn.” – @jensimmons #aeasea
— Josh Vickerson (@joshvickerson) April 4, 2017
Play and learn. https://t.co/dqFZNrPoPi is not yet up but you can sign up to get email when it’s done #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
https://t.co/IymmNGQEsq also has other talks she’s done about layouts that are worth watching #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
“I hope we all go figure out how to make layouts that really say something.” – @jensimmons #aeasea
— Josh Vickerson (@joshvickerson) April 4, 2017
A giant list of links to resources for learning CSS Grid #AEASEAhttps://t.co/qbSTvbWcGa
— zeldman (@zeldman) April 4, 2017
The Experimental Layout Lab of Jen Simmons https://t.co/NP4cSPgKXb @jensimmons #aeasea
— zeldman (@zeldman) April 4, 2017
The Experimental Layout Lab of Jen Simmons https://t.co/NP4cSPgKXb @jensimmons #aeasea
— zeldman (@zeldman) April 4, 2017