Ghost in the Pixel

As of this writing towards the end of June 2014, it’s become increasingly evident that Google is now no longer that odd, awkward techie maladroit at the party with funny copycat socks, but has significantly evolved into a savvy agent of design craft (see “Kennedy” and “Material”) and cultural value (see cars, shopping, weepy ads). Who woulda thunk it?? But it’s true and it’s real. It’s time to cast aside former assumptions and acknowledge that Google is now a true force for well-considered, beautifully articulated design in the world. And as a field, we are much better for it, through the ongoing contest of ideas and philosophies pushing & pulling at each other…enabling innovation as well as emergent vanguards for taste and quality.

More specifically, coming out of Google I/O, the new “Material” design language & system represents the latest shift towards a sophisticated, systematic statement of design grounded in a pervasive and integrated metaphor of “material”, across platforms and services. Whether “pixels” are indeed a bonafide “material” is discussion for another time ;-) Yet, the vision is literally and conceptually all coming together as a unified whole with a unifying aesthetic amplified by subtle motion and refined typography. For some designers in the field, this suggests a worthy competitive difference to Apple’s iOS design language, with even more defined clarity and focus. 

// More info here:

Google Material style guide: http://www.google.com/design/spec/material-design/introduction.html

Material Design Principles overview:  http://thenextweb.com/google/2014/06/26/google-explains-principles-material-design-language-android-chrome-web/

Professional designers’ reactions to Material:  http://venturebeat.com/2014/06/27/top-designers-react-to-googles-new-material-design-language/

And before Material there was Kennedy, which was Google’s initial big company-wide push for a well-defined aesthetic, thanks in part to Larry Page’s executive call: http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution

 

Having been at a Big Data analytics startup for over 3 months now, I’ve been deep diving into a whole range of tools that enable the clear, swift, vivid articulation of complex datasets in a meaningful manner, with craft and integrity. It’s an astoundingly broad, diverse field of opportunity, from pre-fab templates to custom data-driven graphics programming toolkits. While I still rely upon pen sketching and pixel editors to “flare out” diverse ideas for high fidelity interpretations, the new models of computational graphics and web prototyping tools lend an inspirational factor worth indulging quite a bit. 

Following are some relevant links worth perusing to augment one’s understanding of this area. Enjoy!

** Data-driven graphics: Involution Studios product designer Ben Salinas gave this fantastic talk about designing with real data to arrive at highly accurate visualizations that elicit exact user feedback, not just fake mockups. http://www.slideshare.net/UPABoston/make-it-real-designing-with-data  

Salinas highlights specific tools that you can easily (and freely) use to scrape real data, generate into a format that you can poke & prod via interactive prototyping:

• Screenscraper Chrome Extension
• Kimono
• InDesign / AI DataMerge
• Chartwell font

** Data viz toolkits: A few others that I’ve been looking closely lately include the following:

• Highcharts
• D3.js
• Kendo UI
• Epoch
• FusionCharts

** Web prototyping tools: Quite a few new tools have appeared on the scene, def worth checking out to empower your ability to create something interactive and “real” for user feedback:

• Framer Studio
• Macaw
• Pixate
• Bootstrap (from Twitter)
• Foundation (from Zurb)

** Responsive grid systems: As I get into building out the revised vision for our product, I want to ensure a scalable flexible layout for various device screens, to be modern and progressive. To help me I’ve been looking at the following:

• Responsive Grid System
• Golden Grid System
• Gridpak
• Gridset
• Skeleton
• 960 grid

I’ve been a designer in this area dubbed “Silicon Valley” for over 12 years now, having worked at a variety of firms including corporate, agency, and now at a startup. I had arrived fresh out of grad school with the simple intent to gather just enough experience and then move on to other places of innovation and design goodness, to advance and round out my professional foundation. Indeed, even my graduate advisor Dick Buchanan gently admonished me, “Don’t stay there too long. I wonder if there’s enough soul.” Rather ominous, right? Hmm, looking back on those words and reflecting upon my own long career here, I admit starting to feel that general sentiment: a melange of disconnection, desolation, and despair even. Ugh. What’s happened? Is it simply boredom and burnout? Perhaps it’s something deeper…

Now of course, there’s no question SV is a fantastic place for “Design”: the incredible mix of companies, people, colleges, networking events, cosmopolitan vibe, diverse food and drinks galore, variety of non-work cultural activities and outdoor options, etc. Tons of places for creativity and productivity. Career & education options abound for any designer with aspirations. There’s no place like it anywhere. 

However, there’s something else afoot, an insidious aspect that undermines all that I (and we as designers, I might add) enjoy and partake. It’s hard to put any one word to it, but there’s multiple aspects to it, which I’ll try to itemize here:

— Echo-chamber of living in the self-created tech bubble: Yes we get these cool services piloted or launched here —and nowhere else— but there’s an over-emphasis on their importance and utility, in (dis) proportion to other regions, since nobody else has them. We doth rejoice in our own bounty a bit too much.

— Male-dominant tech geek culture: I’ve seen some pretty tasteless male-driven prezos at start-up events. We’ve all seen the overtly sexist apps and features. We need more women tech leaders (and inspire young women/girls to get involved in tech & science), and it’s happening for sure! Got to do better.

— Premium value placed on “silly” toy apps for extremely limited market samples (i.e., the white hipster crowd with no real problems): Yo? Yo. Yo! Oy.

— Greedy get rick quick culture of rapid serial returns, no matter how silly the “app” or “service”. Not being naive, I realize this is inherent to VC calculus and approach. Can we simply not be so hubristic and obvious about it? Stay classy.

— Billions upon billions upon billions: For what, a texting app? For a pair of headphones? For a thermostat? Let’s get real folks. Feels like a Banana Republic of Monopoly money, of which denizens like me see nothing despite working long hours on, ahem, solving real complex problems around virtual infrastructure, for instance ;-)

— Problems of extreme housing “value”, socio-economic distortions and displacements, busing the “techies”, etc. 

And I could go on, but there’s clearly something less-than-positive here. These next few articles hit upon related issues more capably than I can, and are worth several minutes of deep reading and thoughtful reflection. 

// More info here:

** Time for Silicon Valley to disrupt itself (i.e., culture): http://qz.com/225782/the-next-thing-silicon-valley-needs-to-disrupt-big-time-its-own-culture/

I recently attended this all-day event led by Edward Tufte. However, unlike the usual seminar with Tufte sermonizing the scholastic principles of information design (with a free book set for attendees), this event featured three other speakers beyond Tufte, who simply spoke at the very end! Entitled “See, Think, Design, Produce”, this “advanced course” involved a veritable rockstar lineup: Jonathan Corum, Bret Victor, Mike Bostock. Tufte concluded with a short lecture on his new book “The Thinking Eye”. Below are my main notes, condensed from all four talks. Enjoy!

– Seeing is about pattern recognition and learning new patterns. It must be practiced over time to develop the sensitivity to see “what’s possible” and “find what’s more than what’s available.”

– Sketching is visual problem solving, a method of probing and finding a clear thought. Once you find it, then communicate that “aha” moment.

– When designing, you must consider someone else. Don’t be your audience, instead you must break from your inner echo-chamber or bubble. Beyond empathy, you must remember how not to understand something, then reverse explain something intelligibly.

– Anticipate confusion and help the reader/viewer navigate through your solution. Through the combined efforts of understanding and explanation you should respect the user.

– “Good design is clear thinking made visible.” — Edward Tufte (ET)

– Too much of publicly applauded design is really empty facades of communication without actual real meaning and value. (“Pretty” vs “Beauty”)

– When producing the designs, embrace the limitations to arrive at truly novel solutions (innovation). Keep honing and refining the idea by ruthlessly applying “common sense”.

– Understanding, elegance, and beauty are emergent qualities that result from clarity, empathy, and simplicity.

– Consider the amplifying power of dynamic displays and dynamic content: visual cues, transitions to show change, jolt the user with new expectations, animate to show orientation, preserving context while clarifying data, adjustable elements to understand consequence of change (this is all via Bret Victor’s demos)

– Shift your thinking about graphics from “nouns” (geometry) to “verbs” (physics): from data objects with edges and vertices to transformations and consequences for continual interaction. (shaping a dialogue between user and data via interaction)

– Design is fundamental a “search problem”: like a maze unfolding in real-time and you’re trying to find your way through that maze to the “right” exit. You’re searching for the solutions while simultaneously grasping the contours of the problem space and audience needs.

– As a designer you’re constantly in a state of creating and editing, thus compounding the challenge of what it means to design something elegant and understandable with value.

– “The Thinking Eye” has a taste for excellence and searches forever for knowledge. Serenity is the condition in which all brainpower is devoted to this “Thinking Eye”.

– “Design is now code. Code is design”— Edward Tufte

 

I recently attended this after-work event held at Netflix HQ in Silicon Valley—which, incidentally, served as a rather fun homecoming after 5 years since having worked there as UI consultant. It was truly wonderful re-connecting with the Netflix design team, and getting a sneak peek at some upcoming concepts ;-) Yay!

Regarding the talk itself, Alvin Lee, one of the team design managers, led a brief overview of what they term “cinematic UX” and how that concept has been successfully achieved via Netflix service delivery and interface mechanics. Below is a rundown of the 5 core elements of what constitutes (for Netflix) a “cinematic UX”:

1. Visual: Given the entirety of Netflix’s content is television and movies, it’s quite obvious the experience delivered must be primarily visual. This also means going beyond standard box-art, towards iconic signature frames and scenes from their catalog, which are memorable and soul-stirring.

2. Story: Again, given the special nature of the content, Netflix took an approach that maximizes the value of emotive, resonant qualities of their movies, namely around the story. As a result, the rather bland vanilla plot descriptions were tweaked to be more specific, memorable, and emotional, with a “point of view” that jolts the viewer to want to view and engage with the story of a certain movie or TV show.

3. Emotion: Building upon the prior principles, this one is essential for creating a “cinematic UX”, whereby viewers are drawn in, and have a visceral reaction to the dramatic, engaging content being consumed. The challenge for designers then is how to make “I want this now” as an emotion consummated via expertly designed content consumption interface: the artwork, the previews, the interactions, with both “pre-play” and “post-play” engagements for a show or movie.

4. Immersive: This pertains to drawing the viewer into a world where they feel close to the content, in a space that’s been aptly extended across devices and channels, to feel continuous and enriched. In terms of the interface, this refers to minimizing the “app chrome” elements and focusing on the content itself, with subtle UI controls for interaction and more smart techniques (like auto-play the next episode of a TV binge watching session)

5. Be Entertaining: Naturally, given this is all about movies and TV shows, the spirit of entertainment should be evident in the interface and experience all throughout! How can Netflix enable a positive, rewarding, and FUN experience that keeps viewers coming back for more and also firmly cement Netflix as the premier destination for entertainment. This final principle serves as the capstone that pulls together the prior four into total fruition for viewers.