Doing More With Less: Tips for Designing With Limited Resources

by on 3rd October 2011 with 11 Comments

Today we’re going to tackle some common issues that arrive not with having too much scattered content but with too little. How can you flesh out a design when your client has barely given you anything to work with?

We’ll go over some quick and easy tips for crafting gorgeous designs that don’t feel empty despite using very few resources.

Wide Open Spaces

Throw a bunch of designers around a table and you’ll find many of them complaining about how clients always want them to squeeze so much into such a little space. Non-designers tend to focus on maximization of the potential of an available web page or printed ad with little to no thought that information overload can often render even the best designs ineffective.

Figuring out how to organize a lot of information and resources in a limited space is a big problem that we all face, but it’s only half the story. Perhaps just as many designers struggle with clients who have very little to provide, both in direction and resources.

When you don’t have much to run with, a blank page can seem huge and you’re left wondering how in the world you’re going to fill it. Let’s run through a few common scenarios and see some example solutions for each.

Only One Photo, Minimal Text

This is a fairly common issue designers. You need to produce a quality, finished design but you’ve only been provided with a single image to work with. To make things worse, you only have a few sentences of text. If you were given a full page ad or an entire web page, this could seem fairly disheartening.

Tossing the image onto your canvas, you see tons of space that needs filling up!

screenshot

As we start to add standard web content, the page admittedly begins to look a lot better. By simply moving the photo to the right, we get a decent two column layout that follows minimalist trends and has plenty of nice contrast.

screenshot

Unfortunately, it’s completely boring. The elements don’t look “designed” so much as thrown together in the most obvious fashion. For some images, this might be the best we can do but it’s a good idea to really take in the photo and think about how you can use it in a more creative fashion.

In our case, it’s a studio shot on a black background. This makes extending the photo a virtually painless process. Full-bleed images have a way of looking classy and professional. We can use an almost identical layout as before and achieve a much more visually stunning result:

screenshot

Using the Same Photo Multiple Times

One really great trick you can implement when your resources are limited is to use repetition to give the illusion that you have more to work with than you actually do.

For me, this typically involves finding ways to duplicate the image tastefully and without obvious redundancy. Here’s our example project at step one. Once again, we have something that’s fairly boring and not very creative to start with:

screenshot

To give a little bit of life and variety to the layout, let’s focus on maximizing our use of that single photo. For starters, with a few layer copies and simple Photoshop layer effects, we can turn a single image into a stack of photos. Already our page is looking a little friendlier and less rigid.

screenshot

To take this idea even further, let’s turn the same photo into a background texture. We stretch it to a full bleed and then screen it back a bit. This takes that plain white background and adds much more visual interest.

screenshot

At this point, the background image is quite obviously the same photo. This isn’t necessarily a bad think but if you want to abstract it out a bit so it’s not quite as obvious, try blurring the background.

screenshot

You can go as far as you want with this. Try adding a little texture as well. The background image basically just provides us with something other than a white background for our canvas. As we build on top of something that mirrors the feature photo’s colors and composition, our design stays nice and consistent while giving us remarkable freedom to experiment.

screenshot

Filling the Gaps with Stock

Another important thing to remember is that you can always use stock imagery to help round out your resources. Even if your client has already provided you with a primary image to use, it’s often a fairly easy task to find a related photo that finishes off the design nicely.

As an example, let’s say our client gave us the following image to work with and the instruction to display it prominently on the page.

screenshot

Given that this image is so attractive, we already have a lot to work with. We can easily use the sea turtle image as the basis for a great looking full page ad.

screenshot

I like this design, but there are some functional issues. The top image is so attractive that it catches my attention right away. Unfortunately, after this, there’s nothing else to lead my attention down the page but a big chunk of boring text. Many viewers will likely to glance at the turtle and then lose interest, which is no good if we want to get them to read that secondary headline.

One solution is to hunt for a stock image to help pull that attention downward. We don’t need anything amazing, just something simple that adds visual interest to the field of white on the bottom half of the ad.

Within only a minute or two I was able to find a great image for the task:

screenshot

The concept of a turtle exhibit is now driven even further and the bottom half has a cute little guy to grab your eyes and force you to read the headline. Fortunately, photos like this are really easy to find in either completely free of extremely cheap forms. iStock has just about everything you can imagine shot on a white background and won’t break your budget.

Conclusion

Since minimal design is so popular right now, having less to work with can be a positive thing as long as you know what you’re doing. It makes for a few layout challenges, but if you’re creative and resourceful, you can easily overcome these.

Remember to analyze your imagery and consider how to extend it or maximize the space that it uses. Try a full bleed photo and see if your design doesn’t look a lot classier than before.

Also, if you’ve only got one image to work with, consider how you can duplicate that image in a stylish way. This can take the form of obvious intentional repetition or something more subtle.

Finally, remember that the web is full of amazing visual resources that are either super cheap or completely free. Think about how you can use stock to reinforce what you’ve already been provided with.

Photo Sources: Vikram Vetrivel, Luis Hernandez, Maria Herrera and Ibrahim Iujaz.

Comments & Discussion

11 Comments

  • http://www.innov8graphics.com/ Sanjay Mistry

    Great article, helps us novices!

  • http://www.webdotcreate.com Andrew Osborne

    Good tips. That said, it doesn’t help me much. My biggest problem is a client that gives me tons of magazine ads to design for a variety of businesses, and he pretty much always gives me the same thing for every ad: a shot of the building (why is that so important? It just is… if you ask him.) and some bullet points and the most uninspired headline you can imagine.

    Unfortunately, I’m not sure how any of these tricks can help that situation. There’s just only so much you can do with boring building shots taken from ground level across the street with a crappy camera by someone with no photographic talent/training.

    Most of the time I’d say the ads would work better with no photo, or at least not one of the building, but that’s not an option. Gotta love clueless, dictator clients.

  • http://www.webdesigncreare.co.uk Kim Ruddock

    Lack of content can be a real pain when dealing with clients. I think lot of it stems from clients not fully realising how best to promote themselves. Sometimes being a designer requires a bit marketing savvy and knowing how to extract key pieces of information. The tips here are great advice in helping to make the most of what you’ve been provided with but a quick conversation with the client about their business can help generate even more for you to work with.

  • http://www.e-crm.co.uk Jim Johnson

    In fact, I always prefer to design with as little to work with as possible – what I mean is that I really love spacious, bold designs with plenty of whitespace. This has given me a couple of things to think about though.

  • http://www.pingdesigns.net David

    Great read! This really helps make you realize how simple can still mean great. I am always having to pull myself back from over complicating things.

  • http://onwardstudios.com Carma Leichty

    Great reminder – the effectiveness of white space and simplicity. Great ideas! I love the idea of working with less. It seems we can almost do more with less. I will re-think the next time I think the client hasn’t given me enough to work with.

  • http://www.innov8graphics.com/ Sanjay Mistry

    thank you!

  • http://www.innov8graphics.com/ Sanjay Mistry

    Click here if want an image to appear next to your comments:
    http://en.gravatar.com/

  • ifliandry

    Great tips, as beginner, i should made as simple as posible design, with very limited resources. This is a good solution. Thanks

  • http://melissachow.net Melissa Chow

    Great article. The tips were great for showing that no matter how little you have, there are always ways to make it better.

    I get overwhelmed when asked to design something with way too much content. If it’s something I’m not familiar with, I’m afraid to cut anything out so I just leave it all in. It definitely rare for me to get minimal content and minimal direction and when I do, it’s a bit nerving, too. I definitely prefer having little to work with as it lets the creative juices flow and expand so you can start experimenting with something completely different.

  • http://www.bizelo.com Evan

    This is great stuff!

    Simple.
    Clean.
    Perfect!

Subscribe
Membership
About the Author