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.