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
- Course Overview // Lab (domain name, hosting)
- WP nitty gritty 1 // Lab
- WP nitty gritty 2 // Lab (including editors)
- HTML nitty gritty 1 // Lab
- CSS & scripting nitty gritty // Lab
- From code to design // Lab
- Design critiques // Lab // Quiz (code)
- Content management systems // Lab
- SEO // Lab
- 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
- 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)
- Discussion readings // Conducting a competitive analysis (Joe)
- 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)
- 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.