Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing a
Design Language
at UCL
Dan Jackson, Senior Web Architect, UCL
@beesman
#jboye13
“4th best university in the world”*
(*probably?)
10 faculties

40 departments

110 units

820 websites
~1m unique URLs
“UCL is sprawling and disparate
in physical terms and this
structure has replicated into
your online presence”.
„Putting d...
ww.flickr.com/photos/wheelsy1/6034581045/
UCL Pyramid of Bloat ®

CORPORATE

LOCAL

INLINE
http://www.ucl.ac.uk/teaching-learning:
26 x JavaScript

40 x CSS

2,562
unused CSS selectors

112 resources, 1.1MB
http://speedcurve.com/blog/speed-matters-talk-at-auckland-web-dev-nights/
http://www.jordanpoulton.com/wp-content/uploads/2013/03/Technical-Debt.png
“As the users’ experience of the UCL web estate
reinforces and shapes their perceptions of UCL
as an institution, the tota...
http://www.slideshare.net/jarader/designing-for-cohesive-diversity
“A style guide tells the story of a design system,
explains the design thinking and enables other
people on your team, or ...
?
“Websites are systems rather than pages and
as soon as we stop perceiving them as that,
the better.”
Anna Debenham, @anna_...
3rd-party themes

UCL theme

Patterns

Interaction

Forms

Media

Etc…

Foundations
Grid
system

Navigation

Typograph
y

...
Challenges
Creativity vs. control
Support & development
Adoption & evolution
Thanks
Twitter: @beesman
Style Guides: storify.com/beesman/style-guides
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Introducing a Design Language at UCL
Upcoming SlideShare
Loading in …5
×

Introducing a Design Language at UCL

760 views

Published on

Published in: Technology, Business
  • Be the first to comment

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”* (*probably?)
  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‟
  5. 5. ww.flickr.com/photos/wheelsy1/6034581045/
  6. 6. UCL Pyramid of Bloat ® CORPORATE LOCAL INLINE
  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. 3rd-party themes UCL theme Patterns Interaction Forms Media Etc… Foundations Grid system Navigation Typograph y Etc…
  16. 16. Challenges Creativity vs. control Support & development Adoption & evolution
  17. 17. Thanks Twitter: @beesman Style Guides: storify.com/beesman/style-guides

×