Navigation

How Limitations Improve Design

Design, How To, Web Design | Aug 23, 2010

We often complain about the multitude of limitations which we’re faced with every day as designers.

From browsers, to screen resolutions, to user interactions, we seem to constantly be struggling to find some way of thinking outside the tiny little box of “best practice” which we’re constrained by.

Limitations are abundant but are they really such a bad thing? Is it possible, even, that they actually produce far better results than if we did not have them?

Ikea for example, starts with price and then work backwards. Their main concern is the price of the product to the end user. It’s up to the designers to create something appealing which fits within that.

37Signals wrote a whole book about how they operate with similarly heavy restrictions when building web apps; they set a date to launch and then they stick to it, no matter what.

 

Sometimes Freedom Isn’t a Good Thing

flash

Without constraints, things can get crazy. There is no better way of outlining this than by looking at a platform with generations of unrestricted designs that have been… well.. awful. We are of course talking about our old friend, Adobe Flash.

Now I’m not saying that all Flash sites are bad, or that all people who make them are bad designers. Nothing like that. The fact remains, however, that as a platform Flash has very few design limitations which has lead to some very questionable Flash sites in years gone by.

The sites I’m talking about are the ones which go full screen as soon as they load, have some crazy navigation that involves dragging a carrot over to a bunny rabbit and then waiting for a big animation to complete before the next page loads and you’re presented with equally confusing navigation options.

Designers of these types of interfaces often think they’re “fun” – but usability case studies frequently prove them to be nothing more than a visual explosion of terminal car accidents. Being able to do so much with Flash with relatively little effort is dangerous. It takes away the mentality of “What should I do?” and instead promotes the mentality of “What can I do?”

An animation, graphic, sound effect, or interaction without purpose isn’t design, it’s decoration. Unless what you’re adding to the design is in some way contributing to the message which you’re trying to convey to the user, it isn’t worth anything.

The most important part of any design is the message: good design sends the same message to everyone. It should leave no room for interpretation.

 

Limiting Color

color

Digging down into specifics, we can look at some key areas where limitations can greatly improve design. The first of these areas is color. Cited by Bill from GoMediaZine as the second rule of becoming a master designer, limiting your color palette is extremely important.

One of the easiest ways to spot an amateur designer is when they use every color under the sun in a single piece. So how far does this go? Well, as Bill puts it “Reducing the number of colors we use in our design will make the piece feel consistent. Basically, everything will look like it goes together. Just like a sports team’s uniform or a company’s branding – we want a uniform over-all look to the colors.”

Think about some of the best designers in our industry. Most, if not all, tend to use a small but vibrant palette for all of their designs. This is just one of the ways in which scaling back the number of variables in a design can make it more coherent, succinct and even unique.

 

Limiting Typography

type

Typography works in a similar way to color, if not on a more extreme scale. Bar a few exceptions, over-using many fonts within a single design can become confusing and even difficult to read. The human eye likes to settle into patterns of recognition, introducing brand new types of type (pun intended) can greatly hinder this and interrupt the flow reading.

Usually a fancy font will work well for large headings and will add to the look and feel of the design as a whole, whereas body-text works best with a fairly standard font that is easily readable at small sizes.

You probably haven’t seen any designs using Zapfino for all their body text any time recently for this very reason. Restricting our use of typography, once again, contributes to a better and a stronger overall design.

 

Limiting Size

1200

In terms of web design, we’re currently at a very interesting point in history. Where are the screen sizes going? Some sites, particularly well known blogs, are starting to move towards the 1200px wide style layouts. There are even adaptations of the 960.gs CSS framework such as 1200.ws which support this move, but is it the right one?

Generally speaking, sites have now gotten to the same sort of width as a printed magazine in screen resolution. There’s an important question to ask here before considering making your site much wider and that is: Why are printed magazines not wider? The obvious answer is that they would be annoying to hold and slightly too large to carry around comfortably but there’s another important consideration too.

The human eye can only comfortably read a certain distance from one side to another. There comes a point where you have to start turning your head from side to side to be able to look at different segments of a page individually. When was the last time you took in a broadsheet newspaper in its entirity? Chances are that you never do. You fold it or you read it one segment at a time, turning your head in turn to see each area of the paper.

So where does this mean screens are going? Some people think they’re going to keep on becoming larger but devices like the iPhone and the iPad would suggest that they aren’t going to get bigger, they’re just going to get better. It’s great being able to fit more stuff into a larger, wider design but don’t forget to consider the repercussions. Sometimes size restraints, too, can be good thing.

 

Looking at Minimalism

min

Minimalism is mainly described as using very little of everything, but if you think about it more analytically; minimalism is simply the process of applying an extra layer of limitations to designs. Where you would normally limit yourself to two or three colors for a design, with minimalism you might take that a step further and limit yourself to just black and white. The same can apply to typography, space, contrast, content, and almost any other core element of design.

Apple’s products are a great example of this. They limit themselves to about six ports on the sides of their laptops where other laptops might easily have double that.

The iPod and the iPhone have always been noteworthy not because of how much they have, but how little. In a generation of twenty-button MP3 players, Apple introduced something with four buttons and a wheel which went on to be the most successful portable music device of all time.

ejs

Minimalism doesn’t just mean using less of everything however, it means using a few things really, really well. Elliot Jay Stocks for example, doesn’t use many overzealous gradients, borders, boxes, bars or any of the other ‘standard’ layout conventions which we see plastered all over CSS galleries.

The main focus for the design of this site is on spacing and positioning. By cutting out many of the other variables, he uses positioning to the absolute maximum to convey levels of hierarchy and importance. Simple, but extremely effective.

Really good designers are always able to stand out from the crowd because they use these principles and theories as a starting point and then build on top of them. A fundamental understanding of all the different principles of great design is the best way to be able to weave them together into something beautiful.

 

Conclusion

Limitations can be a good, no, a great thing for design. Using them to your advantage is a great challenge and the more limitations which you impose upon yourself beyond those which already exist, the more of a challenge this becomes.

If you manage to work within tight limitations though, you can create something which is genuinely great and also genuinely  unique.

When you start out on your next piece of design work, try to put some of these principles into practice. Are there any areas which you can limit much more than you would usually? Try to work within tighter constraints to really push your creativity to the next level. You might just be surprised by what you end up producing.


This post was authored exclusively for WDD by John O’Nolan, a core member of the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What do you think? Have you used limitations within your work to create better designs? Have you found that limitations are actually a bad thing? Let us know your stories in the comments below…


Share this post
Comments (no login required)
  • http://www.remedycreative.com Jonathan

    100% agree. Without limitations, nothing works.
    Imagine Twitter with an infinite character allowance. Imagine if design agencies didn’t have deadlines – the studio would have a ton of fun, but the agency would die of one-more-tweak-itis.

  • http://www.flickr.com/marcostorres Marcos Torres

    Really inspiring text John, thank you for sharing your thoughs with us.

  • http://nataliaventre.com Natalia Ventre

    Economy of resources and minimalism are different, you can limit your color palette, your font choice, etc. and still come out with a very decorative design. The concept of variations is associated with limits, you can use only one font and variations (bold, italic, size) for the different elements. I think limitations are good and there’re more elements that you can limit besides color, typography and size.

    John, Rework is about business, the one about web apps is Getting Real.

    • http://john.onolan.org JohnONolan

      Hi Natalia, thanks for the heads up – I thought they’d pretty much been rolled into one! Possibly my mistake there

  • breadwild

    I have always been a fan of limitations, or boundaries, as another way to look at it. I learned about limitations in composition class while a music major. Limit yourself to a key, a range of notes, a group of instruments–otherwise you don’t know where to start, where to end, why it sounds like a gooey mess, and gives you nothing new to write next time. Bottom line, limitations actually gives freedom to the artist. Why, we don’t get bogged down and have to worry about trying to use crayons in the box. It’s like giving too many toys to a child–too many choices–they don’t know which one to play with and then go from toy to toy, and finally end up frustrated (I have witnessed this first hand in my own children).

    I once heard a story, don’t know if it’s just urban myth, but it makes a nice point. School administrators noticed that the kids on the playground would congregate and press up again the fence. It looked like they needed more room. So, they took the fence down. The kids huddled in the middle of the playground. They needed the boundaries.

    When I see one of my designers struggling with a piece, I remind them to start taking stuff away. It always works.

    Thanks for this great post and reminder.

    • http://john.onolan.org JohnONolan

      Thanks so much for your detailed comment breadwild, really glad you liked the post!

  • Paw Priego

    Sometimes limitations are the best for us to explode our creativity… it forces us to solve problems in a different way.

  • http://evanjacobs.net/ Evan Jacobs

    This is a fantastic article. I use these concepts every day in my design endeavors and definitely agree that minimalism is more about balance and logical restraint more than anything else.

    Good job!

  • http://www.bobbyadamson.com/ Bobby Adamson

    Heck yeah constraints are important! And they make things easier, I think. Where do you start if you have no limitations? It might be easy for personal projects, but even those have goals you can work towards. Constraints are key when working with clients. They keep you and your client in line with one another. That’s why we create wireframes! Nice read!

  • http://www.graphicdesignblender.com Preston D Lee

    What an outstanding article. I have agreed with this point of view for a long time. Ever since I began to embrace limitations, I have really started to enjoy my design career. If you think about it, limitations force you to be MORE creative than if you had free reign. You have to CREATIVELY solve a problem (or multiple problems) of limitation.

    Nicely written and well-put. Thanks for sharing!

    • http://john.onolan.org JohnONolan

      Thanks for the kind words and taking the time to comment Preston!

  • http://www.benstokesmarketing.co.uk Ben Stokes

    I totaly agree with sceen size – A reader will be put off if the page is set to big – It could also be destracting to have a site to large, as the user will not concentrate on what the designer wants to get across – Infomation over loads are not good!

    Great article :)

  • Daniel

    Great article! “…good design sends the same message to everyone. It should leave no room for interpretation.” This is something all designers should live by.

  • http://www.mysweetdesign.com Mike

    ‘Minimalism doesn’t just mean using less of everything however, it means using a few things really, really well. Elliot Jay Stocks for example, doesn’t use many overzealous gradients, borders, boxes, bars or any of the other ’standard’ layout conventions which we see plastered all over CSS galleries.’

    I think that sums up everything nicely. Great Design in general is all about using things really, really well.

    Something i think about all the time. Am i overdoing things, when to leave it alone and stop tinkering is a common problem not helped when you have plenty of people involved in projects.

    When you have a solid vision of what you want and stick to it things generally turn out better.

    http://www.mysweetdesign.com

  • Jennifer

    Beyond visual design constraints I’ve been a proponent of other constraints as well, such as technical, time, resource, etc. Some people have given me flak about asking what the various constraints are, saying things like, “You’re just limiting yourself.”

    I see it differently, however. I see it as enabling me to push those constraints creatively and with purpose. When I know what technical constraints may be, e.g., does our CMS play nice with jQuery?, I can then develop concepts that will work regardless of the constraint.

    Most importantly, having knowledge of constraints positions the designer (IA, developer, etc.) so that he or she can answer questions or concerns during the review process. It shows that you’ve done your homework; that you’ve thought this idea through. More often than not this has been a successful strategy for me: when I can present my designs/ideas to the client while also discussing the why/how/where/etc. questions that played a role in my process, the client sees that I did my homework and thus feel more comfortable.

  • http://www.adesignlink.com Chad Pierce

    I like this article. I have recently (when afforded the opportunity) have started to ask myself and the client. OK the site is done.. What can we do without. Not to say any part of the site is less important that the other. But i say that to emphasize waste or anything that isn’t vital to the message.

  • http://www.fuzzimo.com/ fuzzimo

    Yes if we generalize things then the article has some points. But I don’t agree that limitations improve design. Since when do limitations improve creativity? Of course it makes it more challenging if you have them, but why is that the point? The challenge should be to make a site that fits its purpose. For example, the bio-bak.nl site is great. Sure it’s a bit crazy and harder to navigate, but that’s what gives it unique identity. Basically it is what is meant to be, an interactive fun site. Not everyone has to like it, as not everyone has to like a certain painter or musician.

    • http://www.remedycreative.com Jonathan

      Limitations don’t mean ‘don’t push boundaries’. In my opinion it’s the rules of the game that actually make it more fun!

    • http://john.onolan.org JohnONolan

      Hi fuzzimo, musicians and painters are artists – designers are not.

      http://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/

      • http://www.fuzzimo.com/ fuzzimo

        Thanks for the replies!
        John, the point of my comment was not whether to label designers as artists or not. I read the article about the difference between art and design, and again I think it’s a generalized view. It’s from a business point of view; websites can be made to entertain as well and that doesn’t make them bad design. They do not necessarily have to send a message or sell you a product. Now if the webdesignerdepot website would be like bio-bak, of course that would be an awful design. But it is what is meant to be. I don’t think good design is a skill anymore then holding a brush and splattering paint. Good graphic design is based on both skill and talent. Sure anybody can learn the skill of graphic design, as you can also learn the skill of painting, but in the end talent is what makes the difference.

  • http://www.velvetant.net/blog Antonea Nabors

    Love this article! I couldn’t agree more. I enjoy having limitations. I believe it actually makes it easier to design. It is like having a set of rules that apply to every design project.

  • http://www.impressivewebs.com Louis

    Good, article John.

    What’s interesting is that when I saw the title of the article, I assumed it was going to talk about limiting choices that appear, to make things more usable. I suppose that would be a good topic of discussion as well.

  • http://www.pscyhed.be/wordpress Darkened Soul

    let’s not state that limitations improve design, let’s state that limitations may let you create things u have never thought of. or let’s make another statement: too much freedom may lead to “not knowing how to start a project”. Too much choice can be a killer if you don’t know what you want yet.
    Besides that, when it comes down to webdesign, the tools in place (not considering 3d progs and flash) create a big enough envirmonment to do something creative with.
    so not necessarely “limitations” improve design, but minimalism improves design (and i thought minimalism wasn’t just about being black and white though)

    Overall, still a good read ;)

  • http://www.sketchmyworld.com SketchMyWorld

    Thanks a lot for this article! Will try to keep up in mind some tips! And I agree that some limitations can actually help to create a better design.

  • Vamsmack

    Awesome article John. I am in the process of creating my site and this post has encouraged me to go back and revise the design especially considering I have spent so much time staring at it seems clear to me yet now going back and looking at it it seems cluttered and I seem to have spent time decorating my site not designing it. I tend to get lost up my own ass sometimes when it comes to design and just reading over this article has helped me get some of my focus back. Thanks.

  • http://www.crearedesign.co.uk/ Jarkko Sibenberg

    I agree that limitations make things more interesting. You can’t try to push the limits if there’s none. I don’t know if we naturally want to break given rules, or if we want to impress by turning something very basic into something extraordinary. Or maybe sometimes we just need some guidance. If you don’t have any limitations, it can be overwhelming and you don’t know where to start or which way to go.

    Thanks, great article.

  • http://john.onolan.org JohnONolan

    Thanks so much for all the detailed comments so far everyone, blown away by how many of you have added really insightful extra information to this post!

  • http://eyoosuf.com Yoosuf

    simple is clean, clean comes with limitations, nice post

  • http://www.mdostudio.com m a r c o

    Awesome post! Design is all about problem-solving. The limitations and requirements on the project are the problem and as designers we have to find a solution. We are not designing in a vacuum and we’re not doing just art, we need to communicate to an audience…

    By the way I love your first example of the Flash site. It exemplifies everything you were talking about!

  • http://urbanrenters.ca kevin

    Well written with good arguments

  • Kai

    Thankf for reminding me!

  • http://www.stephencarr.net Stephen Carr

    Good Web Design is often very subjective, but I think you did a good job of showing the boundaries that are needed for good sites. Usability is very important and I’m glad you touched on it!

  • Tim

    I enjoyed the article, but I did not enjoy the number of ads on teh site. You talk about improving design. How about improving it with less ads! Not to mention upon loading your site my virus scanner picked up two loading from your site. So thanks again.

    Beyond the pains described I did enjoy the article.

    • http://www.webdesignerdepot.com Walter

      Thanks for the feedback on the ads. Less ads may make it into the next version of WDD. It’s one of those necessities of this industry to have ads to pay the bills :)

      I’ll check on those warnings you’re getting, thanks.

  • http://www.securityking.com Craig

    I agree design doesn’t just mean using less of everything however, it means using a few things really, really well. Well said, great article

  • http://www.velorastudios.com Catalina Butnaru

    Maybe this is a pretty venturous interpretation of limitations. Managing limitations is a must, although I wouldn’t really consider minimalism as an example of how one can manage limitations creatively. There is a fine line between limits/ rules and capturing the essential (using a design – friendly Occam’s Razor approach). It was a pretty cool article, nonetheless.

  • http://www.geekartist.com Janice Schwarz

    For the 10 years I’ve been a web designer, I’ve always said that one of the reasons I love the field is due to the limitations that force me to find ways to work with/around the limitations to make an effective website.

    Also, I can see how minimalism can be a limitation. When working on sites, I find myself chanting “less is more, less is more” and trying to find ways to pare back the busy-ness. That can actually be quite a challenge.

  • http://aharmonyofhues.blogspot.com/ Ayush Kumar

    Limitations force us into thinking about better ways to get around something. They compel us to use our brains. And even better when used in design.

    I loved the article!

  • http://pke.nu/scan/en David

    In a short article you show us so many important tips.
    Thanks!

  • http://www.craigfordham.net Lisa Thomason

    I love the idea of design and simplicity. It’s so easy to want to over design something, great collection. LT

  • http://www.berthold-barth.de Berthold

    You’d think this article would once and for all stop all the adversion to constraits in the community, but we’ve all heard this before and started whining again the very next day.

    I’d just like to add that everything we do as designers should come with a communcative/expressive quality, and it would do us all well to remember that when we’re contemplating including copious amounts of whizzbang.
    Design without communication is just decoration.

    Design within constraints is design.
    Design without constraints is art.

    Decide whether your result should be design or art before you set out to work on something.

  • http://www.berthold-barth.de Berthold

    One more thing, a quote from Saint-Exupéry:

    “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away”

  • http://www.bestcardprinter.com Jeff

    As simple as these are, it’s still important that these practices should be used to achieve a great design

  • http://www.cardsoftware.net Amanda

    Sometimes designing to get every little skill and every latest gadget just makes a website unusable, not only because you confuse your visitors, you have confused your design!

  • http://www.ewaveinfotech.com ewaveinfotech

    Its a great article. It is given some new information.ThankYou!!!!!!!

  • Martin

    This is an awesome writeup in making a well-known point really clear. As a web developer sometime I have to deal with designers not living on the web so much and complaining about technical limitations and “boring” patterns of informations architecture and usability trying to create something “new”. I will start showing them this article which will hopefully help me convince them that they should work with these limitations and not agains them.

    Besides, I can’t agree that design without limitations is art. Doing a piece just with green rectangles on a white canvas is probably rather art then design, no?

  • http://www.ewaveinfotech.com gun

    In a short article you show us so many important tips. every things have its limitation

    but we can try to overcome by our efforts

    Thanks!

  • http://www.remedycreative.com Jonathan

    What happens when you let a child use every colour in the paint cupboard? You end up with a canvas that looks like it’s been smeared with the gunk you get out of a blocked sink.

    So remember kids, rules are good for you. If you disagree, go and sit on the naughty step!

  • http://www.jeremiahmattocks.com Jeremiah Mattocks

    From what I’ve experienced, limitations force me to be more creative and thus produce better work. I say, bring on the limitations. If you aren’t feeling creative, try imposing limitations on yourself.