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

Visual Design

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.

Element collage for Davidson College
Collage I created for Davidson College. Hover to zoom or click to open the image in a new window.

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 to view in 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 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 of the popout:

.popout-top

.popout-right

.popout-bottom

.popout-left

Control the size of the popout:

.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 frontend 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 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 frontend 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. Working with John to create a library that best served the overall system was a pleasant and positive experience.

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 development 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 deliverables on the project were:

  • An Atomic Design pattern library of website components
  • Static frontend templates built from the library's patterns
  • An element collage describing a possible design direction (not chosen)

Technologies used:

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

  • Twig, SCSS, 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

Frontend Developer: Jenny Slaughter

Backend Developer: John Williams

Content Strategy: Rachel DeLauder

Analytics: Matt Gaskey

Project Manager: Erin Simmons

The Davidson pattern library was built starting from NewCity's foundational Fractal starter kit, Monolith, which was largely developed by John Williams and Andy Hebrank.