SlideShare une entreprise Scribd logo
1  sur  22
What’s wrong with this?
What do you need to
Q   know/learn to fix this kind
    of problem?



A Visual hierarchy
Visual hierarchy

What is it?
              Where can I get some?
Contrast
Size
Saturation
Texture
Contrast
Visual hierarchy
       toolbox
Contrast               Alignment
Size                   Proximity
Color & saturation     Density / White space
Texture                Repetition


Salience (bottom-           Gestalt principles of
up visual attention)        visual perception
Visual hierarchy

  How?
Visual hierarchy

                 more?
http://www.slideshare.net/antikano/understanding-visual-hierarchy-in-web-design

http://www.slideshare.net/stephenpa/see-what-i-mean

http://www.slideshare.net/tbisaacs/see-what-i-mean-pt-2-case-studies
click here
Is this clickable?
              How does it work?
affordance
How does it work?
            What is it for?
show & tell
 Visual hierarchy
Contrast             Alignment
Size                 Proximity
Color & saturation   Density / White space
Texture              Repetition

Contenu connexe

En vedette

Process integration quotes
Process integration quotesProcess integration quotes
Process integration quotesDr. V Vorvoreanu
 
Diary studies - A primer
Diary studies - A primerDiary studies - A primer
Diary studies - A primerBoon Yew Chew
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to WireframeWilliam Evans
 
Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Vojtech Outulny
 
Spotlight on learning_digital_storytelling_rlevine
Spotlight on learning_digital_storytelling_rlevineSpotlight on learning_digital_storytelling_rlevine
Spotlight on learning_digital_storytelling_rlevinereisa101
 
Mooc utredningen och sen ossiannilsson sverd2016
Mooc utredningen och sen ossiannilsson sverd2016Mooc utredningen och sen ossiannilsson sverd2016
Mooc utredningen och sen ossiannilsson sverd2016Ebba Ossiannilsson
 
2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its functionAgrin Life
 
Ossiannilsson 131122 trakai_bm
Ossiannilsson 131122 trakai_bmOssiannilsson 131122 trakai_bm
Ossiannilsson 131122 trakai_bmEbba Ossiannilsson
 
Enginerring Sc Interview With Dustin V1
Enginerring Sc  Interview With Dustin V1Enginerring Sc  Interview With Dustin V1
Enginerring Sc Interview With Dustin V1tim8400
 
Ossiannilsson 131010 uni_link_borås
Ossiannilsson 131010 uni_link_boråsOssiannilsson 131010 uni_link_borås
Ossiannilsson 131010 uni_link_boråsEbba Ossiannilsson
 
Guia del blog de trens
Guia del blog de trensGuia del blog de trens
Guia del blog de trensLeylo
 
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...Gregory Heller
 

En vedette (20)

Typography
TypographyTypography
Typography
 
03 design process
03 design process03 design process
03 design process
 
Process integration quotes
Process integration quotesProcess integration quotes
Process integration quotes
 
Usability principles 2
Usability principles 2Usability principles 2
Usability principles 2
 
Diary studies - A primer
Diary studies - A primerDiary studies - A primer
Diary studies - A primer
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
 
Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?
 
Radian6 nanohub
Radian6 nanohubRadian6 nanohub
Radian6 nanohub
 
Spotlight on learning_digital_storytelling_rlevine
Spotlight on learning_digital_storytelling_rlevineSpotlight on learning_digital_storytelling_rlevine
Spotlight on learning_digital_storytelling_rlevine
 
Mooc utredningen och sen ossiannilsson sverd2016
Mooc utredningen och sen ossiannilsson sverd2016Mooc utredningen och sen ossiannilsson sverd2016
Mooc utredningen och sen ossiannilsson sverd2016
 
2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function
 
Album
AlbumAlbum
Album
 
Ossiannilsson 131122 trakai_bm
Ossiannilsson 131122 trakai_bmOssiannilsson 131122 trakai_bm
Ossiannilsson 131122 trakai_bm
 
Enginerring Sc Interview With Dustin V1
Enginerring Sc  Interview With Dustin V1Enginerring Sc  Interview With Dustin V1
Enginerring Sc Interview With Dustin V1
 
Ossiannilsson 131010 uni_link_borås
Ossiannilsson 131010 uni_link_boråsOssiannilsson 131010 uni_link_borås
Ossiannilsson 131010 uni_link_borås
 
02 design process
02 design process02 design process
02 design process
 
Guia del blog de trens
Guia del blog de trensGuia del blog de trens
Guia del blog de trens
 
MM8 ossiannilsson personal
MM8 ossiannilsson personalMM8 ossiannilsson personal
MM8 ossiannilsson personal
 
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...
Crowdfunding In The Kitchen - Seattle Chefs Collaborative National Sustainabl...
 
Ossiannlisson_LUrundabord2011
Ossiannlisson_LUrundabord2011Ossiannlisson_LUrundabord2011
Ossiannlisson_LUrundabord2011
 

Plus de Dr. V Vorvoreanu

DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDr. V Vorvoreanu
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordanceDr. V Vorvoreanu
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationDr. V Vorvoreanu
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX introDr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recallDr. V Vorvoreanu
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocessDr. V Vorvoreanu
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overviewDr. V Vorvoreanu
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction designDr. V Vorvoreanu
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypesDr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recallDr. V Vorvoreanu
 

Plus de Dr. V Vorvoreanu (20)

Dia2 tues persona
Dia2 tues persona Dia2 tues persona
Dia2 tues persona
 
Dia2 sketches
Dia2 sketchesDia2 sketches
Dia2 sketches
 
DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personas
 
gestalt principles cats
gestalt principles catsgestalt principles cats
gestalt principles cats
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordance
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentation
 
Controls
ControlsControls
Controls
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX intro
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
03 bad usability kills
03 bad usability kills03 bad usability kills
03 bad usability kills
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overview
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction design
 
Purdue MS degree CGT
Purdue MS degree CGTPurdue MS degree CGT
Purdue MS degree CGT
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
Grids mini lecture
Grids mini lectureGrids mini lecture
Grids mini lecture
 

13 visual designprinciples_hierarchy

Notes de l'éditeur

  1. Information design – no clear hierarchy. Not clear what’s most important. Hard to see, understand, find information. Give handout with this and iPhone screens. Spend 10 minutes sketching solutions on how to present this info on an iPhone app. Show 2-3 solutions on docucam.
  2. Information design – no clear hierarchy. Not clear what’s most important. Hard to see, understand, find information. Give handout with this and iPhone screens. Spend 10 minutes sketching solutions on how to present this info on an iPhone app. Show 2-3 solutions on docucam.
  3. No visual hierarchy vs. visual hierarchy. It guides the eye, points out what to look at first, second, third. What tools are used here? Proximity/ white space, alignment, color, color saturation, size.
  4. What techniques are used here to achieve visual hierarchy? How is color used? Why is color used this way? (what’s important).
  5. Quality of an object that allows an individual to perform an action. Communicate that possibility to perform the action.
  6. United iPhone app. Critique: visual hierarchy & affordances. What are areas/chunks? How does the app indicate clickability? How do you know what’s most important? Divided into top for regular navigation and bottom for important, immediate actions.