Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
71 lines (35 sloc) 4.16 KB

Design Systems

This work is licensed under a Creative Commons Attribution 4.0 International License.

Challenge introduction

The visual aspect of the work we do is more about creating design systems than it is about creating individual pages that look nice. When we pass a project off to the team that needs to maintain it they will need to grow the project to adapt to new circumstances. A well developed system will make their lives easy. A bunch of pretty templates with no logic will make their lives hell.

Background research

Challenge outline

Pick an existing website and catalogue all the components, modules and content of the existing interface (various button needs, form elements, components that must be locked together to function). The manner in which you catalogue and organize them should reinforce the relationships between them.

Then you will create a new visual design language/style and redesign the components you’ve catalogued to match. We’d recommend you start with a quick style tile exercise and then move into designing the components once you’re reasonably happy with the results. The point of the exercise is to define the system, so it’s ok if the visual language is a bit rough as long as the system holds together well.


  1. An audit of the existing components and modules of the site you chose, catalogued in a manner that shows the relationships these components have.

  2. A style tile exercise to show the beginning of your new design language.

  3. The components redesigned using your new design language, continuing to demonstrate the relationships between them.

  4. A couple of new templates demonstrating that the system works.

  5. A quick presentation of what you learned to teach your fellow apprentices with.


  1. Choose a relatively simple site. More pieces means more work.

  2. Keep the style tile exercise quick and rough. It’s just to get you started with some visual ideas.

  3. Your redesigned components may change the relationships and priority of the original site’s components. This is a natural outcome of reconsidering their purpose.

  4. Don’t just leave the template exercise until the end. Putting your components to use will almost certainly change your expectations of how the system works. This is not a linear process, it’s an iterative one.

  5. Seek feedback, early and often, from a variety of sources.


You’ll have just under two weeks to complete your work. The challenge starts on a Monday and is due for evaluation by Trish Dallmeyer, Hamy Pham or Steve Hickey the following Thursday. We highly recommend checking in several times with members of the front-end team along the way. There will not be any project extensions, you are responsible for delivering on time. Part of delivering on time is making sure you’re on the correct path at several intervals along the way.

Your brief talk will be due for presentation the day after the challenge is due.