Impact through substance, utility, and beauty

A look back at our 15-year journey to impact people’s lives positively through design and engineering.

2018 marks our 15 year anniversary, and we’re enjoying our reflection on the incredible journey it’s been thus far. Early on, we embarked on a mission to plan, create, and grow digital products with utility and substance, designed to improve life. We didn’t want to be just another digital agency; we had to do it with soul. We must be an agent for change—applying design and engineering to a productive end—to make the Internet an extension of our lives, our work, and our ambitions, not a distraction from it.

Engineered design, an agency profile

Originally published in Web Designer Magazine (January 2018, issue 269).
View full article

Design is woven into the DNA of AREA 17. From its inception, the ambition to transform communication using diverse channels and approaches has shaped this studio. Today, few can match the breadth of understanding AREA 17 bring to the digital channels and beyond.

Mike’s Historical Half Truths: Easter

Introducing “Mike’s Historical Half Truths” to Optical Cortex.

Part of what makes AREA 17 brilliant is our international mix of nationalities and office locations. I love the differences of cultures and ideas and what that brings to creative discussions. Something that always interested me is that different countries have different public holidays. Sometimes they have the same days but for different reasons. And so, I began researching some of these public holidays and I decided to share what I’d learned in a series of emails to all-staff.

Remembering Arnaud Mercier

Arnaud Mercier and Audrey Templier at the Slash Magazine launch party (June 2011)

Six years ago, we lost our dear friend and partner Arnaud Mercier. Widely considered to be among the most important and prolific digital designers, his memory lives on through the work and hearts of the innumerable designers he inspired.

A year after his death, we created a tribute to Arnaud and his work – a permanent online collection bringing together over 2000 images. His influential body of work from 1999-2011 is an incredible time capsule of pioneering digital design and continues to be salient today.

arnaud.area17.com

Archiving every pixel from 2003-2017

Since our early days, we’ve kept a public archive of most projects we’ve designed, a collection of used, unused, and refused work. It contains nearly every pixel we’ve pushed since 2003 and is not curated. Today we’ve updated it with works from 2015-2017.

Behind our redesign for the Barnes Foundation

When we were approached by the Barnes to redesign their website we couldn’t have been more excited to work with them. Not only were we huge fans of the museum, but the more we engaged with Thom Collins (Executive Director and President) and Shelley Bernstein (Deputy Director of Digital Initiatives and Chief Experience Officer), the more we were inspired by their vision to reinvigorate the experience of the Barnes—and their recognition of the role design and technology can play. If you’ve been following along, you’ll have read about the Barnes’ forthcoming wearable and how they are rethinking museum collections online. It wasn’t just these refreshing initiatives that impressed us, but the user-centered, data-driven approach that supported them. Our ethos was aligned and we just had to work with them.

Unsupported browsers – introducting HTML4CSS and legacypicturefill.js

As a web developer, over the years I’ve asked the producers/project managers I’ve worked with “and what browsers are we supporting?” more than once, for every project I have worked on as though its fine to think there are some browsers we just don’t support. We understood that the internet is accessed by a wide range of browsers, it should be accessible and inclusive and project’s content should be viewable for as many people as possible. But, we have a limited about of time and resources and there was only so much graceful degradation and progressive enhancement we could do.

Mobile site vs. native app visibility from the OS perspective.

When AREA 17 first designed Quartz in 2012, our client at The Atlantic was forward thinking in their brief: ignore desktop. A simple, yet revolutionary statement.

By ignoring the desktop context, we had the freedom to serve the mobile context. We killed the homepage, dropped the right column, inserted premium native ads and reduced the navigation and branding. Context is a primary consideration when designing a user interface. This is understood by most UI designers and as mobile asserts its dominance, many of us adhere to a mobile-first approach.

The Pixel School is a design methodology created by Arnaud Mercier (May 10, 1972 – September 26, 2011) and formalized by AREA 17. It is a defined way of working that has great impact on the final product. It consists of a set of design principles and the techniques to achieve them.

Disenchanted with the quality of design on the web, Arnaud created the Pixel School in 1999. It became a cornerstone of his design process and the predominant characteristic of his influential body of work. In 2005, Arnaud established the Pixel School as AREA 17’s design methodology. Later, it was formalized in collaboration with Kemp Attwood, David Lamothe and Martin Rettenbacher.

The Pixel School is a living document, updated as we refine our design approach and process. It is part of a series of guides that define how we do things as an agency. While all other guides are private, we have made the Pixel School available to the public.

guides.area17.com

A family reunion of used, unused and downright refused logos

We like logos – making them, looking at them and taking them on long walks on sunny afternoons in the park. Please don’t laugh, it’s unkind.

The process of exploring a symbol for someone or something presents so much potential. The road is clear, the sky is blue and the options are many. Creativity abounds, imagination runs wild and our electrons and neurons bounce around in an ever changing free-for-all that would make quantum theorists proud.

And then, the dreaded day comes, the selection process. One by one, the mark flecked, the seal splotched, the stamp smeared, the emblem blotched. One by one specked, stained and smudged until the one—that one—stands out.

Previewing my favorite apps with the long press

If you haven’t played around with Wildcard yet, you should definitely check it out. The news and entertainment app for iOS and Android provides additional context to curated top stories by collecting articles from multiple sources and splicing them with summaries of key milestones as the story develops. Beautifully designed and high-performing, one of the most pleasing aspects of the app are its subtle use of tactility and animation. The other day the app prompted me to press and hold a card for additional options — sure enough, that gesture introduces a modal view where users can quickly share and save the article for later without the investment of loading the card itself.

Choosing a 3rd party service without losing your shirt

Segment enables you to collect customer data with one API and send it to hundreds of tools for analytics, marketing, and data warehousing.

As digital product engineers, there are a few over-riding principles that govern our work. As an agency, one of the most critical of these is “build once, use many times.” Using existing building blocks for standard features allows us to develop rapidly while leaving budget for the innovative features that will actually differentiate our clients’ product.

In many cases, these building blocks are part of our own arsenal of code, standardized for reuse. In other cases, we evaluate 3rd party services that allow us to introduce production-ready features without the expense of developing and maintaining them.

Ad-blocking: Web apocalypse or stairway to heaven?

If you’ve ever worked in publishing you know designers loathe ads because they tend to force web sites into banal, homogenous layouts based on a few arbitrary but standardized ad sizes. Much worse, however, ads tend to be distractingly ugly and, in a digital world, they literally get in the way of the content. We’re forced to overlook this offense to aesthetic purity and a zen reading experience, of course, because advertising is generally what pays our salaries.

Peter-Paul Koch and the browser dilemma

In July of this year, mobile platform strategist, consultant, and trainer, Peter-Paul Koch (PPK), published an article on his blog, Quirksmode, called “Stop pushing the web forward.” When PPK publishes, people tend to listen and at AREA 17, we’re no different.

PPK always sparks debate

The Wall Street Journal is one of many recently redesigned publications

Redesigns of large scale editorial platforms and publisher websites have been popping up like wild flowers lately. ESPN (led by AREA 17), Bloomberg, The Guardian, The Wall Street Journal, The Atlantic, CNN, and The National Review have all launched new sites in the past several months. Considering our (AREA 17) long-standing interest and deep experience in the editorial world it seems worthwhile to note the interesting aspects of some of the new wave of designs.

Markdown blockquote attribution with Redcarpet

For a recent Facebook Stories post, we were asked to allow quotes to be attributed to a person. The Stories site uses Markdown for text formatting which does not have a method for blockquote attribution within its syntax. To add support I mixed some regex and Ruby on Rails together.

Improving user experience without design

“[Web] Performance is a lot like plumbing. It’s hard to get people to pay attention to it until something is wrong.” — Tim Kadlec

Performance is an often invisible part of our online experience. As Tim Kadlec notes, most people don’t notice it until something’s wrong. Performance is, in fact, the cornerstone of any successful user experience.

Cover, Pegasus no. 20, 1981, ‘Creativity’.

We’ve written before about our soft spot for print, and in particular, brands that succeed at creating original content. There’s a fantastic article on this topic in Eye no. 88 that looks behind the scenes at the designers, content creators and making of Pegasus, a premium magazine that was funded by Mobil from 1970 to 1985.

“I don’t think any company was producing anything like this,” says [editor Gregory] Vitiello, “so tangential to the business and intended to be so thought-provoking.”

Read Powered Flight.

A17 Timezones

AREA 17 operates primarily out of studios in New York and Paris. But we also have satellite offices in several other parts of the world. At times there can be a nine hour time differential between staff members. Thankfully email, Hipchat, Google Hangouts, Skype, and a few years of practice means this isn’t much of a problem for us. However, I sometimes still have problems with doing the mental arithmetic necessary to calculate what time it is for everyone everywhere else—especially when organising meetings. To try and alleviate this, I built a web app over the holidays that displays all of the primary timezones in which AREA 17 operates so with quick glance you can see what time it is in those places.

A17 Timezones

2014 was a big year at AREA 17. We had the opportunity to work with some amazing new clients, develop deeper partnerships with existing ones, have our voices heard from coast to coast (and country to country), soak up some California sun, and come back home again to expanding studios in Paris and New York. We wished a few old friends the best in new adventures and welcomed a cadre of talented new colleagues hailing from as far away as Dubai and Detroit and as close as Long Island and Brooklyn Heights.

Auto populating code/pre tags with HTML content using JavaScript

On a recent static style guide build I got tired of manually inserting sample code content into <code> tags; especially as I hadn’t fully made up my mind on exactly what the markup should be. Each change meant I was copy and pasting the new markup into a new window in my text editor and search and replacing the < and > so that it would render as expected in the browser. I see most problems as a Front End problem so I wrote a quick function to do this for me. I’m writing this down and sharing because a quick Google search didn’t reveal any similar functions.

I recently came across an interesting article by Simon Owens on the Nieman Lab’s site called “It’s small touches that can make a difference in New York’s layouts.” The piece starts with a simple observation:

Alternatives to Compass in a Rails project

For years we were using Compass with Sass with our product, Krrb, to make our lives (mine at least) a bit easier:

no browser prefixes to take care off
cool shortcuts
easy image sprites generation

However, there were still performance issues.

Compass is huge and take lots of time to compile—from five to eight seconds for each deploy. So I decided to get rid of it completely.

“Who invests in you matters more than how much they invest in you. As Paul Rand often said, the quality of the client will determine the quality of the design. If you get money from the wrong people you will be negatively constrained, so choose well.”

John Maeda’s move from President of the Rhode Island School of Design to the venture capital firm KPCB last year is as clear a sign as any of the increasing value placed on design in business. This topic, which has been covered extensively over the last few years (I offered my own take this past summer), is presented in a refreshingly personal monthly newsletter by Maeda that arrived in my inbox today, including the above quote.

The newsletter, a companion to Maeda’s twitter stream @designandvc, shares his thought-provoking and valuable observations that tend to stay with me long after I’ve read them. I would also suggest reading Maeda’s article for the Wall Street Journal, “Three Principles for Using Design Successfully“ as well as the Design and VC blog post where he’s collected an archive of articles on the subject, going back to 2004. I look forward to more from Maeda as he continues to champion the role of design and designers from his new post in Silicon Valley.

Designing Vancouver

I recently spent a week in Vancouver, where the seeds of my AREA 17 adventure were planted. It was there I met Arnaud Mercier in Y2k while working for Blast Radius and I still remember the buzz that was created when his Elixir Studio Subway portfolio got sent around, along with the news that he would soon be joining our ranks. I was only a couple of weeks into my first real position as a designer, and over the next couple of years I had the opportunity to learn from him and a host of other incredibly talented art directors whom I continue to hold in high regard. I guess that’s why Vancouver has always felt particularly rich in design for me, despite the fact that the Canadian city does not have as many cultural offerings as New York or Paris (a fact subtly lamented by Arnaud at the time). So it was with an odd sense of pride that I discovered a thriving design culture, especially in Gastown, the city’s oldest neighborhood.

Optical Cortex

Optical Cortex
The inner workings of a digital product agency

Impact through substance, utility, and beauty

Engineered design, an agency profile

Mike’s Historical Half Truths: Easter

Remembering Arnaud Mercier

Archiving every pixel from 2003-2017

Behind our redesign for the Barnes Foundation

Unsupported browsers – introducting HTML4CSS and legacypicturefill.js

Designing for mobile: context matters

Guides by AREA 17: Design techniques

A family reunion of used, unused and downright refused logos

The long press

Choosing a 3rd party service without losing your shirt

Ad-blocking: Web apocalypse or stairway to heaven?

Peter-Paul Koch and the browser dilemma

Riding the redesign wave

Markdown blockquote attribution with Redcarpet

Improving user experience without design

Powered Flight, Eye Magazine

A17 Timezones

2014: Year in Review

Auto populating code/pre tags with HTML content using JavaScript

Details. Details. Details.

Alternatives to Compass in a Rails project

John Maeda: Design and VC

Designing Vancouver