Uploaded bySamson Tennela
Elements of Visual Design
The document discusses visual design and its importance in user experience design. It provides examples of visual design elements like line, shape, form, color, texture and composition. It also discusses principles of visual design such as balance, rhythm, hierarchy and unity. The document explains tools used for visual design like Photoshop and the roles and responsibilities of a visual designer in projects.
More Related Content
Similar to Elements of Visual Design
Elements of Visual Design
- 1.
- 2.
- 3.
- 4. “Design is allabout visually telling your story to someone else.”
- 5. W do weneed a Visual design? hy • Many people have a deeper emotional connection with graphics than they do with text • The right combination of visual vocabulary elements can also make your materials more eye-catching • Forty percent of viewers better remember visual elements. • Visual design represents brand • color has the capacity to affect the human nervous system!
- 6. Visual design inthe process of UX.
- 7. Elements of UX Functional specifications/ Interaction design/ User needs/ content requirements information architecture Site objectives Development of application flows to User Research Deciding Features & content facilitate user tasks, defining how the user interacts with site functionality Information design Visual Design (Interface design/ visual treatment of text, graphic navigation design) page elements and navigational Here I am! Making of the wire frame for the Components. actual design based on the other elements. graphic treatment of interface elements (the "look" in "look-and- feel") http://www.jjg.net/elements/pdf/elements.pdf
- 8. Elements of Visualdesign •Line •Shape •Form –light & Dark •Color •Texture •Composition •Unity •Dominance & Subordination •Coherence •Balance •Positive and Negative Space •Rhythm •Proportion—Golden ratio & rule of thirds •Chaos – Simplicity Vs Complexity http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm
- 9. Line Shape Form –light & Dark A line represents a "path" between two Shapes are the result of closed lines. Some Form refers to the three-dimensional quality points. A line can be straight, curved, primary shapes include circles, squares, of an object, which is due in part to light, vertical, horizontal, diagonal, or zigzag. triangles and hexagons all of which appear and dark areas. When light from a single Lines imply motion and suggest direction or in nature in some form or another. direction (e.g. our sun) hits an object, part of orientation the object is in shadow. Light and dark areas within an image provide contrast that can suggest volume Color Texture Composition Color affects us emotionally, with different Texture refers to the surface quality or Organizing the various elements within the colors evoking different emotions. In short "feel" of an object - smooth, rough, soft, etc frame color has the capacity to affect the human nervous system.
- 10. Dominance & Subordination Coherence Unity Unity in design is achieved primarily through placement in your layout. But it can also be achieved through margin and padding Making an element dominant can be done changes to the through size and color. Large objects elements. dominate smaller ones and warm colored Unity refers to an ordering of all elements in objects dominate cooler pale colored an image so that each contributes to a objects Coherence refers to the belonging together or the various parts of the artwork. In reality unified aesthetic effect so that the image is seen as a whole. Positive and these parts may be unrelated, but within the Negative Space confines of the image their color, shapes, and size form a sense of unity. Visual coherence can be achieved through the use of analogous color and color tonality. Balance Positive space is where shapes and forms exist; negative space is the empty space around shapes and forms Proportion— Golden ratio & rule of thirds Balance implies that the visual elements Rhythm within the frame have a sense of weight. Large objects generally weigh more than small objects and dark objects weigh more than light colored objects. The position of the elements is also critical. Proportion refers the size relationship of visual elements to each other and to the http://www.google.com/logos/logos00-1.html whole picture. Rhythm refers to the regular repeating occurrence of elements in the scene just as in music it refers to the regular occurrence of certain musical notes over time.
- 11.
- 12.
- 13. Where can youfeel the role of a Visual designer? •Websites •Music players •Mailers •Cell phones/ PDAs •Internet browsers •OS •Tools used for coding and documentation
- 14. What does atypical visual designer do? •Design logos, icons, graphics, website layouts, animations, add special fx, branding. •Anything related to the colors, lines and shapes, font etc. •Illustrates the world of imagination •Brings product and branding together. “A web/ software application without involvement of a visual designer is like a dish without salt.”
- 15. Design tools Raster Adobe Photoshop Vector Illustrator Vector Flash Vector Corel Draw Vector MS Expression Design/ Blend Vector Gimp (Freeware) InkScape MS Paint PowerPoint Etc.
- 16. Why use Designtools? Visual Studio 2010 Click me •Visual treatment of text, graphic page elements and navigational components. •Graphic treatment of interface elements (the "look" in "look-and-feel")
- 17. Popular image fileformats JPEG (Joint Photographic Experts Group) •Big images •photographs •Doesn’t support transparency •Doesn’t support animation GIF (Graphics Interchange Format) •Small images •Supports animations •Interlace •Less colors •Less file size •Supports transparency PNG (Portable Network Graphics format) •Doesn’t support animation •Interlace •Big file size •Best for transparent images.
- 18. Types of font Serif Sans serif Times New Roman, Georgia, Arial, Verdana, Tahoma etc Garamond, etc I am I am Serif Sans serif
- 19. These things make the difference. I am Serif
- 20. Grid • A pattern of regularly spaced horizontal and vertical lines • Grid helps us to create a structured and professional page and to place the elements in an order • If we follow grid system, our design/ layout automatically looks good, clean and appealing
- 22. Photoshop • Adobe Photoshopis a graphics editing program developed and published by Adobe Systems Incorporated. • Photographers, Graphic designers, web designers, 3D artists, animators, Video editors etc. are the main users of the Photoshop. • Latest version of Photoshop is Adobe CS5
- 24.
- 25.
- 33. Why do weuse Photoshop (or any other design tool)? • To create rich graphics • To visualize the things • To format pictures, crop and size them and balance the tone and color. • Because it has number of tools.
- 34. What do wedo in Photoshop? • We take the advantage of gradiances, filters, FX, blending options, styles, predefined shapes etc to create or enhance the
- 35. Some online resourcesfor Photoshop lovers • psd.tutplus.com • smashingmagazine.com • webdesignerdepot.com • basicphotoshop.com/basicps.htm