Lesson Two :

Exploring proximity, tension points, scale and spatial relationships

This task encourages you to explore Elements & Principles further, as the "building blocks" of layout design.

Tension Points
You'll often hear this expression used by Designers to describe the point where two or more items get close to each other and it results in "upsetting" the flow/ hierarchy of a design. The Tension Point, in effect, distracts the viewer from the other more important items in the layout. This sounds like something to avoid, but it can also be a novel way to add interest and identity to a layout.

For a solid introduction to tension points and how you might use them, read Steven Bradley's article at vanseodesign (10 mins) :

http://www.vanseodesign.com/web-design/visual-tension/

A tension point isn't recognised as a Design Element but should be IMHO. Inexperienced designers need to be aware that most of the time tension points are to be avoided.

Shown below is an example of where you can see a tension point. The business card on the left has the URL and mobile details too close to the edge of the card. The revised version on the right has addressed that with a different portrayal of the info.

Look at the card on the left, see how the tension point attracts your gaze and reduces the impact of the other items on the card?

white biz card

Black Square Problem

In the task below you explore tension as well as scale, position, rotation and proximity to convey meaning by using squares.

Learning Task 3: Using shapes and space to convey meaning. (3hrs)

Using no more than five squares (either solid black or solid white), create sketches with graphite pencil to convey the meaning of each of the following expressions:

  • order
  • increase
  • meek
  • congested
  • tension
  • playful
  • organic
  • isolated
  • dominant
  • chaotic
  • two of your choice

Method:
Using the A3 size template (A3, jpg, right-click, save target as, print it out at A3) : draw two thumbnail sketches for each expression in the smaller boxes, then select your six most effective solutions and sketch them in the big boxes with the appropriate caption, then scan or take a photo of your work.

No other colour, no text, just one colour using graphite pencil.

Objective:
To see how proximity (relationship between the objects and the frame or ground), contrasts of scale, cropping, overlapping, touching, alignment, space, angle, stability, and rhythm can combine to suggest meaning.

Example:
The example provided (shown opposite) illustrates what's expected.

 

Tension Points
Indicate on three of your examples where you see a tension point; just circle and label it using a coloured pencil.

Presentation & Submission:
Use a pencil to firstly outline, then later go over the top to increase contrast, then scan or take a photo and publish to your blog and submit the URL via email.

Resource:
Lots of examples and explanantions of the nature of design elements like shape and space can be found here:


http://www.vanseodesign.com/web-design/points-dots-lines/

 

Chris Adams 2017

Summary

This activity emphasised how something as basic as an arrangement of black squares within a frame can suggest meaning. This demonstrates the power of spatial relationships. In this example we used black squares but any object such as letters (in fact, especially letters), logos, items in a print layout, items in a photo composition or video/ film can be used in the same way.

Tension points were also discussed and as beginning designers it would pay to keep an eye out for instances in your layouts where tension points occur. Design your layouts to reduce these tensions so that all the items exhibit the emphasis you designed them to have and avoid instances where tension "steals the limelight".