Print2Web Class 4

Homework Review

How did the homework from last week go? You were going to post a website template to your own server and domain. Were you able to post the files? Did they work as you expected? Let's look at some examples.

Interactive Design Principles

Sources of interactive design principles: IA, HCI, UX, UI, psychology, usability, industrial design, product design, graphic design, color theory, and many more.

Information Architecture

It simply isn’t good enough for organizations to build functionality or write content, put it on their computer systems and expect people to be able to find it.

Developing an effective information architecture is an essential step in the development of all computer systems.

Effective information architectures enable people to quickly, easily and intuitively find content. This avoids frustration and increases the chance that the user will return to the system the next time they require similar information.

Remember: people can only appreciate what they can actually find.

Additional reading: What is Information Architecture? by Iain Barker

IA Deliverables

  • Site maps
  • Annotated page layouts
  • Content matrices
  • Page templates
  • Personas
  • Prototypes
  • Storyboards

Website Checklist

The following are key elements of any solid web design.

  • Site ID or Logo | dropbox.com
  • A tagline that describes what this website is about, does, wants or needs | vimeo.com
  • A clear system of navigation | amazon.com
  • A clear visual hierarchy on each page | apple.com
  • Make it obvious what's clickable | craigslist
  • Tell me what to do first | twitter

Visual Design Phase

  • Figuring out the sizes
    Browser Screen Sizes Download 5.3mb | Example
  • Creating wireframes
  • Creating the visual design | psd template
  • Capturing state changes and interactivity
  • Hover, visited, active, link
  • Rendering advanced animation or interactivity | Teen Wall
  • Using folders to organize pages | PSD Home_Dev
  • Using layer comps to organize pages
  • Save for web dialog | one | two
  • Choosing the correct image filetype
  • Naming files for web use and states
  • Completed deck example | Visual Design PDF

Dividing up the site into build areas

Advanced Interactivity

  • Flash interactivity
  • Positives: Complete freedom to create your own UI and design, a complete multimedia experience is possible, impressive, fast-loading and lightweight
  • Negatives: Complete freedom to create your own UI and design, plug-in required, developer required for changes, expensive both initially and on-going, doesn't scale well typically
  • General Rule: Use flash in areas where it provides the greatest impact that cannot be achieved in another way
  • Flash-based site: ZaaZ Website
    Flash-based site: HL2 Website
    Flash-based site: thefwa.com
  • Adding Flash to an HTML page:
    FLA File, publishing: html, gif, swf, js
  • Javascript and Flash present: SIFR
    Sifr Example
  • More info about SIFR

SIFR: Any typeface on your website

SIFR means Scalable Inman Flash Replacement. It's a long word for a bit of technology that converts your existing H1 tag into a small flash graphic as the page finishes loading. If the user doesn't have flash they see the regular css-styled H1 tag.

No Flash? Use a Javascript Framework

Why would a client not use flash? It may not be available on their platform (iPhone), the budget doesn't allow for it, the development time is too long, the solution needs to be easy to change quickly, the solution needs to be accessible.

  • What is javascript?
    JavaScript is a scripting language widely used for client-side web development.
  • Why would you use it? Excellent alternative to flash for light interactivity and UI
  • What is a Javascript Framework?
    Frameworks offer reusable bits of code (like a library) of pre-defined useful functionality.
  • What are some other frameworks:
    mootools | scriptaculous | prototype
  • jQuery examples: jquery site | bbc | jQuery UI Widgets
  • Galleria Example 1 | Example 2

Make an interactive portfolio viewer

  • Download the latest version of jQuery
  • Organize the folder structure
  • In the head of your page Link the Javascript file
  • In the head of your page Link the css file
  • You need two photos, a small and a large version
  • Create a hyperlink around the small version
  • The link goes to the larger version
  • Use the code from the sample page
  • Example: jQuery Lightbox
  • Directions for creating a lightbox with jquery.

Homework

  • Develop a visual comp around a favorite idea or the interactive commuting exercise we completed last class
  • Build the home page or a representative page from the site
  • Include all the elements from the Website Checklist above
  • Include pages for interactivity (hover, active, state-change, animation)
  • Export the pages for the web as PNG's
  • Email the PNG's to me, or bring them to class