Interface Design 2
Interface Design 2 builds upon interface design skills learned in Interface Design 1.
Students
plan, design and build web sites and audience specific interfaces for the internet on a more
comprehensive level. Technical emphasis will be placed on learning web standard compliant web
design using HTML and CSS.
"A device is easy to use when there is visibility to the set of possible actions, where
the controls and displays exploit natural mappings. The principles are simple but rarely
incorporated into design. Good design takes care, planning, thought. It takes conscious
attention to the needs of the user. And sometimes the designer gets it right."
Donald Norman, Professor at Northwestern University, cofounder of the
Nielsen Norman Group, and former Vice President of Apple Computer.
From the book The Design of Everyday Things.
"[The] medium reinvents itself too quickly for false oppositions between creative types
and programmers. They have become something else, some new fusion of artist and engineer
-- interfacers, cyberpunks, Web masters -- charged with the epic task of representing
our digital machines, making sense of information in its raw form."
- Steven Johnson, author and columnist
From the book Interface Culture : How New Technology Transforms the Way We Create and
Communicate.
SYLLABUS & GRADESHEET:
MAJOR ASSIGNMENT LIST:
| Assignment: |
Week: |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Due: |
| 1. Creative Brief(s) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 2 |
| 2. Site Map + Wireframes |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 3 |
| 3. Visual Designs - Round 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 5 |
| 4. Visual Designs - Round 2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 7 |
| 5. Visual Designs - Round 3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 9 |
| 6. Coded Web Site |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 16 |
CALENDAR:
WEEKLY SCHEDULE + DIGITAL ASSETS:
Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.
Agenda:
- Introduction to the course
- In this class we will go through the full design process of planning,
designing, and building one working web site throughout the course of the
semester.
- Introduction to the primary project: Designing & Building One HTML/CSS Web Site
- You can choose any site that you want to work on (yes, you can choose a
real-world client).
- Your site must be relatively small (approx 4-5 pages in depth, no less)
- You must go through the full design process, including doing all research
- You must gather all content
- We will take a look at student sites from past years.
Presentation:
Class Overview - Going Through The Full Design Process for Interface
Design:
Class examples + related links:
Assignment: Due: Week2
- Set up your class web page. Please note that all students are required to have
hosting space to post their designs, assignments, and ultimately their final web
site. Students are required to purchase a hosting plan with a third party hosting
provider. Past students have purchased hosting plans from Bluehost, iPage, Super Green
Hosting, and GoDaddy
(these are just a few of many hosting providers available). Plans should include
ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL,
multiple domain hosting (to host more than one site), one-click install/support for
Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price
(an example rate is around $3-$5/month � this is subject to change based upon
current trends for hosting prices).
- Once your class web page is set up, email the url to the instructor.
- Choose a company/organization for the web site that you will design throughout this
course. Begin by conducting background research. Post your final choice, or a list
of options, on your class web page.
- Once you have selected your site, create a creative brief document and post it on
your your class web page for next week.
Agenda:
- Project Ideas/Decisions & Creative Briefs
- We will meet as a group to discuss each persons's project decision and help
those who have yet to choose their client.
- Lesson:
- Site maps & Wireframes
- How to begin designing
Presentation:
Class examples + related links:
Assignment #1: Site Map + WireframesDue: Week3
- Create a site map for your client web site. Pay attention to the naming of your
navigation.
- Create wireframes (page maps) for each page of your site. You can use templates to
demonstrate pages that will look similar.
Assignment #2: 1st Round of DesignsDue: Week5
- Start designing. NOTE: Work in Photoshop.
Agenda:
- In-class review of site maps and wireframes
- Work in class: begin designing
Presentation:
Class examples + related links:
Assignment: 1st Round of DesignsDue: Week 5
- Design, Design, Design.
- Work in 3 different thematic design directions.
Agenda:
- Lesson: mood boards & stock photography
- Work in class: continue designing
Class examples + related links:
Conceptual Interface Design Examples:
Mood Boards:
Stock Photography:
Assignment: 1st Round of DesignsDue: Week 5
- Design, Design, Design.
- Consider creating mood boards to explore different thematic styles.
- Work in three different thematic design directions.
Agenda:
- In-class critique: Round 1 Designs
- Work in class: continue designing
Assignment: 2nd Round of DesignsDue: Week7
- Revise and enhance your designs.
- Continue to work in three different thematic design directions.
- Begin designing your sub pages.
- Post your work as an interactive client "comp site". See this example of a
student comp site or see John Doe's "Comp Site from Class" for a
working example.
Agenda:
- Lessons:
- More Conceptual Design Examples
- Design Theory for Web Design
- The Elements of Design
- point, space, shape, tone, form, mass, line, texture,
pattern,
movement, time, light, and color
- The Principles of Design
- scale, proportion, balance (symmetry), rhythm (pattern)
(movement), emphasis (focal point), variety, contrast and
unity
- Gestalt Theory
- continuity, proximity, common fate, similarity, and closure.
- Browser Stats
- IE6
- CSS3 and Trident, Gecko, & Webkit
- Work in class: continue designing
Class examples + related links:
More Conceptual Interface Design Examples:
Design Theory Links:
Browser Statistics:
CSS3:
Mid-term Assignment: Final Designs [MIDTERM]Due:
Week9
- Continue to work on your designs in three different thematic design directions.
- Continue designing your sub pages.
- Post your work as an interactive client "comp site". See this example of a
student comp site or see John Doe's "Comp Site from Class" for a
working example.
Agenda:
- In-class critique: Round 2 Designs
- Work in class: continue designing
Class examples + related links:
Reading Assignment: HTML, XHTML, and CSSDue:
Week8
- Read the following links right away (this week).
Mid-term Assignment: Final Designs [MIDTERM]Due:
Week9
- Continue to work on your three thematic design directions: one for your original
client, and two that will be rebranded.
- Design all of your sub pages (minmum of 3 sub pages).
- Post your revised site map.
- Post your work as an interactive client "comp site". See this example of a
student comp site or see John Doe's "Comp Site from Class" for a
working example.
Agenda:
- Lesson: html+css overview/review
- Work in class: continue designing
Class examples + related links:
Mid-term Assignment: Final Designs [MIDTERM]Due:
Week9
- Continue to work on your three thematic design directions: one for your original
client, and two that will be rebranded.
- Design all of your sub pages.
- Post your work as an interactive client "comp site". See this example of a
student comp site or see John Doe's "Comp Site from Class" for a
working example.
- Post your revised site map.
Agenda:
- ROUND 3 - MIDTERM CRITIQUE: Post your final (midterm) designs for an in-class
critique.
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Based upon the feedback from the critique, this is your last opportunity to make any
significant changes to the design prior to coding.
- Begin coding your web site this week. Start with the home page.
- There are multiple ways to code any given page, therefore be prepared to code your
page multiple times from scratch, in pursuit of figuring out the best, most robust
version.
- Things to think about: is the site flexible? Can content stretch? Do all graphics
blend into the background gracefully?
- Be sure to test your site on both platforms (Mac and PC) and all browsers during
this early phase of coding.
- Coded home page v1 is due in next week (week 10).
Agenda:
- Wordpress Lesson: Initial Install & Site Setup
- In-class work time to continue coding. One-on-one support during class.
- Coded home page reviews on the big screen.
Class examples + related links:
CMS & Wordpress Resources:
Other CMS tools for designers:
Layout Examples (from ART 128):
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Take a close look at the structure of your markup (html) for your home page. Is it
semantically correct? Are you using your title, h1, h2, and p tags appropriately? Do
you absolutely need all of your divs? Are you using too much absolute positioning?
Is your layout flexible to accompany any amount of text (or do you have a fixed
height on your container)? Now is your chance to go back and recode your home page
so that it is set up in the best possible way. You should do this before you begin
coding your sub pages.
- Test, test, test!!! Now is the time to test on all browsers on all platfomrs! Test
on PC IE6!!!
- Coded home page v2 is due in next week (week 11). If your home page is already
coded, tested, flexible, and validating with no errors, then you can move onto
coding your sub pages.
Agenda:
- Optional code reviews on the big screen (for those who needed to redo their home
pages from last week, and for those would like another, more detailed review).
- In-class work time to continue coding. One-on-one support during class.
Class examples + related links:
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Continue coding your site. Once your home page and sub page template are complete,
tested, valid, and working properly, then you can begin to iterate out the other
pages of your site.
- Be sure to test your site! Test on both platforms (Mac & PC). Test in all
browsers (IE, Firefox, Safari, Chrome, Opera, etc.). Validate your html, css,
Section 508!
- Fully coded site is due in two weeks (week 13).
Agenda:
- Optional Code reviews on the big screen.
- In-class work time to continue coding. One-on-one support during class.
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Continue coding your site. At this point you should be iterating out all pages of
your site and populating those pages with content.
- Be sure to test your site! Test on both platforms (Mac & PC). Test in all
browsers (IE, Firefox, Safari, Chrome, Opera, etc.). Validate your html, css,
Section 508!
- Fully coded site is due next week (week 13).
Agenda:
- In-class QA testing session.
- In-class work time to continue coding. One-on-one support during class.
Class examples + related links:
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Using the list of bugs noted during the QA test session in class, update the list
with your own list of tasks and known bugs. Then, prioritize your bugs starting with
the critical bugs as the most important to be placed on the top of your task list.
- Fix ALL of your bugs and continue testing your site.
- Be sure to validate your site!
- If you are close to finished with your site, ask yourself, "what can I do to make it
better?"
Agenda:
- Lesson: Meta Tags
- Full work week. In-class work time to continue coding. One-on-one support during
class.
- ----- [ no class on Thursday (Thanksgiving) ] -----
Class examples + related links:
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Complete your site by adding all final content.
- Fix ALL of your bugs. Continue to test it on both platforms and all browsers.
- Make sure that your site validates!
- If you are finished with your site, ask yourself, "what can I do to make it better?"
Some ideas:
- Javascript Featured Content Area (ie slider,
slideshow)
- Javascript Animated Rollovers
- Oversized footer - consider adding a sitemap, logo,
contact info, social media, etc. to your footer
- Breadcrumb Navigation - if you already have one,
consider stylizing it
- Icons & Graphic Symbolism - consider adding to
enhance usability
- Wordpress - consider converting your site over to Wordpress as a CMS
- Mobile version - consider adding a mobile version of your site via CSS
- HTML5 - consider using HTML5 semantic markup, doctype, etc.
- Don't forget about the portfolio entry!
Agenda:
- Full work week. In-class work time to finish your final project due next week.
One-on-one support during class.
- Lesson: Using Multiple CSS files
- Lesson: NMA
Wordpress Framework v2.0
Presentation:
Class examples + related links:
WordPress frameworks:
Final Assignment: Coded Web Site + Portfolio Entry [FINAL]Due: Week16
- Finish your site and post a link to it on your class web page.
- Create your portfolio entry and post a link to the pdf on your class web page.
Agenda:
- Final Critique
- 10 minutes per person to present.
- 5 minute transition period in between presenters for further discussion, if
needed.
| Student |
Time |
| ---------- SETUP ---------- |
8:00-8:15 |
| #1: Kathryne Sakata |
8:15-8:25 |
| #2: Randall Shiroma |
8:30-8:40 |
| #3: Melissa Lum |
8:45-5:55 |
| #4: Davin Char |
9:00-9:15 |
| ---------- 15 Min. BREAK ---------- |
9:15-9:25 |
| #5: Jason Mudrick |
9:30-9:40 |
| #6: Lena Lee |
9:45-9:55 |
| #7: Michael King |
10:00-10:10 |
| ---------- 45 Min. BREAK ---------- |
10:15-11:00 |
| #8: Reynaldo Minn |
11:00-11:10 |
| #9: Jeremiah Skurtu |
11:15-11:25 |
| #10: Jennifer Lazariuk |
11:30-11:40 |
| #11: Helen Chang |
11:45-11:55 |
| ---------- 15 Min. BREAK ---------- |
12:00-12:15 |
| #12: Krystal Van Putten |
12:15-12:25 |
| #13: Elly Chen |
12:30-12:40 |
| #14: Emma Denight |
12:45-12:55 |
| ---------- CLOSING REMARKS ---------- |
1:00-1:15 |
Assignment: RevisionsDue: Week 17
- For those hoping to make revisions to any assignments from this class, you have one
week from the last day of class to submit changes/revisions. If you do this, be sure
to post all revisions on your class web page and email me prior to 12noon on Tues.
Dec. 14th so that I can go back and adjust your grade accordingly. If I do not
receive an email from you indicating that you made updates, then your grade will be
based upon what you handed in as of the last day of class.
"Design trends do not exist to be followed. They exist to be broken, reshaped and
abolished by the spirit of creativity rippling through the design community. By nature,
trends are anything but good: they distract from the main purpose of communication
design and disrupt the balance between aesthetics and function. Rather than follow
trends, use the appropriate tools in the appropriate context for the right purpose.
That's where the beauty of information design lies, and it makes the huge difference
between a nice design and a nice and usable design."
- Vitaly Friedman, editor-in-chief of Smashing Magazine, an online
magazine dedicated to designers and developers. From his May 20th 2010 article entitled
"Web Design Trends 2010: Real-Life Metaphors and CSS3
Adaptation."