Week 1
Objectives
Students will be able to identify course requirements
Students will provide email and skills information
Students will sign in and practice using Course Wiki features and functions
Students will describe and explain the use of design patterns and pattern libraries
Students will create and define user tasks for final project website
Activities
Video: User Design
What does interface design have to do with salt and pepper shakers?
Review Course Syllabus and fill out review form
Course Wiki
Sign up for the Course Wiki
Intro and Review Wiki functionality
Pattern Libraries
Review the websites listed below. Write your answers in your personal Wiki page.
What are "Design Patterns"?
What is meant by the term "Pattern Library"?
How would a pattern library be useful to you as a web designer?
Add a link to one of the patterns you find. Explain how it works/what it's used for
Final Project
Review and discuss Final Project
Review User Tasks/Paths for Kitchen Talk Website
Connection to WDM3304 Database Concepts
Wireframing
Review Assignments
Purchase Textbook
Select Wireframe Tools
Due This Week
No assignments due
Due Next Week
Purchase Textbook
Select Wireframe Tools
Week 2
Objectives
Students will review and create HTML Forms and Inputs
Students will identify Kitchen Talk Home Page requirements
Students will develop wireframe for Kitchen Talk home page
Activities
Review
Turn in assignments
Print out Reading Summary 1
Indicate Wireframing Tool choice on personal wiki page
Review: HTML Forms and Inputs
What are the basic user inputs & controls that can be built with XHTML form and input tags? Working with your group, add the following to your team's Forms and Inputs Project page:
- Description and use of element. What kinds of input should you use it for?
- An example of each element in XHTML
- Display code for the XHTML element you added
You may use these W3 Schools links for form elements as a reference
Individual team members should use their personal page for preliminary work and the group should reconvene to combine results. Do not work on the project page all at the same time.
jQuery UI
Introduction to jQuery UI
Download Lecture Files
jQuery UI Datepicker
Kitchen Talk Home Page Wireframe
Review Kitchen Talk Home Page Specifications
Begin work on Kitchen Talk Homepage Wireframe
Due This Week
Purchase Textbook
Select Wireframe Tools
Due Next Week
Week 3
Objectives
Students will use screen-capture software to demonstrate examples of in-page editing on web sites
Students will use screen-capture software to demonstrate examples of drag and drop functionality on web sites
Students will use screen-capture software to demonstrate examples of direct selection functionality on web sites
Students will identify Kitchen Talk Recipe Detail and Search Detail design requirements
Students will develop wireframes for Kitchen Talk Recipe Detail and Search Detail
Activities
Turn in assignments
Kitchen Talk Homepage Wireframe
Make it Direct
Try out and practice using Screencast-O-Matic screen capture tool
Make It Direct Team Assignments
Wiki Assignment: In-Page Editing, Drag and Drop, Direct Selection
Kitchen Talk Wireframes
10 Simple Ways to Make Wireframes More Useful
Recipe Detail Wireframe
Search Results Wireframe
Lab
Work on Recipe Detail and Search Results Wireframes
Individual Review of Home Page Wireframes
Cacoo Wireframing Tool
Extra Credit:Related Patterns
Browse/search through the pattern libraries listed below. For each of the patterns defined in the previous exercise, see if you can find a similar pattern listed in the pattern library. Save the name of the pattern and the URL for the web page in which it's defined/illustrated. Identify why the pattern is similar, and explain any differences. Add your answer to your personal wiki page.
Due This Week
Due Next Week
Week 4
Objectives
Students will define, list uses and potential problems of Contextual Tools Patterns
Students will use screen-capture software to demonstrate examples of Contextual Tools from various web sites
Students will identify Kitchen Talk Account View requirements
Students will develop wireframes for Kitchen Talk Account View
Activities
Turn in Homework
Recipe Detail and Search Results Wireframes
Keep it Lightweight
Wiki Assignment: Keep It Lightweight
Kitchen Talk Wireframes 3
Homepage Wireframes Review
Account View Wireframes
Lab
Work on Account View Wireframes
Due This Week
Due Next Week
Week 5
Objectives
Students will define, list uses and potential problems of Overlay, Inlay, Virtual Pages, and Process Flow Patterns
Students will use screen-capture software to demonstrate examples of Overlay, Inlay, Virtual Pages, and Process Flow Patterns
Students will identify Kitchen Talk Recipe Submission requirements
Students will develop wireframes for Kitchen Talk Recipe Simulation
Activities
Turn in Homework
Account View Wireframes
Stay on the Page
Wiki Assignment: Stay on the Page
Lab
Recipe Submission Wireframes
Kitchen Talk Homepage Mockup
Due This Week
Due Next Week
Read pages 178 - 213
Complete Reading Summary 4
Recipe Submission Wireframes
Kitchen Talk Homepage Mockup
Week 6
Objectives
Students will define, list uses and potential problems of Static and Dynamic Web Page Invitations
Students will create wireframe versions of Static and Dynamic and Web Page Invitations
Students will use screen-capture software to collect and demonstrate examples of Static and Dynamic Web Page Invitations
Activities
Turn in Homework
Recipe Submission Wireframes
Kitchen Talk Homepage Mockup
Provide an Invitation
Wiki Assignment: Provide an Invitation
Modal Windows
Modal windows with jQuery UI
Modal windows with HTML5, CSS and Javascript
Lab
Work on Kitchen Talk Mockups
Individual Review of Homepage Mockup
Due This Week
Read pages 178 - 213
Complete Reading Summary 4
Recipe Submission Wireframes
Kitchen Talk Homepage Mockup
Due Next Week
Week 7
Objectives
Students will use jQuery UI to create accordion patterns
Students will continue work on Kitchen Talk Mockups and Website
Activities
Homework
Turn in Mockups V2
Accordion Patterns
Building an Accordion pattern with jQuery UI
Building an Accordion pattern with HTML5, CSS and Javascript
Lab
Work on final project
Review - HTML/CSS Layout
Due This Week
Due Next Week
Begin work on Final Project
Week 8
Objectives
Students will apply CSS formatting to HTML form elements
Students will continue work on final project
Activities
Lecture: Styling CSS Forms
Download lecture files
References & Tutorials
- Applying CSS to forms
- 10 CSS Form Examples
- CSS only for input text
- Aligning Labels with Input/Checkbox/Radio
- CSS Styling of Radio Buttons and Checkboxes
- CSS Styling of Scrollbars
Lab
Continue development of Kitchen Talk Website
Due This Week
Begin work on Final Project
Due Next Week
Continue Kitchen Talk Website Development
Week 9
Objectives
Students will continue work on final project
Activities
Students will continue work on final project
Due This Week
Continue Kitchen Talk Website Development
Due Next Week
Continue Kitchen Talk Website Development
Week 10
Objectives
Students will continue work on final project
Activities
Students will continue work on final project
Due This Week
Continue Kitchen Talk Website Development
Due Next Week
Kitchen Talk Website
Week 11
Objectives
Students will complete Final Project
Students will present Final Project
Activities
Lab
Continue work on Final Project or late assignments
Presentations
Final Project Presentations
Lab
Continue work on Final Project or late assignments
Due This Week
Kitchen Talk Website
Assignments
Due Week 2
Purchase Textbook
Select Wireframe Tools
Due Week 3
Due Week 4
Due Week 5
Due Week 6
Read pages 178 - 213
Complete Reading Summary 4
Recipe Submission Wireframes
Kitchen Talk Homepage Mockup
Due Week 7
Due Week 8
Begin work on Final Project
Due Week 9
Continue Kitchen Talk Website Development
Due Week 10
Continue Kitchen Talk Website Development
Due Week 11
Kitchen Talk Website
Resources
Wireframing Tools
Cacoo Wireframing Tool
User Interface Design Framework for Illustrator
CSS Form Styling
Aligning Labels with Input/Checkbox/Radio
CSS Styling of Radio Buttons and Checkboxes
CSS Styling of Scrollbars