posted by Matt Ward on Jun 15, 2010.
Despite the somewhat different title, this article actually discusses the important relationship between graphics and layout in design, and was inspired by a recent experience changing my daughter’s diaper. Seriously. Sound odd? You’ll just have to read the article to figure out what it’s all about!
Have you ever had one of those strange moments where a design idea or concept just suddenly pops into your head, even though you’re doing something completely unrelated to design? I had one of those moments recently, and it actually came while I was changing my daughter’s diaper!
I’m serious. This actually happened to me, and it all had to do with the cutesy little images that are printed all over kids’ diapers these days. In this article, I would like to share the moment I had with you, and consider the implications of my thoughts within the wider context of design.
So let me start with the basic story of what happened.
My daughter is two years old, and though I had hoped to be past the potty training stage by now, she just isn’t ready yet. So, we still have her in good old fashioned disposable diapers. I know, it’s horrendous for both the environment and our bank account, but neither my wife nor I could really stomach the thought of actual cloth diapers. Regardless, I’ve been changing diapers for two years now, and for almost that entire time, we’ve been exclusively using one brand name.
Recently, however, my wife came into possession of a coupon that entitled her to a significant discount on a competitive brand, and we decided to give them a shot (okay, she decided – I really don’t have much input on diaper selection). Anyhow, we bought a box, used them for a while and ultimately decided that we liked our old brand better. They just seemed to have a somewhat higher quality and fit my daughter better.
That being said, the other day I was getting her ready for bed and giving her a nice fresh diaper. It was the first one I had changed since going back to our original brand. As I was doing the diaper up, I suddenly found myself thinking that I actually liked the “design” of the other ones better.
The thought lingered for just a moment, until I suddenly realized how wrong I was. What I liked was not the actual design, but the graphics!
As strange as this may seem, it’s true. You see, these days its pretty much impossible to buy plain white diapers anymore. They all have some sort of printing or pattern on them, usually featuring characters from some well known child-centric franchise (think Sesame Street, Winnie the Pooh etc).
Anyhow, the brand that we weren’t so fond of actually had character faces right at the top of the diaper’s front side, just beneath where the belly button would be. These faces turned out to be a perfect target for aligning the Velcro tabs that hold the diaper closed. Considering that I sometimes get criticized (lovingly, of course), for attaching the tabs too low, having this “target” was actually pretty useful.
Unfortunately, the brand that we went back to doesn’t have these faces, and that’s why I had the sudden thought that I liked the “design” of the other ones better. But I wasn’t really thinking about the design; I was thinking about the graphics.
Now, many of us throw the words “graphic designer” around all the time, usually in reference to ourselves. So, obviously, the consideration of the graphical elements in a design is important. That being said, however, when it came to my diaper experience, I realized that, though I appreciated the ability to use the cartoon face as my Velcro target, it was really just a superficial difference, and didn’t improve the usability.
(Yes, I just used the term usability in reference to diapers.)
The point, though, is that it was all the other elements of the diapers that made us decide to stick with our original brand – things like fit, quality, absorption and so forth. The graphical treatment on the diapers was really secondary.
Shouldn’t our approach to design be same?
If we create websites with beautiful graphics put poor usability, what are we really accomplishing? What about a logo that looks absolutely stunning in a certain environment (say, full colour on white), but which doesn’t translate well into other situations (into black and white, for example)? What good is an ad or poster where the graphics take up so much space that they leave only a small area for tiny and almost unreadable copy?
None of these are things that we want to produce as designers (or shouldn’t be, at any rate), but I think that if we can occasionally get too caught up with the graphical side of design. When we do, we can find ourselves in danger of falling into these traps, and thus unintentionally undermining the effectiveness our own designs.
Any lesson – even those learned while changing diapers, is only meaningful if we can actually take something away from it. So, let’s look at some practical means of applying this particular lesson.
Wireframe – We talk a lot about wireframing in web design, and it’s certainly an important topic – and something that I am personally working on improving.
For the client site that I have been working on most recently, I did all my original layout work in simple greyscale, using shaded blocks to build up the general structure of the site, before eventually filling in the rest of the graphical elements. I found that this allowed me to really focus on the layout itself and how the elements interacted with each other in terms of space and proportion, rather than getting caught up with many of the more graphical decisions of the design process.
As well as this works for websites, I don’t think that we need to limit this technique to the internet. It would also work equally well (and for many of the same reasons) in application design (both desktop and mobile), and can be applied to most (if not all) forms of print design too. For instance, you could easily put together a wireframe document to be used as a general guide for establishing spatial relationships between elements throughout a longer piece, such as a booklet or annual report.
Turn the Images Off – While wireframing tends to focus on establishing answers to certain design related problems at the outset of a project, it can sometimes also be useful to take a similar look at a design during the project. This is where being able to turn images on and off can be a valuable exercise.
By stripping away all of the graphical treatments, you can ensure that the layout portion of the design can actually stand on its own, and is not necessarily dependent on the rich graphics.
In a recent article over at Drawar, Scrivs has an article that experiments with the redesign of Brian Hoff’s Design Cubicle, turning off the images to leave the site with nothing but “typography and white space”. The article goes on to say,
If this all his site was I could still find myself enjoying the design and reading what is on the page. I wouldn’t be blown away, but design isn’t meant to blow the person away every single time they look at it. Give them something easy to read and although they will underestimate how great your design is, they won’t complain about how terrible it is, they will just go about their business doing what you want them to do on it.
It’s an interesting experiment, which really demonstrates the overall strength of the Design Cubicle’s new design. It also shows how stripping away the extra graphics can help reveal a lot about the inherent strength of a design.
Go Minimal – How about just trying to design something with a minimalist style. It doesn’t necessarily have to be a client project either (though if you can get paid to do it, all the better!). You could build a theme or template for your favourite CMS, such as WordPress, Drupal or Joomla. If you like the results, you could even try selling it!
The point, though, is to try to put together a design that doesn’t rely on flashy graphics and visual effects. It’s harder than it sounds, and I’d bet that if you took the challenge you would find yourself spending a lot more time considering issues of spacing, position, typography, leading, tracking and so on.
These are, of course, all things that we should be considering in our designs on a day to day basis anyhow, but which are prone to being lost beneath the weight of the wider graphical treatment. Working with a minimalist style can really help put the spotlight back on these important elements, however, allowing you to focus, undistracted, on improving your skills in these areas.
For many of you – and especially those who are not parents – this seems like an bit of an unorthodox kind of article. After all, it’s not every day that I write about my daughter’s diapers. Sometimes, though, we learn important lessons in the strangest places, and my diaper experience was an interesting one that I thought would be worth sharing with you all as a means of highlighting an important design principle.
What do you think about that principle? Do we sometimes get too focused on the graphical side of design and not spend enough time on basic layout and typographical considerations? What do you do to help avoid or alleviate this problem?Post A Comment
Also from Echo Enduring Media: