Chapter 5

Hey y’all.

Let’s jump into this section as I have class in an hour haha.

In this chapter, we went over seven elements of design:

1.  Space

2.  Line

3.  Shape/Form

4.  Size/Scale

5.  Color

6.  Texture

7.  Value

Six principles or rules of good design:

1.  Focal Point/Emphasis

2.  Contrast

3.  Balance

4.  Movement

5.  Rhythm/Pattern

6.  Unity

Finally, we also covered the four laws of Gestalt theory:

1.  Proximity

2.  Similarity

3.  Continuity

4.  Closure


Let’s break it down, yeah?

Elements of Design

#1 Space – Come on, really? All we’ve done was talk about spaces (positive and negative space, white or black spaces)

#2 Line – Really, this is all you need to know about line for now.

Lines may be straight, angular or curvy. They may be thick or thin, continuous or interrupted. The edges of a page or screen represent lines. Negative space can form lines, such as the lines of margins.

#3 Shape/Form – Shape or form, both the same meaning. Form comes in two different types: organic and inorganic.
Organic shape are shapes found in nature, organically forms; leaves, apples, water splashes, etc.
Inorganic shapes are man-made; squares, triangles, rhombuses, hexagons, etc.

#4 Size/Scale – Example: 125 × 125 pixels or 11-point type

#5 Color – Too broad of a subject. Mm, think of aesthetics.

“This looks good like this.”

                    “It’d be better if it was this.”

                                                             “Maybe in this hue.”

                                                                                            “Let’s make it more saturated.”

                                                                                                                             I think you get the picture.

#6 Texture – Depth and dimension, 3D.

#7 Value – Tones, light and dark.


Principles or Rules of Good Design

#1 Focal Point/Emphasis – Have a focal point, it gives emphasis. How? Follow this:

images

The golden proportion. The golden proportion is a ratio: 1:1.618. When applied to a golden rectangle, it becomes a kind of compositional grid suggesting asymmetrical placement of items on the layout.

The golden proportion. The golden proportion is really just a ratio: 1:1.618. Mathematicians and scientists are as enamored with the golden proportion as artists and designers of all kinds are—and have been for centuries. Sometimes called the divine proportion or the golden ratio, it has been invested with divine, even magical, properties.

What makes this proportion special is its mathematical principle: the ratio of a to b is the same as the ratio of b to [a + b]. For our purposes, it looks like this: Draw a perfect square. If you increase the perfect square’s width by multiplying it by 1.618, you create what is called a golden rectangle. You’ll find golden rectangles everywhere in art, architecture and design.

images

The rule of thirds. The layout for this save-the-date postcard uses the rule of thirds. Key information sits at one intersection of the grid. The hummingbird, which is the focal point graphic, sits at another.

Leaving the math aside, artists and designers like the golden proportion because when applied to shapes like rectangles, triangles and even spirals, it seems to produce a universal visual aesthetic appeal.

The golden proportion applied to a golden rectangle becomes a kind of compositional grid suggesting asymmetrical placement of items on the layout. In fact, a golden grid uses the golden ratio to establish an irregular 3 × 3 grid on the golden rectangle. And that leads us to the rule of thirds.

The rule of thirds. For the mathematically challenged or uninterested, the rule of thirds will seem wonderfully simple compared to the golden proportion. Like the golden proportion grid, the rule of thirds is merely a 3 × 3 grid that suggests layout placement in order to create visually interesting asymmetrical designs.

The rule of thirds simply divides the layout—whatever its format—into an evenly spaced 3 × 3 grid. Then the focal point goes on one of the four gridline intersections. Voilà, pleasing asymmetry guaranteed.

Another way to think about the rule of thirds has to do with symmetrical and asymmetrical balance. If we associate symmetrical balance with the number two, as in two symmetrical sides of a bisected layout, then the quickest route to asymmetry is to work with the number three, as in a 3 × 3 grid.

#2 Contrast – Why do we contrast in design? Emphasis, right? Right.

#3 Balance – Oh, holy hannah. Balance is everything. Even if a design looks imbalanced, it most likely was designed to look that way but if you look carefully, there’s an order in that chaos.

eye-test-screen-print-reduced-300x300

#4 Movement – Action, speed, blurriness. If the concept involves action or movement, all that matters is if the design has a flow for ease. Be strategic about it.

#5 Rhythm/Pattern – Just like movement, rhythm and pattern in a design can actually give a sense of movement at how your eyes travel across a design based on the rhythm and/or pattern you used in your design.

#6 Unity – Does the design work together? Does every piece plays its part in the design? Yes?

Good, you have unity.


Gestalt Theory

Gestalt – shape/form. This concept was a psychological study regarding how human beings perceive objects.

What was discovered:

The brain automatically and unconsciously simplifies, arranges and orders objects the eyes see. Specific patterns of perception emerged from the research, which became the Gestalt Laws. Four of these laws are of particular interest to designers.

Proximity – Distance

images

As discussed before, clustering instead of cluttering, right?

Right.

Similarity – Just like clustering. We group things based on likeness.

Continuity – Movement or implied lines.

images

On the left, our minds see a single cross shape instead of four shorter converging lines. On the right, our eyes follow the direction of the A’s swoop and continue on to the star.

 

Closure – Just like continuity, our minds fill in gaps or follow movement to understand.

Gestalt in Action:

images

Applied Gestalt

Proximity. This Web page includes a visual, navigation text, a headline, some body copy and three different lists. That equals seven different things viewers have to scan. But using proximity to group the visual with the headline and the navigation and then clumping the three lists together reduces the number of areas to scan from seven to just three: a clump in the header, the body copy and a clump of lists.

Similarity. Similarity dictates that every navigation item be typeset in the same font and color as every other navigation item. That similarity among navigation items signals readers that each item is part of the same cluster of navigation options. Similarity also produces unity through making the three lists look alike.

Continuity. The “J” in “Join us” points to the lead of the body copy. Our eyes also follow the invisible gridlines tying screen elements together both vertically and horizontally. The top of the body copy lines up with the top of the boxes listing classes. This draws the viewer from one element to the next.

Closure. The headline “Center for the Arts” is not composed of letters. The words actually are letter-shaped holes punched out of the visual image. Our brains mentally close the gaps and allow us to read those shapes as words.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s