Designing Design Jam, Pt 1

For the last quarter of two thousand twelve, I worked with the founders of Design Jam to design and build a website to replace the organization’s existing, partially sewn-together wiki platform. The team was lovely to work with: Joe Lanman, Johanna Kollmann, Franco Papeschi and Desigan Chinniah all contributed their personal time and effort to realize the project.

The project brief was all-inclusive in regards to the design and development of the website, but left out formally considering a revised or new brand identity for the organization. This was intentional, for sake of budget and time. Historically, event organisers had the creative freedom to craft a local identity, which might occasionally use basic visual elements of the parent group.

The identity, so to speak, was a slightly haphazard application of Sketch Rockwell (often substituted with Cabin Sketch).

DJ-templogo

The initial visual designs for the website used an uppercase application of Cabin Sketch, with a bit of kerning and resizing of individual letters; a small attempt at connecting the new website with the existing material.

mast_font

The client approved the designs with this logo, and we moved forward.

Except, it bothered me.

The new website was a real step on the founder’s part to bring the impressive collective of events they started two years ago to a wider audience. The group is entirely non-profit, and as such any promotion comes from the founder’s own pockets. I saw a gap in between the serious (paid) effort of the website and the brand they stood behind. The existing font felt uneasy and frail in the new context.

The catch being, of course, that it was out of scope.

The titles, quotations and taglines of the design are set in Quatro Slab. I considered a version simply using this face in the Ultra Black weight.

mast_quatro

The team weren’t keen on the idea. They, quite validly, preferred to keep the casual, hand drawn and essentially unprofessional typeface as it — I speculate — better represented the democratic nature of the events.

I wondered, was there a middle ground?

After a few poor trials trying to fuse the sketch lines of the original with the slab serif, I had a go at it by hand. With a few printouts of Quatro Slab as reference, I penned the nine letters in my sketchbook (my luck to work with a title without repeating letters).

image_sketch

I scanned the sketches and overlaid them on the computer with the precise machine letters. With a bit of manipulation in Photoshop, I extracted rough outlines: texture cut-outs. I then converted each letter to a vector object in Illustrator, with a bit more custom refinement.

image_raster

The result is a mix of the clean, mechanical lines of Quatro Slab Ultra Black with the digitized sketch and shading lines. While it isn’t likely to find its way into a design hall of fame, I believe it is a suitable balance given the time and monetary constrains of the project. The client agrees, and it is finding its way into new configurations, as seen on their Facebook and Twitter profiles.

DJ_Logo_web

Quality and velocity

or, Maintaining a standard of design and code quality in a lean environment

A standard of quality

It goes: Strive for quality in work. Require a high standard of quality in products and services, in business. In all things: quality of design, quality of code, quality of content, quality of usability and accessibility.

How do we define a high standard of quality?

One way of valuing quality is as a measure of craftsmanship.

Craftsmanship, to quote Richard Sennett, is “a basic human impulse: the desire to do a job well for its own sake”. Craftsmanship, by definition, implies a learned — or, more broadly, a practiced — skill in a particular craft. Craftsmanship, then, is an implicit standard of high quality.

In his article Crafting the Front End, Ben Bodien considers the attributes that make a craftsman (craftsperson) the maven of their craft. They are, paraphrased: “an appreciation of good work, a belief in quality at every level, vision, a preference for simplicity, and sincerity”. Further, the article explains that a craftsman is adept at his skill by maintaining a personalized toolkit, specialized to his strengths.

Quality in collaborative work then is finding the best designers, developers, writers and content creators; those who excel at a craft and expect the same of peers.

Craftsmanship and delivery

A high standard of quality and craftsmanship would suggest careful, considered effort and refinement over a long duration of time. In an environment of agile development and lean principles —  frequent release for purposes of quantitative learning — is there a conflict between work quality and the timely delivery of product? If the goal is to constantly test a product to gain user feedback and an understanding of progress, are the two constants — quality and pace — at odds?

As it stands, gaps in traditional ways of working allow for output without validation. This applies to design decisions as often as it applies to product research and feature investment. As with development, if allowed all the time in the world design quality will stagnate or diminish as authors add more and refine less. Rapid iteration is not counter-intuitive to a good design process. In fact, it is the opposite. The early concepting and sketching stages of design often need an exhausting devotion to the repetitive generation of ideas. The strength of visual design is in iteration. Similarly, rapid prototyping does not necessitate haphazard, disposable code.

The proposal then, is that there is no inherent compromise in essential — fundamental, quintessential– quality in work and the rate at which it is completed.

Elements of craftsmanship

Accepting that duration of products will differ, the pace of completion will vary, and unforeseen variables will disrupt workflows: how can we best infuse an essential standard of quality in our work? What elements of craftsmanship can shape our process? What elements of craftsmanship are at the heart of work we take pride in?

Consider a draft list of candidates.

Fundamentally usable design

Get things straight from the beginning: start with fundamentally usable design. Paul Schriver recently wrote on the notion of  ”Minimum Usable Design”. While the method he describes doesn’t quite live up to its premise, the term (which, admittedly is a bit silly) contains a kernel of truth. That is, favor simplicity and usability by designing for the largest user audience first. Design the aspects of a product or service that are relevant to a broad set of users. Avoid designing every feature or layout.

As we establish basics, add specialized features in iterations; prioritize the design process. In doing so, we save time and sidestep the risk of diminishing returns, as explained by Dmitry Fadeyev in response to Schriver’s article. He writes:

Once you implement the core foundation, you’ve satisfied most users, and as you go up from there, adding more and more features and refinements, the payoff for your efforts will steadily fall.

A smarter design process produces less waste and better design. This is especially crucial if the product is nested in a responsive web design workflow. Convey a broad design vision at the start, iterate as the audience returns measurable needs and the technology becomes less opaque.

Accessible, measurable concepts

Accessibility is critical to early user-testing, whether as designs presented for feedback or in product prototyping. Keep design straightforward: free of embellishment and difficult color or typographic choices. Thoroughly consider decisions, unapologetically remove unnecessary features or flourishes that put accessibility and testing in jeopardy.

A prototype or Minimum Viable Product (MVP) must be usable by the users testing it; measurable feedback is only useful if consistent and trusted. In cases where a single technology or browser scenario is not specified in early testing, always aim for broad compatibility on different devices.

Do not lose sight of established best practices. Progressive enhancement, web standards, image optimization and a mobile first approach are more important than ever. Remember your audience and their capabilities and limitations. Technology bootstraps and boilerplates, by their nature, often prepare for every contingency. Bloated with fallbacks and callbacks for edge cases — pandering to deprecated browsers and strutting the latest clever Javascript framework — prepackaged boilerplates are liable to become a hinderance if the markup survives to the late stages of product development. Avoid temptation, be wary of shiny things. This may seem dogmatic, but it is important to avoid points of no return in development. A bit of research and discussion with peers to weigh the benefits against the needs of the product will, more often than not, fend off the unforeseen implications of using untested technology in otherwise stable development environments.

Follow the rules! The Web Content Accessibility Guidelines (WCAG) tell us everything we need to know to build compliant web services. Additionally, keep note of HTML5 support for The Roles Model (ARIA). Be mindful of users with visual impairments and learning disabilities. Simulate users environments where you can, consult with experts where you cannot.

User experience modeled on shared and personal learning

Ben Bodean, in his article on craftsmanship, wrote on the importance of a craftsman’s toolkit. He provides it as a metaphor for the tools and knowledge we collect to enable our craft in a chosen field. We specialize each toolkit through the tools, and individualize by our unique, particular experiences.

In terms of design, our toolkit is a personal collection of layouts, concepts and recurring patterns that we find online, in publication, on the street. There is a parallel to the photographer’s morgue of editorial shops and studios. It is the scaffolding borrowed from the shared libraries of our peers; the templates and stencils we forage to fill the gaps in our software applications.

Design, and the process of establishing user experience, is stronger for shared material. Building on the learnings of others makes for an efficient and timely process, but more importantly reduces the potential for repetitive mistakes. Accepted user behaviors, design patterns — a cumulative result of the trial and error of others.

Modular, reusable patterns of code

In the same way, front end development should encourage reusability. Stop redundancy and repetition by stashing pieces of code. Pool from previous projects, build a centralized repository. Use snippets in text editors. As you assemble a toolkit, prepare a collection of common, reusable markup and style patterns. Examine standard elements for commonality; how often does the underlying markup for lists, headings, tables, navigation and content styling change? The best minds in the industry insist on modularity — for example Dan Cederholm’s pea.rs, Jeremy Keith’s Pattern Primer and the BBC’s Global Experience Language.

If possible, build and keep lightweight framework skeletons and vanilla themes with basic functionality, without the frills. Import entire bits of previous projects when starting something new. Be lazy, efficient and advocate cohesion.

Output adhering and contributing to, a guide of living standards

The simplest way to maintain quality is to ensure consistency. As organizations and teams often change, the most reliable way of keeping a legacy of regularity in work or appearance is through guidelines, or style guides. Newspapers have written and adhered to their own language style guides for a century; transportation networks, large corporations and cultural institutions achieved visual uniformity through graphic design in the mid-20th century. Style guides are keystones of modern branding.

Design guidelines determine typographic selection, a color palette, image treatment, the outlay of a complex grid system. Language style guides set a tone of voice, punctuation and spelling, the context and definition of words.

In her article on style guides, Anna Debenham provides a number of excellent examples, as applied to both design and front end development.

Development guidelines offer the same possibility as their printed precursors. From detailing code conventions as minute as indentation and capitalization to providing accessible and standards-compliant examples of common markup patterns, development guidelines have the potential to persist as evangelists of good code on ever-shifting products.

As software products mature, the developers and teams mobilized to build them often move to other projects. In an agile work environment, it is not uncommon to bring on developers from outside the team as needed to fulfill a temporary increase in work. Every developer arrives with different experiences, opinions and preferences. Proper documentation and guidelines are a practical way to stop your product from evolving into a zombie Frankenstein, cobbled together from wildly varying bits of code.

It is useful to start with the conventions of others. Google, Tait Brown, Paul Lloyd, Nicholas Gallagher and Richard Hallows all provide wonderful examples. However, for an organization with shifting staff, writing one as a team is ideal. Take inspiration from other guides, but taylor it to the team’s quirks and practices. The document is not static, but always open to correction and expansion; a living standard. Dock this knowledge in a versioned repository to take advantage of branching and revision history.

On the topic of design, it may not be appropriate to place brand or visual guidelines on an organization, particularly if the organization specializes in making products for others. Instead, perhaps an umbrella guide of suggestions, nudges and hints to bake in an instinctual feel of connected identity.

Collaboration

To this point: Essential quality as elements of craftsmanship, placed brick by brick as a foundation for your workflow. However, as it goes, knowledge isn’t very useful if not shared. Craftsmanship is a fine thing as an individual. Collaborative work amongst talented makers, however, is only as successful as the platform they share.

Define and share guidance. Encourage peer reviews, critiques, group presentations. Expect technical documentation and open data culled from research and measured learnings. Centralize resources: single points of access for design assets and templates, repositories of protected source code.

A proverbial well-oiled machine

The less obstacles in a product cycle, the sooner users give feedback, the stronger a design — a hypothesis — pushed through iteration will be. By establishing a standard of quality, focus can move exclusively to rapid release cycles, testing and intuitive decision-making. By establishing a standard of quality, all output — no matter how temporary or disposable — is accessible, lean, and fundamentally usable.

As work cycles inevitably stagger or drift, pause and reflect. Nothing is so urgent that it is not susceptible to questions of relevance. As Ben Bodean wrote, on craftsmanship and quality:

A good craftsperson regularly takes a step back from their work, and questions every facet of their product for its precise alignment with their core values of quality and sincerity.

Design and social responsibility

I read the First Things First manifesto in 2002, near the end of my third year in college as a student of Graphic Design. Aesthetics, visual organization, typography, design theory, the principles of modernism and gestalt, conceptualization, message and symbolism — the fundamentals locked in. The discipline is broad: editorial, advertising, corporate, exhibition, publishing, packaging, educational, web design. The field seemed to offer so much possibility. A great deal of choice and a binding sense of determination.

The design community outside the university walls, however, debated. Questioned and reassessed our profession — a discussion spurred at the end of the last century on a designer’s responsibility as a citizen.

I read the manifesto. I read Adbusters, Emigre and No Logo. Society of the Spectacle found its way onto my bookshelf. I minored in Sociology and studied the results of globalization on developing nations under the authority of the West.

It had its effect.

Under this (clearly liberal) sphere of influence, I pushed through my final year of study with a growing skepticism and unease. Often this appeared as cynicism or apathy; in design as satire. In better moments, it let everything unhinge, resulting in truly spectacular design experiments. Saddled with a reckless anti-consumerism and the lofty ideals of youth, I graduated with a mission to do something good — something responsible — with my career.

Pragmatism

Someone remarked to me then, on my intent: “Oh, to be twenty-three again”. I found it incredibly patronizing then, as now. In truth it points to a glimmer of insight that innocence and naive idealism are lost in age, traits often envied when imagination or innovation appears stifled.

The work was corporate telecom, then consumer electronics. The idealism faded swiftly with each rejected interview, with each weekly, insufficient paycheck.

Working later with art galleries and artists, while not doing much to save the world, felt like a worthwhile endeavour and supported the arts, in its own way. Chasing good design has always been its own reward, and good design often comes from deep-pocketed clients.

Headshift initially piqued my interest with their media, educational and third sector work. They initially did work that aimed to incorporate a social good while using technology to connect people and businesses together. Open communication, collaboration and knowledge sharing; generally making day-to-day lives better.

Often, doing interesting work is enough. Doing interesting work with incredibly talented and clever people is even better.

Except.

Every so often the lion resting quietly in the recesses wakes up and makes some noise. And lions want to be heard.

Responsibility

The thing is, it is very difficult to define what it means to practice design in a socially responsible way. The challenge is bound to the environment, politics, labor markets, and education. It requires an acknowledgement of the sociological and psychological impact of consumerism and advertising on people and culture.

For all the debate, the hand-wringing and the manifestos: there is no consensus. Do you work exclusively for non-profits? Dedicate yourself to multinationals by day, work a soup kitchen on the weekend and send the annual Christmas season pro-bono donation? Offer freelance to the occasional cause that piques your interest? Turn down pitches for tobacco, alcohol, oil?

Voluntary effort isn’t always worth the effort. At times, a charity exposes itself to the same hypocrisy, cronyism and corruption as any large corporation. Ill-informed or poorly trained employees in the third sector can dilute their organization’s message and cripple efficiency.

Weigh these challenges against a bigger contradiction: the free market is right. Competition and innovation are vital for an individual to create and distribute amazing things without much interference from others.

I admire people like the late Tibor Kalman who seemed to find a balance between contradictions. It’s curious to think the most effective approach is often the most uncomfortable; e.g. social awareness coupled with product advertising for Benetton.

What altruistic role can design have in a global, corporate-driven, branded consumer culture?

Raising awareness, to start. We can encourage organizations to research clients, find common values. Avoid designing for products without perceivable value. Be subversive. Question motives. Try to do something that matters. Educate.

Beyond that? I don’t have an answer yet. The notion of design with social impact is unique to every individual. How effective design is for creating good is subject to question, often beholden to cynicism.

Aspiration

I believe it’s important to hold onto motivation and instinct, however muddled.

It is more practical to suggest that we stay pragmatic and pursue socially responsible work as and when possible. Say: inherent flaws aside, each new project will be worthwhile in its own right. Chase profit on corporates to subsidize a discount on non-profit. In small ways, attempt to help people connect and solve social problems, drive digital innovation and foster sustainability. In time, the culmination of effort will stand as a step closer to facilitating a positive impact.

I would rather say: only chase work that matters. Let projects fail. Demand a movement of transformation and create change. Use design as protest and enabler. Couple design with strategy and technology to make an impact. Do good things. Effect change.

Write-up: TYPO London 2011 (Thursday)

Places

From 20-22 October, London was host to the TYPO 2011 conference. The conference started sixteen years ago in Berlin, continuing without interruption since. London holds the distinction as the first event held outside of Germany. The format: three days of talks with appearances by more than forty speakers. The schedule is quite ambitious. Talks begin in the early morning and continue well into the evening: there is no filler and the expectation of quality is high. Erik Spiekermann (always direct, brutally honest, wonderfully hilarious) and Adrian Shaughnessy acted as the glue of the conference, holding the space between speakers in place.

The theme of the conference is perhaps best summarised by a point Dale Herigstad made in the very first talk, later expanded upon by Tim Fendley. Spaces become places when they contain meaning; places gain definition with name. The speakers, organisers and audience members all arrived from a great many places, and the work and conversation shared amongst them reaches even further.

While I currently design and develop for the web, my background is in print. I formally studied as a Graphic Designer, schooled in the principles of the Bauhaus and Swiss design. Towards the latter half of university, I experienced the autumn years of post-modernism in design — a divergence that encouraged experimentation and insisted on questioning legibility — an experience that certainly influenced my understanding of design as much as formal modernism. The speakers who volunteered their time for this conference came from a genuine mix of design and art backgrounds. Design conferences of this scale are quite rare, and I feel quite fortunate to have had the opportunity to see the work of so many of my peers and heroes, to view the work as presented.

The quality and tempo of the conference was perhaps set by the first day of talks, a series to kick off the weekend in great anticipation.

Continue reading

Snapshots: Week of 28 March, 2011

Shades of Grey (with a bit of color)

The business cards I ordered from Moo arrived today. Considering they have been digitally printed, the quality is certainly good for the price. I particularly like the recycled card stock, a very subtle smooth texture with a visible grain. The design was rushed out this weekend in the hopes that they would be delivered in time for Glug — which I’ll be attending tonight. Selecting Caecilia for the typography was smart, and the color actually matches what I intended. Next time I order though I’ll make sure to make the design a bit more interesting.

p1050197

Continue reading

Peacebones

After more than a year and a half of procrastination, false starts, and restarts the redesigned www.tomhurlburt.com has launched. Under the surface the site is a custom wordpress theme with a few very specific plugins that attempt to give the appearance of a more dynamic infrastructure, without all the necessary programming. Consider the design a perpetual work in progress. Tom is a Camera TD at Blue Sky Studios.