Web Design

Thoreau: “Our inventions are wont to be pretty toys, which distract our attention from serious things.”

October-November 2015, Monday/Wednesday evenings : Design 220, Web Design III, Sanford-Brown Seattle, Room 7213 (Mac lab)

This course provides an introduction to the development of dynamic websites through the use of scripting languages and database technologies. Additional topics include scripting syntax, search engine optimization, and content management systems.

Course materials are accessible via the student portal.

Syllabus // Assignments // Reading // Tools & Resources

Syllabus

Upon completion of this course, the student should be able to:

  • Design, develop, customize and publish websites of professional quality;
  • Analyze and improve existing websites;
  • Design dynamic websites with scripting languages;
  • Describe fundamentals and logic of scripting languages; and
  • Differentiate between client-side and server-side scripting.

Session schedule

  1. Course Overview  // Lab (domain name, hosting)
  2. WP nitty gritty 1 // Lab
  3. WP nitty gritty 2 //  Lab (including editors)
  4. HTML nitty gritty 1  // Lab
  5. CSS & scripting nitty gritty // Lab
  6. From code to design // Lab
  7. Design critiques // Lab // Quiz (code)
  8. Content management systems // Lab
  9. SEO // Lab
  10. Final projects // Quiz (code & concepts)

In general, a class session will be broken into two parts.
Part one will will include any combination of:

  • example-based lecture/discussion
  • project critique/discussion
  • reading discussion
  • group activity to identify design elements in selected websites or books
  • student presentations on specific assignments

The second part of class will include any combination of skill-based workshop with working lab time and/or individual consultation.

Assignments

Week 1

Session 1, M

Session 2, W

Week 2

Session 3, M

Session 4, W

  • Read WP WQSG, CH 1, CH 3
    Reading prompt – ? Post to class WP site before 5 pm on Wednesday
  • Project: find three themes (free or $) that you find visually appealing; create an interesting link post (creative headlines!) about them on the SBdesign220 course blog; your primary audience is your fellow classmates – what might they want to know? Include a screen capture of each one. Remember to link to each theme. Post to class WP site before 5 pm on Wednesday.
  • Resource: W3Schools, HTML
  • Resource: CodeAcademy
  • Resource (video): Don Norman on Three Ways Good Design Makes You Happy

Week 3

Session 5, M

Session 6, W

Week 4

Session 7, M

  • Read WP WQSG, CH 13, CH 14
  • Find three websites that you want to emulate

Session 8, W

Week 5

Session 9, M

 

Session 10, W

  • Presentations/projects due. Post presentations to class WP site before 5 pm. Post final projects to class WP site before 11 pm.
  • Final quiz.

Projects

  • Reading posts (use the reading prompt) to WP course blog (category, reading)
  • Code posts to Slack
  • Lead reading discussion (weeks 3-4, sign up in Session 1)

All reading posts are examples of public writing and should be posted to  sbdesign220.wordpress.com by 5 pm on the due date. There is no specific word count/limit. The post should be long enough to make it clear you’ve thought about the assignment. It should also be edited and coherent; no brain dumps!

I ask students to write about the readings to help gain cognitive understanding of material as well as to hone analytical skills. Reading assignments are not graded, except for completeness. Be sure to check your spelling and grammar!

Code posts are also due by 5 pm (unless they are an in-class assignment, and then they are due by the end of class).

Final project

The final project will synthesize the basic elements of a web site. Students will work together in lab but final projects will be individual.

  • Pick a project (what genre? portfolio / blog / product / service)
  • Develop a description of the audience, goals, messages, and technological concerns (requirements)
  • Conduct a competitive analysis
  • Develop wireframes
  • Develop a working prototype

The final project precis, except for the working prototype, should be presented as either a PDF (design matters!) or as a website (you can make a WordPress.com site, design matters here, too!). The method of delivery is a blog post on the class site (sbdesign220.wordpress.com) that contains a link to the working prototype (your domain) and the PDF, which should be posted on Slideshare or Scribd or the website.

Leave a Reply

Your email address will not be published. Required fields are marked *