Making a Layout: The Elements and Principles of Design

The foundation of any design is governed by underlying principles and executed with basic elements. They can be applied in a number of ways and combinations that can be confusing when first put into practice. But remember that with practice comes proficiency. Keep these elements and principles in mind as you design.

The Basic Elements of Design*

The basic elements of design are like building blocks or the ingredients of a recipe. They must be used in the proper combination and proportion to work. A layout may use some but not necessarily all these elements.

Line - Any mark connecting any two points. It could be a graphic line, or a string of text, straight or squiggly, roughly hand drawn or precisely rendered.

Shape - Anything that has height and width. Graphic elements, blocks of text, photographs.

Texture - The look or feel of a surface. Texture can be the appearance of silky fabric or rough tree bark in a photograph, or created by text on a page.

Space - The distance or area between or around things. Does it "feel airy" and "breathing room" or is it crowded? Space can be positive (an area that is occupied by an object) or negative (space that is not occupied by an object, such as the white areas on this web page).

Size (Scale) - How big or small something is. Do the objects in the layout have contrasting or similar sizes?

Value (Contrast) - The darkness or lightness of an area or object. Contrast is the difference of value between two or more objects. Black has a dark value, yellow has a light value. Too much text and crowded graphics give a layout an overall dark value.

Color (Hue, Chroma)- Color can convey emotion or mood, highlight important items (emphasis) or create unity.

The Principles of Design*

Once you understand the basics, put them together using the recipe dictated by design principles. A good layout will have all these principles taken into consideration.

Balance - The distribution of elements and space; equilibrium. " It is the arrangement of the objects in a given design as it relates to their visual weight within a composition." [1] Balance can be symmetrical or asymmetrical. Symmetrical layouts have inherent formality, while asymmetrical layouts can seem informal. Unbalanced layouts (used with care) can be used to create emphasis.

Rhythm (Repetition) - Rhythm is the repetition of elements to create the effect of movement, a pattern or texture from text, typefaces, shapes, size, colors.

Emphasis - Emphasis is created by the comparison of the relative size or proximity of elements in the layout. It is what is noticed first, what stands out in the layout. The dominant and subordinate elements create a hierarchy of the elements in the layout. Color and value can also imply emphasis.

Unity - Unity is the sense that all the elements in the layout look like they belong together. " … the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety." [1] What holds it all together? What's the "glue?" Elements that have similarity or harmony can create a sense of unity.

Some more thoughts

Organization is also important to a successful layout. Create a hierarchy of information by arranging your information logically: Emphasize what is important, then in decreasing the emphasis in order of importance. Catch and hold the reader's attention with headlines and graphics, keep them reading with well-written copy and pleasing design.

For our purposes, placement on the page can indicate the importance of text or a graphic [2]:

1. Upper Left. Position of highest prominence, emphasis or importance	2. Upper Right. Second most prominent
2. Lower Left Second most prominent, equal in importance to Upper Right	3. Lower Right Least important

How a reader looks at your layout is almost as important as what they read. English-speakers are taught to read from top to bottom, left to right and generally that's how the reader's eyes will travel across a page. You can also direct the way they view the page by the pictures you use and how they are arranged. Some pictures are natural "pointers" such as a person's profile. The reader will naturally look in the direction that the photo is "looking." The composition of photos and graphics also lend themselves to "pointing."

Consider the way your eye travels across the page. You read from left to right, and a harmonious layout will keep with that flow. If you wish to shock the reader, work contrary to their expectations.

The next time you look at a magazine cover or poster or... well...anything... make a note of how you look at it.

Keep your audience in mind while designing and writing your layout. Are they twelve-year-olds? Do you think they'll have at least a high school education? Are they retired Republicans or young Democrats? Different groups of people have different expectations and assumptions of what they read.

Make it easy for your reader to get your message. Use the K.I.S.S. strategy: "Keep it Sweet and Simple." If something looks difficult to read, the reader will probably pass it over for something that appears easy to read.

*More reading

There are many systems of Design. We have arbitrarily chosen the one above for this course, for which you are responsible. A quick Google search will turn up dozens, such as these:

https://en.wikipedia.org/wiki/Design_elements_and_principles
https://creativemarket.com/blog/2013/12/02/10-basic-elements-of-design
Google image search

Notes

[1]http://www.digital-web.com/articles/principles_of_design/, site no longer live
[2] This is true for cultures that write top-to-bottom and left-to-right. Cultures that read and write in a different order (Chinese or Hebrew, for example) will have different organizational systems. 

Examples of Layout and Color

The bold sweeping lines lead the reader's eye from top left to bottom right, while the bright yellow color gets the reader's attention and draws it to the text. Blue and yellow are primary colors; yellow and orange are analogous; blue and orange are complementary.

Interesting triangular shapes combine with primary colors: red, yellow, blue.

Analogous and warm colors: yellow and red. The mug's cool color is a refreshing contrast to the rest of the layout. And, best of all, text on a path!

Analogous and cool colors: Blue, green and purple. How tranquil. The warm (yellow-gold) teddy bear stands out -- contrasts -- with the cool colors in the rest of the layout.

Analogous colors: green, blue and yellow.

Analogous colors: blue and yellow. Similar value create a sense of harmony and peace.

Red, pink (a tint of red), blue and green are the dominant colors in this layout. Red/pink is complementary to the green background.White is neutral and provides a contrasting value to the dark blue.

Purple eggs? Complements those yellow yolks.

Complementary colors in nature: red and green. Elegant, organic shapes.

Primary colors: red, yellow, blue. Great curvy shapes bracket the main images.

Similar rectangular shapes and primary colors (yellow and blue) create a bold and energetic layout.

The sweeping line across the page creates a dynamic division between negative and positive space.

Purple and green are secondary colors and are also analogous. Rhythm is created by the repeated shapes (circles or dots) as they appear to "march" up the page to the headline while the triangles interspersed in the word "TABS" point down to it. The "O" in "DOT" repeats the circle theme.

Wow! These colors are saturated! Products in repeated (rhythmic) compartments of similar shapes unify the layout.

Color which is in counter to the reader's expectations can be a great attention-getter. Yellow star and type is complementary to the purple catsup bottle. Take note of the text wrap on either side of the bottle and the shapes created by both bottle and blocks of text.

This layout illustrates the use of repeated shapes and colors to unify the design through similarity and rhythm.

Repeated hand shapes frame the title of this piece. There is a strong contrast between the values of the dark background and light text purple hand. Purple and green are secondary and analogous colors.

Strong red lines surround a human figure, echoed in the repeated human figures below. The warm colors (red lines) and cool colors (blue background and dancers) and light and dark values create contrast.

Blue and orange --- complementary colors --- create a vibratory effect. Roof tiles create a strong lines. Repeated bird images create rhythm with a twist: three at the bottom look right, but the one at the top looks left.

Communicate with Symbols: Ideograms, Logos, Monograms

Spoken words are the symbols of mental experience, and written words are the symbols of spoken words.

– Aristotle

A Brief History

For thousands of years of human pre-history, communication was only verbal. As societies became more complex, we developed means of written communication. At first crude pictures were used to represent common objects, then concepts and phonetic sounds. These early forms of written communication are known as pictograms and, later, hieroglyphs.

The first alphabetic system -- a writing system which uses abstract symbols to represent sounds (phonemes) which are combined into words -- grew out of Egyptian heiroglyphic writing. Known as Proto-Sinaitic script, it appeared in the Sinai peninsula around the 15th century BCE.

A specimen of Proto-Sinaitic script,
one of the earliest (if not the very first)
phonemic scripts (Wikipedia)

The English word alphabet comes to us from the Greek ἀλφάβητος (alphabētos), from alpha and beta, the first two letters of the Greek alphabet. Alpha and beta in turn came from the first two letters of the Phoenician alphabet, and originally meant ox and house respectively.

The Adobe Suite -- InDesign (for layout) and Illustrator and Photoshop (for pictures and special typography) -- contains tools for communication. The graphic artist communicates ideas with a combination of pictures (illustrations and photos) and words (type) which combine in a layout. Simply put,

Text + Pictures = Layout

Note that not all layouts are a combination of text and pictures, some are simply one or the other. No matter what the layout, a graphic artist must combine design abilities with technical knowledge.

Pictures as a form of communication

Since we use an alphabet does it mean pictures are no longer important in communication? No, indeed. Pictures are still a very effective means of communication. We "read" pictures much as we do words, but we understand on an intuitive level and do not require common language to transmit their meaning. Consider, for instance, these international wayfinding symbols developed by AIGA in 1974 :

An ideogram or ideograph (from Greek ἰδέα idea "idea" + γράφω grafo "to write") is a graphic symbol that represents an idea or concept. They can also be called pictograms or pictographs. They convey meaning through pictorial resemblance to a physical object. Earliest examples of pictographs include ancient or prehistoric drawings or paintings found on rock walls. Pictographs are also used in writing and graphic systems in which the characters are to considerable extent pictorial in appearance. [1][2]

Native American pictographs from the
Great Gallery, Horseshoe Canyon,
Canyonlands National Park (Wikipedia)

A pictograph warning against swimming because
of crocodiles at the Australia Zoo. (Wikipedia)

Pictography is a form of writing which uses representational, pictorial drawings. It is a basis of cuneiform and, to some extent, hieroglyphic writing, which uses drawings also as phonetic letters and ideograms. [2]

Babylonian cuneiform

 

Hieroglyphs typical of the Graeco-Roman
period (Wikipedia)

A logo is an ideogram — a graphic mark or emblem commonly used by commercial enterprises, organizations and even individuals to aid and promote instant public recognition. Logos are either purely graphic (symbols/icons) or are composed of the name of the organization (a logotype or wordmark). An example of an abstract mark is the blue octagon representing Chase Bank, while an example of a representational mark is the "everyman" icon of PBS. Examples of well-known logotypes (wordmarks) are the striped IBM design, Mobil written in blue with a red "o" and CocaCola written in flowing red script. [3]

Here are three famous logos: an abstract mark (Chase Bank by Chermayeff & Geismar), a logotype (IBM by Paul Rand), and a pictorial mark (Girl Scouts of the USA by Saul Bass, 1978). Wikipedia.com

The Chase Bank logo

Read about the evolution of the IBMcorporation and logo

The Girl Scouts logo was recently redesigned.
Read about it here.

 
A monogram is a motif made by combining two or more letters to form one symbol. Letters are often overlapped and are sometimes abstracted. Monograms are often made by combining the initials of an individual or a company, used as recognizable symbols or logos.[4]

Albrecht Dürer's monogram on a wood engraving (1498).

Mark Twain's monogram MT on the cover of his book The American Claimant.

The Univerity of Texas monogram

What's the difference between logos and monograms? A monogram is the combined initials of any name while logo is the graphical presentation of a company or individual. A monogram can be a logo but logo can't always be a monogram.

I made some monograms with my initials:

Watch:

• Writing Video - Mankind The Story of All of Us - HISTORY.com

Notes:

[1] http://en.wikipedia.org/wiki/Ideogram
[2] http://en.wikipedia.org/wiki/Pictogram
[3] http://en.wikipedia.org/wiki/Logo
[4] http://en.wikipedia.org/wiki/Monogram 
http://en.wikipedia.org/wiki/Alphabet
http://en.wikipedia.org/wiki/Heiroglyph
http://www.aiga.org/content.cfm/symbol-signs