Design-sketch and frontend implementation

- Where does it blow up?

Introduction

👋

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

https://github.com/michaeltaranto/basekick

https://www.youtube.com/watch?v=TGHbkTGVqoU

https://codepen.io/phun-ky/full/VwwpRYw

https://codepen.io/phun-ky/full/MWWezBb

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)

https://drafts.css-houdini.org/font-metrics-api/

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