Design And Documentation
-
Upload
miles-price -
Category
Technology
-
view
151 -
download
5
description
Transcript of Design And Documentation
![Page 1: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/1.jpg)
Design and Documentation
Information Architecture
![Page 2: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/2.jpg)
Diagramming an IA
• Information architects are required to present the product of their work using visual representations.
• Guidelines:– Provide multiple views– Develop those views for specific
audiences
![Page 3: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/3.jpg)
Tools for representing an IA
• Blueprints• Wireframes• Content mapping inventory• Content Modeling• Controlled Vocabularies• Design sketches• Web-based prototypes
![Page 4: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/4.jpg)
Blueprints
• Blueprints, a.k.a. “sitemaps”, are diagrams that represent relationships between pages and other content components.
• They show the organization, navigation and labeling systems.
![Page 5: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/5.jpg)
Blueprints
• High-level architecture blueprints– are usually created during the top-
down information Architecture process.
– They are most useful for exploring primary organization schemes and approaches.
– See examples:• http://www.elasticspace.com/
interaction/liftarchitecture01.pdf • http://www.elasticspace.com/
interaction/animatearchitecture01.pdf
![Page 6: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/6.jpg)
High Level BlueprintM a in g a te wa y
C a re e rce n te r
S e le ct f irmM e dia
C e n te rPrim a ry
a cce s sA bo u t u s
B y co u n try
B y la n g u a g e
B y n a m e
B y s e rv ice
B y in du s try
B y to pic
G lo ba lc o nte nt
re po s ito ry
Firm s it e s
![Page 7: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/7.jpg)
![Page 8: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/8.jpg)
Blueprints
• Detailed Blueprints– Detailed blueprints map out the
entire map so that the production team can implement your plans.
– They must present complete information hierarchy from the main page to the destination pages
– They must show details of the labeling and navigation systems
![Page 9: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/9.jpg)
![Page 10: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/10.jpg)
Wireframes
• Wireframes are use to depict how an individual page would look from the architectural perspective.
• Wireframes force you to consider:– Where the navigation system can be
located– What components should be included– Decide how to group content
components
![Page 11: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/11.jpg)
Wireframes
• Types:– Low fidelity wireframes
• No graphic elements and no real content
– Medium fidelity wireframes• Include several aspects of content, layout and
navigation
– High fidelity wireframes• Close approximation to the actual web page
• Examples:• http://bobulate.com/documents/arch_two.pdf • http://iawiki.net/uploads/WireFrames/
if.com.au.pdf
![Page 12: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/12.jpg)
Wireframes
• Guidelines– Consistency is key– Visio and other standard charting tools
support background layers that you can export to your web page
– Use callouts for providing notes about functionality
– If more that one person is creating wireframes make sure to establish procedures for developing, sharing, and maintaining common wireframes
![Page 13: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/13.jpg)
Low Fidelity WireframeName of the Site Logo
Global Navigation
Label Content Area
Footer Area
![Page 14: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/14.jpg)
Medium Fidelity Wireframe
Name of the Site
Section Tile: Contribute Page
Contribute URL Contribute Paper
Contribute URL + Short Info Contribute Bibliography
Footer
Contextual Links
Global Navigation
LOGO
![Page 15: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/15.jpg)
High Fidelity Wireframe
![Page 16: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/16.jpg)
Content Mapping
• Content mapping involves breaking down or combining existing content into chunks that are useful for inclusion in you web site.
• Content mapping table is used to match chunks of contents with their respective destinations in the web site.
![Page 17: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/17.jpg)
Content Mapping
• Content Mapping is the framework used by information designers to combat information overload and turn unstructured information into manageable and re-usable document-like content objects, ready for multiple purposes.
• Ex - http://www.acf.hhs.gov/guide/contentmap.html
![Page 18: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/18.jpg)
Content Mapping ID Name Type Content Topics Notes Location
0.0.0 Home Home Page World map, slogan News, slogan, world map image Index.asp
1.1.1 About Category Home Page
Over of web site statement, vision, purpose of web site
About.asp
1.2.1 Dedication SubcategoryAbout Page
Dedication of web site Information on who and why this site was dedicated
Dedication.asp
1.1.1 Contribute CategoryHome Page
Contribute content to the web site
Option to contribute a URL, article, short essay
Contribute.asp
1.2.1 URL Contribution
SubcategoryContribute Page
Contribute an URL Form to fill out to submit an URL Form URLsubmit.asp
1.2.2 Article Contribution
SubcategoryContribute Page
Contribute an Article Form to submit a journal article Form Articlesubmit.asp
1.2.3 Essay Contribution
SubcategoryContribute Page
Contribute an Essay or own information
Form to submit an essay or own information
Form Essaysubmit.asp
1.1.1 Search CategoryHome Page
Search for information Search options for the web site Form Search.asp
1.2.1 Search Results SubcategorySearch Page
Search Results Displays search results for entered search criteria
Searchresults.asp
1.1.1 Discussion Board
CategoryHome Page
Discussion Board Allows users to carrying on a conversation about diversity topics
Dicussion Board Application
/Discussionboard/ index.asp
1.2.1 Boards SubcategoryDicussion Board
View discussions List of all discussions /Discussionboard/ list.asp
1.2.2 Add response or discussion
SubcategoryDicussion Board
Add response or new discussion
Add response or new discussion Form /Discussionboard/ add.asp
1.1.1 Contact Info CategoryHome Page
Contact Information How to contact web site owner / form to request info
Form Contact.asp
1.2.1 Faculty Bio SubcategoryContact Info Page
Faculty information Faculty information and short bio Faculty.asp
![Page 19: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/19.jpg)
Content Modeling
• Content models are micro information architectures targeted to improve access to the most valuable parts of the content.
![Page 20: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/20.jpg)
Content Modeling
• A content model specifies:– What types of chunks we are
working with– Relations between these chunks– What kind of metadata is used for
describing them
![Page 21: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/21.jpg)
Content Modeling
• Types of relationships between chunks:– Sequencing: Chunks can be placed
together in sequence.– Co-location: Chunks can be placed in the
same document– Linking: Chunks can link to other chunks– Shared meaning: even if chunks are not
explicitly linked they can share semantic characteristics that ensure they are co-located in an ad-hoc manner
![Page 22: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/22.jpg)
Content Modeling Basics• Based on patterns revealed
during content inventory and analysis
• What makes up a content model?1. Content objects2. Metadata (attributes and values)3. Contextual links
• Applies to many levels of granularity
– Content objects– Individual documents– Document collections (e.g., web
sites)
![Page 23: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/23.jpg)
Content Modeling
![Page 24: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/24.jpg)
Content Modeling across silos
![Page 25: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/25.jpg)
Content Modeling
• Condition for using content modeling:– The content has an inherent structure
that can be teased out and capture as a content model
– This content model will have value for many users
– Small volume of content (for manual implementation) or explicit structure (can be automated)
– You can afford the time, staff, resources and technology required for content modeling.
![Page 26: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/26.jpg)
Controlled Vocabularies
• Products to facilitate the development of controlled vocabularies:– Metadata matrixes– Applications for managing
vocabulary terms and relationships
![Page 27: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/27.jpg)
Controlled Vocabularies
• A metadata matrix summarizes the different types of vocabularies needed and the level of effort necessary to develop them.
• It also facilitates discussion about prioritization of vocabularies.
![Page 28: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/28.jpg)
Controlled Vocabularies
Vocabulary Description Examples Maintenance
Subject Terms that describe networking
Home networking; servers
Difficult
Product type Types of products that 3Com sells
Hubs; Modems Moderate
Product name Names of products that 3Com sells
PC Digital Webcam
Difficult
Product brand Brands of product htat 3Com sells
HomeConnect; SuperStack
Easy
![Page 29: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/29.jpg)
Controlled Vocabulary
Vocabulary Description Examples Maintenance
Subject Terms that describe Diversity Diversity, culture, customs Moderate
Faculty Faculty responsible for this site Ellision, Dr Ellision Easy
Areas List of some areas covered , Greek, Asian, Italian, etc. Moderate
Page Titles Short text with keywords Management in Diversity – Cultures,Customs Easy
![Page 30: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/30.jpg)
Controlled Vocabularies
• For building vocabularies you will need to choose a database solution to manage terms and term relationships:– Thesauri or ontology development
tools for sophisticated thesaurus.– A word processor, spread sheet, or
database for simple vocabularies with only preferred term variants.
![Page 31: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/31.jpg)
Design Sketches
• Design sketches are used to put together the work of the three teams involved in the design (Graphic design, technical team, Information architect).
• It is easier to build “rough design sketches” that can be used for the interaction than to us actual HTML code.
![Page 32: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/32.jpg)
Web-Based Prototypes
• These prototypes show how the site will look and function.
• This is the official end of conceptual design and the beginning of production.
![Page 33: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/33.jpg)
Architectural Style Guides• An Architectural style guide is a
document that explains:– How the site is organized, – Why it is organized that way,– How the architecture should be
extended as the site grows
![Page 34: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/34.jpg)
Architecture Style Guide
• Contents:– Documentation of Mission and vision for the
site– Information about intended audiences– Description of the content development policy– Blueprints, wireframes and other
documentation– Guidelines for adding content, extending the
organization, labeling, navigation, and indexing systems
– Graphic design style guide– HTML templates
![Page 35: Design And Documentation](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c78bab4a7959b8108b458a/html5/thumbnails/35.jpg)
Point-of-Production Architecture• At this point your Information
Architecture is implemented.• Many implementation decisions
would be made. • You should balance your client’s
requests against sanity of your production team, budget and timeline.