Web Development Process and UIX
Complete Code review for 7 and 8
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
– Create a Site Map for the site. Start with content inventory. Think through Mobile options for your final development
– Try creating a table in Photoshop like the Demo in class
7. Forms – Practice formatting.
Adding PHP and functionality.
Download the code
8. Extra Markup
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Special Characters, Escape
PROCESS + PROTOTYPING
– 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
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype
Deliverable: HTML Prototype
-Designing the visual interface:
Template mock-ups in PSD or IA.
Deliverables: Interface in JPG
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site
-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.
You need a strategy
Studio 04: Web Development Process- Wire Framing and Prototype
Sources to Review:
Start reviewing Grid Systems
Complete Code review for 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