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.