Visual design.. Tools and principles for educational

interface designers

To transfer a written or spoken information into an imagery message (video, animation, statue, painting…etc

It is a method for seeing the unseen It is not just about the pretty look and fancy

colors

In education: visual design should consider the learner’s perspectives and learning theories

What is visual design?

Capture and represent a multiplicity of relationships and patterns within an information space or domain to make them perceptually accessible and understandable using minimal cognitive effort on the part of learners

(Sedig, Liang & Morey, 2009)

The role of visual design In learning and teaching

What we see is a combination of◦ Masses Solid objects one normally associates with

design◦ SpacesOpen space and enclosed space

A skillful designer coordinates the use of mass and space to create a visually pleasant experience for the viewer

Visual design elements

Directing the movementof the eye

from the top to the bottom

to increase attention

Visual design elements

Line

It create an optical reaction that recorded in the memory as an aid to identification

Visual design elements

Color

See the images or art as shapes.

And notice the entire piece as a form

Visual design elements

Form

It is have the same significant of an image,

So, use it when it is needed

Visual design elements

Texture

The ABC’s R’ US Visual Design Model (Beriswill, J.E, 2004)

AlignmentBalanceContrastChunkingRepetitionUtilitySimplicity

Visual design Principles

Align the text to create a reading lines that direct the learner’s eye

Align the image according to outer points of the left, right, top and bottom

Visual design PrinciplesALIGNMENT

For effective visual designDesigner should:

1- understand the elementsLine, color, form and texture2- apply the principlesAlignment, balance, contrast, chunking,

repetition, utility, and simplicity.

For effective visual designDesigner should:1- understand the elementsLine, color, form and texture

2- apply the principlesAlignment, balance,contrast, chunking, repetition,utility, and simplicity.

No

Yes

Balance the weight of the objects between:◦ left and right ◦ top and bottom

With dark background, use light objects and Vice versa

Visual design PrinciplesBALANCE

For effective visual designDesigner should:1- understand the elementsLine, color, form and texture

2- apply the principlesAlignment, balance,contrast, chunking, repetition,utility, and simplicity.

For effective visualdesignDesigner should:

1- understand the elementsLine, color, form and texture2- apply the principlesAlignment, balance,contrast, chunking, repetition, utility, and simplicity.

No

Yes

BALANCE

Placing the dark objects/ thin featured objects by light/ thick featured

The more the object contrasted the more the attention it draw

Visual design PrinciplesCONTRAST

No

Yes

CONTRAST

Objects which have the same function placed in the same visual zone

Headings should be chunked within the text to support it

Visual design PrinciplesCHUNKING

For effective visual designDesigner should:

1- understand the elements

Line, color, form and texture2- apply the principlesAlignment, balance,contrast, chunking, repetition,utility, and simplicity.

For effective visual designDesigner should:

1- understand the elementsLine, color, form and texture

2- apply the principlesAlignment, balance,contrast, chunking, repetition,utility, and simplicity.

No

Yes

CHUNKING

Consistent use of objects, effects, fonts, sizes, styles, and colors

Making themes from repeated characteristics to support the visual message

Visual design PrinciplesREPETITION

For effective visual designDesigner should:

1- understand the elementsLine, color, form and texture

2- apply the principlesAlignment, balance,contrast, chunking, repetition,utility, and simplicity.

For effective visual designDesigner should:

1- understand the elementsLine, color, form and texture

• apply the principles•Alignment, balance,•contrast, chunking, repetition,•utility, and simplicity.

No

Yes

REPETITION

Learner should know his/her location and how to navigate through

It should consider the special needs of some students

Visual design PrinciplesUTILITY

Navigation sidebar

Interactive objects

http://viking.coe.uh.edu/~smarsh/fp2003/#steps

UTILITY

Keep the visual design simple

Visual objects are purposeful for

their instructional value not their look or impact

Visual design PrinciplesSIMPLICITY

http://www.webdesignfromscratch.com/basics/simplicity.php

SIMPLICITY

References Beriswill, J. (2004). ABC’s R’ US: Teaching visual design principles. In R. Ferdig et al. (Eds.), Proceedings of Society for Information Technology and Teacher Education International Conference 2004 (pp. 1958-1961). Chesapeake

CARP (Contrast, Alignment, Repetition, Proximity), accessed 26/10/2009, http://units.english.uiuc.edu/ppw/prosem/2003/carp/index.html

Elements of graphical design, accessed 26/10/2009, http://www.allgraphicdesign.com/graphicdesignarticles/elementsprinciplesprocess/basicgraphicdesignelements.html

Sedig, K., Liang, H. & Morey, J. (2009). Enhancing the Usability of Complex Visualizations by Making them Interactive: A Study. In Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications 2009 (pp. 1021-1029). Chesapeake

Visual design principles, accessed 26/10/2009, http://www.fhwa.dot.gov/environment/visql/visql03.htm