Design Principle and Application Pt1

1. Design Principle and Application Pt1 26 February 2014

2. Presentation Schedule • Design elements & principles • Web design principles guidelines

3. Presentation

4. Design Elements & Principles

5. To understand elements and principles, person need to put in designer’s shoes

6. Design Elements • are the building blocks of all designs, chosen to convey the message — beyond the actual words or photos used. • utilize the five elements of design : Other concepts sometimes listed as elements of design are form, space line shape value ortone texture color

7. A line is a form with width and length, but no depth. Artists use lines to create edges, the outlines of objects. A line is created by the movement of the artist's pen. • The direction of a line can convey mood. Horizontal lines are calm and quiet, vertical lines suggest more of a potential for movement, while diagonal lines strongly suggest movement and give more of a feeling of vitality to a picture line

8. Shape is an area that is contained within implied line, or is seen and identified because of color or value changes. Shapes have two dimensions, length and width, and can be geometric or free-form. • Design in painting is basically the planned arrangement of shapes in a work of art. In a picture, the shapes that the artist has placed are considered the positive shapes. • The spaces around the shapes are the negative spaces. It is just as important to consider the negative space in a picture as the positive shapes shape

9. Texture refers to the surface quality, both simulated and actual, of artwork. • Techniques used in painting serve to show texture, i.e. the dry brush technique produces a rough simulated quality and heavy application of pigment with brush or other implement produces a rough actual quality texture

10. Color has three properties. The first is hue, which is the name of the colors. The primary hues are yellow, red, and blue. Secondary colors are made by mixing two primaries. Intermediate colors are mixtures of a primary and adjacent secondary color. • The second property of color is value, which refers to the lightness or darkness of hue. • The third property of color is intensity, which refers to the purity of the hue (also called • "chroma"). color

12. Black • -Black-color of authority and power. • -It is popular in fashion because it makes people appear thinner. • -It is also stylish and timeless. • -Black also implies submission. Priests wear black to signify submission to God. Some fashion experts say a woman wearing black implies submission to men. • -Black outfits can also be overpowering, or make the wearer seem evil. Villains, such as Dracula, often wear black. • http://www.precisionintermedia.com/color.html • http://www.infoplease.com/spot/colors1.html

13. White • Brides wear white to symbolize innocence and purity. • White reflects light and is considered a summer color. • White is popular in decorating and in fashion because it is light, neutral, and goes with everything. However, white shows dirt and is therefore more difficult to keep clean than other colors. • Doctors and nurses wear white to imply sterility.

14. Red • The most emotionally intense color, • red stimulates a faster heartbeat and breathing. • color of love. • Red clothing gets noticed and makes the wearer appear heavier. • Since it is an extreme color, red clothing might not help people in negotiations or confrontations. • Red cars are popular targets for thieves.

15. This color does not usually work well with greens or purples of the same intensity, causing a vibrating effect on the eyes. • It is a perfect color for 'Buy Now' or 'Click Here' buttons on Internet banners and websites as it attracts the eye. • In decorating, red is usually used as an accent. Decorators say that red furniture should be perfect since it will attract attention

16. Blue -The color of the sky and the ocean, blue is one of the most popular colors. peace, harmony, tranquillity, health, coolness, confidence, loyalty, conservatism, dependability and technology -It causes the brain to send off 11 chemical tranquilizers and is a wonderful calming color.

17. Blue • -but avoid using blue when promoting food and cooking because blue suppresses appetite. • -Blue can also be cold and depressing. Fashion consultants recommend wearing blue to job interviews because it symbolizes loyalty.

18. Blue • -People are more productive in blue rooms. • -Studies show weightlifters are able to handle heavier weights in blue gyms.

19. Green • symbolizes nature • easiest color on the eye and can improve vision. • calming, refreshing color.

20. Green • People waiting to appear on TV sit in "green rooms" to relax. • Hospitals often use green because it relaxes patients. • Brides in the Middle Ages wore green to symbolize fertility. • Dark green is masculine, conservative, and implies wealth.

21. Yellow • Cheerful sunny yellow is an attention getter. • considered an optimistic color • people lose their tempers more often in yellow rooms, and babies will cry more. • most difficult color for the eye to take in, so it can be overpowering if overused. • enhances concentration, hence its use for legal pads. It also speeds metabolism.

22. Yellow • Yellow can convey sunlight, joy, happiness, optimism, idealism, wealth (gold), summer and hope. • It is the brightest color and intellectuals love yellow. • It takes more chemicals in the eye to see the color yellow. • Websites targeting older people should look at other colors as yellow can make them feel anxious or angry. • Negatives: Cowardice, illness, hazards, dishonesty • Refer : http://www.bigoakinc.com/limb/color-website-design.php

23. Orange • Orange conveys creativity, confidence, balance, heat, enthusiasm, flamboyance and playfulness. • Orange increases oxygen supply to the brain, producing an invigorating effect, and stimulates mental activity. • It is highly accepted among young people. Orange is very effective for promoting food products and children's products such as toys. • Negatives: Warning, danger and cheapness

24. Beige and Grey • As neutrals, they can be used in combination with almost all colors and still work well visually. • Grey works well in office environments and promotes productivity and stimulates creativity. • Negatives: dull, monotonous, somber and smoky

25. Purple and Brown • Purple- The color of royalty, purple connotes luxury, wealth, and sophistication. It is also feminine and romantic. However, because it is rare in nature, purple can appear artificial. • Brown- the color of earth and is abundant in nature. Light brown implies genuineness while dark brown is similar to wood or leather. Brown can also be sad and wistful. Men are more apt to say brown is one of their favoritecolors

26. If you are not good at mixing colors …google for “web color template”

28. Principles of Design • as ways to work with and arrange the elements Harmony Variety Balance Proportion Dominance Movement Economy

29. 1.Harmony - Deals with repetition Brings together a composition with similar units Color harmony may be achieved using analogous or complementary colors

30. elements principles 2.Variety- The use of dissimilar elements, which creates interest and uniqueness Repeating a similar shape but changing the size can give variety and unity at the same time. Keeping the same size, but changing the color can also give variety and unity at the same time.

31. 3.Balance- is arranging elements so that no one part of a work overpowers, or seems heavier than any other part. Balance symmetrical asymmetrical radial

32. Symmetrical Balance (formal balance) Both sides are similar in visual weight and almost mirrored. Often looks more stiff and formal.

33. Asymmetrical Balance (informal balance) both sides are similar in visual weight but not mirrored. It is more casual, dynamic, and relaxed feeling.

34. Radial Balance is equal in length from the middle

35. elements principles 4.Proportion- involves the relationship of size between objects When all parts of the artwork - size, amount and location fit well together Repeating a similar shape but changing the size can give variety and unity at the same time. Keeping the same size, but changing the color can also give variety and unity at the same time.

36. 5.Dominance- Hierarchy / Focal point - attention to a point in the artwork Foreground the trees act as the dominant element, Middle-ground the house and hills as the secondary element, Background the mountains as the tertiary element.

37. Without Dominant: Direction design is confusing Dominance of Size adds interest Monotonous without one shape dominating

38. 6.Movement - the path your eye takes through the art your eye can be asked to look at lines, edges, shapes and color. Cover album Painting Photograph

39. 7.Visual Economy- keeping your artwork simple is the key to good composition is omitting all non-essential or un-important elements and details which don't really contribute to the essence of the overall composition Photograph Tunnel in the Woods – Susan Kimball

40. Goodcombination of “ingredients” will produce a droolicious cake

41. Web Design Principles

42. Principles of Web Design • Design is more than just slapping HTML tags up onto a page, and by using these principles will help you build more pleasing and useful designs. • suggest how a designer can best arrange the various elements of a page layout in connection to the overall design and to each other. • how manycolors are used, the sizes of fonts, how many columns of text there are, or whether pictures appear next to each other or spread across the page — creating effective and pleasing arrangements of text and graphics.

43. Principles of Web Design • how manycolors are used, the sizes of fonts, • how many columns of text there are, • or whether pictures appear next to each other or spread across the page create effective and pleasing arrangements of text and graphics

45. 1.Alignment • brings order to chaos. How you align type and graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design. • there is a common alignment -- top, bottom, left, right, or centered -- between blocks of text and graphics on the page.

46. Your text alignment aid should not hinder readability. If certain elements are out of alignment, was it done purposefully with a specific design goal in mind? • http://www.arngren.net/

47. 2.Balance • Balance is the distribution of heavy and light elements on the page. • Larger, darker elements appear heavier in the design than smaller, lighter elements. http://www.elithecomputerguy.com/ • The principle of balance shows you how to lay out your pages so that they work.

48. 3.Repetition / consistency • Repeating design elements and consistent use of type and graphics styles within a document shows a reader where to go and helps them navigate your designs and layouts safely. Insure that your document utilizes the principles of repetition, consistency, and unity in page design. • http://www.howstuffworks.com/hsw-podcast.htm • Patterns are easy for humans to comprehend, and repetition provides patterns that make your site easier to comprehend.

49. 4.Contrast • When most people think of contrast, they typically think of colors or black and white. But there is more to contrast than color. • In design, big and small elements, black and white text, squares and circles, can all create contrast in design. • Contrast helps different design elements stand out.

50. 5. Proximity • How close together or far apart elements are placed suggests a relationship (or lack of) between otherwise disparate parts. Unity is also achieved by using a third element to connect distant parts. • Are title elements together? Is contact information all in one place? Do frames and boxes tie together or separate related elements in your document?