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.
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.
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.
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:
Control the size of the popout:
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.
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)
The pattern library and static templates were built using Fractal, and:
- 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).
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.