William J. Moner’s AIP Resources

Here we are, heading into midterm, and we’re ready to start working on your Photoshop (or Illustrator) based web interface. Today we will be learning how to slice the interface you create for your site.

For Next Week (week 5):

Continue reading “G413 Fun of the Web - Midterm Assignment”

IMD332 Week 3 Resources:

Today, we will examine the screens designed for the upcoming shift to “Web Design & Interactive Media” and critique both from a style perspective and from a slicing perspective.

Also, we will complete our “web tour” of Photoshop and ImageReady by looking at how to create rollovers with graphical buttons.

In anticipation of Continue reading “IMD332 Week 3 - Fun Photoshop Stuff”

Hey everyone. I know your brains are full, so here is the ZIP file for Week 3 Fun of the Web. It contains the shell of a web page, the “second.html” page, and the notes.

Also, Continue reading “IMD132 Week 3 Files”

Here is a great article summarizing some of the more popular grid-based layout techniques for web design. These techniques are flexible enough to apply to other forms of media.

This is the grid.

For IMD131 Only: Your first screen set for a business web site is due next week. Also, read Chapters 7 - 8 in the Jesse James Garrett text.

OK, graphic designers…

For Next Week (week 4):

• Continue creating your welcome/portfolio site. Create a four page site following the criteria below:
  • Your fourth page should be a page containing external links only. You can include external links on other pages as appropriate
  • Make sure your navigation allows me to get from any page to any page
  • Include tables to control layout
  • Include as many images as you deem appropriate
  • Use a background image
  • Make appropriate font style decisions
  • Change the link colors for each state (link, visited, rollover, and active)
• Upload to your site and submit the URL at the beginning of class

Read this for next week: Digital Web Magazine’s article on PNG and its uses. This article blew me away; GREAT tips and techniques for making some very flexible PNG-based images.

Also, here’s a quick tutorial on shiny buttons that should help you to make some high-gloss effects on your button-enabled sites.

Have fun, kids!

You are to create a screen design and use your knowledge of screen design principles and Photoshop/ImageReady techniques to port this design to a web site.

The Theme: Promoting Web Design & Interactive Media at the Art Institute of Pittsburgh.

Using only Corbis and AIP-specific images, create your vision of how to present this name change to the public.

• Create your design mockup in Photoshop
• The maximum size will be 1024×768; use discretion with regard to viewable space, sympathy for 800×600 users, and other screen design principles.
• Design the main page only. Include basic navigation to four other sections
  1. What’s in a name?
  2. The Students
  3. The Faculty
  4. What we do
• Use your creativity and imagination!

For next week: Create the image, slice in ImageReady, and export for publication on your web space. Create yourself a separate folder in your web space for this design and publication exercise. Enjoy! Who knows, this could go somewhere…

Check it out, gang …

Here is your creative brief and a sample to follow for your proposals.

Here are a couple of resources discussed and covered in class:

• Supporting Materials for “Elements of User Experience”
  
• The Principles of Design
• Art, Design, and Visual Thinking

For next week:

• Read Art, Design, and Visual Thinking
• Sections:
• Elements (all)
• Principles (review of topics from an art perspective)
• Read Chapters 1 - 5 in “Elements of User Experience”
• Create:
• Creative Brief for a Business Site
• Simple, one-level flowchart as it relates to each screen
• Storyboard/wireframe sketches of each screen

A handy reference for wireframes is located at gdoss.com and should serve as a good example.

CLICK THIS: AIP student survey.

Hey, gang … Here’s a great article from Macromedia’s archive of design articles.  Macromedia, the maker of Dreamweaver, has been purchased by Adobe, and has released newer versions of their software since the publication of this article.  However, the principles remain the same:
Macromedia - Developer Center : Usability: The Key to Good Website Design

Please read this article and understand that your audience dictates many of the decisions you will make regarding your site design.