Page Layout Techniques: Proximity

30
PAGE LAYOUT TECHNIQUES Proximity Alignment Repetition Contrast

Transcript of Page Layout Techniques: Proximity

Page 1: Page Layout Techniques: Proximity

PAGE LAYOUT TECHNIQUES Proximity Alignment Repetition Contrast

Page 2: Page Layout Techniques: Proximity

PAGE LAYOUT TECHNIQUES FOR A…

! Poster ! Business card ! T-shirt designs ! Flyers !  Invitations ! Websites ! …ANYTHING digital!

Page 3: Page Layout Techniques: Proximity

PROXIMITY Group related items together

Page 4: Page Layout Techniques: Proximity

PHYSICAL CLOSENESS IMPLIES A RELATIONSHIP

! Science ! Math ! Reading ! English ! Fine Arts ! Graphic Arts ! Music ! Band

! Science ! Math ! Reading ! English ! Fine Arts

!  Graphic Arts !  Music !  Band

Sample 1 Sample 2

Page 5: Page Layout Techniques: Proximity

BUSINESS CARD EXAMPLE

Page 6: Page Layout Techniques: Proximity

BUSINESS CARD (CONT.)

!  How many separate elements are there?

!  Where do you begin reading?

!  What do you read next?

!  What happens when you reach the end? Where does your eye go?

Page 7: Page Layout Techniques: Proximity

BUSINESS CARD EXAMPLE

Page 8: Page Layout Techniques: Proximity

BUSINESS CARD (CONT.)

! How many separate elements are there?

! Where do you begin reading?

! What do you read next?

!  Is there any confusion as to where to start and finish reading?

Page 9: Page Layout Techniques: Proximity
Page 10: Page Layout Techniques: Proximity

SMART GROUPING

Science Anatomy Biology Chemistry Art Painting Drawing Sculpture Math Algebra Geometry Calculus

Sample 1 Sample 2

Science Anatomy Biology Chemistry Art Painting Drawing Sculpture Math Algebra Geometry Calculus

Page 11: Page Layout Techniques: Proximity

FLYER EXAMPLE

! How many movies are there?

! What is the name of each movie?

! What day? Time?

! Where?

! WHAT’S GOING ON?

Page 12: Page Layout Techniques: Proximity

FLYER EXAMPLE (CONT.)

! Proximity doesn't mean that everything is closer together; it means elements that are intellectually connected, those that have some sort of communication relationship, should also be visually connected.

! You want your reader to know the basic information from a quick glance

Page 13: Page Layout Techniques: Proximity

FLYER EXAMPLE

! Now, how many movies are there in this schedule?

! What is the name of each movie?

! What day?

! What time?

! Where?

Page 14: Page Layout Techniques: Proximity
Page 15: Page Layout Techniques: Proximity

GAME NIGHT ADVERTISEMENT

! What is happening?

Page 16: Page Layout Techniques: Proximity

GAME NIGHT ADVERTISEMENT

! Graphic design is all about communication. !  If the reader cannot tell what you are trying to

say, your design is unsuccessful.

Page 17: Page Layout Techniques: Proximity
Page 18: Page Layout Techniques: Proximity

WEDDING INVITATION

! How can this invitation be improved?

!  Is the “white space” being used effectively?

Page 19: Page Layout Techniques: Proximity

WEDDING INVITATION

! By grouping the related items, we can make it seem much more organized and easy to read at a glance.

Page 20: Page Layout Techniques: Proximity
Page 21: Page Layout Techniques: Proximity

WEBPAGE

Page 22: Page Layout Techniques: Proximity

WEBPAGE

! How many different elements are there? ! How should they be ordered?

Page 23: Page Layout Techniques: Proximity

WEBPAGE

Page 24: Page Layout Techniques: Proximity

WEBPAGE

Page 25: Page Layout Techniques: Proximity

PROXIMITY SUMMARY

! Purpose: To organize ! Organized information will be much more likely

to be read. ! Physical closeness implies a relationship !  Items relating to each other should be grouped

together. ! Elements that are intellectually connected

should also be visually connected.

Page 26: Page Layout Techniques: Proximity

TIPS:

!  If you squint your eyes and count the number of visual elements, it will help you ignore the content and focus only on the design. Count the number of times your eye stops.

!  If there are more than 3 to 5 items on the page (of course it depends on the piece), see which of the separate elements can be grouped together into closer proximity to become one visual unit.

Page 27: Page Layout Techniques: Proximity

AVOID: !  Don’t stick things in random places just because there

is an empty space. We LIKE white space, remember?

!  Don’t put too many elements on a page.

!  Don’t put the same amount of space between all the elements.

!  Avoid confusion over whether a headline, subhead, caption, graphic, etc., belongs with its related material. Group those related items together by close proximity.

!  Move unrelated items away from each other. You don’t want to create unwanted relationships!

Page 28: Page Layout Techniques: Proximity

PROXIMITY ASSIGNMENT !  Using art supplies, make a poster that illustrates

proximity. (This is non-digital.) !  Requirements:

!  Use white 9" x 12" paper !  Leave ½” of space around all edges !  Design it in landscape format !  Use any of the available materials to complete your poster !  Start your design in pencil so you can make adjustments !  Make it neat, take your time

!  Show proximity by: !  Writing the word PROXIMITY in letters at least two

inches high on your poster, so they can be read across the room.

!  FIVE identical shapes/images which are close to each other.

!  THREE identical shapes/images which are close to each other and different from the five mentioned above

Page 29: Page Layout Techniques: Proximity

EXAMPLES

! This shows proximity because we are trying to make related images/objects physical closeness to show their intellectual relation

Page 30: Page Layout Techniques: Proximity

RESOURCES

! The content in this PowerPoint was inspired by “The Non-Designer’s Design Book” by Robin Williams.

! The assignment was inspired by the content on www.nhsdesigns.com/