Home . GD230 . Contact

New England Institute of Art

wednesdays, 9am - 11 50am, Room 247

Course Description

A hands-on examination of the processes of strategic, effective website design and development. Includes discussion of conceptualization, design elements, communication strategies, craft, deadlines, and the roles of designers, art directors, copywriters, and other professionals.

Required Books & Materials

• Adobe Dreamweaver CS4 Classroom in a Book
• The Elements of User Experience by Jesse James Garrett
• A sketchbook

Students Will Learn To  

• prepare projects for client design review presentations
• manage a website development project
• write project briefs and style guides
• apply creative skills to design successful websites 
• develop good project work habits
• practice client-interaction skills
• meet project deadlines

Goal of Class

Project process and best practices of creating a successful, styled and functional web site.

Additional Notes

The instructor reserves the right to change the syllabus or course content at any time at his discretion. By participating in this course, students agree to openly discuss their work in class with the instructor and classmates.

• download the full syllabus

Need a web host?

software

• Fetch
• text wrangler

Class 1

Orientation – Into the Deep End

• Lecture Screen vs. Print
• HTML Basics & Wire framing

In-class

Coding exercise building your first homepage, creating a link & uploading files.
Reference HTML 4.01 Quick List ~ http://www.w3schools.com/html/html_quick.asp

Homework

Explore HTML School ~ http://www.w3schools.com/html/default.asp.

Read Adobe Classroom in a Book Chapter 11 Publishing to the Web - post homepage to your site.

Start Project 1.

Project 1 Layout 2 sets wireframes for each of the following pages Home, Gallery, Detail and Statement. These just need to be grids with notes on where content will be going. Bring samples of the content next week. Save your wireframes as a PDF, upload and link your homepage before start of class 2.

Class 2

CSS

• Lecture CSS a designers language
• Div tags and how Classes, IDs & Tags work

In-class

CSS exercise, give your homepage a little style.
Individual meetings

Homework

Read Introduction, Syntax and How To. http://www.w3schools.com/css/default.asp.

Read A Design Process Revealed

Read Behide the Scenes of Garden Party

Build your wireframes using HTML & CSS, post to your site before the start of class 3. Details.

Resource http://colorschemedesigner.com/

Class 3

Typography

• Lecture Type on the Web
• Headers, Paragraphs, Links, Lists oh my; and More Classes & Tags

In-class

Exercise Style the supplied html page. The HTML is writen and most of css selectors that coincide are supplied, you'll need to add selectors for a list, links and hover states. Add background images to the header footer and sidebar. Post to your site before the next class.

• http://www.w3schools.com/css/css_font.asp
• http://www.w3schools.com/css/css_text.asp
• Web Safe Fonts
• The Elements of Typography Applied to the Web

Presentations of Project 1.

Homework

Read Adobe Classroom in a Book Chapter 2 Working with Cascading Style Sheets - post lesson to your site.

Start Project 2 - Meet with your client. I have assigned each of you a number, next to your name I have listed who your client is.

Project 2 You will be designing a portfolio site for one of your fellow classmates. Your design should showcase your client's work, if they have a logo the site should nest well with their established brand. If they do not create a simple typographic logo.

The client will need to provide 5 portfolio images, a bio/statement, and discuss color and design styles they like.

The designer will need to do 2 sets of wireframes for home, statement, gallery and detail pages, these should be based on the conversation you had with your client and ready before the next class.

Class 4

Graphics

• Applying a design to your grid
• Using Photoshop and Dreamweaver together
• Gif, jpg, png / what are they and when to use
• Image optimization

In-class

Slicing and getting your graphics into your HTML page
Exercise Using HTML and CSS layout the provided slices, post to your homepage before class 5.

Right click here, and choose Download Linked file.

The sliced and coded layout.

Homework

Explore http://www.cssbeauty.com/
for help with columns study http://baselinecss.com/

Read Adobe Classroom in a Book Chapter 4 Working with Images - post lesson to your site.

Continue work on Project 2. Present design concepts to client, make any tweaks and receive design approval by next class.

Class 5

Design presentation: Michael Goldberg

In-class

Meetings with me and your client to go over portfolio designs. I'll also be checking homework.

Homework

Explore http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-intro.html.

Read Adobe Classroom in a Book Chapter 5 Working with Navigation - post lesson to your site.

Read Continue work on Project 2. Fine tune design and have your photoshop file sliced for next class.

Class 6

Navigation & file management

• Navigation, text vs image. Bread crumbing, mystery meat, menus.
• Review: File Management, Slicing

In-class

Begin taking your clients design into dreamweaver
Individual meetings

take home test: Slice and code this layout. Due beginning of class 9.

Homework

Read Adobe Chapter in a Book Chapter 7 Creating a Page Layout

Read The Elements of User Experience Chapter 1, 2 & 3.

Continue work on Project 2. Build the site. Be sure to meet with your client to provide a progress report, discuss any needed changes, concerns, etc.

Class 7

Interactivity

• Embedding, flash, quicktime, windows media or youtube?
• Rollovers
• Contact Forms

Examples

In-class

Work time - add a set of rollovers to your home page and a youtube video.

homework

Read Adobe Chapter in a Book Chapter 8 Working with Forms and Chapter 9 Working with Flash

Publish and test your clients site. Debug and refine as necessary.

Class 8

In-class

Wrap up Project 2.

Homework

Read The Elements of User Experience Chapter 4 & 5

Class 9

Critique

Present Project 2

In-class

Meetings to discus Project 3

Due take home test.

Homework

Read The Elements of User Experience Chapter 6.

Pick a local firms portfolio site and deconstruct its Architecture. Post to your homepage before class 10.

Project 3 Create Architecture for your portfolio. Post to your homepage before class 10.

Class 10

Intuitive Design

• Information Architecture
• Guiding Users & Content Management

resorces & examples

• jjg.net/ia/visvocab
• superbad.com
• my architectures

In-class

Begin Information Architectures and bio.

Homework

Read The Elements of User Experience Chapter 7.

Project 3 Portfolio

For next week bring in completed architecture and 150 to 250 word bio.

Also bring in one example of a good, or bad portfolio site to discuss in class.

Class 11

Review & work week

Discussion what makes good design?

examples

• http://www.afcook.co.uk
• http://uncleemile.fr
• http://www.3deep.com.au/home.htm
• http://www.studiovonbirken.com

In-class

Present Design Concepts

Homework

Read The Elements of User Experience Chapter 8.

Class 12

Being a developer without being a programmer

• Finding resources and using other peoples code
• Fair use
• Blogs

resources

• wordpress.org
• RSS to HTML with magpie
• Matt's Script Archive
• webmonkey.com
• validator.w3.org

In-class

Continue Project 3. Begin slicing your graphics and building your site in dreamweaver.

Homework

Continue building your site

Class 13

Just as we do press checks for print, we do browser checks for web

• Quality Testing
• Usability Issues

In-class

Debug and troubleshooting

Homework

Publish your portfolio

Class 14

Portfolio Site Presentations

 

Getting Help

Web design & development is an extensive undertaking, and you will probably have some questions and problems. If you get stuck

1. Search for the answer in http://www.w3schools.com/html/default.asp
2. Email me. Put GD230 HELP in the subject line so that I know you have an important question that is keeping you from completing your assignment. Since I have many students who will be emailing me this semester, the correct subject line tells me to answer you quickly.

send a question

Question

Student Sites

1. Eric Sv. Bjornsson --is designing for > Zoia
2. Devlynn Brown --is designing for > Kriten
3. Alanna Cervenak --is designing for > Jeannette
4. Kristen Cote --is designing for > Chad
5. Kyle Dooley --is designing for > Eric
6. Candice Houley --is designing for > Devlynn
7. Ashley N. Johnson --is designing for > Alanna
8. Tung Leung --is designing for > Marc
9. Brian Lottridge --is designing for > Eric
10. Jessica Lynch --is designing for > Edward
11. Edward McCoy --is designing for > Roberto
12. Roberto Morera --is designing for > Jimmy
13. Jimmy Murray --is designing for > Katey
14. Marc Provencher --is designing for > Jessica
15. Zoia Rocker --is designing for > Kyle
16. Katey F Stewart --is designing for > Tung
17. Jeannette Vivas --is designing for > Ashley
18. Chad Whitney --is designing for > Candice