lesson 1 proximity and alignment
DESCRIPTION
TRANSCRIPT
![Page 1: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/1.jpg)
Jeff Taylor
![Page 2: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/2.jpg)
Define graphic design
Understand the importance of graphic design principles
Describe and apply the graphic design principles of:◦ Proximity◦ Alignment
![Page 3: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/3.jpg)
Associated with images Speaking volumes without using the written
word. Graphic design is not just about creating
powerful pictures…. It's about communication “visual communication” is the most accurate
way to describe the purpose of graphic design.
![Page 4: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/4.jpg)
Communicating to a wide audience Bring order and clarity to information Translates boring words into inviting, visual
messages
![Page 5: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/5.jpg)
Guiding principles for creating effective visual communication
Apply to any piece you may create Determines the effectiveness in conveying
the desired message and how attractive it appears
Seldom only one correct way to apply each principle.
![Page 6: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/6.jpg)
Proximity/Unity Alignment Repetition/Consistency Contrast Balance White space
![Page 7: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/7.jpg)
Graphic Design Principle #1
![Page 8: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/8.jpg)
![Page 9: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/9.jpg)
Items relating to each other should be grouped close together
When several items are in close proximity to each other, they become one visual unit rather than several separate units
Proximity helps to organize information and reduce clutter
The proximity, or closeness, implies a relationship
![Page 10: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/10.jpg)
Be conscious of where your eye is going ◦Where do you start looking?
◦What path do you follow?
◦Where do you end up?
◦After you read it, where does your eye go next?
You should be able to follow a logical progression through the piece, from a definite beginning to a definite end
Where do you start looking?Where do you start looking?Where does your eye go next?Where does your eye go next?What path does your eye follow?What path does your eye follow?Where does your end up up?Where does your end up up?
![Page 11: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/11.jpg)
To organize Grouping related elements together into closer
proximity automatically creates organization If it is organized, the information is more likely to
be read and remembered By product of proximity is more appealing and
more organized white-space
![Page 12: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/12.jpg)
Count the number of visual elements on the page If there are more than three to five items on the
page…. see if any of them are related and could be
grouped together to form one visual element
![Page 13: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/13.jpg)
The MTV logo and the European The MTV logo and the European Music Awards logo are forming a Music Awards logo are forming a group in the upper left corner.group in the upper left corner.
The sponsor’s logos form a group The sponsor’s logos form a group in the bottom right cornerin the bottom right corner
The white space separating the The white space separating the two groups of logos is used to two groups of logos is used to
indicate “grouping”indicate “grouping”
The proximity of each group of The proximity of each group of logos makes this design effectivelogos makes this design effective
![Page 14: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/14.jpg)
Avoid too many separate elements on a page Do not stick things in the corners and the middle Avoid leaving equal amounts of white space between
elements unless each group is part of a subset Avoid even a split second of confusion over whether a
headline, a subhead, a caption, a graphic, etc., belongs with it’s related material. Create a relationship among elements with close proximity
Do not create relationships with elements that don’t belong together. If they are not related, move them apart from each other
![Page 15: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/15.jpg)
![Page 16: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/16.jpg)
Although the graphic anchors the bottom of the page, the four text elements all float on the page with no apparent connection to each other
(lack of proximity/unity)
![Page 17: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/17.jpg)
The change in the headline (font change, reversed out of blue box) along with the subheading pulled in closer provides balance with the graphic on the bottom.
The spacing between the two paragraphs of text is reduced slightly as well.
![Page 18: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/18.jpg)
Graphic Design Principle #2
![Page 19: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/19.jpg)
Can you imagine how difficult it would be to find your car in a crowded parking lot if everyone ignored the parking lot stripes and parked in every which direction and angle?
Imagine trying to get out of there!
![Page 20: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/20.jpg)
Alignment brings order to chaos, in a parking lot and on the screen.
How you align type and graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design.
![Page 21: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/21.jpg)
The basic purpose of alignment is to unify and organize the page.
A strong alignment can create a:◦sophisticated look
◦ formal look
◦ fun look
◦serious look.
![Page 22: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/22.jpg)
![Page 23: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/23.jpg)
Align type and graphics in relation to each other on a page
Alignment can make your layout: easier or more difficult
to read foster familiarity bring excitement to a
stale design.
![Page 24: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/24.jpg)
![Page 25: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/25.jpg)
The alignment principle states….
“Nothing should be placed on a screen arbitrarily. Every item should have a visual connection with something else on the page.”
![Page 26: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/26.jpg)
Aligned items create a strong cohesive unit Even if items are physically separated from each
other, if they are aligned there is an invisible line that connects them, both in your eye and your mind.
![Page 27: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/27.jpg)
![Page 28: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/28.jpg)
![Page 29: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/29.jpg)
![Page 30: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/30.jpg)
Be conscious of where you place elements Always find something else on the page to align
with, even if the two objects are physically far away from each other.
![Page 31: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/31.jpg)
Avoid using more than one type of alignment on a page
Do not overuse the centered alignment
![Page 32: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/32.jpg)
There is nothing inherently wrong with centered headlines, text, and graphics. They lend a formal tone to a layout. But, for this series of layouts something a bit more informal is called for. Also, large blocks of centered text are usually harder to read.
![Page 33: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/33.jpg)
In this "Alignment" example, text alignment is left-aligned, ragged right, wrapped around the bottom graphic which is aligned more to the right, opposite an added graphic that is aligned to the right to help balance the overall design.
![Page 34: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/34.jpg)
Palm Beach County Presidential Election Ballot
![Page 35: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/35.jpg)
![Page 36: Lesson 1 Proximity And Alignment](https://reader031.vdocument.in/reader031/viewer/2022013003/54c749134a7959272a8b45e7/html5/thumbnails/36.jpg)
Graphic design is about visual communication
Principles of graphic design, such as proximity and alignment, are guides for effective visual communication
Bad graphic design can change the world