HCI 406 | Web Design
HCI 406 Home Lectures Resources

spacer Location: Lecture 01
Lecture Plan
Lecture 01
Lecture 02
Lecture 03
Lecture 04
Lecture 05
Midterm Presentation
Lecture 07
Lecture 08
Lecture 09
Lecture 10
Final Presentation
Lecture Plan
Week 01

Technology overview
- Understanding the internet and basic website structure;
- Obtain domain names and manage site and hosting;
- Define & Manage the Site;
- Upload to your web space, local vs. server;
- Web vs. print and Web vs. broadcasting
- Understand web measurement, web image/video resolutions, web media types and fps;
- The anatomy of HTML - basic tag structure, CSS, Hyperlinks;

Due: Proposal for the website
Note that you are not married to this proposal, you can keep revise it till week 3.

Week 02

CSS Overview:
- Site CSS, local CSS, inline CSS;
- Styling Text
- CSS selector, Class, ID, Tag, Compound;
- Margins, Padding & the Box Model;
- Floats & Positioning

Starting a New Project

- Overview of site types: Brochure sites, E-Commerce sites, Entertainment sites, News sites, Blogs, Community sites, Educational sites etc;
- Consider business logic, determine your site type.
- Define Goals and Objections;
- Site Map, Wireframe;
- Define Components of the webpages: headers, topline branding, navigation footer, etc;

Due: Site Map

Week 03

Image types

Color space

Digital grahpic overview
- Resolution
- Understanding image types and media types on the web
- Pixels and vector graphics
- Color space
- Basic image creation and Process
- Downloading images;
- Image rights overview.

Web Fonts, Typography
- Anatomy of letters
- Classify font types

Site branding and Logo design

Due: Site logo mock up.

Week 04

Element of design:
- Space, Dot, Line, Shape Form, Texture, Pattern, and Color;
The principles of design:
- Unity: proximity, Alignment, Similarity, Repetition;
- Emphasis: Contrast, Color, Depth, Proportion;
- Perceptual Forces: balance, Symmetrical Balance, Asymmetrical Balance, Continuation, Figure-Ground, Psychological Closure

- Introduction to Typograph;
- Characteristics that Define Typefaces
- Categorizing Typefaces
- Computers and Typefaces
- Alignment, Justification & distribution

Due: Site logo/favicon, lock down color scheme & typography.

Week 05

Layout design:
- Study and review websites;
- Learn Grid system;
- Developing and applying creative ideas to web design;

- Overview of the basics
- Optimize digital Photography for Web;

Due: HomePage layout design mockups.

Week 06

Web Site Design Presentation and Critique (visual)

Due: Homepage design revises and subpage mockups.
Week 07

From Visual Design to HTML/CSS
- Authoring webpages using HTML and CSS from your visual design;
- Study responsive web design
- Quality of code

Due: Convert Homepage to web page.

Week 08

New Standards:
- The W3C has released new standards of HTML (HTML5) and CSS (CSS3)

Responsive web design
- Grids and Frameworks for HTML/CSS;
- Responsive design principles;
- Fluid design, layout for multiple devices;
- Challenges, and other approaches;

Web interactive:
Behaviors - basic JavaScript;

Due: Convert the whole site to web pages.
Week 09

Sound and Video
- Study multimedia on the web
- Over view of Sound and Video
- Learn how to incorporate audio, video, RSS and social media widgets
- Different formats of video/audio; transfer rate;
- Intro to Flash

RSS feed, Blog and Podcast

Due: Add interaction and multimedia elements to the site

Week 10

- Search Engine Optimization (SEO);
- Google Analytics, Google Adwords; Google insights
- Submit URL to search Engine.
- Key word researching;
- Site ranking;
- Form
- Final projects critique

Due: Fine toning the site.

Week 11

Web Site Presentation and Critique (visual and function)