IDES 322 04: PROCESS 2 + Tables 02/09/16

INTRO:
Read: Chapter 6 and 7.
Complete Code review for 6 and 7
Process and Design
Start UIX and Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic and create preliminary user scenarios and usability maps (show in class)
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development (show in class)

REVIEW:
Tables – A simple table.
Demo tables in Photoshop
How to manipulate cells
Forms – Practice formatting.
Adding PHP and functionality.
Example

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
– Anticipating end-user scenarios: Example, Example2 and a quick Usability Map
– Modeling the user experience: Design Document: Audience Scenarios, and Competitive Analysis.
Experience mapping
Example
Example
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

Resources:
UX diagram examples
Read This
UPA
Experience Maps

SITE STRUCTURE
-Generating schematic wireframes for key interfaces and interactions:
Site map
Site map
User experience/wireframes
Wireframes
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples
Another example
Deliverable: HTML Prototype

Resources:
Prototyping tools

DESIGN:
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

TODAY:
-Generating schematic wireframes for key interfaces and interactions:
Deliverables: Site Inventory/Site Map,
Layout grids – Wire Frames.
Wire frames should be worked up to scale.
Virtual Space is as old as art.
Stats for size
Think of a grid
Stats for Browsers
Don’t forget the “Mobile” Experience
Mobile sizes are helpful.

Assignment:
Sources to Review:
Start reviewing Grid Systems

Read: Chapter 8 and 10.
Complete Code review for 8 and 10
Mount an image in a table. Put text in certain table cells.

Process and Design:
– Modify Usability and site maps based on feedback.
– Create Detailed Wire frames and annotated versions
– Create HTML prototype from your wireframes. Be as detailed as possible.
We will review in class