1. Web Content Development Dr. Komlodi Class 11: Blueprints

2. Moving from Strategy to Design Focus shifts to creating products and deliverables (site map, application flow, wire frame, content inventory) Information architects have to create visual representations for things that are inherently NOT visual (information organizations, navigation, interaction, etc. – not graphics design)

3. How to Present IA Create multiple views of the architecture: –The different deliverables we discuss here each highlight a different aspect of IA –Together they provide a good view of the IA Develop deliverables with specific audience in mind: users will need something very different from developers Make sure you explain these in presentations and discussions –Explaining the deliverables in person is very important to ensure clear understanding by your audience

4. Scope of all Deliverables –Site Scope Report = Flight Plan Problem, solution, strategy –Blue Print = 30,000 feet Conceptual overview of the site –Application Flow = 15,000 feet Detailed interaction between user & system –Wire Frame = 10,000 feet Detailed view of key pages –Content Inventory = 5,000 feet All of the site content by page. The Tie That Binds: A unique ID system from Site Map

5. Evolution of a Site Information (Content Inventory) Interaction (App Flow, Wire Frame) Purpose (Site Scope & Blue Print)

6. Blueprints Usually the first step in design, more focused on concepts, relationships. “Blueprints show the relationships between pages and other content components, and can be used to portray organization, navigation, and labeling systems” – IA for WWW, p. 296 “[blueprints] focus on the major areas and structures of the site, ignoring many navigation elements and page-level details.” –IA for WWW, p. 302

7. Format of Blueprints You can use different formats for different purposes: –Information organization –Navigation for various user groups –Labeling systems Keep it simple You can represent various levels of granularity on different maps: –High level (for clients & sponsors) –Detailed (for production team) –Main and subsidiary levels for complex sites: Tie them together with unique IDs A good resource for a standard visual language for websites: http://www.jjg.net/ia/visvocab/http://www.jjg.net/ia/visvocab/

8. Blue Print

10. 1.1.6.1 Participant Qualification Participant Records 1.1.2 Events 1.1.3 Sponsors 1.1.5 ISRC Directory 1.1.4 Research Interactive Systems Research Center (ISRC) Web Site 1.1.6 Participant Sign-up 1.1.5.1 Faculty 1.1.5.2 Students 1.2 Members 1.2.1.1 Schedule Study 1.1.4.1 Publications Application Page Entry Database LEGEND IFSM Usability Lab Site Map (v1.2) http://www.isrc.umbc.edu http://www.isrc.umbc.edu 1.1 Visitors 1.1.7 Discussion Forum 1.2.1 Faculty 1.2.2 Participants 1.2.2.1 Update Personal Info 1.1.6.1.1 Study Selection 1.1.1 About Us