1 of 30

Editorial

& CSS Grid

design

2 of 30

CSS is

maturing

CSS Illustration by Diana Smith

3 of 30

What is

Photo by Rita Morais

editorial design?

4 of 30

“Editorial design is a discipline of communication design that specializes in publications of a serial, periodical nature,

which are unified by a distinct editorial or

creative vision, [and] are produced at a predetermined frequency[...]”

​

​

Sue Apfelbaum & Juliette Cezzar

Designing the Editorial Experience

A Primer for Print, Web, and Mobile -2014

5 of 30

6 of 30

7 of 30

8 of 30

9 of 30

“[Editorial design is]the result of empathy for a reader combined with the desire to create beautiful and moving experiences.”

​

​

Sue Apfelbaum & Juliette Cezzar

Designing the Editorial Experience

A Primer for Print, Web, and Mobile -2014

10 of 30

Editorial design for the web

Part of the push for more art direction on the web�

  • For who: periodical publications- news sites, online magazines, blogs, ...
  • Why now: more techniques that allow for creative expression
  • Because: unique tone of voice will become more important as a way to distinguish your work from others

​

​

​

​

11 of 30

Examples

Medium

12 of 30

Louder than ten

13 of 30

Highline

14 of 30

The Great Discontent

15 of 30

The Great Discontent - magazine

16 of 30

Elements of editorial design

formats

time

identity

anatomy

art

typography

layout

prototyping

production

17 of 30

Let’s talk about

SPACE

Photo by Sean Pierce

18 of 30

I mean SCREEN space

(not actual outer space, sorry)

Let’s talk about...�

  • content & hierarchy
  • rhythm and flow
  • scanability
  • affiliation

​

​

​

​

​

...and how to implement it�

  • the grid - columns/rows
  • whitespace
  • focus points
  • use of details

​

​

​

​

​

​

19 of 30

stacking the bricks

with GRID

divs

Photo by Jon Moore

20 of 30

How space works in CSS Grid

21 of 30

(A very short recap of CSS Grid)

.grid {� /* set up the grid */� display: grid ;� grid-template-columns: 1fr 0.5fr 100px 0.5fr 50px 10%;� grid-template-rows: repeat(4, 150px);

}

.grid-child {� /* place the child element in the grid*/� grid-column: 2 / 5 ;� grid-row: 2 / 4 ;

}

22 of 30

Building a page

Layout inspiration �Daniela Matos - La Prensa

23 of 30

Challenges - 1: responsive design

  • It won’t look the same for all screen sizes
  • Strive to keep the focus points on small(er) screens
  • Minmax, fr-units, repeat(), grid-auto-rows, grid-auto-columns are your friends

​

​

​

​

24 of 30

Layout by Jen Simmons

youtube.com/layoutland

25 of 30

Challenges - 2: progressive enhancement

  • Make sure your element order makes sense
  • Hide/show or alter the position of elements based on whether CSS Grid is supported with feature queries��@supports (display: grid) {� /* do stuff here*/�}

​

​

​

​

26 of 30

Challenges - 3: online publishing tools

  • How can we make custom designs for systems for mass publication?

​

​

​

​

​

27 of 30

And

now...

Designs by Andrew Carter

28 of 30

“Can I use CSS Grid? �Sure, just mind the fall-backs”

​

​

Still the general consensus - 2019

29 of 30

  • Use only when applicable: consider what the right approach is for your website
  • Convincing the boss: more thoughtfulness is needed about bringing design identity into your work
  • Explore the options: what kind of designs do you want to see on the web?

​

30 of 30

Bye!

Eva Brarens�eva@graphicsgrove.com

What I do:

freelance web design & front-end development

co-founder of Women.Code(be)

Where to find me:

Web: grahicsgrove.com�Birdsite: @EvaBrarens