Kevin Finlayson

Atlantic Theme

Tue, 28 Jan 2014 00:00:00 +0000

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 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

Thu, 28 Nov 2013 00:00:00 +0000

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

Thu, 11 Apr 2013 00:00:00 +0000

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

Sun, 30 Dec 2012 00:00:00 +0000

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

Andy Stott: Luxury Problems
Kendrick Lamar: Good Kid, m.a.a.d. City
Actress: R.I.P.
Grimes: Genesis
Flying Lotus: Until The Quiet Comes
Dirty Projectors: Swing Low Magellan
Grizzly Bear: Shields
Wild Nothing: Nocturne
Bloom: Beach House
Purity Ring: Shrines
Julia Holter: Ekstasis
Blut Aus Nord: 777: Cosmosophy
Burial: Kindred EP
Chromatics: Kill For Love
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

Thu, 15 Nov 2012 00:00:00 +0000

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.

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

Tue, 06 Nov 2012 00:00:00 +0000

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:

People are too quick to dismiss skeuomorphism. There's a tacky way to approach it, but if used correctly it can form an emotional bridge.

Rdio, Tangible Products, and Consumer Responsibility

Thu, 13 Sep 2012 00:00:00 +0000

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.

Why I Run

Sun, 20 May 2012 00:00:00 +0000

In a recent piece entitled ‘Exercise & Programming’, Twitter developer Alex MacCaw makes the case that programmers invest a huge amount of time and effort in expanding their skills, but completely neglect their physical health. In doing so, they miss a tremendous opportunity to maximize their brain’s ability to absorb and use those skills.

Our bodies are not just some vehicle to get our brains between meetings and keyboards. Like it or not, our brains are deeply tied to the performance of our bodies. This sedentary lifestyle we’ve become accustomed to has severe implications on our performance as programmers. —Alex MacCaw, Exercise & Programming

I couldn’t agree more. I started running about a year ago, as part of an effort to offset the negative impact of sitting all day at work, and it’s one of the best gifts I’ve ever given myself. Below are some of the benefits I’ve observed from having a consistent running practice.

Routine and Lifestyle Moderation

When I first became a freelance designer/developer, I was working and studying like mad, and my lifestyle was a shambles. I developed insomnia, and had a fractured schedule, sleeping in bursts and working excessive hours. I smoked, and drank too much, and generally looked and felt like hell.

Since that initial phase of orienting myself within my field, I’ve gradually managed to develop a normal routine and normal sleeping patterns, relying on blocks of uninterrupted work hours and meals to structure my day (there’s nothing like sipping a cocktail while chopping vegetables to put you in evening-mode).

In the past year, however, I’ve noticed that running has really rounded off the rough edges, helping me follow those small daily good-for-you choices that part of me would usually resist. No more staying up late with that one last glass of bourbon and episode of Deadwood, trying to take the edge off a frustrating day. By late evening I’m already focused on getting up at 7:30 AM and doing at least 5K before the sun gets too high in the sky.

Good for the Brain

MacCaw doesn’t really talk too much about the direct benefits of exercise on the brain, and I don’t have the scientific background to offer much insight either. However, the quality of my work, and my enjoyment of my working life, have vastly improved in the past year. Frankly, I can’t think of a better metric to go by.

A couple of articles recently published by the NY Times back up MacCaw’s argument. ‘How Exercise Fuels the Brain’ discusses some research pointing to the fact that exercise directly increases to the brain’s capacity to store glycogen (fuel). This enables the brain to effectively carbo-load, giving it consistently more fuel to work with (as long as you exercise regularly).

Another recent piece, ‘How Exercise Could Lead to a Better Brain‘, examines the role exercise has in slowing or reversing the natural degradation of the brain that occurs with age.

Working out Frustrations

It’s not just that I’m now voluntarily skipping that last nightcap—I often don’t even need it. Running really helps me get past any frustrations with client projects.

You know it goes. A client comes back saying “I love this mock-up, but can we just change this—and this, and that…”, and suddenly what you thought was a great design solution needs to be reconsidered entirely.

Once I get past my initial annoyance, I inevitably realize that the client’s feedback has actually provided me with valuable information and constraints, and the result is always better. The thing is, I can’t skip that annoyance phase, no matter how minor it may be. Running helps me get over my own ego faster, so I can move onto the next round of revisions with a healthy dose of endorphins and not a trace of resentment.

Mental and Emotional Levelness

Like most folks, I’ve struggled a bit with anxiety, even the occasional bout of depression. I’m flat-out amazed at the effect that running has on my attitude and emotions—it’s just fantastically levelling.

The biggest indication of this comes on rest days, especially if strain or injury forces me to take a few days off in a row. Sometimes I’ll feel the return of a creeping background negativity and listlessness. I can’t believe that used to be my everyday state.

Endorphins!

Endorphins are a big part of the mental levelness I mentioned above, but they warrant their own mention. When recently I completed a relatively long run of 16K, and slowed down to a cool-down walk, it felt amazing, like my brain and body were shining as I floated down the street. I imagine that’s what heroin feels like.

The Runner’s High

This is maybe the biggest one for me, and the most difficult to attain. Sometimes all the factors of your run come together—no pain or discomfort, great weather, an absense of thirst, etc. and suddenly you’re zooming effortlessly down the street, floating like in an astral projection, endorphins flashing across your brain. It’s worth the 19 dull runs you have to slog through until it happens again.

Personal Analytics

I’m fascinated with personal analytics, and love seeing everything from trends in my music listening habits on Rdio to the frequency with which I annotate texts in Readmill. (Oddly enough, Facebook has become my bucket for this kind of data across a range of apps, but that’s another post).

Running is particularly fun and rewarding to track, and for a while I was using both Runkeeper and Nike Plus simultaneously (I’ve since committed to the latter). Tracking trends in pace, elevation and heart rate adds a richness to the experience, and it really does motivate you beat personal records. It also helps prevent injury: if you track and trust the numbers, you can slowly develop in a way that’s structured and safe.

Listening to the Body

Of course, the most important way to avoid injury, aside from sticking to an established and reliable training plan, is to listen to your body. I’ve become an expert at which of my pains and aches mean what, when I need to rest more, use ice, or add different stretches to my cool-down.

This awareness is probably the driving force behind other changes in my lifestyle as well—for instance, I’m more aware of what glucose overload feels like when I eat sugary foods, or when I’m dehydrated or in need of protein.

Try it Yourself

While running may not be the sport for you, I’d strongly urge you incorporate some kind of exercise into your life, if you don’t already. Especially if you work in a field that requires a lot of mental acuity and stamina—the difference to your quality of work and life is remarkable.

Illustration for [Redacted]

Wed, 18 Apr 2012 00:00:00 +0000

It’s been a long time since I’ve done any illustration work, and I’m rather happy with recent piece from a top-secret client project. We’re going another way for the final version, so I thought I’d post this here for posterity.