A Custom, Flexible Design System

We described the idea of a design system in the introduction to our approach. The concept has been around for a while, but the tools for creating and maintaining design systems have matured significantly in recent years. NewCity has a particular take on creating a distinctive design system for your brand.

Exploring Design with Element Collages

During Discovery we’ll lead you through visual feel and messaging workshops to help us convey your brand in digital. Then in the Foundation phase we explore possible design directions with element collages.

To develop an element collage, our designers create styles for common layout elements and explore ideas for various web interactions. The collage is not meant to be a web page layout at all — it shows how certain themes and treatments would apply across your website’s whole design system. Our designers create these collages in consultation with our in-house developers, so we know we can actually implement the beautiful visuals you see.

The collage allows you to focus on how your brand will be brought to life in digital, rather than getting hung up on the specifics of a home page mockup.

Here’s an example of element collages that we developed for the Cleveland Institute of Music:


After a series of discussions and revisions, we arrive at a collage that establishes the overall visual direction. This becomes our source of truth for maintaining a consistent look and feel as we design the content and interactions that make up your website.

Building the Design System

As the design patterns are approved we develop the responsive, accessible front-end code and incorporate them into the pattern library. We then integrate them in the CMS.

The pattern library is independent of the CMS — we connect the two, but you can use the pattern library to provide the look and feel for other systems too, so you’re not tied to using the patterns in a single CMS.

We’ll start out with basic information design patterns and keep adding to the library until we’ve got a complete set for conveying all the different types of content on your site.

Here are some examples of layout elements from the design system we created for the University of Kentucky:


How many templates are in a design system?

With a well-crafted design system you can build as many templates as you want simply by combining and reordering your patterns. While it’s important to create templates for structured, repeatable content types — like news articles, degree pages, or bios — the beauty of a design system is that you don’t have to use predefined templates for other, more unique pages. Working from a single page-builder-style flexible template in the CMS, you can use exactly the patterns you need in exactly the order you want based on the specific content and goals of the page.

Once we’ve established the Foundation, we’re ready to move on to Architecture and Buildout.