Introducing a Design Language at UCL

Introducing a Design Language at UCL Dan Jackson, Senior Web Architect, UCL@beesman#jboye13

“4th best university in the world”*(*probably?)

10 faculties40 departments

110 units820 websites~1m unique

URLs

“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’

http://www.flickr.com/photos/wheelsy1/6034581045/

CORPORATE

LOCAL

INLINE

UCL Pyramid of Bloat ®

http://www.ucl.ac.uk/teaching-learning:

26 x JavaScript40 x CSS2,562

unused CSS selectors112 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 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

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 otherpeople on your team, or a future team, to take action.”

http://www.netmagazine.com/features/create-website-style-guide

?

http://www.flickr.com/photos/106068028@N06/10383859666/

“Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.”Anna Debenham, @anna_debenham

Principles

Foundations

Gridsystem

Navigation

Typography Etc…

Patterns

Interaction Forms Media Etc…

UCL theme 3rd-party themes

ChallengesCreativity vs. controlSupport & developmentAdoption & evolution

ThanksTwitter: @beesmanStyle Guides: storify.com/beesman/style-guides