Corritore, MCIT Working Connections, June 2004 1 Introduction to Visual Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2005

Corritore, MCIT Working Connections, June 2004 1

Introduction to Visual Design

Dr. Cindy Corritore

Creighton University

ITM 734Fall 2005


What’s important?

• Elegance– cuts to the heart of the matter– simple – other characteristics

• approachable – invites exploration• recognizable (vs. elaborate design) – Normans’

Affordance• immediacy – you just get it right off• usability – can make it work easily


how achieved?

• reduction through success refinement

• remove unnecessary clutter– pg. 31 Figure 30 – rethink the organization– excessive prompting/help gets in the way


how achieved?

• reduction: reduce design to its essence– remove detail that is not pertinent to the

goal/task/message – ask ‘is this necessary to the message?’ Remove it and see what happens.

– eg. road signs– Mullet pg. 25 – Figure 23 – binder spirals

unnecessary – don’t need this degree of replication of real world (eg. faces)


how achieved?• regularize elements of the design that are

left– use repetitive elements, realign, standardize

size, etc.– encourages gestalt and drill-down behaviors

• combine elements for maximum leverage – that is, an element plays multiple roles– see in logos a lot when first letter may be

used for two things– often based on knowing users goals– avoid redundancy


relationships of elements• scale - relative size of an element in given

context - forcefulness• contrast – visual differences - excitment

– used to differentiate

• proportion – relationship between scale and contrast - rhythm– provide emphasis– draw attention (direct it)– add interest


visual automaticity

• perceive Bertin’s shapes without further processing (base elements)– associative style of perception – ignore variation on

one visual dimension in perceiving others• recognise an object from different directions

– selective perception – pick out salient items and ignore rest of elements

• see pictures inside of pictures – has to be easy

– ordered perception – determine a relative ordering• big to small – how you refer to things –

– quantitative perception – identify amount of difference• twice as big


how to do

• squint test – see what is still visible - this is test of gestalt

• layers – zones created by scale and contrast– detailed maps, colors of paths in subway systems– side-by-side views in NextStep filesystem

• sharpen visual distinctions – max contrast• match qualities of background and figures

– pg. 84 question mark– squint – neither dark nor light areas dominate


keep in mind

• don’t overuse scale, contrast, proportion – should clearly provide a message

• make differences clear– sharp contrast but not too much (too bold)

• font names in their actual fonts – helpful but cognitively problematic


structure

• provides– unity of elements – seen as related– integrity – fits together (not a jumble of

unrelated parts) – allows for scanning – readability – can attend to chunks individually– control – can direct attention to different

chunks, know where to place attention depending on goal


structure

• our friends – the ______ principles that guide natural grouping– proximity – similarity– continuity– symmetry

• left alignment vs. centering with multiple boundries


how to for structure

• grouping– can be processed automatically if done well– forms and tables in webpages– white space can direct attention (negative space)

• hierarchies of groups - big square with small squares inside it

• balance – global arrangement of elements– eg. ppt headings are in different places– visual wt of elements – must be balanced, symmetrical

• alignment – also makes deviations more apparent


next time –

• Ch 5 – module and program

Documents

Corritore, MCIT Working Connections, June 2004 1 Introduction to Visual Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2005