Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

435

Share

Download to read offline

Introduction to Information Architecture

Download to read offline

Introduction to Information Architecture with a focus on designing this. We look at wireframes, mockups, and prototyping.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Introduction to Information Architecture

  1. webdev@rgu introduction to information architecture posh term that includes wireframing/ mockups/prototypes
  2. overview what is architecture? architecture in computing Users, Context & Content Designing Information architecture wireframes Mockups Prototypes Creating information Architecture
  3. what is architecture?
  4. The process and product of planning, designing, construction of buildings
  5. Days 366 From the first shovel hitting the ground to the first guest through the gates (try asking any academic what they coulddo in that amount of time!)
  6. architecture in computing
  7. System Architecture
  8. Software Architecture
  9. Network Architecture
  10. Information Architecture The structural design of shared information environments The combination of organisation, labelling, search, and navigation systems within web sites and intranets
  11. Logo searchprimary links secondary links Picture (content) News (content)
  12. users, context & content
  13. USERS context content IA
  14. users Understanding users Who are they? Demographics? What information do they want from your system? the right answer to an information need? all possible candidate answers? everything? How do they behave? Are there different types of behaviour? Are they satisfied or frustrated?
  15. context All web pages / apps exist within some context Primary business (e.g. facebook) Part of a organisation (e.g. RGU website) Part of the context is Business needs what should the information system do? Mission and goals and strategy
  16. content Anything that a user might want to find Articles External Links / Sources Mixed Media (videos / images / etc) Content Concerns Ownership Formats, Metadata, Structure
  17. designing information architecture
  18. wireframe Basic illustrations of the structure, layout and components of a site. First step in the design process mockups Focus more on the visual design of a site. Closer to the final product prototype Semi-functional layouts, implemented in HTML and CSS
  19. wireframe mockup prototype
  20. designing information architecture Wireframes
  21. a wireframe is a low fidelity representation of a design it should show the main groups of content the structure of the information description of the user-interface reaction (What) (where) (hOW)
  22. wireframe Content Structural elements of the interface Headers, Navigation, Main Content, Sidebars Layout of structural elements Position, Size Labelling of elements Types of content should be displayed Text, Pictures, Video
  23. designing information architecture mockups
  24. a mockup is a low/middle fidelity representation of the design it should improve on the wireframe and show What colours it is you will be using What fonts you will be implementing It should not show the overall content of the web page
  25. a mockup is a low/middle fidelity representation of the design a good mockup should represent the structure of the information, visualise the content of the site and demonstrate the functionality of the site in a static way
  26. designing information architecture Prototypes
  27. a prototype is a middle/high fidelity representation of the website A prototype should allow the user to experience the content and interactions with the interface test the main interactions in a way that is similar to the final product
  28. use general traits Wireframe Documentation, quick communication sketchy, black/white/ grey representation mockup Getting feedback, buy in from stakeholders Static Visualisation prototype User testing, backbone for development Interactive RECAP…
  29. Creating information architecture
  30. lets get started! We’re going to spend the rest of the day creating a prototype for a new website. We are going to look at making a new website for the department
  31. What do other department websites look like? Are they better/worse than ours? What about other universities? • Aberdeen Uni? • MIT?
  32. time for post it notes(PS - I love post it notes)
  33. spend 5 minutes looking at a few different school/university websites once you’ve done that I’ll put some questions up. Answer each as many times as you want, one answer per post it
  34. 1what is the main thing that comes to your attention when you visit the site?
  35. What information would you expect to see on the website that Is there 12
  36. What information would you expect to see on the website that Isn’t there 13 2
  37. what pages are present on the website (home,contact…) 14 3 2
  38. think about the home page. What content is there? 15 4 3 2
  39. fin.
  40. lets go through your answers what is the main thing that comes to your attention when you visit the site? What information would you expect to see on the website that Is there What information would you expect to see on the website that Isn’t there what pages are present on the website (home,contact…) think about the home page. What content is there?
  41. use what you learned to design your own site 1024960 8001024 960800 1024960 8001024 960800 1024 960 800 1024960800 use paper browser sheets to do this think about common features that would stay the same on each page
  42. recap what is architecture? architecture in computing Users, Context & Content Designing Information architecture wireframes Mockups Prototypes Creating information Architecture
  43. get in touch! @mike_crabb Lecturer in Web Development at Robert Gordon University (Scotland) @rgucomputing Robert Gordon University - School of Computing Science and Digital Media
  • RAJUKARNATI

    Sep. 1, 2021
  • SarahJayneBeale1

    Jul. 27, 2021
  • ssuserf26467

    Jun. 13, 2021
  • FrasMarieNol

    Jun. 4, 2021
  • mekailo

    May. 26, 2021
  • AmanSolanki33

    May. 12, 2021
  • AgusNurhalim

    Apr. 9, 2021
  • AbakarIbrahimAli

    Mar. 25, 2021
  • HzrZmb

    Mar. 22, 2021
  • YzreGerzon

    Mar. 20, 2021
  • virtuw

    Mar. 20, 2021
  • VaibhavS19

    Mar. 19, 2021
  • WeeJimmy1

    Feb. 6, 2021
  • HerendjiLonyBarka

    Jan. 14, 2021
  • KapilKale9

    Jan. 8, 2021
  • IbrahimAlMalki3

    Dec. 21, 2020
  • AnomaVictor

    Nov. 24, 2020
  • jokkerodt

    Nov. 12, 2020
  • reemas5

    Aug. 10, 2020
  • EmadAlMahallawi

    Aug. 9, 2020

Introduction to Information Architecture with a focus on designing this. We look at wireframes, mockups, and prototyping.

Views

Total views

114,929

On Slideshare

0

From embeds

0

Number of embeds

188

Actions

Downloads

600

Shares

0

Comments

0

Likes

435

×