Proportion & the Golden RatioWednesday – Thursday 2

Aims & Outcomes:

• Aims: To understand the importance of Proportion within graphic design.

• To understand how the principle of proportion is utilised to create visual direction and balance.

• To understand how to use Photoshop & Illustrator tools and techniques to devise and create a golden ratio layout.

• Outcomes: You will create a range of different elements which denote movement either alone or as part of a composition.

Bridge Task 5 – Patterns & Visual Direction –Thursday 1st.• Select at least 3 designs which use pattern which are

used to create visual direction and lead the viewer in some way through the design and formally analyse:

• Evaluation – what are your thoughts/feelings about the design/artwork, and why is this?

• Subject – what is the image about, how do you know this?

• Elements – formally analyse the elements and layout.

• Materials – what materials and techniques have been use, and why?

• Intention – what is the designer/artist saying/expressing to the audience, and how?

• Opinion – what is your opinion of the design/artwork, and why?

• Comparison – what can you compare the design to?

• Relevance – how relevant is the design to you, how do you plan to use your findings?

Quiz

• Log on to Socrative .com

• Select Student login

• Add TQ6JE0YX

• Wait for the promp…

• Use your Correct name – no messing like last time.

Proportion

Proportion

• Proportion is the feeling of unity created when all parts (sizes, amounts, or number) relate well with each other. When drawing the human figure, proportion can refer to the size of the head compared to the rest of the body.

• Proportion can also be the different proportions of space used in a design by breaking the design up into areas using page layout conventions such as Rule of Thirds, Modular Grids & Golden Ratio.

Pro

po

rtio

n c

an b

e u

sed

fo

r:

Balance Hierarchy Visual Weight

Visual Direction Emphasis Page Layout

Task – Designing with the Golden Ratio

• Task 1: Answer the following questions using annotated examples:1. What is the golden ratio and how is it used in design?2. Other than in design, where does the golden ratio appear?3. What mathematical theory is the golden ratio related to?4. How is a Golden Ratio layout created?

• Task: 2: Based on an A4 sheet of paper, and using the mathematical calculations from your findings, create a golden ratio grid using guidelines and rectangles in Photoshop (make sure the grid is on a transparent layer).

• Task 3: Using your golden ratio grid on an A3 document, design a mock up advertising poster which is suitable for your chosen assignment theme. Make sure you adhere to the principles we have investigated so far and you can use all elements of design including images and text.

Golden Ratio

Divide the longest edge by 1.618 each time

Add an arc as shown across each square

Different ways to apply the golden ratio

Layout – Set Your Dimensions With The Golden Ratio• Consider the Golden Ratio a useful

guideline for determining dimensions of layout. One very simple way to apply the Golden Ratio is to set your dimensions to 1:1.618.

• For example, take your typical 960-pixel width layout and divide it by 1.618. You’ll get 594, which will be the height of the layout.

• Now, break that layout into two columns using the Golden Ratio and voila! Working within these two shapes your layout will abide by the harmonious proportions of the Golden Ratio.

Spacing – Layout with the Golden Ratio Diagram• Spacing is an all-important element of

any design, be it the use of negative or positive space, and it can often make or break the final result. Determining the spacing of elements can be a rather time-consuming affair; instead, start with the Golden Ratio diagram and let the squares guide where you place each element. This will ensure your spacing and proportions are calculated, rather than ‘instinctual’, as any minor tweaks towards achieving the Golden Ratio can make all the difference.

• Plus, if you’re dealing with several elements, you can layer several Golden Ratio diagrams in order to continue consistent proportions throughout your design.

Content – Trace the Golden Spiral

• The Golden Spiral can be used as a guide to determine the placement of content. Our eye is naturally drawn to the center of the spiral, which is where it will look for details, so focus your design on the center of the spiral and place areas of visual interest within the spiral.

Images – Golden Ratio (or Rule of Thirds)

• Composition is important for any image, whether it’s to convey important information or to create an aesthetically pleasing photograph. The Golden Ratio can help create a composition that will draw the eyes to the important elements of the photo. Using the Golden Ratio, you split the picture into three unequal sections then use the lines and intersections to compose the picture.

Images – Golden Ratio (or Rule of Thirds)

• The ratio is 1: 0.618: 1 – so the width of the first and third vertical columns will be 1, and the width of the center vertical column will be 0.618. Likewise, with the horizontal rows: the height of the first and third horizontal rows will be 1, and the width of the center row will be 0.618. Now use those lines and intersections to draw the viewer’s eye and focus attention. It also creates tension and adds interest and energy to composition.

Forms – Golden Circles

• Just like the Golden Ratio can be harnessed to create squares and rectangles that are in harmonious proportion to each other, it can also be applied to create circles. A perfect circle in each square of the diagram will follow the 1:1.618 ratio with the circle in the adjacent square.

• Using the Golden Circles will create not only harmony and proportion, but also consistency throughout form. Let’s go back to Pepsi and Twitter here.

• The Pepsi logo is based on two intersecting circles that follow the Golden Ratio. While the smaller circle is not readily evident in the final iteration is does form the basis of the white slice through the center of the logo.

• The Twitter logo uses geometry and is heavily based on perfect circles. There is a minor lack of precision when aligning it with the Golden Ratio but for the most part the Twitter logo seemingly uses Golden Circles for balance, order and harmony.

Task – Designing with the Golden Ratio

• Task 1: Answer the following questions using annotated examples:1. What is the golden ratio and how is it used in design?2. Other than in design, where does the golden ratio appear?3. What mathematical theory is the golden ratio related to?4. How is a Golden Ratio layout created?

• Task: 2: Based on an A4 sheet of paper, and using the mathematical calculations from your findings, create a golden ratio grid using guidelines and rectangles in Photoshop (make sure the grid is on a transparent layer).

• Task 3: Using your golden ratio grid on an A3 document, design a mock up advertising poster which is suitable for your chosen assignment theme. Make sure you adhere to the principles we have investigated so far and you can use all elements of design including images and text.

Plenary:• I feel the most important thing I learnt today was?

• With the information I learnt today, I will now be able to…

• After today’s lesson I can now explain.

• Today I was able to make progress because…

• The part of the lesson I found easiest was…

• If was to set homework to build on today’s lesson I would…

• I am proud of myself today because….

• I think it is important to remember what I learnt today because…

• One thing I think I did really well was…

• Next time I would like to learn…