Design Elements 1- Line. - Sabancı Üniversitesipeople.sabanciuniv.edu/muratgermen/design_elements.pdfSabanc University - FASS - Introduction to Multimedia / Instructor: Murat Germen

Sabancı University - FASS - Introduction to Multimedia / Instructor: Murat Germen 1

Design ElementsThere are seven elements of graphic design that are the starting point of your design ideas: Line, Shape, Texture, Space, Size, Value and Color. Each of these elements is a building block to a good layout. You are familiar with most of these elements from everyday life so there is nothing mysterious about them. Each one of these elements can be used to design different layouts depending on how you use them. When using the elements of design, it is important to know which elements are necessary and which are not. Knowing this will keep your layouts clutterless and help strengthen your design. 1- Line. The first element of design is line. Lines can be used in a variety of ways in a layout: They help to organize information; They can direct your readers' eye as to the organization of the layout; They can create a mood; And, they can create rhythm and movement.

For example, lines can organize information on your page. A line can define the boundaries of your page. Vertical or horizontal lines can also be used to direct your readers from one piece of information to another. To create a mood, use a wavy line to give the piece a feeling of movement.

Lines in your piece can:• Convey a mood or an emotion. • Organize the design. • Establish columns of text. • Create a texture.• Create movement.• Define shape.• Call attention to a word. • Connect pieces of information in your layout. • Frame an image or a word.


2- Shape. Shape is any element that you use to give or determine form. Shapes also communicate ideas. For example, an international company may use a circle in their logo that could suggest the earth. Unusual shapes attract attention. Because people are used to seeing images regular shapes such as a rectangle, using a shape such a star would call attention to that image. Another example would be arranging type in a shape rather than in vertical columns.

There are three ways that shape enhances your layout. First, shape helps to sustain reader interest. Shapes can be used to break up a page that uses a lot of text. Second, shape is used to organize and separate. A part of the text can be placed in a shape with a colorful background and will add variety to the page. Last, shape can be used as a conceptual tool.You can use shape to lead your reader's eye through the design. In layouts, the eye looks for a place to begin and will follow through the design to the end. The three different types of shapes- geometric, natural and abstract. Geometric shapes are triangles, squares, rectangles and circles. Geometric shapes are regular and structured,and make excellent building blocks for design. Natural shapes are plant, animal or human,and are irregular and fluid. For example, instead of using a rectangular shape to frame part of a page, you could use ivy if it is appropriate, to give the page a light, airy feeling. Abstracted shapes are defined as simplified versions of natural shapes. An example of an abstracted shape is the symbol for handicapped accessible is a figure in a wheelchair.

To use shape in your piece: • Frame a photograph using irregular shapes. • Symbolize an idea. • Connect pieces of information.• Make a part of the body copy more interesting.• Highlight information using a shade of a color. • Imply letterforms by using a triangle to represent

the letter "A" or a circle to represent the letter "O."

• Tie together all the elements on a layout.


3- Texture. Texture gives the design piece a look or feel, or a surface. Think about the different textures that we encounter everyday. Texture can help you create a particular moodfor a layout or be used in individual shapes. Texture can be used in your layout to add dimension and richness. There are two types of texture. The first, tactile texture, can be felt. For example, think about the different pieces of paper you have handled. The second, visual texture, is used to create the illusion of texture on a printed piece. Wallpaper is a good example of visual texture. Blocks of type can be used as texture by alternating the patterns of light and dark that are created by the shapes of the letterforms as well the spaces between them. A pattern is type of visual texture. When an image or line of type is repeated many times, the patterns of lights and darks add dimension to a surface. Wrapping paper is a good example of pattern. Patterns can make excellent backgrounds and borders in layouts.

4- Space. Space is an essential element in your layout. Space is defined as the distance or area between or around things. When you have many elements in a piece, you must leave some areas free from type and imagery. This is called white space, and it creates a rest for the eye, and visually organizes what's on the page. The placement and the value of the shapes on the page create spatial relationships and focal points, which are centers of interest.


To use space in your piece:• Give the eye a visual rest by using white space.• Use a small amount of space to create ties between elements. • Form positive and negative shapes with the use of color and shape. • Give a layout depth by overlapping one element with another. • Use a lot of white space around an element to highlight it. • Use large margins to help make a layout easy to follow.• Use unequal spacing between elements to make a page dynamic.• Use letterspacing to help make type very legible.


5- Size. Size is how big or small something is. In design, size can function, size can attractor size can organize.

The first factor you need to consider is function - what the printed size of the piece will be.Think about how the piece will ultimately be used and whether the its use will end up limiting the size. For example, if you are designing a brochure, will it need to fit in a regular envelope? The second factor is using size to attract your audience. You can contrast large and small elements or make an image larger and crop it in an interesting way. The third factor is using size to organize your piece. To attract your viewers attention, make the most important element the largest and the least important element the smallest.Headlines are usually the largest type element on the page, while subheadlines, and body text is smaller. Larger objects appear to be closer on the page than smaller ones, and that can be used to reinforce importance and create artificial spatial relationships.

To use size in your piece: • Make the most important element the largest.• Bring elements forward or make elements recede on the page. • Give the reader a sense of scale of a photograph by using a related image. • To make all elements easy to see by using larger type or pictures. • Make elements fit together properly in a piece by keeping repeating elements such

as headlines, subheadlines and body copy the same size.


6- Value. Value is the darkness or lightness of something. Value helps to gives shape and texture to everything around us. In design, every element has value. When laying out pages, an element's value will be affected by its background and other elements that are around it.For example, if you use a lot of text in a small area, it will make the paper look like it has turned gray.

Value is also an important tool for expressing the theme or mood of your design. If you use values of black, white and gray in a design, you add power or change the mood of the design. A good example of this the album cover for the Beatles' "White Album." The cover is a stark white with the words "Beatles" set in small type. The restrained use of value created a visually impacting piece. Value helps to establish contrast by subtly blending shades of color or black and white. Value also helps to create movement and direction. If you place a single black dot on a white background, there is great contrast between the foreground (the dot) and the background (the white background). If you then add a second dot below the first, both dots will have equal importance, unlike the first example, which only has one element on the page. Furthermore, if you make the second dot a 50% shade, the value of the second dot has created movementand direction. To use value in your piece: • Use large type with lots of leading (space between lines of type), which is a dark

value, and small type with small amounts of leading, which is a light value.• Use black and white to create a checkerboard background pattern.• Use light values to create a subtle look to your piece.


7- Color. Color is the ultimate tool for symbolic communication. The decisions you make about color should be made with great care to ensure the success of your design piece. You should think about the mood you want to convey. Like value, color can evoke moods and emotion. It can also help to identify an important element in your layout as well as transmit the message of your communication. For example, you could use a colored frame around a group of images to let your reader know that all of those images belong together. You could also use red to convey an important piece of textual information. Although color can make a layout more dynamic, it is important to consider why you want to use color and what you would like the color to achieve. Think about what colors are most appropriate to your message and your audience. To use color in your piece: • Make important text a different color than the rest of the copy. • Use a bright color to tell the reader where to look first.• Use bright colors together to help create a feeling of excitement.• Repeat a color from an image and use it with corresponding type or as a

background to help unify the layout. • Color code a document (such as a training manual) with large amounts of text to help

organize the piece. • Use an appropriate color to help differentiate parts of a chart or graph.• Use pastel colors to create a soothing mood.


Design PrinciplesThere are five principles of design: Balance, Contrast, Emphasis, Rhythm and Unity. These principles will help you combine the different design elements into a good layout. Each principle discussed in this section can be combined with, and applied to, the seven elements.For example, to create unity in a layout you can use any one of the elements such as line, texture, shape, space, size, color. The principles of graphic design affect where you place type and image, and influence every decision you make when designing a layout. The principles also affect how each piece of image and body copy relate to each other, what your message is and how you communicateit. When working with the design principles, always think about how each principle you use will enhance your layout, make it visually appealing to your audience, how it is organized and whether or not it helps to communicate your message clearly. 1- Balance. What is the driving force behind balance? Gravity. If you are caught off balance, you may fall, or you may shift your weight to maintain your balance. In graphic design, if a layout is unbalanced, your readers will feel uneasy as if something is wrong with the page. One approach to balance is symmetry, which is an equal distribution of weight. All of the elements on the page are centered and balanced. Symmetrical design can communicate stability and strength, which appropriate for a traditional or conservative piece. The other approach is asymmetry, which is the opposite of symmetry. The elements on the page are not uniformly placed on the page. To balance an asymmetrical design, use design elements such as color, value, size, shape and texture. Asymmetry can bring contrast,variety, excitement, movement, surprise and informality to a communication. It would be appropriate for a piece that entertains as well as informs. To Use Balance In Your Piece: • Center typographic and image elements on the page. • Use a shape such as a circle or triangle and repeat the

shape at regular intervals. • To offset a large image or block of copy, place several

small visuals in one area. • Think about using one or two odd shapes if you are using

"regular" shapes. • To lighten up a piece with a lot of body copy, use a bright,

colorful image. • Around large blocks of copy and dark image, use a lot of

white space. • Use several bits of copy to offset large, dark images,

leaving plenty of white space around each. • Use a grid with an equal number of columns or horizontal

rows.


2- Contrast. Contrast can assist you in strengthening an idea and is a strong design principle that will help you distinguish your communication. When you add any element to a page, you've used contrast.

How would you communicate a poster showing all of the moon phases? It would seem logical to use a dark background with white images to make the different phases of the moon stand out on the page. When using contrast in your designs, think in contrasting terms such as small or large, white or black, crooked or straight, rough or smooth, dull or shiny, symmetrical or asymmetrical, serif or sans-serif.

The contrast choices you make do not have to be dramatic to be effective. Think about the overall message of your piece and then consider whether a diminished contrast or a subtle contrast would be suitable. When working with a subtle contrast, be sure that the difference is noticeable or it may go unnoticed, or look like a mistake.


3- Emphasis. In design, emphasis is whatever stands out the most gets the attention. For a communication to attract readers, it must have a focal point. Without a focal point, readers will move on. On the other hand, if there are too many focal points the reader will not know where to start and quickly give up. As a designer, it is your job to choose what the most important element of the communication is based on the message you want to send to your target audience. You must choose the most important element based on the message you're trying to communicate to your target audience. To make an element bigger or bolder for the sake of making bolder or bigger won't enhance your piece.

After choosing an element to emphasize, there are several methods of calling attention to it. Generally, a focal point is created when there is one element that differs from the other elements. For example, if you are working with a vertical layout, using a horizontal element will stand out (i.e. vertical columns of text with a horizontal picture). To use emphasis in your piece: • Surround an image with a lot of text. • Place an important line of text on a curved line or an angle, and keep the other

lines of text in straight columns. • Set headlines and subheadlines in a bold typeface, and body text in a lighter

typestyle. • Place a small bit of text near a large image.• Set the most important information in a color, or use an unusual typeface.


4- Rhythm. Rhythm is used to achieve movement and is the visual progression of repeating elements in a varied pattern. The two keys to using rhythm are repetition and variation.Repetition repeats visual elements in a consistent manner, and variation is a change in the size, placement or form of visual elements. Repetition helps to unify a piece. For example, to make text easy to read, use even columns.Without the use of variation, repetition can be boring. Many pages of identical columns of text should be varied with the use of headlines, subheadlines and images. Rhythm is used to communicate a feeling or mood in a piece. To establish a calm and relaxing mood, place your elements at regular intervals, which is a smooth, even rhythm. This approach to rhythm helps your reader with dry, factual text. To establish a more dynamic mood, vary the size and spacing of elements. Advertisements will often use this type of rhythm to keep an audiences attention. To use rhythm in your piece: • You can repeat a group of similarly shaped images along the same

baseline with equal space between each element. • Use a series of progressively larger elements in a repeated series. • Set your text in one size, and use large images.• Alternate dark, bold type with light, thin type. • Repeat a similar shape in various areas of a layout.


5- Unity. In design, unity helps all of the design elements look like they belong together.Your readers need visual cues telling them which parts of the layout go together. For example, relate a specific headline, body copy, and image that go together. If there is no clear organization or relationship between elements, you've lost your reader. There are three ways for you to unify type and images: Grouping, Repeating and GridSystems. Grouping means that elements that are close together look that like belong together. Elements are repeated through the use of color, shape or texture. Repeating elements in a layout, unifies it. For example, if you are using an image of a flag, you can use the blue from the flag as one of your colors. A grid system is a division of page space. You can use a grid to divide the page into columns, margins and space. A grid system helps establish a framework for the typographic elements and imagery on your page.

Use variety to keep your layouts from being boring. Think about beginning with a theme using a circle. You can then use the circle and variations of the circle in different sizes and shapes. Your elements are related through the use of shape, and they are varied and add interest to your layout. To create unity in your piece: • Repeat a specific color, shape or texture throughout the layout in different areas. • Group related elements such as headlines, body text, images and captions together. • Choose visual elements that have a similar color, theme or shape. • Use one or two type families and vary the type size and weight for contrast. • Keep the type families or styles used for headlines, subheads, body copy and captions

consistent throughout the layout. • Use a border around a page, photo, or poster. • Group elements with the use of line, colored background or shades of a chosen

color.


DTP Rules of Thumb• Keep it short, unless it is to be read for recreation. • Make it easy to read, then visually interesting.• Use fonts and graphics conservatively, unless you have a good sense of graphic

appropriateness. • If you see a style you like, borrow it. We all do it. • If in doubt, use the rule of thirds and the golden section. These are universal,

timeless and easy to use. Things to Avoid (Parker, R.C. The 25 Worst Desktop Publishing Mistakes (and How to Avoid Them). PC Computing. May 1989). 1. Wide columns of text-these are hard to read.2. Too much or too little white space. No elements hanging in the air and you don't want so

much information that the page is dense and daunting to the reader. 3. Rigid balance - too stiff and formulaic. 4. Lack of hierarchy - readers know where to start. 5. Overuse of lines and boxes to divide up content. It is better to use the rule of thirds to

separate content. 6. Floating visuals - graphics should have a distinct purpose to support the text (avoid

clipart-it is a desperate attempt to add graphics and you can never find exactly what you need anyway).

7. Too much or too little variety.8. Poor line spacing - it should be appropriate to the font and font size used. 9. Too much or too little contrast.10. Poor heading or subheading placement. If possible, avoid placing them near the bottom

of the page. It is better to place them at the 1/3s of the page. 11. Poor text placement - avoid widows and orphans. 12. Poor text spacing - don't use cramped or widespread characters. Lines of text should

line up across the page, even over different columns (use the baseline matching option). They should also match up to graphics.

13. Excessive use of columns - 2 or 3 is good. 14. Fussy borders and decorative dividers - they are out-of-date. 15. Inappropriate font use - fonts have a style and feel about them, match them to your

document. Also, size and serifs are important. Smaller fonts should be sans-serifs to make it easier to read. Limit the number of fonts used to 2 styles in 4-5 sizes.

16. Poorly cropped graphics - each graphic has an internal composition as well as contributes to page layout. Set internal image cropping first, then set onto page to create pleasing page layout.

17. Inappropriate color use18. Tombstoning - don't use graphics for headers or banners. Avoid underlining - use bold or italics instead. REFERENCEShttp://fla.esf.edu/cavlab/Reference/res.htmhttp://www.rit.edu/~eaj4107/index2.html

Documents

Design Elements 1- Line. - Sabancı Üniversitesipeople.sabanciuniv.edu/muratgermen/design_elements.pdfSabanc University - FASS - Introduction to Multimedia / Instructor: Murat Germen