WDS 09: Advanced CSS + Process 10/31/17

REVIEW:
HOMEWORK (Show):
– Make sure you understand the “Z-index”. Try either example.
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try CSS Drop down
– Try Media query (color change)

READING:
From Chapter 16, rollovers.
Why? Pseudo-classes work just fine…
JS tried and true, but sooooo 1999
Better but tricky (book, pg 418)
Something easier… Demo.
More Info

LAYOUT:
Inline vs float
Remember This? Try using the above instead

PROCESS:
-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

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):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

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

Resources:
Sketches
Sketches 2
Digital
With annotations
With Annotations 2

PROTOTYPING:
Examples

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

Studio 09: CSS/HTML
In Class:
– Import and display fonts
– Try an image (Sprite) Roll-over (CSS)
– Try Inline Block, Instead of Float
– HTML5 Code (make sure you have tried it)

Process: Due Next week.
Come in with completed:
– User Experience
– Site map
– Wire Frames
– Prototype