27
Alignment Robin William’s Principle of Alignment states, "Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page."

Page Layout Techniques: Alignment

Embed Size (px)

Citation preview

Page 1: Page Layout Techniques: Alignment

Alignment Robin William’s Principle of Alignment states, "Nothing should be

placed on the page arbitrarily. Every item should have a visual connection with something else on the page."

Page 2: Page Layout Techniques: Alignment

Business Card again

! Use proximity AND alignment to produce a dynamic design.

!  In the center alignment, the edges are "soft”

Page 3: Page Layout Techniques: Alignment

Business Card again

!  The proximity did not change, but the one below is right-aligned.

!  The right alignment creates a line that leads the eye down.

Page 4: Page Layout Techniques: Alignment
Page 5: Page Layout Techniques: Alignment

Death to Centered Alignment

!  It is not that centering items is bad, it just shouldn’t be done without a reason.

!  This movie poster presents a dull, almost amateurish look, which may influence someone's initial reaction to the event.

Page 6: Page Layout Techniques: Alignment

Death to Centered Alignment

!  The strong flush-left alignment makes the poster look more sophisticated.

!  There is strong connection between the different parts of the movie poster, emphasizing the intellectual relationship between them.

Page 7: Page Layout Techniques: Alignment
Page 8: Page Layout Techniques: Alignment
Page 9: Page Layout Techniques: Alignment
Page 10: Page Layout Techniques: Alignment

!  Sometimes there is nothing wrong with a centered alignment, but you must do it on purpose.

!  Be careful to make all your alignments the same

Page 11: Page Layout Techniques: Alignment

Centered Alignment Right Alignment

There is always more than one solution to the problem, again just make your design on purpose. Which one do you like best?

Page 12: Page Layout Techniques: Alignment
Page 13: Page Layout Techniques: Alignment

Using Centered Alignment Wisely

Intentional Unintentional

This side is centered. Should you decide

to center text, make it obvious!

It is difficult to tell if this text was centered on purpose or possibly accidentally. The line

lengths are not the same, but they are not different enough. If you cannot tell instantly that the type is centered, are you really

going to bother reading it?

When you use centered alignment, use it on purpose

Page 14: Page Layout Techniques: Alignment

Using Centered Alignment Wisely

!  Sometimes it is appropriate to use centered alignment.

!  Wedding invitations are often centered because they are rather sedate, formal affairs.

!  Appropriate to use centered alignment? Yes!

Page 15: Page Layout Techniques: Alignment

Using Centered Alignment Wisely

! Sometimes, however, it is a good idea to pay attention to the text and use it to move the eye.

!  The change is small, but effective.

Page 16: Page Layout Techniques: Alignment

Using Centered Alignment Wisely

Page 17: Page Layout Techniques: Alignment

Alignment

!  The website has many different elements in it. !  Sometimes you have to get creative to make

everything work together

Page 18: Page Layout Techniques: Alignment
Page 19: Page Layout Techniques: Alignment
Page 20: Page Layout Techniques: Alignment
Page 21: Page Layout Techniques: Alignment

Summary

!  Purpose: to unify and organize.

!  Every element should have some visual connection with another element on the page.

Page 22: Page Layout Techniques: Alignment

Tips

! Be conscious of where you place elements.

! Always find something else on the page to align with.

Page 23: Page Layout Techniques: Alignment

Avoid!

! Avoid using more than one text alignment on the page.

! Break away from a centered alignment. ◦ unless you are consciously trying to create a more formal, sedate presentation. ◦ Choose a centered alignment on purpose, not by default.

Page 24: Page Layout Techniques: Alignment

Alignment Poster

!  Using art supplies, make a poster that illustrates alignment. (This is non-digital.)

!  Use the same requirements as you did for the previous poster. !  Show Alignment: ◦  Write the word ALIGNMENT in letters at least two inches high

on your poster; so they can be read across the room. ◦  Make 3 identical shapes/images which are close to each other and

aligned along an imaginary vertical line which is at least ½ inch from the left edge of the page. ◦  Make 3 identical shapes/images which are different from the first

3, and are close to each other and aligned along an imaginary vertical line which is at least ½ inch from the right edge of the page. ◦  Align the top shape/image in each group along an imaginary

horizontal line which is at least ½ inch from the top edge. ◦  Align your items with the word "alignment" in some way

Page 25: Page Layout Techniques: Alignment

Examples

Page 26: Page Layout Techniques: Alignment

Examples

Page 27: Page Layout Techniques: Alignment

Resource

!  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