1 / 12

Web Content Development

Web Content Development. Dr. Komlodi Class 22: Wirerfames. Moving from Strategy to Design. Focus shifts to creating products and deliverables (site map, application flow, wire frame, content inventory)

umeko
Download Presentation

Web Content Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Content Development Dr. Komlodi Class 22: Wirerfames

  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. The Tie That Binds: A unique ID system from Site Map Scope of all Deliverables • Site ScopeReport = 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.

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

  5. Wire Frames • “Depict how an individual page should look from an architectural perspective.” • IA for WWW, p. 307 • Created for the site’s most important pages: • homepage • main pages • major category pages • search • Serve as templates • Closest you get to visual design in IA

  6. Roles of Wireframes • Represent the architectural structure of pages • Include the design of navigation systems: • Grouping • Ordering • Layout • Testing navigation system: • Too much or too little? • Space for content?

  7. Design Student Advising Home Page

  8. Basic Navigation Search for information within the site ISRC Search: Interactive System Research Center About Us Our mission is to investigate the design, implementation, and evaluation of interactive systems with the purpose of supporting the development of systems that are both usable and accessible. Our emphasis is two-fold: theoretical contributions and practical results. Through theoretical contributions, we advance our knowledge and understanding of how humans interact with information technologies. Through practical results, we improve the lives of those individuals that interact with these technologies. Our current work is highlighted below. Earlier efforts are documented in publications. Events Place where prospective participants and researchers can sign in/sign up Sponsors A current listing of news Research Participate in a study! Recent News: May 12, 12:00-1:00pm, Dr. Ant Ozok, Cell Phone vs.Computer: A Comparison of Electronic Commerce and Mobile Commerce from the User s Perspective April 28, 12:00-1:00pm, CHI 2003 Conference Reports, Rm 344 Academic IV B wing The ISRC is in need of participants for various studies conducted in their usability lab. If eligible, participants will be compensated based on the study. ISRC Directory A list of current studies at the ISRC Sign up here Current members Sign-in Current Studies Discussion Forum -Content-based document conversion -Cross cultural HCI and user interface design -Data entry for mobile devices -Designing effective distributed documents -Evaluating evaluation techniques -Guidelines for Design and Measurement of Interface Consistency on the Web -Information visualization tools for intrusion detection -Instant messaging A N H O N O R U N I V E R S I T Y I N M A R Y L A N D UMBC

  9. ISRC About Us Events Sponsors Research ISRC Directory Sign-in Discussion Forum InteractiveSystem Research Center Link to return to ISRC Home page Search: Announcements: The usability lab will be closed on the week of March 22nd. Dates cannot be reserved at this time because of Spring Break April 28, 12:00-1:00pm, Faculty meeting 4th floor ITE conference room Calendar for Scheduling For the usability lab Welcome, Dr. Komlodi Below is the calendar to help you scheduling for the usability lab March 2, 2004 9:00 available ---------------------- 10:00 available ---------------------- 11:00 ---------------------- 12:00 available ---------------------- 1:00 available ---------------------- 2:00 available ---------------------- 3:00 ---------------------- 4:00 available ---------------------- 5:00 ---------------------- 6:00 Welcome message and brief explanation of current page PREVMARCHNEXT SuMo Tu We Th Fr Sa 12 3 45 6 7 8 9 10 11 12 13 141516 17 1819 20 2122 2324 25 26 27 2829 30 31 Display of available times to schedule a usability lab Display of member-relevant announcements Select All Schedule Date(s) ***Click any date that is underlined. Then the schedule of the lab for the date will be displayed on the right. A N H O N O R S U N I V E R S I T Y I N M A R Y L A N D UMBC

  10. Types of Wireframes • Low & medium fidelity (pp. 310-311): • Faster • Non-threatening for visual designers • High fidelity wireframes (p. 312): • Are more believable and an be more acceptable • Can support usability testing • Can show technical and visual limitations • Can focus on visual design too much and ignore architecture

  11. High Fidelity Low Fidelity

  12. Wire Frame Tips • Keep them consistent • Use template for all pages • Use callouts • Page numbers, page titles, project titles, last revision date • Don’t build a wire frame for every page in the site. Only those “that are complicated, unique or set a pattern for other pages (i.e., templates)” • Use PowerPoint • Most people have it which means it can be shared electronically • Easy to create templates • Look at handout for details

More Related