Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styleguides for the Web (2011)

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.

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

April 13, 2011
Tweet

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

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. Pattern Library Local Navigation Carousel Autosuggest Overlay Panel Tool Tips

    Slideshow
  24. None
  25. None
  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