CCT260, Fall 2022, Project 1
Information Architecture; Navigation; Wireframes; Hi-fi & Low-fi Prototype
Objectives
Information produced by human beings is expanding at a rapid pace. Navigating vast bodies of information is a challenge. With billions of information pages and data sources across the World Wide Web, a key objective of designers and developers is to make sense of, visualize and communicate information in a coherent and usable way. This project helps you build skills in organizing, structuring, labeling, designing and coding web content for a professional website. You will build a content strategy, Information Architecture, wireframe, and prototype, all of which will inform. and express your interface and interaction design. The end product is a principle component and building block of the interaction design and development of a website.
Scope of work
You will select a sufficiently large open Wikipedia information page (e.g. on “Design”, “Computer Programming” or “History of Canada”) with several offshoot content branches. The webpage must be a minimum of 2500 words in length, and contain at least 8 related content branches or sub-categories. Images and other media used must be your own production.
1. Content Study & IA: Map the exact, non-modified content to an Information Architecture and show it as a Node-Link Tree diagram that represents the network of existing information as provided in the original source content. Then map out a revised Node-Link Tree diagram that reflects your new approach to the IA based on usability considerations and logistics of building a usable website. Note that unlike the studio lab activity that called for simplistic lists, the tree diagram must to be properly designed.
2. Navigation: Identify and clearly label all types of navigations for your IA: Structural, Associative, Utility
3. Wireframes: Build static single-page wireframes for three individual page-types: the homepage and two inner content pages, using the Adobe XD prototyping tool and ensuring that the page-types are each significantly different in design. For example, in addition to the homepage choose from the following page-types to produce two more wireframes: About, Contact, Photo Gallery, Video, People Profile, Products, Events. Describe how your wireframes respond to the usability of your site, your proposed IA and principles of usability. Design the wireframes of the interfaces for both desktop AND mobile browsing (total of 6 pages).
4. Graphic Prototype Design: Design graphical components and integrate appropriate image media into the mockups for your page-types: the homepage and the two inner pages. Design the artboard interface for desktop AND mobile browsing for all 6 pages.
5. Rich Media Production: Produce all necessary images and graphic media, by referring to best practices, skills strategies and processes presented in class. No graphic/photographic work should be used other than your own work. The only external content permissible for use is the titles, taxonomies and categories that comprise the IA.
6. Process: Include all steps, brainstorming and visual studies that led to the final design along with all work executed during this project. Sketches and studies, prototypes, rough layouts and tests must be thoroughly documented and organized. Any hypothesis and resource used to explain the rationale for a choice and/or approach should be included in written format.
Submission requirements
A single multi-page PDF which includes all your content study, old/new IA diagrams, navigation, wireframes, graphic prototype design mockup and process as screenshots and exported slides from Adobe CC applications, along with your source XD file.
Learning outcomes
Analyze large-scale websites from an IA standpoint and design/develop with usability at the centre
Apply principles of Information Architecture, wireframing, prototyping, content production and semantic web design
Evaluation criteria includes:
[20%] Quality of planning; Uniqueness of approach; Clarity of assumptions; Quality of documentation; All considered prototyping studies and explorations; Sketches, process documentation and rationale; Application of standards discussed in the course.
[15%] Quality of rich media production of graphics and photographic work
[15%] Quality of IA and representation of both node-link tree diagrams (before/after); Quality of the wireframe. of desktop + mobile experiences; Accurate and thorough description and identification of types of navigation systems
[50%] Quality of prototype mockup design, usability, hierarchy, visual flow/grid, graphic design of elements based on usability considerations