Home . GD230 . Contact
New England Institute of Art
wednesdays, 4pm - 6:50pm, 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
- Head First HTML with CSS & XHTML
- 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.
Need a web host?
software
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 Head First: Chapters 1 & 2
Start Project 1.
Project 1 Sketch 4 pages, each will page consist of only 4 boxes so create a compelling compostion using size, color and placement.
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 Head First: Chapter 3, 4, & 8.
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 4 pages of boxes 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 Head First: Chapter 6 & 9.
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.
Homework
Explore http://www.cssbeauty.com/
for help with columns study http://baselinecss.com/
Read Head First: Chapter 5.
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 5
I'll be at CAA so after Michael's Lecture work independently with your client.
Design presentation: Michael Goldberg
In-class
Meetings with your client to go over portfolio designs.
Homework
Explore http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-intro.html.
Read Head First: Chapter 9.
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
read: Mystery Meat Navigation
take home test: Slice and code this layout.
Note: each box should become a slice and you must replace the graphic text with html text.
Due beginning of class 9.
Homework
Read Head First: Chapter 11.
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 & intuitive Design
- Embedding, flash, quicktime, windows media or youtube?
- Rollovers
- Contact Forms
- Information Architecture
- Guiding Users & Content Management
resorces & examples
Interactive
In-class
Work time - add a set of rollovers to your home page and a youtube video.
homework
Read Head First: Chapter 14.
Publish and test your clients site. Debug and refine as necessary.
Class 8
Work Week
Read The Elements of User Experience Chapter 4 & 5
Class 9
Crit week
In-class
Meetings to discus Project 3
Due take home test.
Present Project 2.
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.
Also For next week bring in 150 to 250 word bio.
Also bring in one example of a good, or bad portfolio site to discuss in class.
Class 10
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 Good and Bad design examples and Concepts for Project 3
Homework
Read The Elements of User Experience Chapter 8.
Class 11
Being a developer without being a programmer
- Finding resources and using other peoples code
- Fair use
- Blogs
resources
In-class
Continue Project 3. Begin slicing your graphics and building your site in dreamweaver.
Homework
Continue building your site
Class 12
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 13 & 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
- Search for the answer in http://www.w3schools.com/html/default.asp
- 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
Student Sites
Brian Lottridge
Samantha Small