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
Lines
Slide 6
Slide 6 text
Curves
Slide 7
Slide 7 text
Reflection
Slide 8
Slide 8 text
Suspension
Slide 9
Slide 9 text
Entrances
Slide 10
Slide 10 text
Entrances
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
gelled.info
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á
flickr.com/photos/19967853@N00/18391299
Bruno Coutinho
flickr.com/photos/coutinhobr/3979927536
AC Moraes
flickr.com/photos/26022184@N03/2488214984
Palácio do Planalto
info.planalto.gov.br/exec/inf_fotografiagrande.cfm?foto=05042006P00028
Lu Monte
flickr.com/photos/48555438@N00/2683556544
Chris Diewald
flickr.com/photos/chris_diewald/2657599016
flickr.com/photos/chris_diewald/2656782975
flickr.com/photos/chris_diewald/2656781421
Florian Knorn
flickr.com/photos/el_floz/1424610618
Francisco Domingos
fotopedia.com/items/79doga0qi4mic-9MsmKS0UNyI
Slide 42
Slide 42 text
Thank-you.
paulrobertlloyd.com
@paulrobertlloyd
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc