Casa Basa ˜ blending art with technology

Syllabus

Course Description: An exploration of the process of web design from proposal to production. Students design and produce web sites with web editing software.

Download the Word version of your syllabus here

List of lectures and labs

Weeks: 1 2 3 4 5 6 7 8 9 10 11

Course Length: Winter 2011, 11 weeks. Monday, January 9, 2008 to Wednesday, March 19, from 1 p.m. – 5 p.m., Room 010.
Course Prerequisites: MM1123 Fundamentals of Web-based Programming
Course Competencies:
Upon successful completion of this course, the student should be able to:

• Apply time and resource management principles to the website production.
• Prepare and use images as effective elements of web design and content.
• Design layouts for a web page.
• Develop logically-structured web pages in Dreamweaver or similar program.
• Identify the essential elements of successful page navigation.
• Create workable links between portions of a page.
• Animate graphical content.
• Construct a form document.
• Produce an online portfolio suitable for your target audience.

Recommended Textbooks. Note: Students are required to access the Web Style Guide online and to review and reference as necessary. To receive credit for a book, you must post a visual online and email to me no later than the 3rd week of class.

Adobe Dreamweaver CS5 Bible - Paperback (May 10, 2010) by Joseph W. Lowery. ISBN-10: 0470585862

Dreamweaver CS5 For Dummies (For Dummies (Computer/Tech)) - Paperback (May 10, 2010) by Janine Warner. ISBN-10: 047061076X

Adobe Dreamweaver CS5 Classroom in a Book - Paperback (June 5, 2010) by Adobe Creative Team. ISBN-10: 0321701771

Download Microsoft Word version of syllabus

Student Evaluation Methods of Assessment:

Rubric for point evaluation (.pdf) MM3333 Web Design for Graphic Designers

• Tardies, as well as attendance, will affect your grade.
• Class time will be spent in a productive manner.
• Grading will be done on a point system.
• Points for individual activities will be announced.
• All work must be received by the set deadlines.
• Late work, if accepted, receives partial credit. Please discuss any inability to meet the posted deadlines with your instructor.
• On-time projects may be redone with instructor approval.
• ABSOLUTELY NO WORK WILL BE ACCEPTED AFTER THE FINAL CLASS MEETS WEEK 11.

Instructor Name: Sharon Kaitner, M. Ed.

Instructor Contact Information: skaitner@aii.edu or Sharon@casabasa.com

Instructor Availability Outside of Class: Tuesdays, noon to 1 p.m., room 309, or immediately before each class.

Grading:

Grading Scale
25%	Professional Conduct: Class Attendance, Discussion, Participation and Teamwork
45%	Lab Assignments and Homework
30%	Examinations/Projects
A	100-93		C	76-73
A-	92-90		C-	72-70
B+	89-87		D+	69-67
B	86-83		D	66-65
B-	82-80		F	64 or below
C+	79-77		Late work, if accepted, 50% or less

      

Top of page

List of lectures and labs

Weekly Schedule: 1 2 3 4 5 6 7 8 9 10 11

Week 1 Monday, January 10, 2011 8 a.m. - 12 noon:

Complete the student survey. Winter 2011 New Evacuation Procedures (.pdf)

Dreamweaver Review: touring the interface

A garden is finished when there is nothing left to remove
- Zen aphorism

Lecture:

• Review of the school’s emergency evacuation procedures
• Review of class and grading procedures. Rubric of points. Accessing your current score.
• Microsoft Word version of syllabus (review)
• Dreamweaver Review: touring the interface
• Setting Preferences
• Managing your site
  Commands and Site menus
• Extending Dreamweaver and Adobe applications

Lab:

• The use of images as effective elements of web design and content. Terminology.
• Using Photoshop and Bridge. If nothing else, remember File > Save For Web and Devices for web graphics.

Homework:

In either Wordpress, Blogger or Tumblr, create a blog to post your weekly assignments and email me the link.

Post to your blog assignment due by the beginning of week 2: Sketch two proposed designs for your portfolio site. Include a flowchart to show where navigational elements will lead. Have you considered your target audience? Please state your intended audience in this blog. Due beginning of next week's class.

Interesting Links:

• Best practices for images on the Web.
• Tutorial for more information: Creating Your First Site in Dreamweaver
• http://www.stopdesign.com/ - informational, personal blog
• http://www.youtube.com/ - personal entertainment
• http://www.ddj.com/ - informational portal
• http://www.albertlan.com/ - interactive portfolio (high bandwidth)
• http://www.matinee.co.uk/ - interactive graphics business (high bandwidth)
• http://www.drawn.ca/ - a collaborative weblog
• http://photomuse.org/ - photography database (relatively low bandwidth)
• AIGA - professional organization for designers - http://www.aiga.org/

Return to top

Week 2: Monday, January 17, 2011 8 a.m. - 12 noon

Note: Homework is still due beginning week 3 (you can post or send anytime up to then)

• Homework:
• Post to your blog a link to your design document or the document itself. Must be MLA-formatted, include at least 2 citations about your target audience (only valid research sites like Wilson Web or the library are accepted, not Wikipedia though you can use Wikipedia to get research links.) Please spell-check and ask someone to review for grammar errors PRIOR TO SUBMISSION. Cite 2 sources (2 pts.), proper MLA formatting (1 pts), spelling/grammar (2 pts).

Interesting Links:

• http://www.artinhk.com/
• http://www.madeofjapan.com/
• http://www.toxiclab.org/ various software tutorial
• Demonstration on laying out a web page visually for CSS, by NZ web developer, Steve Dennis, on his website, Subcide.com

 

Week 3: Monday, January 24, 2011 8 a.m. - 12 noon

From week 2
Building a Style Sheet Web Page

I have an existential map. It has "you are here" written all over it.
- Steven Wright

Lecture:

• Progressive Enhancement and Graceful Degradation
  • What makes a structurally sound website?
  • Navigation can make or break you.
  • Subcide Tutorial (if you want): http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

• Lab:
• Create an external style sheet. Dreamweaver templates and extensions. Checking the integrity of your site: site reports and commands.

 

Information Architecture

Find out what they like, and how they like it, And let 'em have it just that way.
- Fats Waller

Lecture:

• Organizing information - "chunking", hierarchy of information, relations and functions. Site design themes. Page layout tools.
• User-centered Design: Yale Style Guide to web design

Lab:

• Dreamweaver continued: using the tools found in the software with emphasis on the CSS palette, Templates and assets.

Homework:

• Create your web site host (either school or paid) and email me the url. Please post at least one page linked to an external stylesheet you created (you may use others as help but it must be your own work.) External stylesheet must include the following selectors: container, a:link, a:visited, a:hover, a:active (in that order!), content, nav, header, footer (unless using html5), p, h1, h2, h3. 1 point extra credit if you define an ul or ol.

Back to the top

Week 4: Monday, January 31, 2011 8 a.m. - 12 noon

Adding Advanced Design Features

Clutter and confusion are failures of design, not attributes of information.
- Edward Tufte, 1997 interview

Lecture:

• Continue Creating External Stylesheets. 3-column layout using floats. Solutions to some common layout problems. Looking at the Dreamweaver templates.
• Working with Javascript and Dreamweaver.

Lab:

• Practice working with web designer's tools
• Images and the web
• Adding galleries: where should you start?
• Individual meetings with instructor

Homework:

• Begin layout of final project inner pages. Post online wireframe of look for inner pages. Create an asset list showing your proposed pages and content you plan on using (graphics, videos, sound files, movies, motion graphics, javascript, etc.)

 

Return to top

Week 5: Monday, February 7, 2011 8 a.m. - 12 noon

Visual Hierarchy and Information Architecture

Lecture:

• Site and page layout. The psychology of the user.
• Google Analytics demonstration

Lab:

Creating templates and assets in Dreamweaver. Using your wireframe, create your template to help build inner and new pages. Your home (landing) page will be an exception.

Patrick Schwerdtfeger, http://www.patrickschwerdtfeger.com, will be presenting for all majors tangible examples of how social media can be used in all business formats. This is a wonderful opportunity brought to you by AI Director, Angella L. Hoffman, Academic Director of Fashion Marketing.

Date: Monday, February 7th, 2011
Time: 10:30 am – 11:30am
Location: 10UN Room 410

• [If there is enough time: exploration of web design online. Each student will demonstrate a favorite site and will critique/review that site's web dynamics. Discussion on web design, pulling the viewer in, user-centered design, coming up with ideas, etc. This is a creativity session.]

Homework:

• Create a template for your inner pages. You can show me next week in class, or I will be able to see when I view your portfolio site.
• In Word or a text program, write the content for your About Us page, graphics and portfolio items, home page introduction, etc. Pretty much all content you plan on having. This will help you catch any spelling or grammar errors. Then you can copy and paste into the final portfolio site.
• Blog about today's guest speaker.

Useful links:

• Information design. Designing for the enduser.
• Steps in creating an online presence: a slightly outdated but very well laid out process to web site creation.
• Types of sites

 

Week 6: Monday, February 14, 2011 8 a.m. - 12 noon

 

Lecture: Discussion of landing pages. Lab time to work on individual projects. http://unbounce.com/landing-page-examples/.

Commands and Site menus

Lab: Individual presentations and work with instructor

Homework:

• Research ways to enhance your site, either through promotion, use of interesting and creative techniques, or through promotions. Design a landing page and post a screenshot on your blog.
• Read Smashing Magazine's Tips to Design Pages to Sell. Bring graphics to class next week.

Back to the top

 

 

Week 7: Monday, February 21, 2011 8 a.m. - 12 noon

Creating Web Galleries and using CSS3 to add design

An h5 for styling reasons

Lecture:

• Working with Javascript and Dreamweaver.
• Using @font-face to have greater control of your design: http://www.css3.info/preview/web-fonts-with-font-face/ | Tutorial from Alfonse Surigao: http://hallofhavoc.com/blog/2010/09/how-to-use-font-face-css3 (though please note that @font-face is a css2 recommendation that still does not employ full browser support.) | Another tutorial from Zen Elements: http://www.zenelements.com/blog/css3-embed-font-face/
• from Neil Tan: @media queries: Responsive Web Design (.pdf) | A List Apart article on responsive web design that inspired Neil: http://www.alistapart.com/articles/responsive-web-design/ | and from webdesignerwall.com:
• @media queries http://www.webdesignerwall.com/tutorials/css3-media-queries/
• @media print: print stylesheets

Lab:

Example: Download a free font from dafont.com or use one of your own. In your html source code, in the <head></head> tag or called within your external stylesheet, add this selector:

1. @font-face {
2.   font-family: SweetConfusion;
3.   src: url(‘sweetconfusion_free.ttf’);

Then add the class to a tag within your html, or apply directly to a tag, like I did to the h5 at the beginning of this week's lecture above.

h5 {
font-family: SweetConfusion, serif;
}

http://www.dwuser.com/easyrotator/ - an easy to use Dreamweaver extension that creates a web gallery of your projects. Beta version using jQuery. http://highslide.com/ offers another jquery. Please remember that these are tools for your gallery. Your whole site should not be created by using templates if you are planning on marketing your coding skills, as well as your design skills.

Homework:

• Choose one Photoshop tutorial from this page: http://thinkvitamin.com/design/5-advanced-photoshop-techniques-for-web-designers/, complete and post to your blog.

Useful Links:

• Adding music to your web site: http://www.activejump.com/l-1.shtml
• Sound Guide: http://simplythebest.net/sounds/sound_guide.html

Return to top

 

Week 8: Monday, February 28, 2011 8 a.m. - 12 noon

Maximizing Browser Targeting/Interactive Forms

Lecture:

• Search engines and SEO.  Meta tags, keywords, and pages titles. The beauty of semantic markup.
  • For time is the medium of narration, as it is the medium of life.
    - Thomas Mann, The Magic Mountain

Lab:

• Critique and review of sites to date
• How Forms work/php Form call/styling forms with css
• Create the Meta tags and keywords relevant to your Web site

Homework:

• Begin work on your final project, your portfolio. Post to your blog a screenshot of your code and discuss how you are using semantic markup and good usability techniques to increase your search engine optimization.

Useful Links:

Universal design principles

Week 9: Monday, March 7, 2011 8 a.m. - 12 noon

Designing the User Experience

Lecture:

• Discussion:  UX - User experience.  Designing with bandwidth and traffic in mind.  Working with Dreamweaver’s asset management. Visual Design Principles: http://webstyleguide.com/wsg3/7-page-design/4-visual-design-principles.html, the Gestalt principle relevant to web design.

Lab:

• Setting up a domain, registration, hosting, ISPs.
• Lab time, individual assistance

Homework:

• Upload beta version of portfolio site. Invite 2 friends and 1 professional (someone currently working in your desired field) to critique. Blog their comments and your responses.

Back to the top

 

Week 10: Monday, March 14, 2011 8 a.m. - 12 noon

The Future of the Web

Lecture:

• [Final Exam]
• Discussion: The future of Web technologies and forward compatibility. Web 2.0 philosophy.

Lab:

• Mandatory attendance: critiques of beta versions.
• Lab time to work on final project.

Homework:

• Revise portfolio based on critique. Blog what you did and why.

 

Week 11: Monday, March 21, 2011 8 a.m. - 12 noon

Presentations and in-class critiques

Lecture:

• Presentations and in-class critiques. You will present your final project to the class. Speak about technical, design and creative challenges. Use your design documents to illustrate how you targeted your selected audience, and where you were successful.

Lab: Final Exam

Homework: None

How you are graded and points assigned:

Class Standings

Click on this individual score link to access scoring information on your completed projects.  Enter your name and id (password) exactly as you provided in the student survey.

If there are any questions at all, please feel free to email me. I usually respond the same day and sometimes immediately, or at least within the hour.

If you have any problems, email me.

 

Rubric for point evaluation (.pdf) MM3333 Web Design for Graphic Designers

Your individual score:

 

Posting grades as of March 20, 2011 9:21 PM

ID	Tardies	Abs	Final Grade
273931	0	0	99.5%	A+
346309	0	0	98.5%	A+
303562	1	0	97.8%	A+
052588	0	1	97.5%	A+
291525	0	0	97.0%	A+
272259	0	0	97.0%	A+
5507	0	0	96.5%	A
247610	0	0	96.0%	A
012	0	1	96.0%	A
111	1	1	95.5%	A
261488	0	1	94.5%	A
301782	0	0	93.0%	A
309648	0	1	93.0%	A
259896	4	1	84.0%	B
239554	0	1	84.0%	B
092487	0	0	82.5%	B-
168	0	3	81.5%	B-
1219	0	1	81.3%	B-
3128132	1	2	77.0%	C+
220490	2	0	76.5%	C
9143	1	1	70.0%	C-
426	1	2	40.0%	F
294936	0	7	17.0%	F

 

 

If there are any questions at all, please feel free to email me. I usually respond the same day and sometimes immediately, or at least within the hour.

If you have any problems, email me.

 

Current Students: The Art Institute of California - San Francisco

Student information - Winter 2011 - *Graduating this quarter

Past Students: Winter 2008

Student		Web Address
Sean Bledsoe		http://sb377.aisites.com/
Diana Khodyat		http://dkk371.aisites.com/
Jason Lonian		http://pjl371.aisites.com
Royal Torres		http://rt374.aisites.com/
Bryan Musk		http://bcm371.aisites.com/
Wilfredo Montano Jr		http://wjm371.aisites.com/
Sara Sanocki		http://sas375.aisites.com/
Ashley		http://amd374.aisites.com/
Joey Christensen		http://jbc372.aisites.com/
Ricky Jonsson		http://rcj371.aisites.com/
Joseph Azurin		http://jra372.aisites.com/
nancy barisic		http://nib371.aisites.com/ http://nancybarisic.com/
michel gadwa		http://mlg372.aisites.com/
Robby Belmes		http://rrb371.aisites.com/
Lindsay Farber		http://lrf372.aisites.com/
Brett Burns		http://bpb371.aisites.com/ www.brettburnsdesign.com/
Robert DeBusschere		http://debusscheredesign.com/
Liz Samano		http://lizsamanodesigns.com/
Mary Munoz		http://mem373.aisites.com/ www.maryemunoz.com/
Elina Rubuliak		http://elinar.org/
Candace Herrera		http://cah372.aisites.com/