12 points in 1 pike
6 pikes are in an inch
6 pikes are in an inch
Design Principles for the Visual Novice
Adapted from Robin Williams' The Non-Designer's Design Book
Four Basic Designs Principles
- Contrast - The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line, thickness, shape, space, etc.) are not the same, then make them Very Different. Contrast is often the most important visual attention on a page.
- Repetition - Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thickness, size, etc. This helps develop the organization and strengthens the unity.
- Alignment - Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.
- Proximity - Items relating to each other should be grouped close together
Principle 1: Proximity
Proximity is really just a matter of being a little bit more conscious, of doing what you do naturally, but pushing the concept a little further. Once you become aware of the importance between lines of type, you will start noticing its effect. Once you start noticing its effect, you own it, you have power over it, you are in control.
- The principle states that you group related items together, move them physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated bits. Items not related should not be in close proximity to each other.
- As in life, proximity, or closeness, implies a relationship.
- By grouping similar elements into one unit, several things instantly happen. The page becomes more organized. You understand where to begin reading the message, and you now when you're finished. And the "white space" (the space around the letters) becomes more organized as well.
- The basic purpose of proximity is to organize. Other principles come into play as well, but simply grouping related elements together into closer proximity automatically creates organization.
- If the information is organized, it is more likely t be read and remembered.
- As a by-product of organizing the communication, you also create more appealing white space.
- Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops.
- If there are more than three to five items on the page, see which three to five items on the page, see which of the separate elements can be grouped together one visual unit.
- Too many separate elements on a page
- Things stuck in the corners and in the middle
- Elements that aren't related in close proximity with each other
- Equal amounts of white space between elements, unless each group is part of a subset
- Confusion over whether a headline (or caption, etc.) belongs with its related material (this should be very clear).
Proximity is really just a matter of being a little bit more conscious, of doing what you do naturally, but pushing the concept a little further. Once you become aware of the importance between lines of type, you will start noticing its effect. Once you start noticing its effect, you own it, you have power over it, you are in control.
Principle 2: Alinement
- The purpose of design is to convey information
- The fist thing we do to accomplish that goal is to group common elements.
- The next step is to align those elements.
- There are 4 types of aligns:
- Left aligned: A block of text (or group of elements) that is lined up on the left
- Right aligned: A block of text (or group of elements) that is lined up on the right
- Centered: A block of text that lines up around an image.
- Justified: A block of text that is evenly aligned on the right and left
Principle 3: Repetition
Look at any professional design book with multiple chapters. Each chapter is visually announced or presented in the same way:
Although this technique works well for chapter divisions in reinforcing the transition from chapter to chapter, it would not work well for regular pages of the book. In order to maintain consistency throughout the rest of the book, you could use the typeface from the cover for the page number or you might a graphic from the title page as a thumbnail along the page number, at the bottom of a page, or at an inside-the-chapter division...
Look at any professional design book with multiple chapters. Each chapter is visually announced or presented in the same way:
- Each chapter title might be placed in the same part of the page and in the same font and size
- Each chapter number might be a light gray placed behind the title and at the top of the introductory text
- Introductory text might always be set in a box with the same width, font, line spacing, and alignment
- Repeating a particular style in this way created a visual redundancy -- the third basic design principle, the purpose of which is to reinforce concept.
- The point of the principle of repetition is to create an identity with visual reiteration is to create an identity with visual reiteration, to let people know that they are about to read a headline, a new chapter, a cutline (caption) beneath a photograph, or an advertisement for IBM.
- You do this by using the same typeface, color, or graphic for the same kind of thing, wherever it appears throughout a single document or a series of documents.
- Set chapter heading type in an arc
- Use the same font inside the chapter heading and page numbers
- Repeat the mouse as a black and white icon
- Use the mouse as a background for a drop cap (when the first letter of a paragraph is set larger than the rest)
- Repeat the cover design (without the title and other type) as a light gray background on the opening pages of chapter
- Applying this principle is often the most enjoyable, because you get to use a lot of creative jiuce. There are so many different things you can do, so let's dig in and go for it:
- We know that the following information should present on a chapter heading page.
- Chapter number
- Chapter title
- Page number
- Beginning text of chapter
Although this technique works well for chapter divisions in reinforcing the transition from chapter to chapter, it would not work well for regular pages of the book. In order to maintain consistency throughout the rest of the book, you could use the typeface from the cover for the page number or you might a graphic from the title page as a thumbnail along the page number, at the bottom of a page, or at an inside-the-chapter division...
Principle 4: Contrast
- Studying color theory, you learn that combining different colors can lead to interesting visual juxtaposition. Think about some of the common color combinations that are used in out day-to-day lives. Green and red are used for Christmas, while violet and yellow are often used for school colors and for Easter.
- Why is that? It is because contrasts create visual interest.
- Visual excitement in design doesn't arise only from color and color combination.
- You can create the same kind of interest with combinations of type styles and sizes or by combing images that are considered to be opposites, either of each other or of the text.