04/26 › Friday › Smart Interface DONE!

In Class: Final presentation of your smart interface video. All project videos from both sections will be posted at the link below.

Smart Interface Project Videos 2013

03/29 › Friday › Smart Interface

In Class: Site map reviews.

For Next Class: Begin design process. Choose a key page of your interface, then each team member designs 2 key layouts for that page.

Revisions to your How-To presentation are due TODAY!

04/02 › Tuesday › Smart Interface

In Class: Print a full-scale tiled version of your strongest screen design so far. Get class feedback on scale and organization.

For Next Class: Make refinements. Build your library of support images (food or beverages for example). Layout a sequence of images illustrating an interaction sequence (selecting a food item from a menu and placing the order, for example).

03/29 › Friday › Smart Interface

In Class: Site map reviews.

For Next Class: Begin design process. Choose a key page of your interface, then each team member designs 2 key layouts for that page.

Revisions to your How-To presentation are due TODAY!

03/22 › Friday › Smart Interface

In Class: Continue to develop and refine your interface idea. Establish a name for either the interface or the business it's located in, or both. Establish screens (pages) Begin to sketch out wireframes or components of your menu or interface for a paper prototype.

For Next Class: Information architecture : site map , wireframes or paper prototype components.

Revisions to your How-To presentation are due one week from today.

03/19 › Tuesday › Smart Interface

In Class: Table discussions of progress and next steps for your team. Add your task scenarios and project description to your team blog and make sure the blog URL us added to the google doc.

For Next Class: Establish scale(s) and setting(s) for your touch interface. Next steps after/while establishing scale and setting will include:
• Project Brief (written description of what you'll make)
• User Personas
• Mood Boards

03/12 › Tuesday › Smart Interface

In Class: Introduction to the smart interface project. Team selection and begin decision for which scenario your team will design for. Reminder (update your process blog for how-to project if you haven't done so already).

Download the Project Overview

Once you've got your team selected, take this personality quiz to help you and your teammates better manage expectations as you are working together.

How To Project : Finished Process Blogs
02/22 › Friday › Production

ONE WEEK TO DEADLINE! If you haven't yet placed one of your screen designs into Keynote for test animation, today is a good day to do it. Good presentations are rehearsed. Poorly presented projects don't get approved, funded, built... or the kind of grade you were hoping for.

Ideal Production Schedule
    Today

  • Final Designs + Rough Animation
  • 02.26 : Tuesday
    Rough Presentation with notes and narration
  • 03.01 : Friday
    FINAL PRESENTATION
02/19 › Monday › Refinement & Production

In class: Establish your priority list for next class.

Ideal Production Schedule
    Today

  • Tight Comps, Frame-by-Frame Sequence
  • 02.22 : Friday
    Final Designs + Rough Animation
  • 02.26 : Tuesday
    Rough Presentation with notes and narration
  • 03.01 : Friday
    FINAL PRESENTATION
02/15 › Friday › Refinement & Pre Production

In class: Final Two Week production schedule is handed out.

For Next Class: Establish your priority list for next class.

Ideal Production Schedule
  • 02.19 : Tuesday
    Tight Comps, Frame-by-Frame Sequence
  • 02.22 : Friday
    Final Designs + Rough Animation
  • 02.26 : Tuesday
    Rough Presentation with notes and narration
  • 03.01 : Friday
    FINAL PRESENTATION
02/11 › Tuesday › Refinement & Pre Production

In class: Quick demo introducing keynote transitions, builds and actions.

For Next Class: Each of you are at your own individual stage of project development. From now until deadline you (and I) will need to establish the priority list that determines what you will most need to finish for next class to keep the production schedule comfortably (or even realistically) achievable.

02/08 › Friday › Initial Design Redux

Bring:3 Exploratory layouts of one or two primary pages.

In class: Based on what we saw for the first attempts at 3 different design directions, we're going to need to do this again. Bring 3 new page layouts (or 3 new pairs for phone apps) Each with a different variation on scale and location for divisions of use.

For Next Class: Build on the best of your directions to make initial layouts for the rest of the pages in your sequence. A keynote sample file will be provided to get you started with some idea of what image sizes and croppings you may need for your presentation demo.

02/05 › Tuesday › Initial Design Crit

Bring:3 Exploratory layouts of one or two primary pages.

In class: Small group crit sessions discussing strengths and weaknesses of each design. Share and gather suggestions for refinement and application.

For Next Class: Make refinements to the pages you've already designed based on class feedback. Continue to develop 2 or 3 more pages in the sequence. At least one of your layouts should be presented “in situ”... export a jpeg to the correct scale and load it on your phone, in a browser on a laptop or desktop machine, or email it to me and I will load it on an iPad for class.

Dimensions in inches and pixels
  • iPhone 3 : 2" x ›› 480 x 320px
  • iPhone 4 : 2" x ›› 960 x 640px
  • iPhone 5 : 2" x 3.5"››
  • iPad : 7.76" x 5.82" ›› 1024 x 768px
  • MacBook 13": 11.25" x 7" ›› 1280 x 800px
  • iMac 24" : 20.25" x 12.5"
02/01 › Friday › Mood Boards

Bring: Three (3) Mood board explorations on 11 x 17 format.

In class: Small group crit sessions discussing strengths and weaknesses of each mood. Share and gather suggestions for refinement and application.

For Next Class: 3 Exploratory layouts of one or two primary pages. Lable all sections and navigational elements. Explore scale, color and contrast variations with the page components, images, backgrounds and text.

01/29 › Tuesday › Paper Prototypes

Bring: Black and white printouts/sketches for demonstrating paper prototype.

In class: Small group crit sessions. Be prepared to use your phones or other cameras to record video of interaction with your paper prototype. crits. Upload mood boards and comments to your blog.

For Next Class: Make refinements. Build 3 mood boards exploring color, texture, type and imagery. Prescribed size 11" x 17" You may make digital or cut-and-paste story boards or a combination of the two processes.

01/25 › Friday › Wireframes


Bring: Black and white printouts of wireframes

In class: Small group crit sessions. Seek and give feedback on wireframes. What is working? What needs clarification? What additions would enhance the user experience? What should be removed? Individual meetings with instructor after small group crits.

For Next Class: Refine wireframes, be prepared to demonstrate paper prototypes.

01/22 › Tuesday › Site Maps

Bring: Answers to Chapter 5 Study Questions. Site maps for review and refinement.

In class: Small group table discussions of site map organization.

For Next Class: Refine site maps as needed and make wireframes for each page.

01/18 › Friday › Project Brief & User Personnas

Bring: Site Maps

In class: Table review of site maps / project updates / changes. Draft User Personnas and Project Briefs including desired URL for the or name for the App.

For Next Class: Read Chapter 5 of Interact With Web Standards. Be prepared to answer study questions.

References / Resources
01/15 › Tuesday › Organize & Simplify

Bring: Sticky note collection.

In class: Small group reviews of sticky note site maps & typed project briefs. Arrange your notes into groups of items that may belong on the same page or in the same section.

For Next Class: Simplify and organize your sticky notes into clusters that will become page content. Diagram a site map in Illustrator or Indesign to establish the scope of your project. Establish a desir

References / Resources
01/11 › Friday › Topic Selection

Bring: List of 3 how-to topics for discussion.

In class: Small group table discussions exploring topics and their potential scope .

While your wait for table review create a blog for you process work on this project — add the URL to the google doc spreadsheet for the class. Your first entry in the blog should by your topic list with a brief description of each topic. (1 or 2 sentences).

For Next Class:

  1. Select a topic and begin/continue to research
  2. Refer to Chapter 7 of Interact with Web Standards, then write the first draft of your project brief
  3. Use sticky notes or index cards to begin to map the content of your site
01/08 › Tuesday › Course Overview

Course overview and Project 1 Introduction. Answer brainstorming survey to begin serarch for your topic for the How To Site/App project. Discussion of alternatives to click / tap interaction.

For Next Class: Continue to brainstorm. Make a list or your 3 best candidates for site / app development.

References / Resources