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

• Reference: Web Design: The Complete Reference, Chapter 1
• Reference: Web design glossary (will be on quiz) 
• Reference: WordPress Lessons, Introduction to blogging (pay special attention to terminology)
• Reference: WordPress Resource, Understanding Posts (please read best practices)
• Reference: WordPress Resource, Understanding Pages (the differences between a page and a post)
• Resource: The 25th anniversary of the web (pdf)
• Resource: What is a domain name?
• Registrars: Dynadot, Name.com

Session 2, W

• Read Introduction to HTML
  Reading prompt – which HTML tags are invisible to website visitors (without peeking) and what do they do? Post to class WP site before 5 pm on Wednesday.
• Read WP WQSG, CH 1, CH 3
• Resource: WordPress 101: get published
• Resource: WP publisher blog focuses on leading WordPress sites
• Resource: WP editor picks at Freshly Pressed

Week 2

Session 3, M

• Read WP WQSG, CH 4, CH 6 and How to add media to a post or page
• Resource: Designing your WordPress site (focus is on self-hosted)
• Resource: Customize my site (focus is WP.com but knowledge is transferable)
• Resource: WordPress.org themes

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

• Read WP WQSG, CH 9, CH 10 and Introduction to Cascading Style Sheets
  Reading prompt – what is the purpose of CSS? What does “cascading” mean? Post to class WP site before 5 pm on Monday
• Resource: W3Schools, CSS
• Resource: W3Schools, Javascript
• Resource: UnSplash (free images every 10 days)

Session 6, W

• Read WP WQSG, CH 11, CH 12 and ?? 
  Reading prompt – what is a scripting language? what are the advantages and disadvantages of Javascript? How is it different from Java? Post to class WP site before 5 pm on Wednesday
• Web design principles
  • Color
  • Visual design basics
  • What is user experience design?
• Video: Design principles for a better mobile web
• Reference: Personas

Week 4

Session 7, M

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

Session 8, W

• Read WP WQSG, CH 15, CH 17
• Discussion readings // Content Management Systems (Marcel)
  • What is a CMS?
  • CMS comparison
  • Comparison: three open source systems
• Discussion readings // Conducting a competitive analysis (Joe)
  • Evaluating Web Sites / Worksheets
  • 101 things I learned in interaction design school
  • How to conduct competitive research (Inc.)
  • How to conduct competitive analysis to beef up content strategy (HubSpot)
• Resource: Creative Commons: About the licenses
• Resource: Is WordPress the best platform for my startup

Week 5

Session 9, M

• Read WP WQSG, CH 16
• Discussion readings // SEO (Tariq)
  • Search
  • SEO: the beginners guide from Moz
  • 10 WordPress SEO questions
• Discussion readings // social media integration (Yorlanda)
  • How social media is impacting web design
  • Making your sites social
  • 5 ways to integrate social media into your website
  • Resource (not reading) on DropBox
    Social media research: Theories, constructs, and conceptual frameworks

 

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.