Quick Tip: Don’t Let Your Designs “Evolve”

A Web Designer’s work is never done, even once a website is launched the job of testing, analysing and reiterating is only just beginning. But iterating is not the same as letting a design evolve. If your designs are evolving you’re doing something wrong. Here’s why.

Evolution is a Linear Process

When something evolves (and we’re usually talking about living organisms) it changes in progressive stages. Stage A alters and becomes stage B, stage B into C, C to D and so on. This leads to imperfection because at no point does evolution take a step backwards.

A Giraffe’s Tale*

*Bear with me, this is a good analogy I promise.

If you’ve ever read anything by Richard Dawkins you may have come across one of his favourite examples of evolution at work; the giraffe.

We begin with genealogy. The genetic lineage of all mammals can be traced back to a fish of some kind, and our mammalian anatomy (believe it or not) still mirrors that of our fishy ancestor. As mammals have evolved, parts have shifted, the skeleton has altered, fins have become limbs, organs have moved and we’re now fairly far removed from anything sea-dwelling.

The Recurrent Laryngeal Nerve

This is where it gets interesting. The recurrent laryngeal nerve is part of the vagus nerve which travels from the brain to the larynx, sending signals about how we speak (or bark, or whatever). It was present in our fishy ancestor, just as it’s present in fish and mammals today. Its route from brain to larynx should be pretty direct in all cases, and it is in the case of the fish, but it also passes through one of the main arteries leading from the heart.

Again, this is fine in the case of the fish, but as evolution took hold and mammals developed from this creature, the heart migrated into what became a chest cavity taking the laryngeal nerve (looped around the artery) with it. In human beings this nerve now travels from the brain, down the neck, into the chest and around the aortic arch, before heading back up the neck to the larynx.

The same is true of all mammals; the example is demonstrated even more spectacularly when you consider the absurd detour this nerve must take in the body of a giraffe!

This arrangement is the result of an imperfect linear process.

Where Were We? Ah Yes, Web Design

An evolutionary process in the context of web/product design invariably also leads to imperfection. As designers we should allow ourselves to make mistakes, but then back up to where we were confident of our decisions and head off down another lane, even multiple lanes, of investigation.

Julie Zhuo illustrated it really well recently in her article about design processes. Here she compares the process of a junior designer vs. that of a senior designer.

Whether or not this is a fair analysis of the way junior designers work (or even whether there’s such a thing as a finish line), the logic behind the workflows remains true.

A Quick Example

An example might make this clearer. Imagine you need to alter a web page structure because of unforeseen changes. Let’s say you need to use differently sized (smaller) ads in the sidebar. The new dimensions might not perfectly match the grid you’re using for the rest of the page, so you alter the width of the sidebar manually.

But now the relationship between the sidebar and the main page area doesn’t look quite right. So you alter the width of that too. With that, the grid’s looking better, but the line length (the measure) of the main content is suddenly way too long. Solution? Make the font-size larger on body text!

Now you’ve fixed your measure, but in doing so you’ve ignored the modular scale of your typography and all other text looks disjointed in comparison. Rest assured that chipping away at those other font sizes will reveal new issues too.

This is Going Wrong

You may not have noticed, you may think you’re just tweaking the design, but it’s actually evolving and inevitably presenting more and more problems.

Conclusion

In our example we should have gone right back to the start, taking all elements of design into account.

We call this cyclical process in design iteration; returning back to the drawing board, researching, wireframing, prototyping and building. Iterating makes sense and it allows designers to steadily improve a product. But don’t be afraid to take steps back and head off along another path, otherwise your work could be evolving in the wrong direction.