Slide 1

Slide 1 text

Styleguides for the Web Paul Robert Lloyd Oxford Geek Night 21 13 April 2011

Slide 2

Slide 2 text

Big Clients

Slide 3

Slide 3 text

Brasília Design on a grand scale

Slide 4

Slide 4 text

‘Fifty years progress in five’ Juscelino Kubitschek President Lúcio Costa City Planner Oscar Niemeyer Architect

Slide 5

Slide 5 text


Slide 6

Slide 6 text


Slide 7

Slide 7 text


Slide 8

Slide 8 text


Slide 9

Slide 9 text


Slide 10

Slide 10 text


Slide 11

Slide 11 text

Common identity

Slide 12

Slide 12 text

BBC Global Visual Language

Slide 13

Slide 13 text

BBC Global Experience Language

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Pattern Library Local Navigation Carousel Autosuggest Overlay Panel Tool Tips Slideshow

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Built-in flexibility We wanted to create something that is flexible enough to allow our brands their full expression whilst uniting them into a coherent user experience. Bronwyn van der Merwe Head of Design and User Experience, Central Team, FM&T

Slide 27

Slide 27 text

Common foundation

Slide 28

Slide 28 text It’s like trainspotting for BBC websites!

Slide 29

Slide 29 text

Clearleft Thinking in patterns

Slide 30

Slide 30 text

Pattern Portfolio

Slide 31

Slide 31 text

Pattern Portfolio

Slide 32

Slide 32 text

Pattern Primer

Slide 33

Slide 33 text

Pattern Primer

Slide 34

Slide 34 text

An extensible system

Slide 35

Slide 35 text

Final Thoughts Taking this further

Slide 36

Slide 36 text

Visual Styleguide PNG HTML

Slide 37

Slide 37 text

Developer Friendly

Slide 38

Slide 38 text

In order to embrace designing native layouts for the web we need to shed the notion that we create layouts from a canvas in. We need to create layouts from the content out. Responsive Design Mark Boulton ‘A Richer Canvas’

Slide 39

Slide 39 text

Consistent experiences

Slide 40

Slide 40 text

Just the beginning…

Slide 41

Slide 41 text

Credits Vitor Sá Bruno Coutinho AC Moraes Palácio do Planalto Lu Monte Chris Diewald Florian Knorn Francisco Domingos

Slide 42

Slide 42 text

Thank-you. @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc