Scripting for IXD

Overview

Read the first few pages of Ch.11 from Duckett and skim the remainder of the chapter for a glimpse at some common interactive "content panels."

This project allows you to apply what you've learned about interaction design to design and build a feature page for a product of your choice. Your project must:

• Display an actual product or series of products in a visually pleasing way.
• Display information about the product using a combination of content on the page and at least two of the "content panels," which are discussed in full in Chapter 11 of the Duckett text.
• Use accurate content based on existing pages that display the product(s) you've chosen. Be sure to consult at least amazon.com and the owning company's site for accurate information, images, and options for the product(s). You are welcome to include your own content or images as long as they are accurate and appropriate.
• Acknowledge the product's owning brand in some fashion, but work as a standalone page.
• Include a clear call to action to purchase or otherwise obtain the product.

Complete the project using the following deliverables.

Deliverable A: Research and Concept Development

For this deliverable, identify the product you will use for this project and do some research to collect imagery, content, and other assets.

1. Identify the product.
2. Research sites that display the product to collect information and assets for your design.
3. Sketch wireframes of your page layout on paper to pre-plan your overall layout and the content panels you'll include.

Report on your progress for your submission.

Deliverable B: Design Comps

In this deliverable create a rough draft of your page layout design using Sketch, and create a prototype build in InVision. Consider the following process:

5. Create your design comp using Sketch at a layout no wider than 1200 pixels.
6. Consider both the starting states and any interactive states in Sketch.
7. Create a corresponding project in InVision and add your professor as a collaborator.
8. Sync you dartboards from Sketch to InVision using Craft.
9. Set up an interactive prototype of your project in InVision.

Include the shareable URL for your project in your submission.

Deliverable C: Design Revisions and Markup

Based on feedback from your professor and peers, revise and finish your design comp and markup from the last deliverable. Update your InVision prototype as needed.

Then begin your build-out be establishing, at the least, the markup you'll need for the build in the provided project in Codio.

Deliverable D: Styles and Initial Scripting

Proceed to build out your design and states by adding CSS to your HTML file. Use classes to establish interface adjustments in preparation for coding those interactions with JS.

Create at least a skeleton of the JavaScript/jQuery code and begin to test primary components of the interaction such as basic event handlers.

Deliverable E: Further Scripting and Debugging

Continue to build out all the remaining elements of your design and code the additional components from the provided code in the textbook.

Take a snapshot of your progress when complete.

Final Submission

Make any bug fixes and additional polishing.

Take a snapshot of your completed project.