designCOM 315 Web Design

Midterm Proposal Grading Rubric
Midterm Proposal Template

Final Project Criteria Checklist and Grading Rubric

Course Description

This course takes a step-by-step approach to designing and producing a web site, incorporating (X)HTML and CSS, as well as Adobe PhotoShop, Illustrator, and Dreamweaver.  The course encourages students to learn about professional technologies, demonstrate understanding of usability principles, and consider the Internet in critical contexts.

Course Objectives

Upon completion of this course students should be able to:
1) demonstrate knowledge of
web design and technology terminology;
2) develop goals and objectives
for strategic development of a web site;
3) write a web site proposal (creative brief);
create a flow chart; design a comp;
4) design a web site that meets objectives
and demonstrates usability and design principles;
5) design and create a logo using vector software
such as Adobe Illustrator;
6) produce and optimize web graphics using PhotoShop;
7) produce web pages using HTML, CSS,
Dreamweaver, and PhotoShop;

Course Materials

The course schedule at the end of the syllabus contains clickable links to all course materials, including videos, PowerPoints, readings, and links. They are also compiled below.

Web Design & Planning

Graphics Software | PPT | Video
Design Process | PPT
Creating Wireframes | PPT | Video
Web Design | PPT | Video
Usability | PPT | Video
Usable Content | PPT | Video
Create Photoshop Comps PPT | Videos | DOC
Photoshop Basics | Videos (optional Photoshop refreshers)
Type Design | PPT | Video
Logo Design | PPT | Video

Midterm Proposal
Midterm Proposal Template | DOC
Midterm Proposal Grading Rubric | DOC

Web Technologies
Terminology Intro| PPT
Domains and Hosting | PPT | Video |DOC

In your browser, go to View>Source
to see code on HTML pages below.

Lesson 1: Code for Your First Full Page: HTML | Videos
Lesson 2: Page 1 HTML, Page 2 HTML | Videos
HTML Practice Test (hands-on) | DOC
(Optional) Lesson 3: Tables Simple: HTML
(Optional) Lesson 4: Tables Complex: HTML

Dreamweaver Intro | Doc | Videos
Setting Up Your Site in Dreamweaver | Videos
Dreamweaver FTP - Drag files to Web | Videos

CSS (Cascading Style Sheets)
CSS Intro - Class and Tag Styles | DOC | Videos
CSS Layout - Tutorial used in class | DOC
CSS Layout Tutorial Part 1: Set Up divs | Videos
CSS Layout Tutorial Part 2: Fill divs: Videos
| graphics for download | Comp for Preview (jpg)
CSS Backgrounds | DOC
CSS Practice Test (hands-on) | DOC

Text Links & Menus
Text Link Styles | DOC | Video
Simple Text Links on Nav Bar DOC | Video
Adobe Exchange CSS Dropdown Menu Pkg | Link | Video | Pkg
Navigation bar with unordered list links | DOC | CS6 Video

Saving Graphics for Web

File Sizes and Types | PPT | Videos | types DOC | sizes DOC |
Photoshop - Saving Graphics for Web
PPT | DOC | Videos| PSD Comp for Practice (25MB)

Create Your Site (All Steps in One Place)
Key tutorials from above have been placed in "steps" below
to show you how to take each step in building a site.

1) Sketch home page and site map (flow chart).
2) Create logo in Adobe Illustrator.
Reference: Type and Logo Design PPT | Video
3) Create Photoshop comps. PPT | Videos | DOC
4) Prepare Web Site Proposal (from template). | DOC
5) Plan wireframes. | PPT | Video
6) Save graphics. PPT | Video | DOC
7) Create CSS layout:
set up and fill divs. | DOC
8) Create CSS styles for content (text, images, etc.) DOC
9) Create CSS text link styles for entire site. | DOC | Video
10) Create Navigation Bar:
Simple Text Links on Nav Bar DOC | Video
Adobe Exchange CSS Dropdown Menu Pkg | Link | Video | Pkg
Navigation bar with unordered list links | DOC | CS6 Video
11) Create additional pages of your site. Video
12) Get rid of nasty blue border around linked images in Explorer (doc)
13) Drag files to the Web | Videos

Final Project Grading Rubric | DOC

Pimp Out Your Site (Optional)

Images and Portfolio
Lightbox Portfolio (free plugin download to create lightbox)
"Conveyor Belt" Slide Show Portfolio (interactive)
Flash Slide Show in Dreamweaver

Click to Advance Slide (a PowerPoint based template)
Click to Enlarge Image (Spry Effect in Dreamweaver)
Rollover to Enlarge Image (Using CSS)

Pimp Out Your Divs
Rounded Cornered Divs and Drop Shadowed Text
Transparency (called "opacity")--e.g., for "see-through" div backgrounds
Border Styles

Embed and Link Video
Link from YouTube | See Video
Embed Video | HTML5 | Options

Adobe Form Central | JotForm

Add a drop shadow to your container
Rollovers in CSS (and see textbook)
JavaScript Rollovers DOC | Video
Library Items
Changing Scrollbar Color

How to Get Rid of That Nasty Blue Border
Around Linked Images

Here's the Code

Optional Tutorial Links

Free Adobe Tutorials
Creative Cloud

PhotoShop Basics (Tutorials)
Photoshop Basics | Videos (optional Photoshop refreshers)
Photoshop Tools | DOC
Photoshop Quick Steps | DOC

Illustrator Tutorials (optional)

Flash Tutorials (Optional)
Video in Flash (How to Make the Files)

Articles (for reference)

Net Neutrality 101 (Save the Internet)
The Question Concerning Technology (Heidegger) Analysis | Mahon O'Brien
Can You Own a Color? (Inside Higher Ed)
In Search of Ethics in Graphic Design (Paul Nini, AIGA)
The Death of the Author (Roland Barthes)