ProPublica
A robust article layout framework for a nonprofit newsroom
Graphic design, UI/UX design, code
ProPublica is a nonprofit newsroom that investigates abuses of power. Several years into my tenure there, we decided to level up our article design capabilities with a new design system, which would narrow the gap between our custom-designed feature stories and our more rigidly templated day-to-day stories. Along with design director David Sleight and fellow designer Allen Tan, I was involved to varying degrees with most aspects of the system, but my most significant contribution was a framework for composing editorial layouts.
The framework is anchored by a centered text block, and the goal was to allow granular layout control of supporting article elements (images, charts, videos, etc.). It would be incorporated into our CMS and needed to be simple, responsive, and comprehensible to users without a design degree or coding skills. As I developed the concept, I found that a manageable handful of spatial parameters for article elements, used in conjunction with a simple responsive grid (from four to 14 columns wide, depending on the viewport size), could yield a vast array of layout possibilities.
I’ve since revised the framework a bit and incorporated it into my own site, where it’s in use (albeit modestly) on this very page!