Page Layout Techniques: Proximity
Transcript of Page Layout Techniques: Proximity
PAGE LAYOUT TECHNIQUES Proximity Alignment Repetition Contrast
PAGE LAYOUT TECHNIQUES FOR A…
! Poster ! Business card ! T-shirt designs ! Flyers ! Invitations ! Websites ! …ANYTHING digital!
PROXIMITY Group related items together
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
BUSINESS CARD EXAMPLE
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?
BUSINESS CARD EXAMPLE
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?
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
FLYER EXAMPLE
! How many movies are there?
! What is the name of each movie?
! What day? Time?
! Where?
! WHAT’S GOING ON?
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
FLYER EXAMPLE
! Now, how many movies are there in this schedule?
! What is the name of each movie?
! What day?
! What time?
! Where?
GAME NIGHT ADVERTISEMENT
! What is happening?
GAME NIGHT ADVERTISEMENT
! Graphic design is all about communication. ! If the reader cannot tell what you are trying to
say, your design is unsuccessful.
WEDDING INVITATION
! How can this invitation be improved?
! Is the “white space” being used effectively?
WEDDING INVITATION
! By grouping the related items, we can make it seem much more organized and easy to read at a glance.
WEBPAGE
WEBPAGE
! How many different elements are there? ! How should they be ordered?
WEBPAGE
WEBPAGE
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.
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.
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!
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
EXAMPLES
! This shows proximity because we are trying to make related images/objects physical closeness to show their intellectual relation
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/