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.
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.
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.
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.
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.
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:
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.
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.
airbnb gets a redesign
When airbnb released its new site design and rebrand by DesignStudio this summer it caused an uproar, to put it mildly. There was so much written about the work that it seemed even the most sheepish designers poked their heads out from behind their monitors to weigh in.
Estrella Damm, the beer of Barcelona. Illustration by Alex Trochut.
In 1992 the Olympic Games were held in Barcelona. Since then, the local design scene has grown immensely, so much so that Barcelona now has more design schools than any other metropolitan region in Europe. The city is now recognized globally as a forward thinking design city with the branding to prove it.
In order to maintain Barcelona’s recent reign of design dominance the city’s local government, public and private institutions, and companies have made big efforts to create and build the Barcelona brand.
But how exactly do you brand a city?
Just Map It
Before joining AREA 17 two years ago I spent a year and a half trying to get my startup, justmap.it, off the ground. I wanted to create a simple app where people could log and share places. And while it’s been a grind, I’ve pushed forward and will be releasing a new, much more polished version soon. Maps and places continue to intrigue me and seem to always find a way into all of my work.
The language of interactive design is still in its infancy and frequently draws parallels from its more established counterparts in architecture and the Fine Arts. These creative disciplines do share many similarities and often warrant a dialogue that isn’t mutually exclusive. However as design becomes more ubiquitous in every aspect of our lives, and informs decisions in boardrooms around the world, it’s worth reconsidering how we talk about it. One approach is by embracing simplicity and harnessing the virtues of unpredictability.
The Cognitivie Puzzles Ogilvy campaign for IBM Software. Illustration by HORT and Carl De Torres.
This article was originally published on Adage.com as the third in a three-part series authored by AREA 17’s leadership team.
Good design is good business. Now more than ever this well-worn phrase, coined by long-time IBM Chairman-CEO Thomas Watson Jr., is worth repeating. In an increasingly competitive business landscape, design is the new battleground and the success of your business depends on it.
This article was originally published on Adage.com as the second in a three-part series authored by AREA 17’s leadership team.
At one time or another every agency has considered creating a commercial site that has nothing to do with its client work. Developing a new product takes time, focus and the ability to go into it with your eyes open. And when handled correctly, the payoff can be huge.
At AREA 17 we’ve done it—several times. It has been part of our evolution from a design studio to a full-service agency and has completely changed the way we approach our client work and relationships.
This article was originally published on Adage.com as the first in a three-part series authored by AREA 17’s leadership team.
Is your interactive agency doing everything in its power to make your projects — and business — successful? How do you know? Whether you’ve just hired your interactive agency or have had a relationship for years, you may wonder if you’ve made the right choice. With digital budgets increasing year after year, it’s a question worth considering.
Here are five things to look for to make sure an agency is truly right for your organization.
If you are in digital publishing and haven’t heard about the New York Times Innovation Report, well, maybe you aren’t really in digital publishing. I’m kidding. But, chances are you’ve heard about it but didn’t have time to read all 90 pages. No worries, here are the critical things that the New York Times thinks it should be doing and, by inference, you should too.
“Every page is a homepage.” As side-door, social, and mobile traffic skyrocket, homepages are no longer the work horses they once were. The load now rests on the article page to keep users engaged and moving through the site – something the rise of mobile and one-hit readership has made essential. How? Better recirculation.
I noticed some strange inconsistencies across browsers when exporting .svg’s for a recent project. Safari renders .svg’s based on coordinates, Chrome renders vectors optically. This applies to straight objects as well as curves. For example, by default if a circle is drawn on whole pixles the shape will render with hard edges. It’s become best practice to decrease the circles height and width from the center by a few half pixels to reduce the hard edge and make the shape look optically correct on 72dpi screens. In addition to Safari and Chrome, Adobe Illustrator CS6 has trouble displaying pixel results in .svg files as well. The different vector renderings make it difficult to keep consistency in Ai and cross–browser.
Although .svg’s may lack visual consistency, their strengths aren’t necessarily in pixel-perfection on 72dpi screens. As the web moves further from static images to elements that animate, we should consider .svg’s for their real advantages; interactivity.
I believe there is much to say behind every small, unannounced UI tweak a large web product rolls out. Are they correcting a mistake? Are they AB testing? Just a fidgety design team? Due to the subtle nature of these changes, we might never know – which makes speculation all the more enticing.
Beautiful personal essay by artist and computer scientist Jonathan Harris about getting unstuck.
I didn’t want to sit in meetings, manage people, market products, raise money, and send emails all day. Really, I just wanted to make small, beautiful things.
To see more of Harris’ work, visit his site Number 27.
About a year ago, Ned proposed the idea of switching our method of displaying icons and other small graphics in websites that didn’t use sprites. He suggested we used individual SVGs instead.
At the time we were making sprites and had become become quite adept at building them; though they were a constant source of frustration. In the middle of 2012 Apple released the Mac Book Pro with a Retina screen, which added new impetus to seek out ways of making sprites appear sharp on high resolution screens. Our first solution was to make double size sprite files and resize them with CSS for high resolution screens. This solved the problem; but gave us more problems. Now we had two sprites to maintain and more frustration.
So an SVG solution was worth seeking out.
Playing around with some marketing page concepts and came up with an interesting way to display content on multiple devices with one element in the markup. Check the demo here.
Inspired by device-loop from slid.es.