New work: Source

A new design for Source, a non-profit that makes journalism code more visible.

In January of 2017, I had the pleasure of working with the OpenNews team on a month-long design sprint. Last week, the result of our work launched: a new responsive redesign of Source.

In their words, Source is a project “designed to amplify the impact of journalism code.” Every day, the Source team strives to make the code behind good journalism more visible, whether that code creates a digital narrative exploring Mars, rescues data from hostile governments, or powers a World Series simulator. Source’s work manifests itself in a number of different ways: by promoting not just the code, but the community behind it; by hosting a list of code-adjacent journalism jobs; and of course, through its extensive catalogue of articles and guides. Given their mission, I couldn’t have been more excited when Source asked me to help them redesign their website. In fact, I was downright honored to lend a hand.

As I mentioned above, Source brought me on for a month-long design sprint. So after a few conversations with Erin Kissane and Ryan Pitts, and after studying Erin’s exquisitely detailed wireframes, I set to work on a few initial page concepts.

A few artboards from the initial comps for Source

For the first round, I focused on the article and code pages. After about a week of work, I brought the initial designs to Source, presenting them with a few comps laid out in Sketch—but as I did so, I kicked off our first design review with a few notes:

Before I dive in, a few quick framing remarks: these mockups are just the first step in the design process. They’re pictures of a website, basically, and will help us agree on the bigger creative goals for the redesign; we’ll use them to nail down typography, a color palette, our big layout priorities, and so on. However! Once we move into the prototyping phase, we’ll still be designing. That is to say, once we get this design into some browsers and into our hands, we might find some smaller things around the edges to tweak.

In other words, we were working to move into prototypes as quickly as possible, and then continue the design process in real, living web pages. This is something I’ve aimed for on every responsive design I’ve participated in, starting with The Boston Globe: to use traditional layout applications like Sketch and Photoshop in concert with web-based prototypes. Getting the design process to a point where it privileges prototypes, not PSDs, lets us get our responsive design into the team’s hands as quickly as possible. And thankfully, the Source team were more than game for it.

(And hey, it also lets us start tinkering with fun interface details.)

A few interface animation details from the Source redesign

Once we’d gotten to a point where we agreed on the big visual details—let’s tighten up the landing page’s grid; not sure about that blue, can we soften it a bit—the shift into prototyping went smoothly. For the pages that didn’t have mockups, I was able to borrow or adapt patterns to finish the page, and finish a suite of responsive prototypes in a couple weeks.

At that point, my work was handed off to Ryan Pitts, who spent the next few weeks integrating my pages into their custom CMS. From there, I shifted into a support role. Because once real content starts flowing into a design, one is invariably presented with a host of opportunities to revisit one’s bad old assumptions: that headline needs to be a little more friendly to wrapping; yep, that byline’ll look better when it’s not bottom-aligned; and so on. In fact, while the finished site strongly resembles the initial comps, the design’s changed considerably since those first sketches. We were moving quickly, and the design had to keep up.

I don’t often do month-long design sprints—but this was one of the most fun, rewarding months I’ve ever had. And that’s due to the OpenNews team, who were (unsurprisingly) fantastic clients. Dan, Erika, and Lindsay provided clear, insightful feedback, and I don’t think I’ve ever seen another human being work as quickly as Ryan did. And of course, a special note of thanks to my friend Erin Kissane, who skillfully and swiftly managed schedules, expectations, and design reviews. If you ever have the chance to work with this team, do.

Screenshots of an article on the new Source website, as shown on three different mobile phones

In the meantime, take a tour through the new Source. Their work is as important as it is timely, enabling the press to tell compelling, critical stories to the broadest possible audience. And right now, with everything happening in the world, I leapt at the chance to help Source do just that.


Reply via email


Print Share Comment Cite Upload Translate
APA
Ethan Marcotte | Sciencx (2024-03-29T10:43:41+00:00) » New work: Source. Retrieved from https://www.scien.cx/2017/02/16/new-work-source/.
MLA
" » New work: Source." Ethan Marcotte | Sciencx - Thursday February 16, 2017, https://www.scien.cx/2017/02/16/new-work-source/
HARVARD
Ethan Marcotte | Sciencx Thursday February 16, 2017 » New work: Source., viewed 2024-03-29T10:43:41+00:00,<https://www.scien.cx/2017/02/16/new-work-source/>
VANCOUVER
Ethan Marcotte | Sciencx - » New work: Source. [Internet]. [Accessed 2024-03-29T10:43:41+00:00]. Available from: https://www.scien.cx/2017/02/16/new-work-source/
CHICAGO
" » New work: Source." Ethan Marcotte | Sciencx - Accessed 2024-03-29T10:43:41+00:00. https://www.scien.cx/2017/02/16/new-work-source/
IEEE
" » New work: Source." Ethan Marcotte | Sciencx [Online]. Available: https://www.scien.cx/2017/02/16/new-work-source/. [Accessed: 2024-03-29T10:43:41+00:00]
rf:citation
» New work: Source | Ethan Marcotte | Sciencx | https://www.scien.cx/2017/02/16/new-work-source/ | 2024-03-29T10:43:41+00:00
https://github.com/addpipe/simple-recorderjs-demo