Responsive Web Design, Part 2 (2015)
Counting Stars: Creativity Over Predictability
Dominated By Process
When I imagine a website designed to sell me my favorite tea, I expect it to be well designed, technically proficient and easy to use. I expect to be able to find what I’m looking for quickly and for information to be well presented. When I’m buying a packet of PG Tips, I expect the process to be quick and the experience to be smooth.
The aspects of user experience and usability that focus on ensuring a product or a service works well are important, but that’s not enough for me. There’s no magic in simply making something easy to use.
Where do chimpanzees fit into the process?
While some of us revel in creating that’s chaotic, impulsive and unpredictable, others identify patterns and create systems because they crave predictability. We regularly hear the word “process” in relation to designing for the web, and recently our conversations about responsive design have been dominated by process.
One process that has been spoken about regularly over the past year — largely as a result of designers experimenting with different approaches to responsive web design – has been designing the elements of a web page or application outside the context of layout to create a form of style guide. Not a guide that’s used to document design principles after work has been completed, but a working tool that contains not only common elements (typographic styles, button designs, the visual appearance of form elements), but also consists of common patterns that will be used across a website or application’s design. These may include layout patterns for components such as form elements, modules, or navigation.
In my studio we often refer to this approach as building a toolkit, and the approach to creating one is something I described in early 2012 in my “Designing Atoms and Elements” chapter in Smashing Book #3, Redesign the Web. I wrote:
“Whereas the layout’s arrangement of components will undoubtedly be different across screen sizes, the design of those same components will almost certainly transcend (damn, I hate that word) layout.”15
I gave this combination of typography, color, and texture in the absence of layout a name, and I called it “atmosphere.”
Atmosphere describes the feelings that are evoked by color, texture and typography. You might already think of atmosphere in different terms. You might call it “feel,” “mood” or even “visual identity.” In whatever way you describe it, the atmosphere of a design doesn’t depend on layout. It’s independent of arrangement and visual placement. It will be seen or felt at every screen size and on every device.
Trent Walton summed this up extremely well in his article “Content Choreography16”:
“Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy.”
INTOXICATED BY PROCESSES
Separating components from layout can help everyone focus on their designs while setting no expectations of how the components will be arranged across responsive viewport sizes – but I worry that we’re becoming intoxicated by processes like this and that we’re losing sight of what we’re ultimately making.
Design system thinking also includes using pattern libraries as design tools rather than as post-design documentation. Several examples, including those from the BBC, MailChimp and Starbucks are widely cited.
One design system that’s become synonymous with responsive web design is Brad Frost’s atomic design. He describes it as “a methodology used to construct web design systems.”17 This methodology even has a tool, Pattern Lab, to “create atomic design systems.”
Brad first wrote about atomic design in 2013 when he said:
“Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.”18
He went on to describe how his atomic design system comprised of atoms, molecules, organisms, templates, and pages.
•Atoms are the basic building blocks of HTML, elements including buttons, form inputs, and labels.
•Molecules are groups of elements that function together. For example, a label, input and button that combine to make a search form.
•Organisms are groups of molecules joined together to form part of an interface.
•Templates are mostly organisms combined to form page-level objects.
•Pages are essential for testing the effectiveness of the design system.
The result of atomic design should be:
“[…]a clear methodology for crafting design systems. […]Because of this, we can create systems that promote consistency and scalability[…] And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”
Brad’s inspiration for atomic design was chemistry’s periodic table of elements. Although I can’t think of anything less creatively stimulating, I can imagine someone who’s driven to make the creative process predictable finding comfort in the atomic design process.
Not everyone has been convinced by abstracting design the atomic design way, though. In December 2013, Mark Boulton outlined his concerns:
“Conformity and efficiency have a price. And that price is design. That price is a feeling of humanity. Of something that’s been created from scratch. What I described is not a design process. It’s manufacturing. It’s a cupcake machine churning out identical cakes with different icing. But they all taste the same.”19
I think it’s important to remember that creativity can never be — almost by definition should never be — as predictable as manufacturing. We can’t and we shouldn’t attempt to rationalize creativity by turning it into a process.
PEOPLE WITH IDEAS ARE NEVER SERIOUS
Creativity is often chaotic and unpredictable. Go for a walk and you may get an idea. Take a shower and you might get another. Ideas come when you least expect them.
Enjoy yourself, laugh and above all have fun. David Ogilvy wrote in his book Ogilvy on Advertising:
“Make it fun to work at your agency. When people aren’t having any fun they seldom produce good advertising.”
“A serious-minded person has few ideas,” wrote the French author Paul Valéry. “People with ideas are never serious.”20
Get away from your computer, notebook or sketchbook and get inspiration from the world around you. Look at the world you know from a different perspective every day. Take a different route to work, take a bus instead of driving your car, or maybe don’t show up at all and spend the day at the cinema or at the zoo watching chimpanzees.
Ideas come when we least expect them, and that makes what we do so exciting.
I can imagine some of you are wondering how, if creativity is so chaotic, can it work within a disciplined business framework?
We see other people answering this question by formalizing their process into a workflow. You will probably have seen this if you’ve bought or worked in creative services. Former head of design at Google and Yahoo, Irene Au outlined: user research; followed by interaction and product design; visual design; then prototyping and developing. Skills required for this process include: formative and summative research; qualitative and quantitative data collection and analysis; psychology, anthropology, and human-computer interaction. Deliverables might comprise wireframes, prototypes, functional specifications and flowcharts.21
Where is the space in her workflow for creating work that is anything more than the “adornment” she describes when she wrote so dismissively:
“They [visual designers] understand that visual adornment is meant to support the experience, and not be the experience.”
Her assessment of creativity shocks me. In her article, she wrote about the question of whether to hire a visual designer:
“[…]hire a visual designer on a freelance basis who can create the look and feel of the site, deliver a style guide, and work with your front end engineering team to build the visual assets (e.g. grid, typography, color palette, icons, button styles, etc) into a front end library that then makes it easy for developers to create UI that is consistent.”
Is it any wonder why Au and others have such a low opinion of how designers work when we are busy promoting processes like atomic design?
A process is a tried and tested method we’ve used to do something we’ve done before. But what’s the point of following a formula? A formula will lead to a predictable and ordinary result — and who wants to make something ordinary? I hope you don’t.
How much chaos and unpredictability you accept will depend on you and the people you work with. It’s a question I often struggle to answer as someone who runs a creative business. I know that the answer lies somewhere on a curve between chaos and process. I also know how vital it is to find the right balance so that your creativity isn’t limited in any way by the parts of a process that you adopt.
That work begins before we’ve even started to create. It starts by working with others to ensure that we have a platform for creativity. It starts with a creative brief.