Professional Practices in Design:

Interaction Design

Spring 2014

Sam Fox School of Design & Visual Arts
Washington University

Abram Siemsen
abram@siemsen.us
314.323.0911

Agenda

Show All
  1. January
    MonWed
    68
    1315
    2022
    2729
  2. February
    MonWed
    35
    1012
    1719
    2426
  3. March
    MonWed
    35
    1012
    1719
    2426
    31 
  4. April
    MonWed
     2
    79
    1416
    2123
    2830

January 13, 2014

  1. Introductions
  2. Syllabus
  3. Set up local file structure
  4. Create an HTML page
  5. Set passwords
  6. Configure Dreamweaver FTP
  7. Upload

January 15, 2014

  1. Questions before we start
  2. HTML tag anatomy
    • Opening and closing tags
    • Beginning and ending of each tag
    • Attributes
    • Self-closing tags
  3. What is CSS?
  4. 3 places CSS can live
  5. Basic selectors
  6. Specificity

January 22, 2014

  1. Questions before we start
  2. Review uploads
  3. At what size should you design?
    • Potential variables to consider
    • Resolution vs. pixel dimensions
    • Fixed vs. fluid layouts
  4. Presenting mockups
    • Background images
    • Foreground images
    • Hyperlinks
    • Filenames, URLs, absolute and relative paths
  5. Assignment

January 27, 2014

  1. Questions before we start
  2. Review uploads
  3. Project: Free Apartment Promotion
    • Overview
    • Project planning — what are we doing and how will we get there?
    • Planning the user experience — flowcharts and user experience maps
    • Small-group discussion and concepting
    • Idea cross-pollination
  4. Assignment

January 29, 2014

  1. Questions before we start
  2. Review flowcharts as a group
  3. Discuss reference documents
  4. Assignment

February 3, 2014

  1. Questions before we start
  2. Quick group review of scripts and style references
  3. Assignment
  4. Setting up your master documents
  5. Individual review / studio time

February 5, 2014

  1. Work day
  2. Some group notes:
    • I've changed the assignment to reflect our decision to build all pages.
    • With transparency comes great responsibility.
    • Deliverable targets: Slideshow vs. positioned buttons vs. fully-implemented.

February 10, 2014

  1. What is the point of a critique?
  2. Criteria for evaluation
  3. Round-robin review and evaluation

February 12, 2014

  1. Bike Finder project introduction.
  2. What are we aiming to learn?
  3. Dynamic content, and the challenges it presents to designers.
  4. Conventions and design patterns. What to look for in research.
  5. Search, results, details.
  6. Templates, and style vs. layout.
  7. Style tiles.
  8. Assignments.

February 17, 2014

  1. Review research and style tiles, and questions pertaining to.
  2. Assignment: Wireframes
  3. Individual reviews: research and style tiles

February 19, 2014

  1. CSS and Layout
    1. Document flow
    2. Display: block, inline, inline block
    3. Box model: content, padding, border, margin
    4. Position: static, relative, absolute, fixed
    5. Manipulating position: top, left, right, bottom, margin
    6. Floats

February 24, 2014

  1. Applied CSS and Javascript:
    1. Thumbnail grid
    2. Drop-down menu

February 26, 2014

  1. Applied CSS and Javascript:
    1. Accordion menu
  2. Round-robin review of wireframes

March 3, 2014

  1. Where did I go wrong?
    • What sort of problem is a wireframe supposed to help us solve?
  2. User stories and use cases

March 17, 2014

  1. Review beautiful, brilliant, deceptively simple Bike Finder prototypes

March 19, 2014

  1. What is 'Responsive?'
  2. The 'mobile first' philosophy
  3. Assignments
    1. Research
      • Investigate how the things you'd emulate are actually
    2. Content

March 24, 2014

  1. Designing the menu: Strategies for collapseable pages