“Design is all aboutvisually telling your story to someone else.”
W do we need 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!
Visual design in the process of UX.
Elements of UX Functional specifications/ Interaction design/User needs/ content requirements information architectureSite 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
Elements of Visual design •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 Complexityhttp://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm
Line Shape Form –light & DarkA line represents a "path" between two Shapes are the result of closed lines. Some Form refers to the three-dimensional qualitypoints. 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 singleLines imply motion and suggest direction or in nature in some form or another. direction (e.g. our sun) hits an object, part oforientation the object is in shadow. Light and dark areas within an image provide contrast that can suggest volumeColor Texture CompositionColor affects us emotionally, with different Texture refers to the surface quality or Organizing the various elements within thecolors evoking different emotions. In short "feel" of an object - smooth, rough, soft, etc framecolor has the capacity to affect the humannervous system.
Dominance & Subordination CoherenceUnity 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 coloredUnity refers to an ordering of all elements in objects dominate cooler pale coloredan image so that each contributes to a objects Coherence refers to the belonging together or the various parts of the artwork. In realityunified aesthetic effect so that the image isseen 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 thirdsBalance implies that the visual elements Rhythmwithin the frame have a sense of weight.Large objects generally weigh more thansmall objects and dark objects weigh morethan light colored objects. The position ofthe elements is also critical. Proportion refers the size relationship of visual elements to each other and to thehttp://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.
Where can you feel the role of a Visual designer?•Websites•Music players•Mailers•Cell phones/ PDAs•Internet browsers•OS•Tools used for coding and documentation
What does a typical 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.”
Design toolsRaster Adobe PhotoshopVector IllustratorVector FlashVector Corel DrawVector MS Expression Design/ BlendVector Gimp (Freeware) InkScape MS Paint PowerPoint Etc.
Why use Design tools? Visual Studio 2010 Click me•Visual treatment of text, graphic page elements andnavigational components.•Graphic treatment of interface elements (the "look" in"look-and-feel")
Popular image file formatsJPEG (Joint Photographic ExpertsGroup)•Big images•photographs•Doesn’t support transparency•Doesn’t support animationGIF (Graphics Interchange Format)•Small images•Supports animations•Interlace•Less colors•Less file size•Supports transparencyPNG (Portable Network Graphics format)•Doesn’t support animation•Interlace•Big file size•Best for transparent images.
Types of font Serif Sans serifTimes New Roman, Georgia, Arial, Verdana, Tahoma etcGaramond, etc I am I am Serif Sans serif
These things make the difference.I amSerif
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
Photoshop• Adobe Photoshop is 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
Why do we use 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.
What do we do in Photoshop? • We take the advantage of gradiances, filters, FX, blending options, styles, predefined shapes etc to create or enhance the
Some online resources for Photoshop lovers • psd.tutplus.com • smashingmagazine.com • webdesignerdepot.com • basicphotoshop.com/basicps.htm