Styleguides for the Web (2011)

By looking at common design patterns present in Brasilia's architecture, I show how similar thinking can be used on the Web.

Transcript

1. Styleguides for the Web Paul Robert Lloyd Oxford Geek Night 21 13 April 2011
2. Big Clients
3. Brasília Design on a grand scale
4. ‘Fifty years progress in five’ Juscelino Kubitschek President Lúcio Costa City Planner Oscar Niemeyer Architect
5. Lines
6. Curves
7. Reflection
8. Suspension
9. Entrances
10. Entrances
11. Common identity
12. BBC Global Visual Language
13. BBC Global Experience Language
23. Pattern Library Local Navigation Carousel Autosuggest Overlay Panel Tool Tips Slideshow
26. 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
27. Common foundation
28. gelled.info It’s like trainspotting for BBC websites!
29. Clearleft Thinking in patterns
30. Pattern Portfolio
31. Pattern Portfolio
32. Pattern Primer
33. Pattern Primer
34. An extensible system
35. Final Thoughts Taking this further
36. Visual Styleguide PNG HTML
37. Developer Friendly
38. 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’
39. Consistent experiences
40. Just the beginning…
41. 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
42. Thank-you. paulrobertlloyd.com @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc