SlideShare a Scribd company logo
1 of 36
Download to read offline
IMD09117 and IMD09118  Web Design and Development Unit 5 Visual hierarchies and perceptual layering
Visual hierarchy Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object],[object Object],When users see a visual interface
Visual hierarchy Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object],[object Object]
Visual weight Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Visual weight Version A Unit 5   ©2008  Napier University  Hello
Visual weight Version A Unit 5   ©2008  Napier University  Hello
Visual weight Version A Unit 5   ©2008  Napier University  Hello
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Figure and ground relation Version A Unit 5   ©2008  Napier University
Directing the viewer’s eye Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Directing the viewer’s eye Version A Unit 5   ©2008  Napier University  Primary scanning
Directing the viewer’s eye Version A Unit 5   ©2008  Napier University  Secondary scanning
Directing the viewer’s eye Version A Unit 5   ©2008  Napier University  How do your eyes move?
Directing the viewer’s eye Version A Unit 5   ©2008  Napier University  How do your eyes move?
Visual recognition Version A Unit 5   ©2008  Napier University  Layout
Visual recognition Version A Unit 5   ©2008  Napier University  Points to consider ,[object Object],[object Object],[object Object]
Visual recognition Version A Unit 5   ©2008  Napier University  Points to consider ,[object Object],[object Object],[object Object]
Perceptual layering Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object],[object Object]
Perceptual layering Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Perceptual layering Version A Unit 5   ©2008  Napier University
Perceptual layering Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object],[object Object],[object Object],Colour coding
Perceptual layering Version A Unit 5   ©2008  Napier University  Colour coding
Perceptual layering Version A Unit 5   ©2008  Napier University  Colour coding
Perceptual layering Version A Unit 5   ©2008  Napier University  Colour coding ,[object Object],[object Object]
Experimental conclusions Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object],[object Object]
Experimental conclusions Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Experimental conclusions Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Summary Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Summary Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]
Summary Version A Unit 5   ©2008  Napier University  ,[object Object],[object Object]

More Related Content

Similar to Week 5 - Visual Hierarchies

Week 3 - A Presentation Visual Components
Week 3 - A Presentation Visual ComponentsWeek 3 - A Presentation Visual Components
Week 3 - A Presentation Visual ComponentsGraeme Smith
 
Week 4 - A Visual Contrasts
Week 4 -  A Visual ContrastsWeek 4 -  A Visual Contrasts
Week 4 - A Visual ContrastsGraeme Smith
 
Engineering Workshop Project Semester 3 Mechanical Enginee.docx
Engineering Workshop Project Semester 3 Mechanical Enginee.docxEngineering Workshop Project Semester 3 Mechanical Enginee.docx
Engineering Workshop Project Semester 3 Mechanical Enginee.docxYASHU40
 
Introducing the new aoit courses 062309
Introducing the new aoit courses 062309Introducing the new aoit courses 062309
Introducing the new aoit courses 062309NAFCareerAcads
 
Abrek_Thesis Presentation
Abrek_Thesis PresentationAbrek_Thesis Presentation
Abrek_Thesis PresentationNatascha Abrek
 
196 - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...
196  - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...196  - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...
196 - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...ESEM 2014
 

Similar to Week 5 - Visual Hierarchies (9)

Week 3 - A Presentation Visual Components
Week 3 - A Presentation Visual ComponentsWeek 3 - A Presentation Visual Components
Week 3 - A Presentation Visual Components
 
Week 4 - A Visual Contrasts
Week 4 -  A Visual ContrastsWeek 4 -  A Visual Contrasts
Week 4 - A Visual Contrasts
 
Colour
ColourColour
Colour
 
Chp7
Chp7Chp7
Chp7
 
Engineering Workshop Project Semester 3 Mechanical Enginee.docx
Engineering Workshop Project Semester 3 Mechanical Enginee.docxEngineering Workshop Project Semester 3 Mechanical Enginee.docx
Engineering Workshop Project Semester 3 Mechanical Enginee.docx
 
Introducing the new aoit courses 062309
Introducing the new aoit courses 062309Introducing the new aoit courses 062309
Introducing the new aoit courses 062309
 
PPC_2_Forecasting_English.pdf
PPC_2_Forecasting_English.pdfPPC_2_Forecasting_English.pdf
PPC_2_Forecasting_English.pdf
 
Abrek_Thesis Presentation
Abrek_Thesis PresentationAbrek_Thesis Presentation
Abrek_Thesis Presentation
 
196 - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...
196  - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...196  - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...
196 - Evaluation in Practice: Artifact-based Requirements Engineering and Sc...
 

More from Graeme Smith

Project Management - An Introductiuon
Project Management - An IntroductiuonProject Management - An Introductiuon
Project Management - An IntroductiuonGraeme Smith
 
The art of presentations
The art of presentationsThe art of presentations
The art of presentationsGraeme Smith
 
Typography, A Presentation
Typography, A PresentationTypography, A Presentation
Typography, A PresentationGraeme Smith
 
Typography and grids
Typography and gridsTypography and grids
Typography and gridsGraeme Smith
 
Intro to Game Design
Intro to Game DesignIntro to Game Design
Intro to Game DesignGraeme Smith
 
Composition, some basic rules of photography
Composition, some basic rules of photographyComposition, some basic rules of photography
Composition, some basic rules of photographyGraeme Smith
 
1 - Designing A Site
1 - Designing A Site1 - Designing A Site
1 - Designing A SiteGraeme Smith
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality EmotionGraeme Smith
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality EmotionGraeme Smith
 
Information Design
Information DesignInformation Design
Information DesignGraeme Smith
 
Interaction Design
Interaction DesignInteraction Design
Interaction DesignGraeme Smith
 
Content for the Web
Content for the WebContent for the Web
Content for the WebGraeme Smith
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Week 5 - Accessibility
Week 5 - AccessibilityWeek 5 - Accessibility
Week 5 - AccessibilityGraeme Smith
 

More from Graeme Smith (20)

Project Management - An Introductiuon
Project Management - An IntroductiuonProject Management - An Introductiuon
Project Management - An Introductiuon
 
Intro to the unit
Intro to the unitIntro to the unit
Intro to the unit
 
The CSS Box Model
The CSS Box ModelThe CSS Box Model
The CSS Box Model
 
The art of presentations
The art of presentationsThe art of presentations
The art of presentations
 
Typography, A Presentation
Typography, A PresentationTypography, A Presentation
Typography, A Presentation
 
Flip Book
Flip BookFlip Book
Flip Book
 
Typography
TypographyTypography
Typography
 
Typography and grids
Typography and gridsTypography and grids
Typography and grids
 
Intro to Game Design
Intro to Game DesignIntro to Game Design
Intro to Game Design
 
Composition, some basic rules of photography
Composition, some basic rules of photographyComposition, some basic rules of photography
Composition, some basic rules of photography
 
Form Validation
Form ValidationForm Validation
Form Validation
 
1 - Designing A Site
1 - Designing A Site1 - Designing A Site
1 - Designing A Site
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality Emotion
 
Personality Emotion
Personality EmotionPersonality Emotion
Personality Emotion
 
Information Design
Information DesignInformation Design
Information Design
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
Web Functionality
Web FunctionalityWeb Functionality
Web Functionality
 
Content for the Web
Content for the WebContent for the Web
Content for the Web
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Week 5 - Accessibility
Week 5 - AccessibilityWeek 5 - Accessibility
Week 5 - Accessibility
 

Recently uploaded

Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 

Recently uploaded (20)

Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 

Week 5 - Visual Hierarchies