Authoring Interactive Media 2

  1. 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. 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

  3. 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.

  4. 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.

  5. Spring Break

    There is no class this week – enjoy your break!

  6. 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.

  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. 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.

  9. Behavior / Pt. 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. 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. 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.

  12. 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.

  13. 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.