Tweet
Tweet

Slide 1

Slide 1 text

Grids, typography and all that jazz Yiannis Konstantakopoulos, porcupine.gr LEARNING FRIDAY @VENTURE GEEKS

Slide 2

Slide 2 text

What is a grid in web design? “Grids help you to achieve effective alignment and consistency with little effort. “Winging it” and relying on your gut does not scale so well. If executed properly, your designs will appear thoughtful, organized, neat and structurally sound.” A Comprehensive Introduction to Grids in Web Design

Slide 3

Slide 3 text

What is a grid in web design? “Good alignment, like much of design, should almost go unnoticed by your users. Less is more.” A Comprehensive Introduction to Grids in Web Design

Slide 4

Slide 4 text

What is a grid in web design?

Slide 5

Slide 5 text

What is a grid in web design?

Slide 6

Slide 6 text

What is a grid in web design?

Slide 7

Slide 7 text

What is a grid in web design?

Slide 8

Slide 8 text

How to create a grid?

Slide 9

Slide 9 text

What is a grid in web design?

Slide 10

Slide 10 text

How to create a grid?

Slide 11

Slide 11 text

How to create a grid?

Slide 12

Slide 12 text

How to create a grid?

Slide 13

Slide 13 text

How to create a grid? A lightweight Sass tool set A lightweight and flexible Sass grid Scaffold styles, variables and structure for Bourbon projects. Bourbon Neat Bitters

Slide 14

Slide 14 text

The 8-Point Grid System The 8-Point Grid System

Slide 15

Slide 15 text

The 8-Point Grid System The 8-Point Grid System

Slide 16

Slide 16 text

The 8-Point Grid System The 8-Point Grid System Why 8pts? • Even number • The majority of popular screen sizes are divisible by 8

Slide 17

Slide 17 text

The 8-Point Grid The 8-Point Grid Every UI element you create should be aligned to the pixel grid.

Slide 18

Slide 18 text

The 8-Point Grid The 8-Point Grid Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements.

Slide 19

Slide 19 text

The 8-Point Grid The 8-Point Grid

Slide 20

Slide 20 text

The 8-Point Grid The 8-Point Grid

Slide 21

Slide 21 text

The 8-Point Grid Sketch Workflow — 8 point Soft Grids

Slide 22

Slide 22 text

The 8-Point Grid Sketch Workflow — 8 point Soft Grids

Slide 23

Slide 23 text

CSS Box Model

Slide 24

Slide 24 text

CSS Box Model

Slide 25

Slide 25 text

CSS Box Model

Slide 26

Slide 26 text

typography.css html { font-size: 62.5%; /* 16px * .625 = 10px */ } h1 { font-size: 3.6rem; /* 36px */ }

Slide 27

Slide 27 text

rem vs. em html { font-size: 62.5%; } ul { font-size: 1.8rem /* 18px */; } ul ul { font-size: 1.4rem; /* 14px */ } html { font-size: 62.5%; } ul { font-size: 1.8em /* 18px */; } ul ul { font-size: 1.4em; /* 1.4*18px=25.2px */ }

Slide 28

Slide 28 text

Why not px? Enter: responsive typography

Slide 29

Slide 29 text

Responsive typography Responsive Typography: The Basics

Slide 30

Slide 30 text

Responsive typography Responsive Typography: The Basics

Slide 31

Slide 31 text

html { font-size: 16px; @media (min-width: 800px) {font-size: 18px;} } h1 { font-size: 64px /* 16px*4 */; @media (min-width: 800px) {font-size: 72px;} } h2 { font-size: 48px /* 16px*3 */; @media (min-width: 800px) {font-size: 54px;} } h3 { font-size: 32px /* 16px*2 */; @media (min-width: 800px) {font-size: 36px;} } Responsive typography Modular Scale

Slide 32

Slide 32 text

html { font-size: 1rem; @media (min-width: 800px) {font-size: 1.125rem;} } h1 { font-size: 4rem; @media (min-width: 800px) {font-size: 4rem);} } h2 { font-size: 3rem; @media (min-width: 800px) {font-size: 3rem);} } h3 { font-size: 2rem; @media (min-width: 800px) {font-size: 2rem);} } Responsive typography Modular Scale

Slide 33

Slide 33 text

Modular Scale “A modular scale, like a musical scale, is a prearranged set of harmonious proportions.” More Meaningful Typography

Slide 34

Slide 34 text

Modular Scale

Slide 35

Slide 35 text

Modular Scale More Meaningful Typography 10.000 * 1.618 = 16.180 16.180 * 1.618 = 26.179 26.179 * 1.618 = 42.358 42.358 * etc. 10.000 / 1.618 = 6.180 6.180 / 1.618 = 3.819 3.819 / 1.618 = 2.360 2.360 / etc. 1.618

Slide 36

Slide 36 text

Vertical Rhythm

Slide 37

Slide 37 text

Vertical Rhythm html { line-height: 18px; } html { line-height: 150%; } html { line-height: 1.5rem; } html { line-height: 1.5; } So and so Good Good Great

Slide 38

Slide 38 text

Vertical Rhythm

Slide 39

Slide 39 text

Vertical Rhythm Baseliner Baseliner

Slide 40

Slide 40 text

8-Point Grid - Can we do it? 5+1 examples. 
 Real HTML & CSS code, real web pages. Action!