smashing conf 2017 🇪🇸

🥓 ☀️ ⛵️ 🍷

Brad Frost

Design System

Basically, make a design system and it will promote:

• UI consistency and cohesion
• Faster time to production
• Shared vocabulary
• Easier testing
• Useful referencing
• Future-friendly foundation

Brads top tips

• (Dev) To avoid task ambiguity - make everyone do a codepen in planning.
• (Design) Use Sketch libraries let you share symbols accross documents
• Use design tokens...

Design Token Properties

• Background colours
• Border thinkness
• Font sizes
etc

Design tokens in CSS

// design-tokens.css
:root {
 --primary-heading: 24px;
}

@import "design-tokens.css";
	
h1 { 
 font-size: var(--primary-heading);
}

Design system + Design tokens

Sarah Drasner

Firstly: Why are mirrors in lifts?

1. Claustrophobia
2. Boredom

Why is it important?

Amazon

"For every one second delay, conversions dropped by 7%. If you sell $100k per day, that’s an annual loss of $2.5m."

Wallmart

"Gains 1% revenue increase for every 100ms of improvement. 💵"

Ericsson

Anything loading over 4 seconds: horror.

Why do we animate?

The attention span of a user is only 2 seconds...

Perceived Perf Wins 🚀

Humans over-estimate passive waits by 36%

Novel waiting experiences make people wait longer

Don't use a loading spinner

Use a branded loading animation

Lots of short animations are perceived as long

... but one long animation becomes shorter.

Younger audiences are more demanding

and will not wait as long as

Calm users wait longer

Trust your APIs

Provide optimimistic, instant feeback to the user (where appropriate 👀)

Ideal Interface Response Guide

How can you make something to animate?

1. Get an SVG
2. Has to have a stroke, dash offset, maybe dasharray
3. Animate dash offset with keyframes

					
						

						.path {
							stroke-dasharray: 1000;
							stroke-dashoffset: 1000;
							animation: dash 5s linear forwards;
						}
						
						@keyframes dash {
							to {
								stroke-dashoffset: 0;
							}
						}

					
				

Tyler Sticka

Don't use icon fonts

When they fail they expose
the unicode they were mapped to

Which can fail too

  

(bad for accessibility)

or display something completely unexpected...

⭐️️️️️️️️️⭐️⭐️️️️️️️️️⭐️🐴

Use SVGs

Monica Dinculescu

68% of websites use web fonts

When loading web fonts,
they render block.

Top tips

• 🐞 Don't use / limit web fonts
• 🐝 Use .woff2 font files
• 🐐 Use a font-display strategy
• 🐕 Preload the font
• 🦍 Only use the character range you need
• 🦏 Use font face observer for more control