edu.phlume.com
splash splash

Good V. Bad

Good V. Bad

Design Theory

We all have our opinions on this subject but there are a few hard, undeniable facts that separate the good from the bad. By properly using the design elements listed below you can be sure to have your documents fall into the "good design" column by default. These are just 5 basics of design... this is by no means a complete list of the rules. Just a helpful list of design concepts that are useful in various projects. They are so basic, when executed properly, you don't even realize they are being used!


Consistency-

The principal of consistency states:
"Systems are more useable and learnable when similar parts are expressed in similar ways."
There are four types of classification of consistency:

Aesthetic: Functional: Internal: External:
Refers to the style and appearance of a system or design. It helps in recognition, communicates a membership, and sets emotional expectations. Refers to meaning and action. Traffic lights, VCR/DVD player controls. Consistent use of these enable new users to recognize players on web sites, games and programs. Refers to the elements of a system relating to one another. Signs on a road or in a park relate to the road or park itself. Cultivates trust in the user, indicates a system has been designed and can be followed. Extends internal consistency across multiple systems. Road route numbers, color coding of traffic signs nationwide, navigation on web sites. Very difficult to attain in multiple independent systems ie. road and traffic signs world wide.

Functional consistency example:
A non-standard control panel is functionally consistent and it becomes difficult to understand what the buttons mean:

NON-Standard play Control


Standard play control easily recognized because of functional consistency:

Standard play Control

Internal consistency example:
Color coding of traffic signs:

Internal Consistency Internal Consistency Internal Consistency Internal Consistency Internal Consistency Internal Consistency


  • All exit and mileage signs are green.
  • All construction signs are orange.
  • All state and national recreation area signs are brown.
  • All danger and warning signs are yellow.
  • All motorist assistance signs are blue.
  • All interstate highway signs are red blue and white.


Points to remember:
Within any logical grouping of elements, the elements should be aesthetically and functionally consistent.

When common design standards exist, they should be adhered to.

Always consider aesthetic & functional consistency when designing:
   Aesthetic --> establishes unique identities that can easily be recognized.
   Functional --> simplifies usability and ease of learning.




Alignment-
The basic purpose of proper alignment is to create cohesion in a design and to create a unified, organized layout.
NOTHING should ever be placed on a page arbitrarily.
Every item should have a visual connection
to something else on the page.


Each item placed on a page should have a common relation in alignment with another item on the page. The acheived design creates "lines of commonality" and a relationship with everything on the page showing purpose in it's positioning.

lines of commonality. Of the two images shown here, which one looks cleaner, more organized and easier to view? left or right?

Each polygon in the example on the left exists on a line of commonality with something else in the image. This harmony builds cohesion and unifies the layout as a clean, organized image. With the image on the right, not a single polygon is lined up with another. This lack of relationship and interconnection builds tension, and creates disorder.
lines of commonality.


lines of commonality.


By actually highlighting the lines you can see how often each blue box is lined up with other items in the composition. There are 8 lines of commonality in this simple layout of these blue boxes. How many misalignments can you find in the above example image on the right? There are at least 9, maybe more depending, on how you perceive the layout.

Misalignment is not always an example of bad design. Misalignment, when done on purpose, can attract attention to a specific item, or create tension and stress in a design. When working with text and a graphic or visual object, be sure not to create "trapped white space" between the object and the text. This can inadvertently push the two objects apart making it more difficult to distinguish the two items as a single unit. try to move the white space to the opposite side from the picture or graphic thereby pulling the text and image together as a single design element. See the picture examples below as a reference.
White Space Notice in the image to the left, the white space, even as small as it is, pushes the green box away from the text separating the two. The design on the right tends to be perceived as a single design element. White Space

Points to remember:
Avoid multiple alignments on a page, unless you are trying to draw attention to a specific element.

Be cautious of trapping white space in a design.

An excess of minimal misalignments in a design add up to a larger, messy, confusing layout that is difficult to look at.



Proximity-
One of the fundamental gestalt principals of perception. The idea of using gestalt principals of design is key because it puts the designer in charge of what the viewers sees and when. it puts the designer in control. the basic principals of design with the gestalt theory are: Proximity, Similarity, Closure, Simplicity, Continuance, Alignment.

Proximity is one of the most powerful means of indicating relatedness in a design & usually overwhelms competing visual cues such as alignment, size and color. Proximity reduces the complexity of a design, and reinforces the relatedness of the elements.

Elements that are closer together are perceived as being more related than elements that are farther apart.


Proximity Proximity a1 Proximity a2
Even though each of these examples are the same collection of nine colored dots inside of a square, in one set of examples (a) they are considered three different rows, and in the other examples (b) they appear to be three different columns. This is regardless of the orientation or the colors ... it is due to proximity. Proximity b1 Proximity b2


Proximity can be divided into three distinct "grouping" examples:
Likeness in form or size, spatial nearness and division.

ProximityForm (size) ProximityForm (color) ProximitySpatial nearness ProximityDivision


ProximityIn america we read words from left to right, but we also read from the top to bottom. A close edge relationship (or lack there of) can form groups in all direction. If proximity is not considered, ordinary signs can easily be misconstrued, as with the "Money $ Exchange" sign to the right. Perhaps placement of the dollar sign equidistant from each word would have built a stronger relationship as three distinct elements, rather than two.
What is being offered at a store that has a sign similar to the one shown in the example below? Free food, or Free water?
Free Water
Food Sold


Points to remember:
Use proximity as your primary relationship indicator as it is the strongest.

Use white space to visually divide elements that are not related to each other.

Combine proximity rules with alignment rules to achieve the highest design appeal, and the least conflict within the design.



Contrast-

Contrast is one of the most effective ways to add visual interest to a page.
In order for contrast to be effective, it must be strong.

Strong = Efficient = Good design


A good use of contrast can add specific stopping points naturally within your design. Bad use of contrast on a page creates conflict and a desire to move on from the design. The easiest way to add contrast to a document is with type. Font face (arial, rockwell, garramond), font type (serif, sans, script), font style (bold, italics, underlined), font color can all add contrast to your typeset page very effectively. If you use a large, strong, bold sans serif font for a header, try using a softer, smaller serif font in the body.

Contrasting elements should not confuse the reader or add conflict in areas where the focus should not be emphasized. spacing and proximity can add to the contrast of a page.

Contrast Contrast


Points to remember:
Contrast offers two purposes to your design: creates interest & it aids in the organization of the document.

When using contrast as a design element, be bold. Wimpy means conflict and negative effects will arise form it. A 4 pt rule next to a 8 pt rule is confusing, not contrast.
Design Principals:
edu.phlume.com © 2010-2017 Phlume Artist Management LLC. All rights Reserved.
Web Site designed and maintained by Chad @ Phlume.