Styleguides for the Web (2011)

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