Introducing a Design Language at UCL

598 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
598
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducing a Design Language at UCL

  1. 1. Introducing a Design Language at UCL Dan Jackson, Senior Web Architect, UCL @beesman #jboye13
  2. 2. “4th best university in the world”* *MASSIVE pinch of salt
  3. 3. 10 faculties 40 departments 110 units 820 websites ~1m unique URLs
  4. 4. “UCL is sprawling and disparate in physical terms and this structure has replicated into your online presence”. ‘Putting digital at the heart of UCL: A business case for change’, Precedent
  5. 5. www.flickr.com/photos/wheelsy1/6034581045/
  6. 6. UCL Pyramid of Bloat ®
  7. 7. http://www.ucl.ac.uk/teaching-learning: 26 x JavaScript 40 x CSS 2,562 unused CSS selectors 112 resources, 1.1MB
  8. 8. http://speedcurve.com/blog/speed-matters-talk-at-auckland-web-dev-nights/
  9. 9. http://www.jordanpoulton.com/wp-content/uploads/2013/03/Technical-Debt.png
  10. 10. “As the users’ experience of the UCL web estate reinforces and shapes their perceptions of UCL as an institution, the total UCL web estate will consistently reflect the excellence and distinctiveness of UCL by being professionally developed and managed.” UCL Web & Mobile Services’ vision statement
  11. 11. http://www.slideshare.net/jarader/designing-for-cohesive-diversity
  12. 12. “A style guide tells the story of a design system, explains the design thinking and enables other people on your team, or a future team, to take action.” http://www.netmagazine.com/features/create-website-style-guide
  13. 13. ?
  14. 14. “Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.” Anna Debenham, @anna_debenham
  15. 15. UCL theme UCL theme 3 rd -party themes 3 rd -party themes Patterns Patterns Interaction Interaction Forms Forms Media Media Etc… Etc… Foundations Foundations Grid Grid system system Navigation Navigation Typograph Typograph y y Etc… Etc…
  16. 16. Challenges Creativity vs. control Support & development Adoption & evolution
  17. 17. Thanks Twitter: @beesman Style Guides: storify.com/beesman/style-guides

×