Style Guides: Where designers and engineers meet (shorter version)

Slide 1

Slide 1 text

STYLE GUIDES Where designers and engineers meet Brent Miller, @foliosus  Lead engineer at New Relic

Slide 2

Slide 2 text

@foliosus http://bit.ly/living-style-guides-short ENGINEER http://flic.kr/p/8kQoCU

Slide 3

Slide 3 text

@foliosus http://bit.ly/living-style-guides-short DESIGNER http://flic.kr/p/86pfMN

Slide 4

Slide 4 text

ENGINEER https://flic.kr/p/bRHngB

Slide 5

Slide 5 text

DESIGNER https://flic.kr/p/7Ac6Y9

Slide 6

Slide 6 text

@foliosus http://bit.ly/living-style-guides-short WRONG

Slide 7

Slide 7 text

BOTH https://flic.kr/p/5mBkp6

Slide 8

Slide 8 text

@foliosus http://bit.ly/living-style-guides-short WHERE ARE YOU? Designer Engineer me, now me, 2 years ago

Slide 9

Slide 9 text

@foliosus http://bit.ly/living-style-guides-short ROAD MAP It’s all about rules Typography Living style guides The inevitable redesign

Slide 10

Slide 10 text

@foliosus http://bit.ly/living-style-guides-short ROAD MAP It’s all about rules Typography Living style guides The inevitable redesign

Slide 11

Slide 11 text

It’s all about the rules

Slide 12

Slide 12 text

@foliosus http://bit.ly/living-style-guides-short EVERYBODY LIKES RULES

Slide 13

Slide 13 text

@foliosus http://bit.ly/living-style-guides-short http://shahirzag.com Bad leading Terrible  kerning Spacing  issues

Slide 14

Slide 14 text

@foliosus http://bit.ly/living-style-guides-short How to  piss off  your  designer  friends  and give  them a  migraine.

Slide 15

Slide 15 text

www.arngren.net

Slide 16

Slide 16 text

@foliosus http://bit.ly/living-style-guides-short DESIGNERS CREATE SYSTEMS THAT GOVERN EXPERIENCE proposition

Slide 17

Slide 17 text

@foliosus http://bit.ly/living-style-guides-short ENGINEERS CREATE SYSTEMS THAT GOVERN FUNCTION proposition

Slide 18

Slide 18 text

@foliosus http://bit.ly/living-style-guides-short

Slide 19

Slide 19 text

@foliosus http://bit.ly/living-style-guides-short ROAD MAP It’s all about rules Typography Living style guides The inevitable redesign

Slide 20

Slide 20 text

Typography

Slide 21

Slide 21 text

@foliosus http://bit.ly/living-style-guides-short IT’S ALL ABOUT THE RULES

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

@foliosus http://bit.ly/living-style-guides-short @include establish-baseline;! ! body {! color: $body_text_color;! @include default_font_family;! }! ! p, ul, ol, blockquote, pre, td, th, label, dt, dd {! @include set-font-size(0);! @include margin-trailer(1);! }!

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

@foliosus http://bit.ly/living-style-guides-short // Use the modular scale to get bigger/smaller fonts than  // the default. The $adjustment parameter is 0 for the  // default font size, or between -2 and +4 for 2 sizes  // smaller to 4 sizes bigger than the default." @mixin set_font_size($adjustment: 0) {! $new_size: modular_scale_size($adjustment);! $new_line_count: modular_scale_lines($adjustment);! @include adjust-font-size-to($new_size, $new_line_count);! }!

Slide 31

Slide 31 text

@foliosus http://bit.ly/living-style-guides-short // Get the font-size for the number of steps  // above/below body text. Our modular scale" // uses a ratio of 1.3 between levels" @function modular_scale_size($adjustment: 0) {! @if $adjustment == -2 {! @return 11px;! } @else if $adjustment == -1 {! @return 12px;! } @else if $adjustment == 0 {! @return $base-font-size;! } @else if $adjustment == 1 {! @return 18px;! …! } @else if $adjustment == 5 {! @return 43px;! }! }!

Slide 32

Slide 32 text

Slide 33

Slide 33 text

@foliosus http://bit.ly/living-style-guides-short YOU HAVE NO CHOICES!    YOU ALWAYS GET IT RIGHT.

Slide 34

Slide 34 text

@foliosus http://bit.ly/living-style-guides-short WINNING!

Slide 35

Slide 35 text

@foliosus http://bit.ly/living-style-guides-short class CssModularScaleTest < ActiveSupport::TestCase! files = […] // Load the files you care about, rejecting directories! ! # All font-size declarations in our CSS must use the modular scale,  # defined at the top of _typography.scss. This test asserts that all! # of our CSS uses the modular scale.! files.each do |filename|! context "#{filename}" do! should 'only use the modular scale for declaring font sizes' do! regexp = /.*?font-size:\s*(.*?);/i! open(filename) do |f|! # Look for statements like these:! # font-size: 12px! # font-size: 3%! matches = f.grep(regexp)! passing = true! matches.each do |match|! next unless passing! match =~ regexp # Get the capture parameter, $1! passing = false unless $1.in?(['100%', 'inherit'])! end! unless passing! flunk "Must use set-font-size(x) instead of font-size: x.” +! ! ! ! ! “font-size: 100% and font-size: inherited are allowed.”! end! end! end! end!

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

@foliosus http://bit.ly/living-style-guides-short /.*?font-size:\s*(.*?);/i capture the value  of the font-size

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

@foliosus http://bit.ly/living-style-guides-short #WINNING

Slide 46

Slide 46 text

@foliosus http://bit.ly/living-style-guides-short YOU HAVE NO CHOICES!    YOU ALWAYS GET IT RIGHT.

Slide 47

Slide 47 text

@foliosus http://bit.ly/living-style-guides-short ROAD MAP It’s all about rules Typography Living style guides The inevitable redesign

Slide 48

Slide 48 text

https://flic.kr/p/aRefmB Living Style  Guides ݪ॓

Slide 49

Slide 49 text

@foliosus http://bit.ly/living-style-guides-short WHAT IS A  LIVING  STYLE  GUIDE?

Slide 50

Slide 50 text

https://flic.kr/p/bR2ZmM #fail

Slide 51

Slide 51 text

@foliosus http://bit.ly/living-style-guides-short ON THE INTARWEBZ, WE MOVE TOO FAST FOR BOOKS  WE NEED CODE

Slide 52

Slide 52 text

@foliosus http://bit.ly/living-style-guides-short WE NEED CODE TO SHOW US THE CODE AND THE INTERFACE

Slide 53

Slide 53 text

Navigation Example Name Code Example  code

Slide 54

Slide 54 text

It’s alive!!! https://flic.kr/p/mukwAt

Slide 55

Slide 55 text

@foliosus http://bit.ly/living-style-guides-short WHY?

Slide 56

Slide 56 text

@foliosus http://bit.ly/living-style-guides-short IT’S IN THE CODE!

Slide 57

Slide 57 text

@foliosus http://bit.ly/living-style-guides-short A living style guide is a part of your UI, and uses the code that generates the UI YO DAWG!

Slide 58

Slide 58 text

@foliosus http://bit.ly/living-style-guides-short %h3 Success/info flash message! .description A positive, or equivocal  message for the user. Can be given a! hide button! %code! :plain! = ui_flash_message 'Message contents’,! ! ! ! ! ! type: :success, ! actions: link_to('Hide', '#')! .example! = ui_flash_message ‘Message contents’,! ! ! ! ! type: :success,! actions: link_to('Hide', '#')!

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

@foliosus http://bit.ly/living-style-guides-short THE WIDGET ‣ Code abstraction ‣ Semantic naming ‣ Generates (complex) HTML markup ‣ Appears in multiple places ‣ Coupled to CSS for presentation and JS for behavior

Slide 65

Slide 65 text

@foliosus http://bit.ly/living-style-guides-short LIVING STYLE GUIDE MVP 1.Name 2.Description 3.Example 4.Code

Slide 66

Slide 66 text

SEMANTICS MATTER

Slide 67

Slide 67 text

#fail

Slide 68

Slide 68 text

@foliosus http://bit.ly/living-style-guides-short SEMANTICS ARE A CONTRACT

Slide 69

Slide 69 text

@foliosus http://bit.ly/living-style-guides-short AS THE SITE GETS WORKED ON, PRESENTATION AND BEHAVIOR CHANGE ! SEMANTICS DON’T

Slide 70

Slide 70 text

@foliosus http://bit.ly/living-style-guides-short Semantics are a contract between all consumers of the site

Slide 71

Slide 71 text

@foliosus http://bit.ly/living-style-guides-short ‣ Engineers ‣ Designers ‣ QA ‣ Support ‣ Customers

Slide 72

Slide 72 text

@foliosus http://bit.ly/living-style-guides-short YOU TAKE CARE OF MY CONTENT, AND I’LL TAKE CARE OF YOURS The Contract

Slide 73

Slide 73 text

@foliosus http://bit.ly/living-style-guides-short WHAT IS A  LIVING  STYLE  GUIDE? take 2!

Slide 74

Slide 74 text

@foliosus http://bit.ly/living-style-guides-short ‣ A design inventory ‣ A visual pattern library (can coach users!) ‣ Code to simplify UI generation ‣ A shortcut to faster development ‣ Iterative design improvements ‣ Contract for shared maintenance

Slide 75

Slide 75 text

bit.ly/devsignercon_semantics_1 category  drilldown  list

Slide 76

Slide 76 text

bit.ly/devsignercon_semantics_2 search  result

Slide 77

Slide 77 text

Slide 78

Slide 78 text

@foliosus http://bit.ly/living-style-guides-short ROAD MAP It’s all about rules Typography Living style guides The inevitable redesign

Slide 79

Slide 79 text

THE REDESIGN  IS INEVITABLE https://flic.kr/p/dY8PZF

Slide 80

Slide 80 text

@foliosus http://bit.ly/living-style-guides-short NOBODY WANTS PLANNED OBSOLESCENCE

Slide 81

Slide 81 text

@foliosus http://bit.ly/living-style-guides-short OUR RECORD:  1 PERSON, 10 DAYS* *your mileage may vary

Slide 82

Slide 82 text

THANK YOU! @foliosus https://flic.kr/p/bhyT8B bit.ly/devsignercon-style-guides