DePaul KMC (Kellstadt Marketing Center) |Web Design
KMC 142 Home Lectures Resources

spacer Location: Lecture Plan
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;
Web Design General Lecture file

Homework: Proposal for the website; Site Map
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

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.
Logo, Shapes.

Image types

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;

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

Week 03

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

Color in Design. Color Lecture File.

Site branding and Logo design

Homework: HomePage layout design mockups.

Week 04

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

Using Web Fonts:
- Google Fonts etc.

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

Homework: Homepage design revises and subpage mockups.

Week 05

From Visual Design to HTML/CSS
- Authoring webpages using HTML and CSS from your visual design;
Case studies (continue...)

Web interactive:
Behaviors - basic JavaScript;

Homework: Convert Homepage to web page.

Week 06

From Visual Design to HTML/CSS
- Authoring webpages using HTML and CSS from your visual design;
Case studies (continue...)

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

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;

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

Due: Convert the whole site to web pages, fine toning the site.