Visual Thinking Strategies and Web Page Design

Understanding Design Techniquesthrough Visual Principles

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

Ray Uzwyshyn

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.

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

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

What makes up an online Website Design?

Windows, Canvases, Metaphor, Reading

How does Dreamweaver allowVisual Thinking Strategies?

Information Architecture

ColorVisual LayoutFontMenusNavigationImages

Map of the LargerUniverse of KnowledgePresent

Dreamweaver allows Visualizing Spatial Possibilities

• Score of Stravinsky’s “Sacre Du Printemps”

Matisse Gives Prominence to Color: Both Convey Music and Dance

Dreamweaver allows Design through Visual Thinking

Color

Information Layering and Linking through Visual Thinking

Strategies

Avenues and Pathways

What Are the Dreamweaver Design Elements Used?

Design Elements Tables JPEG Images GIF Headers3 FontsHyperlink Menus

Major areas

Images 29%Whitespace 29%Headers 19%Hyperlink Menus 10%Text 8%Others 5%

Usability, Children and Visual Thinking Strategies

Where is the Chair? Where’s the Dress? Where’s the Girl?

What is Missing?

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

Shift From Text Centered Designs

Image Centered Information Visualization and Visual

Thinking Strategies

Cognitive CartographyInformation LandscapeUniverse of Knowledge

Combine Design ElementsTo Convey Meaning

Combination ofHTMLPhotoshopDreamweaver TablesFlash Rollovers and MenusIllustrator FontsTo Convey InformationDesign

Technology is Not an End unto Itself

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

The real voyage of discovery consists of not in seeking new technological

landscapes but in having new eyes.

Marcel Proust

Onto Design Techniques, Dreamweaver and Technology

Questions?