COGS 187B: Practicum in Pro Web Design (Winter 2017)

TTH 3:30-4:50 HSS 1346
Extended Studio Hours TTh 4:50-6pm HSS 1346

Course website:


David Kirsh (Professor)

Office Hours: by appointment

Adam Mekrut (TA)

Office Hours: In extended studio hours

Amy Fox (TA)

Elmer Barrera (IA)

Ed Ngai (Technical Tutor)

Course Description

Course Overview

This class is a project based studio class whose objective is to teach students the practical side of working with clients to create a web site that works - i.e., meets or exceeds the client's expectations.   Students form teams and find a client, typically one outside of the university, and then work with that client to understand their goals and needs to meet their functional requirements and to design a significant website that the client likes and the professor recognizes as high quality.  The course is structured according to the deliverables that a professional web team would need to provide. 

These include:

  • Creative Brief
  • Competitive Analysis and Mood Board
  • Wireframe
  • Functional Specification
  • Prototypes - including a high res version

Because this is a studio based class, there are no real lectures.  Students tackle design projects in an environment where experienced professionals review and critique their work.  You will learn something of the complicated social dynamics that arise between client and designers and also what it is to meet deadlines in team.  The class teacher, TAs, IAs and others are here largely to provide you with feedback to push your designs to the next level.  The spirit of teaching is not "Let me tell you all you need to know about how to design," but rather "Let me help you to understand and improve what you've done."   See assignments for a quick overview of the deliverables and intermediate products.  You can find links to sample final projects in the side panel undeFinal Project Gallery.

Course Objectives:

At the end of this course you should have a basic technical competence in the different stages of professional web site creation.



Optional Reading (recommended by Sharon Carmichael, a designer at Intuit)
Articulating design decisions : communicate with stakeholders, keep your sanity, and deliver the best user experience/Tom Greever
Free electronic resource from library:

Course Details and Policies

Group Size

Groups will be assigned through a survey system that takes into account schedule and skill compatibility. There will be with teams 4 and plenty of time to work in class or 'studio'.  

In the past we had a maximum of 3, but are trying something different this year to promote pair programming and pair designing.

Grading Policy and General Rules:

Late Assignments:

Each day that an assignment is late, your grade will drop by 10%. Final projects must be turned in on time to receive credit. No late final projects will be accepted.

Resubmitting assignments (TAKE OUT) - replace with regrade policy!

When grading for 187B, the graders will reference your previous assignments to make sure that you are properly following the design process and not just making things up. Sometimes, an assignment that you turn in is low quality due to various circumstances. Regardless, if you turn in your assignment ON TIME, then you will be eligible to resubmit your assignment along with the NEXT assignment (after receiving the grading sheet) for a max score cap of 90%. This is to encourage quality work even if it is past the deadline. 

Breakdown of Assignments:

Propose Client and Initial Requirements Gathering  6%
User Interviews12%
Competitive Analysis and Mood Board12%
Competitive Analysis Presentation  4%
Creative Brief  6%
Wireframe & Functional Spec (12) + Presentation (4)           16%
Prototype 1 and Content Inventory10%

Final Prototype29%
Final Prototype Presentation  5%

Required Text:

There is no class reader for this class because all materials are online either in the form of lectures or links off of the assignments and lecture pages.

Suggested Tools

See this document here for a list of suggested editors, prototyping and collaboration tools as well as hosting options

Previous Final Projects 

Art of the Espresso 


Law Office

Marketing Website

Course Schedule

Week Date Topic Readings Assignments Notes
1 Tue Jan 10 187B Intro & Syllabus & Group Making
Out:Client Proposal and Initial Requirements Gathering
Thu Jan 12 Client Proposal

2 Tue Jan 17 How to Interview

Thu Jan 19 Studio Day: Writing questions and preparing to interview

3 Tue Jan 24
Due Tues 11:59pm 1/24: Client Proposal and Initial Requirements Gathering

Thu Jan 26 Studio Day

4 Tue Jan 31 Competitive Analysis, Mobile First Development
User Interviews Due Tuesday 1/31 11:59pm
Thu Feb 02 Studio Day 

5 Tue Feb 07 Presentations
Due: Competitive Analysis and Mood Board at 11:59pm Feb 7th Tues
Thu Feb 09 Presentations

6 Tue Feb 14 Wireframing and Functional Spec 

Due: Creative Brief at 11:59 pm Feb 14th Tuesday

Thu Feb 16 Studio Day

7 Tue Feb 21
Prototype 1 and Content Inventory
Presentations + Studio

Wed Feb 22

Due: Wireframing and Functional Spec at Wedenesday11:59pm
Thu Feb 23 Presentations + Studio

8 Tue Feb 28 Studio and Review with TAs

Thu Mar 02
Final Prototype Discussion

Sat Mar 04

Due: Prototype 1Iteration 11:59pm Saturday 

9 Tue Mar 07 Studio Day

Thu Mar 09 Final Presentation Guidelines
Final Prototype Presentation Guidelines
10 Tue Mar 14 Studio Day

Thu Mar 16 Early Presentations

11 Tue Mar 21 Final Presentations 3-6pm 
Final Prototype Due