Principles and Elements of Design

Transcription

1 Principles and Elements of Design Aesthetics Function Lesley Pearce, Team Solutions,

2 The Principles of Design. The principles of design determine what you do with each of the design elements. They influence every decision you make when creating a design. Balance An equal distribution of weight. It helps determine the sizes and arrangement of the individual parts of a layout design. Rhythm A pattern created by repeating elements that are varied. It affects the shapes of and spaces between layout elements. Emphasis What stands out most gets noticed first. Emphasis influences choices of colour, value, size, shape. Unity All the elements look like they belong together. This helps determine how many elements you use and how you use them. The Elements of Design. The elements of design are the ingredients for making good layout. Which elements are used and how they are combined will depend on the project and the message or feeling you want to communicate. Line Any mark connecting any two points. It can organise, direct, separate, or suggest emotion in a design. Shape Anything that has height and width. Shapes define objects, attract attention, communicate ideas and add excitement. Texture The look and feel of a surface. Adds richness and dimension, emphasises and suggests mood or feeling. Space The distance or area between or around things Separates or unifies highlights and gives the eye a visual rest. Size How big or small something is. Size shows what s most important, attracts attention, and helps to pull design together. Value The darkness or lightness of an area. Value separates, suggests mood, adds drama, and creates the illusion of depth. Colour The ultimate tool for symbolic communication. Colour conveys moods, attracts highlights important aspects of the design. Task: In your visual diary/portfolio. Head up a new page with just one element and principle of design. Think how the word should look like. Write a short statement to explain the meaning. Collect different pictures to illustrate the element or principle. Also add free hand sketches and any other visual resource.. 2

3 Texture The look and feel of a surface. Adds richness and dimension, emphasises and suggests mood or feeling. You can use texture to: Relate an image to its background. (Run a floral pattern around a photo of an elegant, floral picture frame.) Give the piece a mood or a personality. (A piece done on soft, textured paper stock gives a feeling of warmth.) Create contrast for interest. (Run a solid colour around a very textural photo or illustration, or around a block of type.) Fool the eye. (Create a wrapping paper pattern by repeating type to add dimension and visual texture.) Provoke a particular emotion. (A piece with pictures of trees and flannel shirts produces a different reaction than a piece with pictures of chrome and glass objects.) Create a feeling of richness and depth. Add liveliness and activity. (Foil stamp a work or two on a letterhead.) 3

4 Colour The ultimate tool for symbolic communication. Colour conveys moods, attracts highlights important aspects of the design. You can use colour to: Highlight important copy. (Run all subheads in red so they ll stand out.) Attract the eye. Tell the reader where to look first. (Copy in a red circle will be read first.) Make elements appear to vibrate, creating a feeling of excitement. (Try purple and green together, or orange with blue.) Tie a layout together. (Repeat a colour from a photo or an illustration for the background, or as coloured type.) Organize. (Colour code parts of a manual or training document.) Set off different parts of a chart or graph. Create a mood. (Bright colours convey excitement while pastels soothe.) Group elements together isolate them. (Set off an important block of copy by putting it on a tint, or wrap a tint around several pictures.) Provoke an emotional response. 4

5 Value The darkness or lightness of an area. Value separates, suggests mood, adds drama, and creates the illusion of depth. With value you can: Visually separate different kinds of copy. (Use large type and heavy leading for body copy-lighter value-and tightly packed, smaller type for sidebars-darker value.) Lead the eye across the page. (Run a dark to a light graded tone or tint in the background.) Create a pattern, such as a checkerboard effect. Give the illusion of volume and depth. (Shade a shape to make it look threedimensional.) Give a piece an understated, subtle feeling. (Use only light values.) Make a layout dramatic. (Use areas of black against areas of stark white.) Emphasize an element. (Make the most important element very light and all the others dark.) Make objects appear to be in front of or in back of each other. (Dark areas recede in space.) 5

6 Size big How or small something is. Size shows what s most important, attracts attention, and helps to pull design together. With size you can: Show which element is most important by making it the biggest. Make elements come forward or recede on the page. (Larger ones tend to come forward.) Give the reader a sense of scale. (In a photo, show a hand with an object for comparison of size.) Make all elements easy to see. (Use bigger type and pictures on a poster that will hang on a wall.) Give a piece noticed. (If you mail it in an envelope that s larger or smaller than a #10-regular business letter size-it will attract more attention.) Contrast two elements to add interest. (Put a large photo beside a tiny line of type.) Break up space in an interesting way. Make elements fit together properly in the piece. (Set type in a small size to make room for more pictures.) Establish a consistent look throughout a brochure or newsletter. (Make all heads the same size.) 6

7 S p a c e The distance or area between or around things Separates or unifies highlights and gives the eye a visual rest. You can use space to: Give the eye a visual rest. (Leave plenty of white space on a spread otherwise filled with copy.) Create ties between elements. (Put less space between elements to make them look related.) Form positive and negative shapes. Give a layout a three-dimensional quality. (An element that is overlapped by another looks as if it s farther back.) Highlight an element. (Put a lot of empty space around something important.) Make a layout easy to follow. (Put ample margins around a piece.) Create tension between two elements. (Place two photos so they are almost touching each other.) Make a page dynamic. (Have unequal spacing between elements.) Make type as legible as possible. (Allow comfortable spacing between letters, words and lines of type.) 7

8 Line Any mark connecting any two points. It can organise, direct, separate, or suggest emotion in a design. With line(s) you can: Organize information. (Place lines between the columns of numbers in a financial report.) Highlight or stress words. (Set off a headline with a rule.) Connect bits of information. (Link a caption to the photo it is describing with a line.) Define a shape. (Arrange a line of type in the outline of a Christmas tree.) Outline a photo to set it off from other elements. (Run a thick line around a photo as a border.) Create a grid. (Separate items into columns for a catalogue.) Create a graph. (Draw a line across a grid to show profit and loss over time.) Create a pattern or rhythm by drawing many lines. (Vary thick and thin lines and the spaces between them.) Direct the reader s eye or create a sense of motion. (A diagonal line looks more active than a horizontal one does.) Suggest an emotion. (Use a curved line in a ballet poster to suggest elegance.) 8

9 Shape Anything that has height and width. Shapes define objects, attract attention, communicate ideas and add excitement With shape you can: Crop a photo in an interesting way. (Drop it into an oval.) Symbolize an idea. (A heading symbolizes love.) Make a block of copy more interesting. (Set the copy for Fourth of July ad in the shape of a star.) Create a new format. (Make the whole brochure the shape of a triangle.) Highlight information. (Rule a screened or tinted shape behind important copy.) Imply letterforms. (Use a triangle to represent the letter a.) Tie the piece to the subject matter. (Use geometric shape on an architect s brochure and natural, curvy shapes on zoo brochure.) Tie together all the elements on a layout. (Use square bullets and square copy blocks and crop photos square.) 9

10 Balance An equal distribution of weight. If a layout isn t balanced, the reader feels uneasy. There are two approaches to balance. You can arrange elements so they re evenly distributed to the left and right of the centre, symmetry. This communicates strength and stability. Or asymmetry, arrangement of dissimilar shapes, objects of equal weights. You can use colour, value, size, shape and texture as balancing elements in an asymmetric design. Asymmetry brings contrast, variety, movement, surprise and informality to a page. To create balance you can: Repeat a specific shape at regular intervals, either horizontally or vertically. (Make the photos the same size no angles and set them the same distance apart.) Centre elements on a page. Put several small visuals one area to offset a single large visual or block of copy. Use one or two odd shapes and keep the rest regular shapes. (Put two photos in ovals and keep all the copy square blocks.) Lighten a text-heavy picture with bright, colourful visuals. Leave ample white space around large blocks of copy with very dark photos. Have a large light area the centre of your piece. Putting a small dark area. the edge. Offset a big, dark photo illustration with several small bits of copy, each surrounded by plenty of white space. Divide your page into an equal number of columns with horizontal rows. 10

11 Emphasis What stands out most gets noticed first. In order to attract viewers every layout needs a focal point. If there are too many points of interest the reader won t know where to look first and will give up. Therefore it is important to emphasis the most important element based on the message you re trying to communicate. As a general rule, a focal point is created when one element differs from the rest. E.g. if all is vertical a horizontal element will differ from the rest. A small detailed illustration surrounded by a large area of flat colour would form a focal point. To create emphasis you can: Place a small element, say as a line of reversed type on small photo, in the middle of large area of black or white. Surround an illustration with a lot of text. Use a series of evenly spaced, square photos next to an outlined photo with an unusual shape. Put an important bit of copy on a curve or an angle while keeping all the other type in straight columns. Use bold, black type for head or subhead and much lighter type for all other text. Place a large picture next to a small bit of copy. Put a shape that appears to be three-dimensional or a black-and-white photo against a field of flat colour. Reverse the headline out of a black or coloured box. Use coloured type or an unusual face for the most important information. Put a list of benefits or a sidebar (a short article that supports a longer one) in a tinted box. 11

12 Unity All the elements look like they belong together Readers need visual clues to tell them a piece is a unit. Does the headline, copy, photo caption go together? If there is no organisation or some relationship between the elements on a page, the reader will get lost. You can group images or type, elements close tighter look like they belong together. Repeating: a colour, shape or texture repeated in the design pulls it together. Use a colour from a photo for the background colour. A grid establishes a framework for spacing and proportions of type and pictures in apiece. Variety keeps unified layouts from being boring. Use unity to hold a layout together and variety to give it life. To create unity you can: Repeat a colour, shape or texture in different areas spread or throughout a brochure. (Make all the photos circular or oval.) Group elements, such as related headline, body copy, picture and caption, together. Pick visuals that share similar colour, theme or shape. Line up photos and copy along the same grid line(s) throughout a piece. Stick to one or two types of families, varying only size and weight for contract throughout a brochure or newsletter. Keep the type style you select for heads, body copy, photo captions and callouts consistent throughout. Use the same colour palette throughout. Place callouts (quotes or sentences that summarize piece, also called pull quotes ) near the section type from which they were taken or to which they appear. Put a border around a poster, page or spread. Group elements with light screens or tints. 12

13 Rhythm Communicates a feeling or mood. Regular, calm, relaxing mood. Abrupt changes in size, establishes an exciting mood A pattern created by repeating elements that are varied. Repetition: repeating similar elements in a consistent manner. Variation: a change form, size, or position of elements. To create rhythm you can: Repeat a series of similar shaped elements along the same baseline, with even white spaces between each (regular rhythm). Repeat a series of progressively larger elements with larger white spaces between each (progressive rhythm). Make the entire test the same size (in the same-sized columns or boxes) but make the pictures different sizes (repetition with variation). Alternate dark, bold type and light, thin type. Alternate dark pages (with lots of type or dark pictures with light pages (with less type or light-coloured pictures in a brochure). Repeat a similar shape in various areas of a layout. Repeat the same element in the same place on every page of a newsletter so the reader moves steadily through it. (Repeat a reduced version of the nameplate at the top.) Use a lot of elements with tight spacing between them or a few elements with loose spacing between them. 13

14 What is a good layout? A good layout works It does what you set out to do You need to know what the purpose of the piece is, who it is for, and where it will be seen or how it will be distributed A good layout organizes It maps out a visual path for readers to follow - shows what comes first, second third... You must present the information in good order to make your message as clear as possible A good layout attracts It grabs your readers' attention and pulls them into your piece It has to stand out from the crowd by being different from everything around it. Depending on the environments and its that can mean being startling, pretty, surprising, entertaining, unusual, or simple and direct. The process of making a good layout is similar to doing a jigsaw puzzle. You keep putting the pieces together different ways until they all fit comfortably. How to make a good layout work? 1. Determine the purpose of the piece (e.g. business card, logo, brochure, ad, poster, web page...) Choose a graphic that can express and support the main message. Plan your layout around it. 2. Size the piece to fit its use. If it is for the computer, make the width fit comfortably on the screen without the need of a horizontal scroller 3. Keep your target audience in mind: graphics and types (fonts) must be large and clear enough to see. How to organize a good layout? 1. Make it easy to follow : arrange and emphasize information to make your message as clear as possible. 2. Choose what the reader should see or read first. Make it stand out from everything else to show where to start first (usually top left corner) 3. Decide what must come next: words (text) or pictures (images) 4. Continue arranging in order of Information - put colours behind an important area of information - use rules to separate information into groups - leave white areas around information. - align similar kind of information - call out items by putting bullets in front of them - put pictures next to important information Type (font) - use different sizes of type / font, e.g. headlines bigger than subheads - change the weight of the type, e.g. font attributes : 14

15 importance and relevance all the information until everything has been seen and understood. bold, italic.. to make it stand out - put type in a box or give it an interesting shape - change style of type / font faces - use different coloured or reversed type, e.g. white on black How to attract attention? Sizes and Arrangements enlarge a photo of something small, or use a very large type for a headline. surround a very small picture or bits of type with a lot of open space. tilt an image or a block of text at an angle. crop an image in an unusual way, such as showing an eye instead of the face. set important information in a atypical way, such as setting a headline on a curve. Colours and Backgrounds choose a paper / background with an interesting noticeable texture or colour. choose bright colours when the piece will be viewed in a grey environment, such as a text-heavy magazine use a solid black area or a large white area for a newspaper ad. Colour is crucial to visual communication. It s a basic property of light. It captures your eye. You can never learn too much about it. form and colour are the two basic elements in visual communication form affects the intellect colour affects the emotions The Brain and Visual Communication 80% of the brain is dedicated to processing visual communication 1. Colour has a significant impact on visual communication 2. The human brain requires a sense of order or it will reject whatever it sees Colour and Visual Experience If too many colours are used, the viewer will become visually confused and will reject the image. If not enough colour is used, boredom results. 3. Colour impressions are both quick and long lasting Marketing psychologists state - colour accounts for 60% of the acceptance or rejection of what a person sees - a lasting impression is made within ninety seconds Colour can sway thinking, change actions, and cause 15

16 reactions. The colours used for a product, web site, business card, or logo cause powerful reactions Decisions about colour are a critical factor in success of any visual experience Colour combinations can attract or distract. The right colour combinations can be as important as the individual colours. 1. The human eye can see 7,000,000 colours Colour and Optical Effects 2. Some colours are eyesores : certain colours and colour relationships can be eye irritants, cause headaches, and wreak havoc with human vision. 3. Some colours and colour combinations are soothing 4. The appropriate use of colour can maximize productivity, minimize visual fatigue, and relax the whole body The Three Primary Colours: YELLOW: RED: yellow is the most visible colour of all the colours yellow is the most cheerful of the spectrum yellow is a symbol of the deity in many global religions pure bright lemon yellow is the most fatiguing colour yellow is an eye irritant - - babies cry more in yellow rooms - husbands and wives fight more in yellow kitchens - opera singers throw more tantrums in yellow dressing rooms BLUE: A company which markets red contact lenses for chickens (at 20 cents a pair), points to medical studies showing that chickens seeing red during the day are happier and eat less food. A spokesperson said the lenses will improve world egg-laying productivity by $600 million a year. blue is an appetite suppressant weight loss plans suggest putting your food on a blue plate, put a blue light in your refrigerator, or dye your food blue! A little black will make it a double whammy 16

17 Rules for making good design 1. If there is no message, no narrative no idea move on. 2. Communicate don t decorate as form carries meaning, no matter how simple or abstract 3. Use the one two punch. Establish an hierarchy, the order you wish to be seen first. Focus viewers attention on one important thing first than lead them through the rest 4. Relate all design elements so they are harmonious 5. Use maximum of 2 typefaces. (Different weights, italics, colour should be enough) 6. Pick colours on purpose. Know how colours work together and what they mean. 7. If you can do with less do it! 8. Negative space (white space) is magical, create it don t just fill it up. 9. Treat the type as image, as though it is just as important. 10. Type is only type when it is friendly. (legible, readable) 11. Create contrasts. (density, rhythm by pulling some material closer together and pushing other material further apart 12. A range of tonal value. Dark and light areas of one colour. 13. Symmetrical visual arrangements are generally static and offer little movement. Find one symmetrical and one asymmetrical design. Homework: Find examples of the above. Use magazines, internet, business cards etc. Heading is research/good design. You will show this to your client to get feedback so layout is important. Number them for reference. You may need to leave space on the page for client feedback. 17

18 Harmony Tonal Elegant Innovative Amusing Minimalist Interactive Texture Balance Linear Complimentary Embossed Movement Symmetrical Asymmetrical Positive/negative Tension Contrast Unity Value Warm Colours Cool colours Type Shape Balance Unity Value Focal point Rhythm Alignment Emphasis Spatial depth 18

19 Web design Design elements checklist Do you have or need a grid? Grids help to organise your material into a logical sequence. Design one and try placing your objects on the page. Have you made good colour choices? Is there adequate contrast between type, images, and background? Is the on screen type readable? Is the text laid out effectively? Can the viewer tell the difference between body text and text that acts as links to other areas of the portfolio? Any spelling mistakes? Is there an understandable navigational menu? Do your viewers wonder how to get from here and there? Do your gallery buttons support your gallery? Are interface buttons logical and in good working order? Are common interface design elements used consistently? Rules, boarders, dots, and type all contribute to the overall feel of your design. Make sure the elements support you message. Function checklist Did you test the project on multiple platforms? Does it play on Mac and PC Will the project open on multiple Web browsers? Safari, Internet Explorer and others all treat files differently Are loading times reasonable. Keep vistors in mind and don t try their patience. 19