SlideShare a Scribd company logo
1 of 20
LESSON 4:  Information Architecture Tutorial  By Group 4
 
 
 
 
 
Organizational Metaphors:
Functional vs Visual Metaphors
Functional metaphors Functional metaphors relate tasks you can do on the site with tasks you can do in another environment. Photoshop, a graphics program, relies on a lot of functional metaphors:You can figuratively “cut,” “copy,” and “paste” graphics on a computer – as though you were using real-world scissors and glue. Cut Paste COPY
Visual metaphors Visual metaphors are based on common graphic elements familiar to most people in our culture. If you are designing a music site that allows users to play songs, you might want to use the traditional “start,” “stop,” and “pause” icons found on CD players everywhere.
Set it in Stone   -Create a text-based, hierarchical map of the site called “site structure” listing.    -The major sections you decided earlier are the “roots” of the site structure listing.   Here's How:    A) Fit them to your rationale or metaphor.  B) Map out the organization of each section with items from content inventory. C) Indent lower levels and repeat the whole process a few times.
Design Document
Architectural Blueprints -Visual representations of the site structure.  -shows how elements of the site are grouped and how they link or relate to one another.  
Defining Navigations
 
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Design Document
Design Document Site Structure -Necessary for a website to function -Evolved and easy to use -Easier to define a navigation system -Designing page layouts and templates becomes easier -Metaphors Site Structure Listing
Design Document Architectural Blueprints Global and Local Navigation Schemes -Nav Bar -Global and Local Schemes
Shelly Chen  Samuel Cua Stephanie Lopez Manal Bejaoui Skye Miller Chris Mitchell Source:  http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_4  

More Related Content

Similar to Group 4 Information Architecture

Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan RosuRazvan Rosu
 
How the BBC Make Web sites
How the BBC Make Web sitesHow the BBC Make Web sites
How the BBC Make Web sitesIWMW
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issuesNeil Perlin
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverablesnathanacurtis
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
 
Intro to web_design_notes jalen
Intro to web_design_notes  jalenIntro to web_design_notes  jalen
Intro to web_design_notes jalenjalenclark5
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.docbutest
 
Design And Documentation
Design And DocumentationDesign And Documentation
Design And DocumentationMiles Price
 
Intranets & Digital Hubs With Microsoft 365: What You Need To Know
Intranets & Digital Hubs With Microsoft 365: What You Need To KnowIntranets & Digital Hubs With Microsoft 365: What You Need To Know
Intranets & Digital Hubs With Microsoft 365: What You Need To KnowRichard Harbridge
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsiteZoaib Mirza
 
How we make websites (IWMW2009)
How we make websites (IWMW2009)How we make websites (IWMW2009)
How we make websites (IWMW2009)fantasticlife
 
Storyboarding and planning_your_website
Storyboarding and planning_your_websiteStoryboarding and planning_your_website
Storyboarding and planning_your_websiteDr. TJ Wolfe
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web PresenceSusan Boone
 
ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsGilbert Guerrero
 

Similar to Group 4 Information Architecture (20)

Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
 
How the BBC Make Web sites
How the BBC Make Web sitesHow the BBC Make Web sites
How the BBC Make Web sites
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issues
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
Slides chapter 19
Slides chapter 19Slides chapter 19
Slides chapter 19
 
Visual identity brief
Visual identity briefVisual identity brief
Visual identity brief
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
 
Lesson 3 - IA for web
Lesson 3 - IA for webLesson 3 - IA for web
Lesson 3 - IA for web
 
Web development
Web developmentWeb development
Web development
 
Intro to web_design_notes jalen
Intro to web_design_notes  jalenIntro to web_design_notes  jalen
Intro to web_design_notes jalen
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.doc
 
Design And Documentation
Design And DocumentationDesign And Documentation
Design And Documentation
 
Intranets & Digital Hubs With Microsoft 365: What You Need To Know
Intranets & Digital Hubs With Microsoft 365: What You Need To KnowIntranets & Digital Hubs With Microsoft 365: What You Need To Know
Intranets & Digital Hubs With Microsoft 365: What You Need To Know
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
How we make websites (IWMW2009)
How we make websites (IWMW2009)How we make websites (IWMW2009)
How we make websites (IWMW2009)
 
Storyboarding and planning_your_website
Storyboarding and planning_your_websiteStoryboarding and planning_your_website
Storyboarding and planning_your_website
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
 
ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page Comps
 

Recently uploaded

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 

Recently uploaded (20)

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 

Group 4 Information Architecture

  • 1. LESSON 4:  Information Architecture Tutorial  By Group 4
  • 2.  
  • 3.  
  • 4.  
  • 5.  
  • 6.  
  • 9. Functional metaphors Functional metaphors relate tasks you can do on the site with tasks you can do in another environment. Photoshop, a graphics program, relies on a lot of functional metaphors:You can figuratively “cut,” “copy,” and “paste” graphics on a computer – as though you were using real-world scissors and glue. Cut Paste COPY
  • 10. Visual metaphors Visual metaphors are based on common graphic elements familiar to most people in our culture. If you are designing a music site that allows users to play songs, you might want to use the traditional “start,” “stop,” and “pause” icons found on CD players everywhere.
  • 11. Set it in Stone   -Create a text-based, hierarchical map of the site called “site structure” listing.    -The major sections you decided earlier are the “roots” of the site structure listing.   Here's How:   A) Fit them to your rationale or metaphor. B) Map out the organization of each section with items from content inventory. C) Indent lower levels and repeat the whole process a few times.
  • 13. Architectural Blueprints -Visual representations of the site structure.  -shows how elements of the site are grouped and how they link or relate to one another.  
  • 15.  
  • 16.
  • 18. Design Document Site Structure -Necessary for a website to function -Evolved and easy to use -Easier to define a navigation system -Designing page layouts and templates becomes easier -Metaphors Site Structure Listing
  • 19. Design Document Architectural Blueprints Global and Local Navigation Schemes -Nav Bar -Global and Local Schemes
  • 20. Shelly Chen Samuel Cua Stephanie Lopez Manal Bejaoui Skye Miller Chris Mitchell Source:  http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_4