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”**MASSIVE pinch of salt

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’, Precedent

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

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

Foundations

Gridsystem Navigation Typograph

y Etc…

Patterns

Interaction Forms Media Etc…

UCL theme 3rd-party themes

ChallengesCreativity vs. controlSupport & developmentAdoption & evolution

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