Order

WEB DESIGNMater of Arts in Communication Design

Order & equilibrium

WEB DESIGN NABA 2014 Roberto DADDA 2 Order

"Order." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/order>.

"Disorder." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/disorder>.

WEB DESIGN NABA 2014 Roberto DADDA 3

Disorder gives the idea of complexity

Order


Ordered complexity!

Order


We need order AND simplicity!

Order


Everything Should Be Made as Simple as Possible, But Not Simpler

Albe

rt E

inst

ein,

14

Mar

ch 1

879

– 18

Apr

il 19

55)

WEB DESIGN NABA 2014 Roberto DADDAOrder 8

WEB DESIGN NABA 2014 Roberto DADDA

Information density

Order 9

usefull infototal info

too low

too high

• Waste of precious screen space

• Two many click• Impession of loosing time• STM needed to understand

correlation between pages and pages elements

• Impression of confusion• STM needed to undertand

page elements• Difficult to remember• Download time rises

EQUILIBRIUM!


Grid usage, clean design & test with user’s

Order


Let’s learn from video makers

Order

http://userinterfaced.com/designing-video-information-density-for-optimum-audience-engagement/

http://userinterfaced.com/designing-video-information-density-for-optimum-audience-engagement/


Contrast & user’s focus

Order

With color, dimension, shape… contrast we may attract the user attention on elements and information flow direction.

Joan

MIR

O, S

tars

in S

nails

' Sex

es 1

925


In page design…

• Identify element’s correlation, connection and order using the laws of Gestalt

• Use de facto general standards

• Use reasonable local standards

• Evoid useless information

• Minimize cognitive loadOrder 14


Balanced design

Order

NONEXISTENT CAOS

TOO MUCHCORRECT

R u l e sD

e s

i g

n e

f f o

r t

simple complex

triv

ial

deep


Graphics for usability, the goals• Be easy to read (text and images) for all the expected

users• Help to understand structure of page giving to the user a

sensation of simplicity • Help to associate homogeneous content elements• Use visual codes usual for the expected users and

coherent• Use coherent visual codes inside the pages ecosystem• Avoid redundancy• Avoid ambiguity

Order


Noise and chaos

• Noise• Avoid the usage of useless visual

elements that divert the attention from the meaningful ones

• Chaos• Avid putting too many elements

together, they will interfere!

Order

WEB DESIGN NABA 2014 Roberto DADDA 18Order

Dad

a or

Dad

aism

was

an

art m

ovem

ent o

f the

Eu

rope

an a

vant

-gar

de in

the

early

20t

h ce

ntur

y.


Contrast, alikeness, stratification

• Contrast• Use it to differentiate elements and make the

user focus where needed

• Alikeness• Group with this gestalt law correlated and

homologous elements

• Stratification• Visual layers help users to identify logical

correlation and background

Order


Structure and visual journey

• Structure• Use graphics elements, shape and

position to make content structure and elements correlations evident (Grid, alignment, panes…)

• Visual journey• Give to the customer the possibility of

perceiving interaction as a logical journey easy to find and to remember.

Order


Consistence & contest

• Consistence• Let’s call the same elements with

the same names, symbols, colors, shapes…

• Context• Adapt symbols to the contest and

to the attended user’s

Order 23

WEB DESIGN NABA 2014 Roberto DADDAOrder 24

Roberto Dadda

[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda

http://www.dadda.it/

mailto:[email protected]

Order

Design

Transcript of Order