Atlantic Theme

When I saw that Pixel Union’s Atlantic Theme was featured in Shopify’s 2013 Year in Review, I realized I hadn’t posted about it when we launched the theme earlier this year.

Atlantic Theme
Atlantic Theme home page on desktop and iOS

I had the pleasure of designing Atlantic, which has proved to be one of our best-selling themes. The goal was to create a responsive theme that feels crisp and contemporary, like the Mr. Porter shop.

We also wanted the theme to include delightful features and details that would emerge as customers go about the shopping experience. These include the rolling ‘mega-nav’, the mini-cart, the quick-shop feature, the sumptuous product pages, and many others.

I’m especially proud of the blog layout, and how elegant it looks at difference viewport widths and on different devices.

Atlantic was even used by Goodwin and Goodwin for their award-winning entry in the Shopify Ecommerce Design Awards, and was praised by contest judge and famed web designer and publisher Jeffrey Zeldman as having a clear hierarchy and well-considered typography throughout, as well as clean and elegant responsiveness.

Check out the Atlantic demo store for more details.

Some Thoughts on Applied Discovery

At this year’s Build conference in Belfast, Quora product designer David Cole gave an insightful entitled Applied Discovery, which he has made available as a post on Quora. In his talk, Cole observes that historically speaking, the term ‘design’ has been misused when discussing the creation of products. It has been relegated to surface ornamentation or marketing collateral, and conceptualized as being separate from the thing of value itself. In fact, the creation of this thing of value, from vision to execution is design: product design. And product design is very similar to what has historically been understood as ‘invention’.

He then observes that many historically significant inventions haven’t necessarily been the result of technological advancements. Many successful inventions are the result of identifying a need—a human, social, societal need—and using existing technologies to create a solution. His example is Twitter, which changed everyday communication for billions of people with the simple addition of a 140 character limit to a pre-existing channel. This is what he terms ‘applied discovery’, an apt neologism to describe the phenomenon of invention decoupled from technological innovation. One of the more enjoyable passages in the essay relate the invention of basketball as an example of applied discovery: a hugely successful game that was originally designed with pre-existing materials, based on concrete requirements.

Cole goes on to assert that the value of the work we do goes beyond the technology itself, or even the artefacts produced in the process of exploring it. For web designers, he points out, there’s a common lament that our work is ephemeral and looks dated as the state of the art changes. I myself often struggle with the fact that my work will be less relevant with time. In interaction design, there isn’t really an equivalent of a monograph or exhibition that can as a record of experiments, failures and successes. As far as a tangible legacy goes, prospects are grim.

But Cole’s perspective is liberating. He observes that we interaction designers are fortunate; interaction design is about discovering new truths about humanity, and the knowledge gained is the true legacy. The websites and apps may expire, but we’re contributing to a new body of knowledge, and that knowledge outlives any physical (or virtual) artifact.

I take solace from this idea. As new technologies appear with increasing rapidity in all spheres of life, there will be a greater need for interaction design to translate the raw possibilities these technologies afford into human terms. We interaction designers can be an interpretive layer that weaves the new into the fabric of everyday life. To do so, we need to have a strong bedrock of interaction design principles and knowledge, and we have an opportunity to start building this body of knowledge the right way, right now, with an eye to the future.

Because, as Cole continues in his essay, the two greatest themes in the history of invention are empowerment and scale. The scale is rapidly expanding. It’s up to us to make sure we continue to minimize friction and make new technologies truly empowering.

Animation in UI Design

In a visually rich, fine-grained post, Elepath designer and animator Pasquale D’Silva calls for designers to think about animation as a critical aspect of UI design.

“Folks keep throwing around the word ‘delight’ when referring to animation and cute interactions. Cool and great for those guys. Guess what though? Animation can be used functionally too. It’s not just an embellished detail.”

He goes on to argue that it’s important for designers to think not just about spacing and visual style, but about time—“an overlooked dimension that stitches space together.”

In one particularly interesting example, D’Silva argues that you can actually drop some of the conventionally used way finding and breadcrumb design patterns, because the animations themselves communicate where a user is in an interface:

“An advantage of remaining inline is that you can remove the need to explain how deep a user is embedded into sub-views. You can scrap the display of a hierarchical navigation, because the user saw how they got there.”

The pitfalls of animated UIs

In a subsequent Branch discussion, designers Matt Whitely and Tyler Sticka rightly express concern that animations can become suerpfluous or even counter-productive if they slow down or ‘block’ users. This was an all-too common problem when CSS3 transitions started to be widely used—and in fact, I mostly stopped using them myself, preferring the instantaneousness of transition-free UIs. However, D’Silva eloquently re-states his original argument—that animation can offer something beyond ornamental flourishes:

“I think there is so much value in animation as a functional design property. Information can be encoded in motion. It provides the link between different contexts.”

In short—there’s potential here, we just need to become more mature as users of animation in UI design.

The shortcomings of current front-end prototyping tools

From there, the Branch discussion moves into the shortcomings of current front-end animation tools. Pasquale puts it thus:

“[…] The tools to create animation for interfaces are not ideal at all. I’d love to spend some time with some bright engineers to build better tools for animation. You shouldn’t have to write a bunch of code to create something so abstract. It pigeon holes you into designing animation procedurally, and doesn’t let you dream big.”

Designer/Developer Kirupa Chinnathambi summarizes the problem in terms of a question of putting the right people together to tackle the problem:

“How can we get the people who write the tools to talk to the people who write the frameworks/languages? How can we get the people who create the cool animations involved in the conversation between the tool creators and the language creators?”

How Facebook Prototyped Home

One particularly visible argument for dynamic prototyping tools comes with the recent unveiling of Facebook Home, an interface rich with animations and fast, customized physics.

In her follow-up post about the process and people behind Home, ‘Go Big By Going Home’, Facebook product design director Julie Zhou discusses the team’s need for an alternative to the most commonly used static prototyping tool:

“…something like Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics-based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.)”

Zhuo goes on to discuss how Facebook Home was actually prototyped using Quartz Composer, which was introduced to the team by designer Mike Matas. The benefits, she argues, are enormous:

“Not only does QC make working with engineers much easier, it’s also incredibly effective at telling the story of a design. When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve.”

The way forward

I’m intrigued by Elepath‘s own ‘Moonbase’ animation tool, which “lets you create animations by plugging noodles into blocks”. I can’t help but think that there’s potential here for a jQuery animation GUI: rather than have users tweak easing functions, what if designers could select specific elements, and use noodle-and-block overlays right in the browser to tweak the animations as desired. The tool would then spit out motion functions that can be copy/pasted as required.

Does anyone else have ideas for empowering UI designers to experiment with animations in their designs? Let’s move the discussion forward, and hopefully some ideas for great new tools will emerge.

Listening in 2012

2012 vinyl acquisitions

A Return to Vinyl

The biggest development in music for me, in 2012, wasn’t related to a specific release or artist. I’ve been increasingly troubled by the fact that artist’s aren’t getting adequate, proportional pay for streaming services like Rdio and Spotify, so I’ve started to make a conscious effort to pay for music. I’ve been circling the new releases bin at our very fine neighbourhood record store for weeks, purchasing a couple of used records here and there, but Kara opened the floodgates by buying me the PJ Harvey record for Christmas. I forgot how much fun vinyl is, how great it sounds, and how investing money in an object makes you give it more attention and consideration.

Favourite 2012 releases

  1. Andy Stott: Luxury Problems
  2. Kendrick Lamar: Good Kid, m.a.a.d. City
  3. Actress: R.I.P.
  4. Grimes: Genesis
  5. Flying Lotus: Until The Quiet Comes
  6. Dirty Projectors: Swing Low Magellan
  7. Grizzly Bear: Shields
  8. Wild Nothing: Nocturne
  9. Bloom: Beach House
  10. Purity Ring: Shrines
  11. Julia Holter: Ekstasis
  12. Blut Aus Nord: 777: Cosmosophy
  13. Burial: Kindred EP
  14. Chromatics: Kill For Love
  15. Tame Impala: Lonerism

High rotation in 2012

  • The Roots: Undun
  • Wolves in the Throne Room: Two Hunters and Celestial Lineage
  • St. Vincent: Strange Mercy
  • PJ Harvey: Let England Shake
  • Yamantaka Sonic Titan: YT//ST
  • Prurient: Bermuda Drain
  • The Sight Below: Glider
  • Maria Callas, Giuseppe Di Stefano; Carlo Maria Giulini: Orchestra & Chorus of La Scala Milan: Verdi: La Traviata
  • Shabazz Palaces: Black Up and Shabazz Palaces EP
  • Mastodon: The Hunter
  • Kurt Vile: Smoke Ring For My Halo
  • Eric Dolphy: Out to Lunch
  • Mastodon: The Hunter
  • Anna-Sophia Mutter; Herbert Von Karajan: Berlin Philhamonic Orchestra: Brahms: Violin Concerto
  • Bill Evans: Sunday at the Village Vanguard and Explorations
  • Mobb Deep: The Infamous
  • Andy Stott: Passed Me By and We Stay Together
  • Actress: Splazsh

Announcing Editions Theme

I’m pleased to announce the release of Editions theme, Pixel Union’s newest addition to our growing collection of Shopify themes, and one which I had the privilege of taking a lead design role.

Editions Theme home page
Home page

Editions is a bit different from other themes in the shop. It’s inspired by the single-channel style of minimal blog design that’s emerged this year, a style exemplified by Justin Oullette’s High Res theme.

However, I also wanted to push the typography a bit, and—for the default configuration—settled on a combination of Brian Zick’s fabulous serif family entitled Neuton, combined with a narrow sans face by Nathan Willis, called News Cycle. The combination of Neuton’s warm, playful humanness and News Cycle’s measured severity brings character and depth to the design. The dark variation makes use of the brilliant PT Sans and PT Serif, both from Paratype.

Another big feature of the theme is the gorgeous, full-width product images. I love web shops that allow you to preview large versions of the product images, and decided to just make this the default view for Editions.

Finally, it’s worth mentioning that the theme is responsive, although we’ve tweaked the viewport detection to only trigger mobile views if you’re on the appropriate devices. I’m indebted to the technical team with their dedication to the goal of optimizing the text size, leading and spacing for each viewport—quite daunting for a platform with so many view templates! I’m glad we took the time to make things look perfect at smaller sizes, though—I have strong feelings about optimizing type in this way, and I’m not the only one.

So if you’re looking for a flexible, elegant, typographically-nuanced responsive theme that focuses on showcasing products, check out Editions theme. At $140 USD, it’s an absolute steal for such a fully-realized design solution, on the very best consumer web commerce platform around.

Visual Style

In web and UI design, I find it alarmingly common to hear my peers speak in absolutes, especially when it comes to visual style. Shifts in the tastes of designers often feel reactive, rigid and dismissive.

I’ve watched this cycle of backlash a few times since I started in the field. Glossy ‘web 2.0’ styles and wicked worn fell out of fashion as iOS-style design became popular, and now flat design is being put forward as a more inherently honest direction for the digital milieu, compared to designs that rely on real-world metaphor. The controversy around skeumorphic design has been a hot topic lately, culminating (or not) in a major design leadership shake-up at Apple.

However, I’m wary of shutting the door on any particular visual style. A designer should strive to be conversant, if not skilled, in many different styles. While some lend themselves to timelessness better than others, there’s always the chance that a style that’s out of vogue may be the most appropriate for the requirements of the project at hand.

If you wish to work in a specific style, align yourself with projects for which it is the absolute ideal. The only label you need to bother with is the one that describes this process of understanding what you’re building, whom it’s for, and what the best possible outcome is. As for skeumorphism, I believe Robert Anderson, designer at Square, sums its place and value nicely with this tweet:

Rdio, Tangible Products, and Consumer Responsibility

Last night, Rob Weychert, he of impressive beard and air guitar championship record, published a post on his year of using music discovery/streaming service Rdio. I’m inclined to offer some thoughts as well, because it’s been over a year for me, and my experience has been somewhat different from Rob’s.

The gist of Rob’s piece is that in the past year, while he’s listened to a huge amount of music, he’s devoted less time to individual releases. He’s accustomed to the obligation of a concrete purchase to spur him to give albums a chance, over repeat listens. That lack of investment, time-wise and emotionally, translated into fewer instances of actual purchase.

My experience has been quite different, and I think it’s because I don’t rely on Rdio exclusively. For discovery, I still rely on Pitchfork, Boomkat, The Wire, Soundcloud, other music blogs, the recommendations of friends, and so on. Sometimes I’ll try something in the ‘Heavy Rotation’ area of Rdio, but for the most part these recommendations don’t interest me (possibly because my network doesn’t really share the full range of my tastes).

I suppose it would be easy to fall into a prescribed kind of listening behaviour if I was relying solely on Rdio. However, I think there’s an obligation on the user to fit a service into their lives in a way that adds value. Sometimes a service can remove too much friction, and facilitate a level of laziness or irresponsibility. Ultimately, however, it’s up to us to find a balance. This is true of the effect Facebook has on our friendships, of Instagram on our photography habits, of Twitter on writing.

As far as listening to music is concerned, I’ve always preferred full albums, not songs. I never got into playlists or shuffling. I like the arc of an album, the larger scope and canvas for exploration and storytelling, the potential for variations in mood, tone and intensity. Rdio didn’t change this.

What also hasn’t changed is my investment in individual albums. I don’t just put a lot of different songs or albums the queue and let it play in the background. I listen actively, I put records on repeat, sometimes making playlists of a few complementary records. If I get bored of an album in a few listens, then I move on—I like records that yield more the more you invest in them.

But Weychert’s point is more that the superficial level of listening he’s tended towards has led to fewer purchases, and this is something I’ve been increasingly concerned with. There’s no deny that music subscription services effectively let users off the hook, in terms of supporting artists with album purchases. I’m bothered by the fact that the artists I listen to through Rdio are getting a raw deal, by not being adequately paid for the music (while Rdio isn’t represented in that infographic, I think it’s safe to assume the pay structure is similar to that of Spotify).

There’s a line of thinking that suggests that live shows are no longer used to promote albums and drive sales, that there’s been a reversal, and music is now freely distributed to draw and concert audiences and sell tickets. This seems alien to someone like me, a huge shift from my early days of music collecting. I was the guy who paid $30 for a single ‘import’ CD from a record label based in the very city I was purchasing it. I used to drive long distances with friends to basement shows, in part to buy rare releases from distro bins. In the end, I don’t think it has to be one way or the other—it’s great that live shows are even more integral than ever, but as a consumer of recorded music, I can do better.

Part of the trouble is tangibility. An additional $10 per album seems like a lot of money for some digital files, when the files are already available for streaming. I have a turntable, but I’m increasingly loathe to buy actual objects, even though that would psychologically offset the expense, and solve the tangibility problem.

I could stop subscribing to Rdio, and invest the money instead in the few records that I really get attached to in a given year. But I do enjoy the social aspect of it, and I’ve come to rely on the service for the tremendous back-catalogue of classics. This is where it really shines—it has a tremendous collection of jazz, classical, soul, funk, blues. I feel less guilt about using Rdio for access to older recordings that have been around for awhile, especially when the publishers have been subsumed by larger companies, or the artists have passed away.

Rdio’s value in terms of visibility and exposure can’t be overstated, either. Some friends released an independently published album a few months back, and for a brief time were in the Rdio’s top 30. I suspect a great many more artists are getting heard by an increasingly wider audience these days, thanks to Facebook, Youtube, music blogs, Soundcloud and subscription services like Rdio and Spotify. Things are certainly different from the model when I was a teenager, in which the cost of entry was the full price of the album (often $20 for a CD), and the best you could hope for, in terms of trying before buying, was the listening post at HMV.

Ultimately, I’m going to continue using Rdio, but I’m going to make an effort to invest in the artists that I really enjoy. I have no problem supporting writers and inventors on Kickstarter, or subscribing to new web design periodicals like the Manual and Offscreen. Why should it be any different for music? The problem is it’s too easy to put it off, to not click ‘purchase’.

Here’s a thought. What if Rdio gently suggested consumers purchase a record, once they hit a certain play count? Make it opt-in, and let users set the threshold. The occasional purchase of a record that I’ve demonstrably enjoyed would help me feel better about using the service in general.