Design-sketch and frontend implementation

- Where does it blow up?

Introduction

1990

Adobe Photoshop 1.0

The first browser

1991

HTML

1992

BBEdit HTML and text editor

Les Horribles Cernettes, one of the first image on the Web

1994

The first web banner

Geocities

1995

The term User Experience

Adobe PageMill 1.0

JavaScript

Frontpage 1.0

1996

CSS 1.0

Macromedia Flash

1997

Web Accessibility Initiative

DHTML

Macromedia Dreamweaver

1998

Macromedia Fireworks

CSS2

Adobe ImageReady 1.0

Google

1999

Web 2.0

WCAG 1.0

Adobe Photoshop 5.5

2000

XHTML 1.0

FWA - Favorite Website Awards

DeviantArt

2001

Media Queries

SVG

Audi.com - First "reponsive" website

2003

CSS Zen Garden

MySpace

2004

CSS Sprites

2006

jQuery

Sass

2007

iPhone

CSS Grid

2008

Chrome

WCAG 2.0

2009

LESS 1.0

CSS Flexbox

Node

2011

Stylus 0.0.1

Twitter Bootstrap

2012

CSS3, Media Queries

2013

React

2014

Material Design

HTML 5

2010

Responsive Web Design

Sketch 1.0

Web 0.5

Web 1.0

Web 1.5

Web 2.5

Web 2

Web 3

Web 3.5

1999

1997

2000

2007

2012

1998

1991

1994

2001

2011

Macromedia Fireworks

CSS2

Adobe ImageReady 1.0

Google

1992

BBEdit HTML and text editor

Les Horribles Cernettes, one of the first image on the Web

The first web banner

Geocities

Web 2.0

WCAG 1.0

Adobe Photoshop 5.5

XHTML 1.0

FWA - Favorite Website Awards

DeviantArt

CSS Zen Garden

MySpace

CSS Sprites

iPhone

CSS Grid

2009

LESS 1.0

CSS Flexbox

Stylus 0.0.1

Twitter Bootstrap

CSS3, Media Queries

Web Accessibility Initiative

DHTML

Macromedia Dreamweaver

1995

The term User Experience

Adobe PageMill 1.0

JavaScript

Frontpage 1.0

Media Queries

SVG

Audi.com - First "reponsive" website

2013

React

2014

Material Design

HTML 5

2010

Responsive Web Design

Sketch 1.0

1996

CSS 1.0

Macromedia Flash

2006

jQuery

Sass

2008

Chrome

WCAG 2.0

1990

Adobe Photoshop 1.0

The first browser

HTML

2004

2003

Node

👋

Background

Disclaimer

Design-sketch and frontend implementation

Part 1: Typography

The first "normal" paragraph should have 23px under the lead paragraph

  1. Font-size 18px
  2. Line-height 28px
  3. Margin-bottom 24px
.lead{
  font-family: "If Sans Bold", Arial, sans-serif;
  font-weight: normal;
  font-variation-settings: 'wght' 126;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: normal;
  margin-bottom: 24px;
}

LGTM!

Or?

~ 20%

Developers and designers often speak different languages

// Two figures with speech bubbles

1: Parlez vouz REM?
2: Que?

CSS gives us the illusion that it understands design

.heading{
  font-size: 18px;
  line-height: 28px;
}

It looks pretty easy?

CSS

Design

To the left, what CSS does. To the right is what the designer is expecting to see. CSS centers the text in the line-height. The designer align it to the baseline, the bottom of the line-height.

Developers are left tweaking the CSS until it looks good

Some versions of typography metrics calculators to find the metric (the dimensions and properties)

From left to right: 1. nothing is done 2. with basekick 3. Normalized, with adjusted line-heights based on baseline grid (4px/8px)

From left to right: 1. nothing is done 2. with basekick 3. Normalized, with adjusted line-heights based on baseline grid (4px/8px)

Font Metrics API

Design-sketch and frontend implementation

Part 2: Colors

Sketch

The colors are not specified

🤔

Manual fetching of colors

#C62334

#F52340

#B82A38

#C82334

Get the point?

Decent communication

Too many colors and too few guidelines

Too few colors and too strict guidelines

Communicated by different nomenclature

Design-sketch and frontend implementation

Part 3: Icons

Viewbox and non-centered icons

pin 3

Stroke and boundaries

pin 3

Using fill AND stroke..

pin 3

*.png

Missing icons in the set

// Puzzle

1: I see that I'm missing some pieces, but the box is empty..

Different icon styles in the set

// Puzzle

Dad: Why do we have piecec from 4 different puzzles in the box?
Child: I think they fit nice together!

Design-sketch and frontend implementation

Design-sketch and frontend implementation

Part 4: Responsive

Static sketch

🤔

Sketches for mobile

😟

The developer is left to "fill in the gaps" in different breakpoints

But what about larger screens?

Design-sketch and frontend implementation

Part 5: Typography, part deux

Variable fonts

Design tools that does not support variable fonts

Lack of guidelines

Design-sketch and frontend implementation

Part 6: Spacing

Design-sketch and frontend implementation

Part 7: Accessibility

Design-sketch and frontend implementation

Part 8: Animations

Awesome!!

Design-sketch and frontend implementation

Part 9: Userfriendly

Lack of UX

Conclusion

Thank you for listening!

Alexander Vassbotn Røyne-Helgesen

Principal Engineer, Knowit Objectnet, Oslo - Norway
alexander.royne-helgesen@knowit.no | @phun_ky | @phun-ky

KDS 2023 @ Copenhagen - Design sketch and front-end implementation, where does it blow up?

By Alexander Vassbotn Røyne-Helgesen

KDS 2023 @ Copenhagen - Design sketch and front-end implementation, where does it blow up?

Denne talken vil vise smertene en utvikler har med designskissene når utvikleren implementerer typografidesign. Har du noen gang lurt på hvorfor avstanden mellom tittelen og teksten sier 30px i skissen, men at det ikke stemmer overens med html og css? Vel, jeg vil få deg til å forstå hvorfor og hvordan du løser dette.

  • 106