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.
webdev@rgu
introduction to information
architecture
posh term that includes wireframing/
mockups/prototypes
overview
what is architecture?
architecture in computing
Users, Context & Content
Designing Information architecture
wiref...
what is
architecture?
The process and product of
planning,
designing,
construction of buildings
Days
366
From the first shovel
hitting the ground
to the first guest
through the gates
(try asking any academic what they co...
architecture in
computing
System Architecture
Software Architecture
Network Architecture
Information
Architecture
The structural design
of shared information
environments
The combination of
organisation, labelli...
Logo searchprimary links
secondary links Picture (content) News (content)
users, context &
content
USERS
context content
IA
users
Understanding users
Who are they? Demographics?
What information do they want from your
system?
the right answer to ...
context
All web pages / apps exist within some context
Primary business (e.g. facebook)
Part of a organisation (e.g. RGU w...
content
Anything that a user might want to find
Articles
External Links / Sources
Mixed Media (videos / images / etc)
Cont...
designing information
architecture
wireframe
Basic illustrations of the structure, layout and
components of a site. First step in the design
process
mockups
...
wireframe
mockup
prototype
designing information architecture
Wireframes
a wireframe is a low fidelity
representation of a design
it should show
the main groups of content
the structure of the in...
wireframe Content
Structural elements of the interface
Headers, Navigation, Main Content, Sidebars
Layout of structural el...
designing information architecture
mockups
a mockup is a low/middle fidelity
representation of the design
it should improve on the wireframe and show
What colours it...
a mockup is a low/middle fidelity
representation of the design
a good mockup should
represent the structure of the informa...
designing information architecture
Prototypes
a prototype is a middle/high fidelity
representation of the website
A prototype should allow the user to
experience the co...
use general
traits
Wireframe Documentation, quick
communication
sketchy, black/white/
grey representation
mockup Getting f...
Creating
information
architecture
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...
What do other department websites
look like? Are they better/worse than
ours?
What about other universities?
• Aberdeen Un...
time for
post it notes(PS - I love post it notes)
spend 5 minutes looking
at a few different
school/university
websites
once you’ve done that I’ll put
some questions up. An...
1what 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
12
What information would you
expect to see on the website
that Isn’t there
13 2
what pages are present on the
website (home,contact…)
14 3 2
think about the home page.
What content is there?
15 4 3 2
fin.
lets go through your
answers
what is the main thing that comes to your
attention when you visit the site?
What information...
use what you learned to
design your own site
1024960 8001024 960800 1024960 8001024 960800
1024 960 800 1024960800
use pap...
recap
what is architecture?
architecture in computing
Users, Context & Content
Designing Information architecture
wirefram...
get in touch!
@mike_crabb
Lecturer in Web Development at Robert Gordon University
(Scotland)
@rgucomputing
Robert Gordon U...
Introduction to Information Architecture
Introduction to Information Architecture
Introduction to Information Architecture
Introduction to Information Architecture
Introduction to Information Architecture
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
CSS Grid Layout for Topconf, Linz
Next
Upcoming SlideShare
CSS Grid Layout for Topconf, Linz
Next
Download to read offline and view in fullscreen.

436

Share

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
  • ShawnNutley1

    Oct. 6, 2021
  • 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

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

Views

Total views

115,438

On Slideshare

0

From embeds

0

Number of embeds

190

Actions

Downloads

602

Shares

0

Comments

0

Likes

436

×