February 2016 – April 2016

The XOXO Outpost

<p>I worked alongside Andy McMillan and Andy Baio of <abbr><a href="http://twitter.com/xoxo">XOXO</a></abbr> to help build <a href="http://xoxopdx.com">a teaser</a> for their upcoming workspace in Portland called the Outpost. The website was designed to advertise the space and get people interested in contributing to the community, joining the newsletter, and moving their freelance work into the lovely new space.</p>

In a blog post describing the project in a little more detail the two Andys write:

We hope to bring together some of our favorite people and projects in indie art and tech under one roof, as well as a handful of startups working on tools that help people stay independent. And, of course, we’re ridiculously excited to have our own space to run weird and wonderful events year-round.

Considering this project was a very short, single page advertisement, I thought it was best to immediately jump into Codepen to come up with some ideas for the design. That way everyone could pick at the work from a browser instead of sorting through a constant stream of mockups and navigating around frustrating conversations via email or Basecamp. Relatedly, I think that sometimes showing a client a rough sketch of a design and letting them freely say “that’s not right because X, Y, Z” is the preferred path over grinding them with questions and expecting coherent, timely answers from pixel-perfect mockups.

I initially experimented with a darker color palette and overall design language for the site, with lots of animations and twisting, turning canvas elements. However, it was pretty obvious that this wasn’t the right decision but since we were designing everything in the browser it was easy to reverse early decisions and play with the code to move the project forward. Looking back on this process now I realize that it was this project that led to my interest in building tiny prototypes of everything that I do.

Here’s a video of the final website that was built after the teaser and it shows a number of the neatest front-end tricks that I had begun experimenting with in those early prototypes, including blend-modes and using the new object-fit CSS property: