We wanted New Adventures to return with a distinct, modern identity, and see how much we could achieve with as little as possible. It’s intentionally simple because the future is uncertain; of course, the initial focus has been our January event, but we hope to expand New Adventures beyond the conference over the next year.

The beginnings of a system

Our fledgeling design system consists of a grid, two typefaces (Aperçu Medium for display, Source Sans for body), two colours (blue, and pink), one grey, almost-black, and white. With that kit, we made everything we needed, including graphic elements such as multi-line patterns and solid blocks, and playful tints for unifying images.

Around 10% of the design was done with pencil and paper, another 40% with Sketch, and the remaining 50% was found in the browser. I think CSS is one of the very best design exploration tools, and I’ve always enjoyed taking a rough idea into the browser and then spending however long it takes to explore and refine all possibilities in code, especially now I can mirror my work to Mamp on other devices.

We had a lot of fun expanding our design system components in code, throwing them around, squinting at the screen a lot, and trying to find balance and harmony across the experience as we went along. There are still kinks to iron out and stuff that bugs me, but at least we have a foundation we enjoy.

The system will never be finished; it will veer, evolve, sometimes frustrate, and be open to constant questioning. The system is a form of guidance that will underpin each New Adventures project; a malleable master — largely holistic, not just a code repo — that we'll kind of branch off for each initiative, merging the best bits back in as we make more sense of what lies ahead.

Back to basics

The 2019 subfolder is a straightforward build; just HTML and pre-processed CSS. Much of the graphic decoration is SVG, but there’s not much more to report. The root pages (including this blog) we only plumbed in this week; a fast Statamic rollout. We version control with Abstract and Git and push to the intertubes with DeployHQ. That's about it.

Earlier this year, I resigned from my job at a growing product studio. I'd spent some of those seven years working on incredibly complex work for companies like Samsung. The ops were often dark, the environments sometimes bewildering, and the stacks extremely, well, stacked. In many cases, this was entirely necessary, but for smaller builds, I felt it a complete distraction and often a hindrance to intuitive, organic design. It’s so refreshing to rediscover a sense of tinkering, of using just what I need and keeping the workflow really simple.

A few notes about CSS Grid

After nailing the basic visual approach in Sketch, I began building a prototype using CSS Grid. It was my first attempt with Grid, and I found it to be incredibly intuitive, flexible, and lots of fun. I like how you can pick an appropriate way of implementing Grid suitable for a particular design or system.

The prototype evolved into our primary build, and it was only a few days before launch that device testing revealed just how poorly it would perform in IE11 and some older mobile OS. I’d intended to use fallbacks and reflow it for those platforms, but I grew increasingly worried after attending a few local meet-ups. I realised how many of our design-friendly potential attendees were still using PCs at work and sort of panicked. I felt our return had to have the impact we intended, and not be a diluted visual experience, so we spent two days rebuilding every bit of layout just before launch.

A few precise alignments and pleasing bits of responsive, fluid magic were lost with old-timey floats, but at least we were able to deliver a mostly consistent design across all browsers and devices. I firmly believe in a progressive approach, but we needed this site to impress across the board, and I think some of our Grid plan on the first attempt was a bit naive. Still, what a phenomenal way to build; Grid really lends itself to prototyping in the browser, as I like to.

I know our decision to abort Grid will irk some. It irks me, but really when so much is invested and time so squeezed, I’ll always go with my instinct. I’ll keep playing with Grid privately, and get more familiar with it. It’s too much fun not to.