Interaction Design

If you need help the class site has a forum. Teach One Another: The Forum, is a place for you to ask and answer questions.

When you have an assignment to post to the blog you will be given specific requirements. One of thoes requirements will include an introductory paragraph about the current post like the one you are reading now.

An example of an image that has been imported into a blog post that is 400px wide.

Here is an example of an image that has been imported to the blog at centered with a width of 400 px. The .jpg image that it was imported from is 1050px by 800px including the browser with an image area of 1024px by 768 px inside the browser. If you click on the 400px wide image it links to the larger version of the image.

fig 1.2 | The overlay identifies the different functions of each section of the site

Thumbnails are 200 px wide and should be aligned left.

This example is a thumbnail image that is alligned left with a width of 200px. The thumbnail was also created from an image that was 1050px by 800px. Like wise when the thumbnail is selected it brings up the full size image. This example is a thumbnail image that is alligned left with a width of 200px. The thumbnail was also created from an image that was 1050px by 800px. Like wise when the thumbnail is selected it brings up the full size image.

This is one of my favorite responses to a question from Teach the Web.

Question | How can colleges and universities keep web design and/or development curriculum current and relevant?

Answer | Stop hiring losers as teachers.
— Joe Clark, Accessibility Researcher

Comment on this one. I dare you!

As I have been preparing for this course I keep seeing the same names over and over.

Many of these people are interviewed on Teach the Web which is required reading before the first day of class. I will be posting quotes from the interviews. Please feel free to make comments and observations.

I won’t hire someone who makes things look pretty alone, they need to back that design up with a real message that gets communicated well. — Jason Santa Maria | Graphic Designer, Creative Director, Happy Cog

You can read the complete interview at Teach The Web | Jason Santa Maria

Use all design skills to produce a maintainable web site to promote yourself professionally to a specified target audience

Assignment No. 05 is due 16 December 2009 | This is the last day of class. You may begin working on it anytime.

A.05 Portfolio | Instructions

I was wanting to know if you could let me know what will be covered in the course, Interaction, that you are teaching? Thank you. Have a great summer.

The following is a list of what I hope to cover. There is so much information and so little time.

• structuring information and using content
• foundational understanding of what the web is and how it works.
• HTML and css basics
• css typography
• designing with web standards
• site planning
• wireframing
• site maps
• site objectives
• interface design
• visual design for the web
• The final output will be a variety of on and offline.
• style guides that can be used by another designer/developer to maintain and add to the site
• Functionality
• Future functionality. What the web could be or do.
• Development documentation. This is a printed document that could be handed to a programmer. It details all aspects of the web site. On and off states of rollovers, forms, site structure, typography, color, grid, use of images and so on. The final document should be a detailed description of how everything is intended to work.
• Lynda.com

By the end of the course I want each student to have a foundation in designing information and visuals that demonstrate an understanding of what the web is and how it works.

So that you can make a good decision, I wanted to have a short conversation up front about online software training.

You need to make a big technical jump fast and I will do everything that I can to help you. The Lynda.com course selections have been viewed by me in their entirety and selected to add a specific skill set and refine foundational skills.

If you wait for me to hold your hand through this process you won’t get what you need. Each class period is 2 hours and 45 minutes with 25 students per class. If you want individual time it will be 6.6 minutes per class period at the best. I cannot individually teach each of you the software, theory and professional practice in that amount of time.

The selected courses are from Lynda.com. They total 31 hours and 25 minutes with 6 different instructors, can be viewed on your schedule, and reviewed as needed.

These video’s are not a hoop! Online training resources are how many professional designers keep up to date. You will need to use them in the future and so learn to use them now.
Scott E Franson | It is fun to quote myself

I have been using Adobe software since 1987 (20+ years) and I have learned a great deal watching the video training. Sometimes a reminder of what can be done can make a big difference.

The Lynda.com Titles

Web Site Planning and Wireframing
with: Laurie Burruss

In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands–on course is to deconstruct a web site’s home page in order to identify its structural elements and feature set. Using Acrobat Pro and the web developer’s toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe). Exercise files and a downloadable PDF quiz accompany the course.

Dreamweaver CS4 Essential Training
with: James Williamson

The latest developments in Dreamweaver require designers to understand CSS in order to use the application to its full potential and create standards-compliant web sites. In Dreamweaver CS4 with CSS Essential Training, web developer and Adobe Master Instructor James Williamson teaches the fundamentals of CSS while focusing on how to use Dreamweaver to efficiently create and manage styles. He shows how to use Dreamweaver to resolve style conflicts; how to use new CSS-related features such as Live View; and the best way to create lightweight, site-wide style sheets.

Photoshop CS4 for the Web
with: Jan Kabili

Photoshop CS4 offers designers a rich assortment of editing tools with which to create compelling imagery for the web. Photoshop CS4 for the Web covers a wide range of uses for Photoshop in the web graphics workflow. Instructor Jan Kabili explains how to optimize graphics and photographs so they download quickly in a web browser. She covers the why and how of image slicing, and demonstrates practical techniques for designing layouts, backgrounds, navigation bars, and buttons in Photoshop.

CSS for Designers
with: Molly E. Holzschlag and Andy Clarke

In CSS for Designers, Molly E. Holzschlag and Andy Clarke expertly guide you through some of the most complex and useful techniques used in progressive Web design. Molly and Andy consider the topics from the point of view of creative, visual people rather than developers or programmers. Their unique approach helps give designers all the tools they need to create accessible, manageable, and beautiful websites.

InDesign CS4: Typography
with:Nigel French

InDesign CS4: Typography explores the numerous type options, type-related features, and type-specific preferences of Adobe InDesign CS4. Using practical, real-world examples, instructor and designer Nigel French explains the purpose of each feature and describes the conventions for how and when to use it. Nigel dissects the anatomy of a typeface and defines the terminology needed for the successful application of typography. He moves from the micro to the macro level, addressing such issues as choosing page size; determining the size of margins; adjusting number columns; and achieving a clean, structured look with baseline grids. This course is essential for anyone looking to expand their work from just laying out a page to understanding the hows and whys of typography. Exercise files accompany this course.