Interactive Design II – Week 10

reCAPTCHA Promo Screen Grab

Session 1: Today I’ll be demonstrating the optional features of the Interactive Form Project. These include:

1. Hosting the project on a live production server accessible via a public domain and url.
2. Using the reCAPTCHA API to prevent non-human interactions.
3. Fine tuning the layout, design, and functionality of your form.

reCAPTCHA is a free service to protect your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease. reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.

Relevant links:
Fun with HTML5 Forms
85 amazing HTML5 examples

Session 2: Your project proposals are due today. Please post them as PDF file on Learn@UWStout. In addition we will be have feedback and critiques on your Interactive Form projects. Please be prepared to demonstrate your form in group critiques. Finally, we will look at the requirements for the Final Web Application Design Mockups Component.

Screen Shot 2014-10-26 at 2.23.44 PM

Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 11 (5% of final project grade)

Description:
Design three mockups of a single page for in-class critiques on session 2 of week 11. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.

Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to Learn@UWStout before class on session 1 of week 12

Points Breakdown:
The mockups constitute 5% of the grade for the Final Web Application

5 thoughts on “Interactive Design II – Week 10”

  1. Since we are mixed between starting our final Web App and finishing the form project I thought I’d post a little bit on both.

    This first one looks at characteristics of successful websites.
    http://www.successdesigns.net/articles/entry/characteristics-of-a-good-website

    This link shows some simple CSS on input buttons and radio buttons.
    http://thecodeplayer.com/walkthrough/custom-animated-checkbox-inputs-using-css-iconfonts

    An in-depth look at Photoshop mock-ups and ways to do them.
    http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop

Comments are closed.