Founded in 1873, Davidson College is ranked among America’s strongest and most selective liberal arts colleges. I collaborated with a fellow NewCity developer to create a Fractal pattern library that supported a new Drupal site for the college.

Details

  • 2018 - 2019
  • Davidson, NC
  • NewCity
  • Design
  • Development

Visual Design

Collage I created for Davidson College. For a better look, click to open the image in a lightbox and use the zoom tool in the top right. To see without compression, download a full-resolution version.

NewCity wanted to show Davidson two different design directions to choose from: one that played on the college’s history, and one that was more modern. As an occasional designer, I was asked to create a collage to represent the historically inspired direction.

This design was intentionally restrained and monochromatic, with a traditional serif display font. It was a fun challenge for me, a maximalist who loves color, to create something more conservative.

Through the design process, the Davidson team chose the more modern direction instead. The modern design, with many overlap and cutout elements, made for an interesting development challenge as well.

Homepage design that resulted from the direction Davidson chose. Click the thumbnail to view the full page in a lightbox.

Shown for reference design by Rodger Bridges.

Cutouts, Popouts, and Overlaps

Grid-breaking elements make an interesting visual design, but present a particular challenge when it comes to creating a system. How do you write modular code for an element that by design is supposed to break the system?

Find a way to systematize the breaking.

Examples of grid-breaking elements in the Davidson design click images to view in lightbox.

In the Davidson library, offsets are handled independently within the definition of each pattern. This works fine, but it isn’t very systematic. Ideally, this library should have a set of pattern-independent popout options that could be applied to any element, like so:

Control the direction:

.popout––top

.popout––right

.popout––bottom

.popout––left

Control the offset:

.popout––s

.popout––m (default)

.popout––l

.popout––xl

One Pattern, Many Options

The Davidson design had a lot of different treatments for news teasers. The content and purpose of these elements were the same: to tease news or event content. In an attempt to reduce implementation complexity, I built the news teaser pattern to support all of these different visual layout options.

I use this strategy as a foundation when attempting to build large, powerful front end libraries: if the content and purpose are the same, use the same pattern. Visual styles are (usually) irrelevant.

Flexible variants for the teaser pattern click images to view in lightbox.

Collaborating for Drupal

During development I collaborated with NewCity developer John Williams, who built the Drupal backend for the site. John and I worked together to create patterns that integrated well into Drupal. From my perspective, that meant keeping markup simple and streamlining patterns where possible.

Most of my NewCity projects are large front end libraries that are handed off to a third-party integration partner, so I don’t often get the opportunity to collaborate with other developers on my own team. While working with John to create a library that best served the overall system, also I expanded my knowledge of Drupal.

How I'd Improve

Davidson was the first library I built using Fractal. Previously, we’d used Pattern Lab to help generate our pattern libraries (and before that, I made up my own systems). Pattern Lab is a great tool, but Fractal is much more powerful when leveraging context data for patterns. When I started working on the project, I tried to force Fractal to behave like Pattern Lab. A lot of the data-sharing possibilities went unused, which slowed down my development process and made the library less useful as a testing and style guide tool.

With more time, it would have been better to use the pattern context data appropriately. That might have allowed time for a better grid-breaking system!

Deliverables & Technologies

My contributions to the project's deliverables were:

  • An atomic design front end pattern library of website components
  • Static front end templates built from the library’s patterns
  • An element collage describing a possible design direction (not chosen) – download full-resolution.

Technologies used:

The pattern library and static templates were built using Fractal, and:

  • Twig, SCSS, and javascript to build the templates
  • Docker, Gulp, and GitLab to run the project

Element collage was created in Sketch and managed through Abstract.

The final site was integrated in Drupal (not by me)

Credits

NewCity Team

  • UX Architect: Melissa Beaver
  • Art Director: Rodger Bridges
  • Front End Developer: Jenny Slaughter
  • Back End Developer: John Williams
  • Content Strategy: Rachel DeLauder
  • Analytics: Matt Gaskey
  • Project Manager: Erin Simmons
The Davidson College pattern library was built starting from NewCity’s foundational Fractal starter kit, Monolith, which was largely developed by John Williams and Andy Hebrank.

Davidson College Team

  • Mark Johnson, Chief Communications and Marketing Officer
  • Vanessa Breese, Director of Digital Communications
  • Joanne Joy, Director of Digital Communications
  • Angie Rice-Figueroa, Director of Marketing Communications
  • Bruna Siqueira-Davis, Digital Communications Strategist