Authoring Interactive Media 2

  1. Week 13: Preprocessing

    Standards shaped the web as we know it. Modern browser support for HTML, CSS, and Javascript has matured from humble beginnings. However, these standards can take a long time to develop and implement. Preprocessing allows languages to be extended to with new features without browser support. We'll use SASS to make CSS more capable and hasten development.

  2. Week 12: Prototyping

    Exploration of user flows and wireframes set an idea of what are products are becoming. Now it's time to go beyond creating pictures of interfaces and create something more tangible. Prototyping our interactions will allow us to better see what works well.

    InVision Demo See Pack Prototype

    Prototype your Product

  3. Week 11: Experience

    Through an interative process we'll observe behavior and research existing products to define the views and states that will make up our interactive product. Constraints will be leveraged to enable rapid iteration and refine the usability of our ideas.

    Define your Product

  4. Week 10: Product

    You've built flexible layouts, utilized design patterns, and developed within best-practices. We'll bring this all together into an interactive product of your own. Your creation will go beyond basic features to form an experience. It will serve a purpose, interest others, and become something you're proud of.

    Propose your Product

  5. Week 9: Spring Break

    There is no class this week – enjoy your break!

  6. Week 8: Flow

    Clear content and use of motion make for a natural path through an interactive experience. We'll refine input interactions and make a user flow that clearly communicates state.

    Make an Input Flow

  7. Week 7: Input

    Accepting provided information is crucial aspect of engaging users. Inputs will allow us to take what we're given from visitors and process it. We'll get started with forms and assist when something goes wrong.

  8. Week 6: Motion

    Animation can help orient users, get their attention, provide feedback, and express connections. To make an interface feel natural – we'll consider how to modify an interface between states. We'll utilize animation to improve the usability of our interfaces.

    Make a Modal

  9. Week 5: Behavior Part 2

    Class is cancelled for February 23rd. Read both articles on using motion within an interface to improve usability. Also use this time to complete any updates to your course portfolio and assignments. We'll continue next week with behavioral interactions.

  10. Week 4 Behavior

    Modern applications respond to interactions in real-time. They adapt to changing states and indicating what just happened or what is next. We'll utilize CSS and Javascript to modify our interfaces.

    Javascript State Demo See Toggle Buttons

  11. Week 3: Frameworks

    Interactive systems are made up of components. These features are ideally made to be flexible and work well anywhere. Even simple components can become quite complex. Especially when combined with others. Fortunately most common design and development patterns have been abstracted into frameworks or libraries. We'll leverage a few tools to optimize our work flow.

    Make a Collection

  12. Week 2: Responsive Design

    Web and mobile interfaces are used with a variety of devices, platforms, and situations. Context must be considered for a healthy user experience. We'll cover fundamentals of layout, grids, and flexible media that will work well anywhere.

    Make a Grid System

  13. Week 1: Introduction

    We'll start with an introduction to the course, your fellow students, and what to expect for the semester. We'll also get into the state of interaction design, development best practices, and craft a course portfolio site.

    Make a Course Portfolio
×

Course Portfolio

Assignment #1 Due Feb 2nd

Design and build your course portfolio site. Provide basic information about yourself along with links to your course work throughout the semster. This site will be updated with future assignments and project interations.

Requirements
  1. Your full name
  2. Your picture
  3. The course name and semester
  4. Add a placeholder (empty state) for upcoming course work
  5. Email a link to your portfolio
    • Must be publically accessible student site
    • Example URL http://iam.colum.edu/students/first.last/aim2/
Advanced Challenges (optional)
  1. Work ahead on list and link styles for upcoming assignments
  2. Make assignments stand out visually from those that have been visited
Design

Make this interface in your own style. Keep it simple and tasteful. Keep the focus on your content and let your purpose drive your choices.

Get Started

Use the Base Template, a boilerplate, or start from scratch (no frameworks just yet)

Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Grid System

Assignment #2 Due Feb 9th

Build a multi-column grid system with CSS and HTML. Populate the interface with content of your choice. Your grid should be written in a separate CSS file and utilized in other course projects this semester.

Try adjusting your layout to context and optionally complete the advanced challenges.

You can see example of responsive design and grids in use at mediaqueri.es.

Requirements
  1. Craft the Content
    • Add enough items to demonstrate your grid system (12 suggested)
    • Any media elements such as images should be responsive using max-width: 100%;
  2. Contain the layout
    • Limit the width of your .container using CSS, something like max-width: 60em;
    • Use margin: 0 auto; if you want it centered
    • Use padding to avoid unitentional content collisions with the browser window at any size

  3. Build the grid

    • Support one, two and three column layouts (minimum)
    • Develop your grid in a separate CSS file css/grid.css to keep it modular and easily usable in other projects
    • Use relative units (percent, em, vh, vw / not pixels)
    • Consider mobile-first with columns that default to 100% width

    A layout framework cannot be used for this assignment. We'll get to that!

Advanced Challenges (Optional)
  1. Adapt the layout
    • Use media query breakpoints for a responsive interface
    • Using media queries to adjust the layout based on width or other parameters
    • Have fewer columns per row for small screens (maybe just one column, all full width)
    • Have more columns per row for large screens
  2. Develop a robust grid system that supports 12 columns or more
  3. Adjust font-size, padding and other styles for different screen sizes
    • Include these adjustments outside of your grid system component (grid.css) since they may not make sense to be used elsewhere
Get Started

Use the Grid Template, a boilerplate, or start from scratch (no frameworks just yet).

Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Collection

Assignment #3 Due Feb 16th

Design and build an interface with a collection of content. Implement a responsive grid layout starting at one column for small/mobile screens, two for medium-sized screens, and three or more for large. Utilize a grid framework such as Zurb's Foundation or Twitter Bootstrap for this assignment.

Requirements
  1. Curate collection content
    • Feature a set of 12 images, quotes, articles, or other types of media
    • Must be listed (such as a thumbnail or title)
    • Link each item to an alternative or expanded version of the listed content
  2. Implement a responsive grid system from a framework
    • Foundation Grid is recommended
    • Have 1 column for small screens, 2 for medium, and 3 or more for large
  3. Provide feedback for user actions such as hover and touch/click
    • Use CSS pseudo classes (:hover, :active, etc.)
Advanced Challenge (Optional)
  1. Build a layout that nests columns for a more diverse and interesting treatment of content
Design

Keep the layout simple. Focus any extra visual treatments on the content being featured. Legibility and consistency should be prioritized over visual flare. Be sure to test your layout with a narrow viewport up to a wide width. Provide extra space around elements so nothing collides with the edge of the browser window.

Get Started

Download necessary components from Foundation or Bootstrap. For this assignment only a grid system is needed.

Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Animated Input Flow

Assignment #5 Due Mar 29th Apr 5th

Make an interface with series of transitions and animations. This can be similar to our demonstrated sign-up form or a different experience. This will include inputs of some sort and provide timely feedback for user interactions.

Consider the principles of animation and use custom easing functions when building your intface. Keep any motion simple, quick, and above all else it should improve the experience.

Requirements
  1. Build a simple page with a form containing inputs
  2. Confirm information entered by a user is valid (required, format, etc)
  3. Use transitions with easing provide a natural flow between states (such as hover, click, or an error)
  4. Use animations to introduce your content or respond with a loading state
Advanced Challenge (optional)
  • Take any opporunity to prevent errors through design, code, or content
Validation

Having trouble? Find issues by checking your code with the HTML or CSS validators. When writing Javascript – use your browser's web inspector and console.log(myVariable); to make sure each step is working properly.

Get Started

Continue with your form from last week, or feel free to use Foundation or Bootstrap

Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Project Proposal

Assignment #6 Due Apr 5th

Write a proposal of an interactive product you will create for the course project. What you choose to make should provide a service, solve a problem, and/or do good in some way. Propose an idea that is important and exciting (to you and others). It can take any form as long as it helps people achieve a goal and is interactive.

Research, exploration, feedback, testing, and an iterative design process will be utilized in the production of this product. Technically complex features may be prototyped or have some sort of abstract representation.

Need ideas? See what products are being discussed, see well-made products, browse ideas, and reference quality interaction details to get started.

Requirements

Write a clearly defined proposal for the interactive product you would like to create for the course project. Answer all of the following questions.

  1. Why is your idea important?
    • What does it provide, achieve, and/or solve?
  2. Why is your idea exciting?
    • Explain why you're passionate about it
    • What will make others interested?
  3. What form will your product take?
    • What will you be building?
    • Is it a responsive website, mobile app, experimental interface, or the next wearable craze?
  • Add your proposal to your portfolio site (this can link to a simple web page, PDF, or document of your choice)
Considerations
  • You will craft this product to the best of your ability
  • Complex components or data may be represented by a prototype or placeholder
Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Product Experience

Assignment #7 Due Apr 12th 19th

Define the views and states of your product idea as a wireframe. Focus on an important feature of your idea. Clarify exactly what kind of components will be included in this experience. Each step should be focused on a specific task. Progression to the next step must be clearly understood. Functional navigation, content, and actions are far more important at this stage than aesthetics.

Thoroughly explore your options. You're first approach might not be the most successful. Move fast and take risks to find unexpected solutions. Be sure to keep a reference to explorations, even if they're not an option you'll continue with.

Requirements
  1. Research
    • Observe and interview potential users to gain insight to behavior and discover painpoints
    • Research competition, relevant materials, and existing design patterns
    • Ask "why" to find deeper motivations, behaviors, and needs
  2. Wireframe Exploration/Definition
    • Create wireframes that express the high-level steps of your product
    • Include a simple representation of major components in each view/state
    • Focus on the core purpose/feature(s) of your product
    • Look to solve discovered painpoints that will empower your users
    • Annotate complexity with notes as needed for each view/state
    • Connect views/states with arrow to express progression and connections with any options leading to a relevant result
    • Explore numerous options by working fast and loose
    • Repeat until a polished and highly usable user flow is formed
  3. Analyze
    • Select your strongest solutions from exploration
    • Include your chosen approach in a polished wireframe / user flow
    • Your idea and purpose should be well defined, but not visually polished
    • A simple document, website, flowchart or collection of "screens" will suffice
References
Tools

Create your flows and wireframes in a medium you can best create in. You can draw, use Balsamiq, Lucid Chart, Sketch for Mac, Adobe Photoshop or Illustrator, or any other design/wireframing tools of your choice. Reguardless of your choice - images/documentation must be provided and linked to from your course portfolio site.

Assets / Templates

Be sure to simplify and reduce color as necessary. Functionality, hierarchy, and content is the goal at this stage, not visual style.

Best Practices
  • Keep it simple
  • Limit color use, working mostlye in greyscale and reserving colors for important actions
  • Be consistent with recurring elements such as a name or logo, navigation, footers, etc.
  • Utilize placeholders for media elements like images and video
  • Consider context such as the user's device, where they're coming from, and where they can go
  • Consider errors, edge cases, and empty states
  • Keep your work to refer back to your explorations
Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).

Product Prototype

Assignment #8 Due Apr 26th

Create an interative prototype of your product. This will be a usable version of your product that will allow you to put your design to the test in the coming weeks. Focus on the the most important interactions. Complete coverage of your product is not required. Technically advanced features don't need to be developed just yet. They should however be represented in some way.

The design should continue to evovle as you evaluate how well it works. Refine the content from your wireframe and take this time to make the layout and components more detailed. Don't worry about visual styles just yet.

Requirements
  1. Create a usable prototype of your product's most important feature(s)
Design

Focus on functionality. clarity, usability and how well your product works is more important than how it looks. Introduce and dismiss elements thoughtfully to improve the user experience.

References
Tools

Use the tools you can best create in. The goal is to produce a functional and usable prototype for testing. Your prototype must be accessible from your class portfolio site no matter how it is created.

Suggested Tools:

Alternative Options:

Delivery

Assignments must be accessible from your course portfolio site by the begining of class. Add your assignment to your IAM pub folder when on campus or upload remotely via FTP. Don't forget to add a link to your course portfolio (and be sure to test it).