1. HELLO WORLD!

2. HELLO “BEAUTIFUL” WORLD!

3. Visual Design

4. “Design is all about
visually telling your story
to someone else.”

5. 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!

6. Visual design in the
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 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 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. And Typography

12. And Icons

13. 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

14. 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.”

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 Design tools?
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 file formats
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 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

24. Toolbar

25. Layers

33. 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.

34. 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

35. Some online resources for Photoshop lovers
• psd.tutplus.com
• smashingmagazine.com
• webdesignerdepot.com
• basicphotoshop.com/basicps.htm