Design
Principles
By: Kimberly Fletcher
Four Design
Principles
Proximity
Contrast
References
Repetition
Alignment
Contrast
Contrast adds visual interest to your document through: color,
images, fonts, and size.
This picture represents contrast through the use of color.
Showing one white cat and one black cat on a black background.
Other examples of contrast:
Ex. 1
Ex. 2
Back to Main Menu
Ex. 3
Repetition
Repetition acts as a visual key that ties a piece together through
the use of a repeated aspect in the document.
This picture represents repetition through the use of repeating
heart shaped cookies throughout the page.
Other examples of repetition:
Ex. 1
Ex. 2
Back to Main Menu
Ex. 3
Alignment
Alignment is the principle of lining every item on a page with
another item on the page. This principle creates cohesion.
This picture represents alignment because each person is sitting
right in front of the other.
Other examples of alignment:
Ex. 1
Ex. 2
Back to Main Menu
Ex. 3
Proximity
Proximity is about placing related items physically together. The
amount of separation tells the reader how the material is
related.
This picture represents proximity by having the name of the
company grouped together and the logo grouped together but
above the name.
Other examples of proximity:
Ex. 1
Ex. 2
Back to Main Menu
Ex. 3
Contrast
This is a good example
of contrast, because it is
drawing your attention
to the the black figure
in front of the colored
lines. The colored lines
also add visual interest
because of the intensity
of the colors.
Back to
Contrast
Menu
Contrast
This is a good example of
contrast, because it is
drawing your attention to
the the light in the sky. At
first look, you do not even
notice the small figures in
the water. I noticed the
small figures after I took my
eyes away from the light.
Back to
Contrast
Menu
Contrast
This is a good example of
contrast, because the black
background is drawing your
attention to the red. The
second attention getter is
the white. The black is the
third color that you see.
Back to
Contrast
Menu
Repetition
This is a good
example of
repetition, because
the straws are
repeated and the
same colors are
repeated.
Back to
Repetition
Menu
Repetition
This is a good
example of
repetition, because
the lines and faces
are repeating across
the page.
Back to
Repetition
Menu
Repetition
This is a good example
of repetition, because
several items are being
repeated. The dog,
color, and contrast are
all being repeated.
Also, the outline of the
dog’s features are being
repeated.
Back to
Repetition
Menu
Alignment
This is a good example of
alignment, because you
have one person in the
center and everyone else is
to the right and left of the
center. The center is the
first point that most people
align information around.
Back to
Alignment
Menu
Alignment
This is a good example
of alignment, because
you have an item in
center alignment and
other items around it.
By focusing on the
center, you can see a
cohesive unit.
Back to
Alignment
Menu
Alignment
This is a good example of
alignment, because the sun
is at the center and the
planets orbit around the
center. Also, based upon
their orbit, the planets
visually look lined up.
Again, this center
alignment shows the
universe as a cohesive unit.
Back to
Alignment
Menu
Proximity
This is a good example of
proximity, because it not
only gives the definition
but it shows the meaning.
The words are grouped
together according to how
they relate to each other.
Back to
Proximity
Menu
Proximity
This is a good example of
proximity, because items
that relate to each other
are close together. For
example, the names are
centered and kept together
just like the when is
grouped together and the
where is grouped together.
Back to
Proximity
Menu
Proximity
This is a good example
of proximity, because
the important
information like the
name of the company is
grouped together and
services offered are
grouped together.
Back to
Proximity
Menu
References
http://us.123rf.com/400wm/400/400/maxkabakov/maxkabakov1206/maxkabakov120600130/13931432-security-concept-lock-on-digital-screen-contrast-3d-render.jpg
http://www.gandex.ru/upl/oboi/u12952_9043_Creative_Wallpaper_Contrast_017140_.jpg
http://blog.nyicd.com/storage/repetition%20cookies.png?__SQUARESPACE_CACHEVERSION=1317310608402
http://chiropractor-ranchocucamonga.com/wp-content/uploads/2013/04/MP900411715.jpg
http://nashworld.edublogs.org/files/2009/05/comparecontrast.jpg
http://shazimalik.files.wordpress.com/2012/04/high_contrast_beach_by_joefuss134.jpg
http://farm7.staticflickr.com/6131/5956757772_efd3e93b6b_z.jpg
http://2.bp.blogspot.com/-AxGoqf_BJ34/Ta2CkgLfGvI/AAAAAAAAAns/whtv0rPGpco/s1600/repetition2.jpg
http://keystone54.com/blog/wp-content/uploads/2012/06/Warhol-Bridget2.jpg
http://www.maastary.com/Portals/14679/images/Sales%20and%20Marketing%20Alignment-resized-600.jpg
http://images2.wikia.nocookie.net/__cb20090330065435/wowwiki/images/2/2d/Band_of_Alignment.jpg
http://www.2012prophecyends.com/wp-content/uploads/2011/08/planet-alignment-2012.jpg
http://4.bp.blogspot.com/_c7JiLplPdUY/S74DEgzhpjI/AAAAAAAAAwo/M8AoHhQ4M0E/s1600/P3-4_Campi_POD_02_Proximity.jpg
http://api.ning.com/files/yT4EhNKBkhm8Gq9c118QZagy1Sr2VG6pxSSiHM*gZlQHjhp6uhEgE*ewZ8slfnB9u5BlJ2*FNUD4pGjPtmKEXcFFXc5LYeMv/Invite1610.jpg
http://www.smashingbuzz.com/wp-content/uploads/2011/04/Custom-Flyer-Design-for-SML-Studios.jpg
Back to Main