Weak designers believe they are artists. They eschew rules, believing them to be unnecessary constraints that serve only to stifle their visual “genius.” Such perspectives are overwhelmingly endemic amongst amateurs. Their thinking is analogous to musicians saying they don’t need to stay in time, because they just “feel” the music. Sure you do, hack-o.

Of all the design missteps to be made, the one I believe to be most problematic is a disregard for (or inability to implement) rules. Part of this relates to the fallacy that those who work in a creative setting should treat their work casually, letting their mojo hang out. As any mature designer knows, such notions are absolute bunk.

I bring this topic up today, as rules rarely come up in industry chatter. This is in spite of the fact that they’re pivotal in what we do at smashLAB—and at many other agencies/studios, I suspect.

Guide Rails

Visual invention is a funny thing. While functional considerations often need to be maintained, the number of variables involved in our work can become overwhelming. This forces us to figure out which items are fixed, or, what to use as pivot points. In a context in which one’s footing is unsure, such guide rails prove awfully helpful.

When I speak of rules or guidelines in this capacity, I’m not meaning standard design conventions, typographic best practices, or anything of the like. Instead, I’m speaking to the rules each of us (individually or as part of a team) needs to define, or adhere to, on the brands/projects we work on.

While a great many are looking for a novel approach to a visual problem, I’m generally of the mind that the real design challenge is one of establishing the rules. Once these are in place, everything gets easier, as adhering to these parameters makes future choices clearer.

Conceptual Rules

At altitude, rules tend to be more “broad stroke” considerations that are generally aspirational or tonal. They also have a direct effect on every subsequent decision made in an organization’s operations, communications, marketing, design, and so on.

In short, conceptual rules address issues of alignment. If they aren’t sorted out decisively (and early) groups tend to fall into communications tail-spins that are hard to pull out of. The tell-tale signs are found in circular discussions, in which a group will struggle with even the most mundane of questions (e.g. “What kind of message should we put in our Christmas cards?”). Equally problematic, we find groups engaging in knee-jerk “me too” marketing, in which they will—generally unsuccessfully—imitate what works for their others (e.g. “If the Wienermobile is good for Oscar Meyer, why not get one to promote our erectile dysfunction remedy?”).

When a company runs an ad that raves about its exemplary customer service, but doesn’t actually speak to customers, their conceptual framework is broken. Similarly, when I visit a hotel that markets itself as high-end, only to find barfy 70s decor in the rooms, they illustrate a deep-seated misalignment between their aspirations and actuality.

The first step in remedying such problems necessitates the establishment of organizational values, mission statements, vision documents, and brand strategies. Further down the line, conceptual rules are fleshed out through tools like content strategies, social media policies/guidelines, staff manuals, asset inventories… you catch my drift.

Implementation (Visual) Rules

Although we get our bearings through a clearly defined conceptual framework, implementation is where the rubber meets the road. I argue that anyone can get to 80% pretty easily, therefore, it’s the last 20% that becomes the real kicker. For most brands, this small but pivotal difference is often achieved through good design—particularly the details that most people only experience emotionally.

Details are a messy business, though. This is because there are so goddamn many of them. As such, any designer worth his or her salt will work to minimize variables early in the process; a system with overly many variations and exceptions is just too difficult to manage.

Visual rules involve such seemingly banal points like: determining common placement between images and type; using a consistent paradigm in navigation states (e.g. on rollover, all of our buttons will appear to be pressed down and also increase in contrast); establishing safe zones around visual elements; nailing down standard radius/radii (e.g. 5 pixels, 10 pixels, 15 pixels) on rounded elements or boxes; implementing grid systems that can be employed identity-wide; and, selecting a small number of type treatments to do most of the work.

While this may sound tedious, this sort of clarity and rigor results in brands, even at seemingly inconsequential levels, feeling “right.” A suitable example of this is found in the tools IKEA sells: from the functional ideology employed in their creation, to the consistent logo placement, to the intuitive injection molded packaging container (allowing you to see exactly where the drill goes), to the lack of any frivolous styling, right through to the faux-Swedish “Fixa” name. IKEA’s products and brand assets always feel like IKEA because the rules are stitched right into the DNA of everything they do.

A Wake-up Call

Rules allow for consistent alignment of elements and stronger brand recognition; meanwhile, they allow efficiencies to be found, from faster decision making as a result of clearer guidelines, to easier coding for developers, due to fewer exceptions.

Although rules are in no way limited to the web, their influence is particularly noticeable in this context, due to how many working pieces are found in a website (i.e. language, interaction elements, photography, metadata, forms, illustrations). I learned this lesson the hard way in designing our site, MakeFive.

Decisions I made early on impacted everything that followed, and some of them made things difficult as time passed. I learned that using magenta as a key color resulted in warnings and alerts being harder to identify as they would typically use red; not defining the base colors carefully enough meant lots of manual labor to later bring them into alignment; additionally, conventions that worked on the first pages I designed weren’t as effective when we needed to create things like modules that would be inserted into other social networks.

Many skirt the process of establishing guidelines because they mostly work on small projects and they simply haven’t thought through as broad a set of potentialities. Nevertheless, as one’s projects become more exhaustive, something becomes clear: the more complex the system, the more you will need to create rules.

From Top to Bottom

We recently completed a relatively exhaustive design process for the people at OpenRoad, for their ThoughtFarmer product. The new approach hasn’t been released yet, but when it is, you’ll see just how the rules we established tie the system together. (You can get a sneak peek of a few elements in ThoughtFarmer’s Flickr photo pool.)

We began their redesign with an exhaustive Discovery process that helped us determine a clear strategy/direction and defensible position; this informed brand values, core messaging, an elevator pitch, content strategy, visual direction, and tonal guidelines. We then established a conceptual framework centered on an agrarian construct. This informed image and language selection and led us to rely on seasonal and thematic constructs that shaped treatments.

At the most granular level, we isolated our core visual tools to a roughly drawn seed and line. Together, these two shapes became the building blocks of the entire identity. With these in place, we had effectively established the system with a big idea and approach, right down to the smallest of elements. From there, the rules simply became easier: from the proximity of image to text, right through to the voice and demeanor found in website copy.

Admittedly, this isn’t an easy process; rules take time to establish, and as you work through a project, some can become limiting, requiring reconsideration. The beauty in setting such a thing up is found in the depth and strength of the finished work. While most lean overly heavily on type, color, or a logo, failing to establish a sufficient number of rules, a well-developed system spreads the load to a broader number of elements.

For a brand like ThoughtFarmer, this will result in a presentation that evokes strong reactions with potential customers, while conveying a single cohesive message to users. By creating a rule-driven system, their brand will become increasingly “ThoughtFarmer” as time passes, whether it’s found in a ThoughtFarmer email newsletter, their mobile application, or even the umbrellas and t-shirts they’re using as promo items.

Do yourself a favor; make some rules.