Alexander Vassbotn Røyne-Helgesen PRO
Lover of life, technologist at heart
Makers of a sustainable future
Makers of a sustainable future
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
- Font-size 18px
- Line-height 28px
- 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;
}
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
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
Part 3: Icons
Viewbox and non-centered icons
Stroke and boundaries
Using fill AND stroke..
*.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!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?
Part 5: Typography, part deux
Variable fonts
Lack of guidelines
Part 6: Spacing
Part 7: Accessibility
Part 8: Animations
Awesome!!
Part 9: Userfriendly
Lack of UX
Conclusion
Alexander
Vassbotn
Røyne-Helgesen
Design sketch and front-end implementation, where does it blow up?
By Alexander Vassbotn Røyne-Helgesen
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.
