Visual Thinking Strategies and Web Page Design Understanding Design Techniques through Visual Principles

1
Visual Thinking Strategies and Web Page
DesignUnderstanding Design Techniquesthrough
Visual Principles

• Dreamweaver Design Workshop at the University of
  Miami Otto Richter Library, August 2002
• Ray Uzwyshyn

2
The Big Picture Dreamweaver as a Tool
Tools, hammers, houses carpenters Honor Your
Mistakes. Work Like a Sculptor with Stone
Honor the Stones limitation - bring life out of
it.
3
What do we mean when we speak about Web Design
and Visual Thinking Strategies?

• Information Design consists of differences that
  make a difference.
• (Edward Tufte)

Matisse Color and Simplicity
4
Good Design Principles and Layering of
Information

• Dreamweaver allows layering of information
  dimensions by contrasting color and line
• Making maps consisting of color, text and
  information

5
What makes up an online Website Design?
Windows, Canvases, Metaphor, Reading
6
How does Dreamweaver allowVisual Thinking
Strategies?
Information Architecture Color Visual
Layout Font Menus Navigation Images Map of the
Larger Universe of Knowledge Present
7
Dreamweaver allows Visualizing Spatial
Possibilities

• Score of Stravinskys Sacre Du Printemps

Matisse Gives Prominence to Color Both Convey
Music and Dance
8
Dreamweaver allows Design through Visual Thinking
Color
9
Information Layering and Linking through Visual
Thinking Strategies
Avenues and Pathways
10
What Are the Dreamweaver Design Elements Used?
Design Elements Tables JPEG Images GIF
Headers 3 Fonts Hyperlink Menus
Major areas Images 29 Whitespace 29 Headers
19 Hyperlink Menus 10 Text 8 Others 5
11
Usability, Children and Visual Thinking Strategies
Where is the Chair? Wheres the Dress? Wheres
the Girl?
12
What is Missing?

• -Simplicity
• Less Means More
• -More Focus to a theme
• -Stronger emphasis on
• Design

13
Shift From Text Centered Designs
14
Image Centered Information Visualization and
Visual Thinking Strategies
Cognitive Cartography Information
Landscape Universe of Knowledge
15
Combine Design ElementsTo Convey Meaning
Combination of HTML Photoshop Dreamweaver
Tables Flash Rollovers and Menus Illustrator
Fonts To Convey Information Design
16
Technology is Not an End unto Itself

• Innovative Design uses Visual Thinking
  Strategies Icons, Metaphor and Narrative

17

• The real voyage of discovery consists of not in
  seeking new technological landscapes but in
  having new eyes.
• Marcel Proust

18
Onto Design Techniques, Dreamweaver and Technology

• Questions?