I covered The Rule of Odds in the last post of this online designing series and now it’s time to wrap things up by looking at the Rule of Space.
The Rule of Space is defined in Wiki as follows:
The rule of space applies to artwork (photography, advertising, illustration) picturing object(s) to which the artist wants to apply the illusion of movement, or which is supposed to create a contextual bubble in the viewer’s mind.
This can be achieved, for instance, by leaving white space in the direction the eyes of a portrayed person are looking, or, when picturing a runner, adding white space in front of him rather than behind him to indicate movement.
And once again, the technique is more commonly used in digital photography:
And just like before, the composition rule can also be extended to designing online images.
Online images – why bother?
Rather than having a dull intro to a post, wouldn’t you rather use a well-designed image that really drives home the message of your post while showing off your design skills? You can even use these designs in your portfolio for work.
You might also have a need to create assets with the intent of selling a product or a service. What better way to do this than creating a tailor-made design for that purpose.
You might also be able to grow your own audience as you get better in the design process and start sharing your work. What a great outcome that would be!
There are 2 important elements when designing over a photograph: the background (the photograph) and the main figure (our design). Both combine to make the figure-ground and both really have to work well together to simulate movement.
It is this interaction between the main figure and the background image that makes the design tricky. Designing the figure is actually not as time-consuming as finding the right image that would complement the design.
But creating something is all part of the fun.
Using a hypothetical canvas, our objects could randomly be laid out like this:
Designing online images could therefore look something like this:
Overlaying designs on photographs
These are the images that I have selected at random: an image of a train station, street art of a girl pondering, and 3 axes.
Here’s are the scenarios I have targeted:
- A blog post about going home (train station)
- A warehouse sale (street art); and,
- An advert for axe-throwing activity (Maniax – hipster axe-throwing madness we have down here).
Here are the results.
The leading lines in the train station provide a natural motion of forward movement (or backward depending on your perspective). I thought to complement those lines with an arrow pointing to the center.
The street art has this amazing negative space created by the girl’s gaze. I thought that it would be best to leave that piece of magic alone and add some subtle text, using some great type, at the bottom to highlight the commercial aspect of this design (a warehouse sale).
The axe image was rather flat in itself, in that it did not create any sense of movement. This is where I had to use some of my own imagination and add a flying axe to create an illusion of movement myself. The primary use as previously stated is to promote the business.
These mocks were created inside 30 minutes too, like the Rule of Odds effort. I made sure to have fun along the way by zoning out in a quiet space in the early morning with music dancing on my headphones. My head is clear in the morning, the light emanating from my Mac and the subtle music gave me inputs to create the above.
Oh, and I also just had my morning coffee fix.
Have you followed this pattern in your design process?
Feel free to share your thoughts below.
About this post
I use Sketch as my design tool of choice and I’ll have a more detailed process in an upcoming Skillshare course.
Up Next: Feeding your senses for inspiration.