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.
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 a single 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.
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 were large front end libraries that were handed off to a third-party integration partner, so I didn’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!
