Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© Anselm Spoerri
Lecture 14 – Overview
Project Evaluation Criteria
– Home | Browse | Individual Pages
– Technical Quality
– Design Quality
Course Review
– Goals
– Grading
– Evaluation
Working on Group Projects
© Anselm Spoerri
Group Project Deliverables
Web pages to design
– Home page
– Browse page(s) with filter capabilities
– Individual pages for specific Gigapan, Photosynth or Video item
Navigation Structure
– Specify primary categories
– Interactive and Clear “you are here” indicator
– You can use CSS or image swap behaviors
Consistent and Attractive Look & Feel
– Hierarchical HTML Page Structure and controlled by CSS rules.
Database Communication
– PHP code and MySQL queries need to be created to
dynamically generate required web pages using content stored in
the whereRU database.
© Anselm Spoerri
Group Project Grading
Technical Quality of Deliverables
– Have the required types of pages been created, are they
dynamically generated using PHP code & MySQL queries and does
it all work (hyperlinks, content and images etc).
Design Quality of Deliverables
– Does the prototype have an attractive look & feel and have the
design principles covered in class been implemented, such as
do the pages have a clear visual hierarchy (review lectures
slides for more specific information).
© Anselm Spoerri
Course Goals
1. Understand Key Web Design Principles
Web Design Matrix
2. Competitive Design Analysis
whereRU = who to emulate ? learn from ?
3. Web Design using XHTML/HTML5 and CSS
Strategic Skills | Basic Understanding of Key Web Technologies
4. Group Project = Dynamic, Responsive Site
Access to whereRU assets | Create alternative site prototypes
5. Contribute to whereRU Web Design Effort
Design Analytics | Prototype & Responsive Design
© Anselm Spoerri
Course - Grading
Individual Exercises (52.5%)
– Quizzes (10%)
– Short Assignments (10%) – no redo
– Practice the techniques and technical content covered in class.
– Ex 1: XHTML / HTML5 & CSS (15%) – redo
– Meaning: Evaluate a site of your choice
– Mechanics: External CSS controls layout, Spry Menu Navigation
– Ex 2: Animated Navigation & Advanced CSS (15%) – redo
– Mechanics: Media Query, Mobile Layout, Simple & Animated Navigation,
Image Hotspot with Show/Hide AP element
– 360 Evaluation (2.5%)
Group Projects (47.5%)
– Competitive Website Analysis (15%) – redo
– Group Website (25%)
92 – 100
A
– Post-Mortem Paper (7.5%)
89 – 91
B+
82 – 88
B
79 – 81
72 – 78
C+
C
© Anselm Spoerri
Course Goals
Web Design course will Give You
Hands-on Experience
Practical Knowledge
Marketable Skills
Contribute to Unique & Special Project
© Anselm Spoerri
Course Evaluation
Please complete it
My Grade  Course Evaluation :)
© Anselm Spoerri