Week 9 Summary


project_profiler (Personal portfolio site.) Flowchart and storyboards are contained along with the rest of the profiler outlining.

Storyboards (homepage and gallery page): gnarlycat_storyboards

Wireframe for home page -This looks a bit sparse because I wanted the first page to be very simple.

Wireframe for a gallery page from site – This is more typical to how the rest of the site will be laid out.


Five Essential Principles of Interaction Design

Interactive design is the relationship between the user and the product which it is being designed for.

Interactive design needs consistency. If your interface is not consistent, the user will be distracted by noticing the differences, and will distract their attention from the content.

You want to design with consistency in both aesthetics as well as functionality.

Good interactive design also needs visibility. There is no point to good design if features go unnoticed by the user. Mystery meat navigation is an example of bad interactive design. It should not require effort from the user to navigate your interface.

Interactive designs should be easy to learn and remember.

Perceived Affordance: Taking advantage of the user’s preexisting knowledge. Using images of real world objects with similar functions (like having a link on a website look like a button you can press) is an example of this.

The outcomes of a design’s interactions should be predictable. People will be afraid to interact if they cannot predict the consequences. Labels and previews will help set people’s expectation.

Feedback is helpful for improving your design, but the gathering of feedback should not interrupt the user’s interactions.

Prototyping your design is very important. The design you envision in your mind does not always function well when actualized. You can only tell if a design is good by actually using it.

When designing a site, remember to consider ways which the site may still grow.

Grid Based Design: Six Creative Column Techniques

Typography resources:

I Love Typography
Anatomy of a Web Font
Code Style’s Combined Font Survey Results
A List Apart: On Web Typography
Glossary of Font Terms

Lorem Ipsum Generator

The Elements of Typographic Style Applied to he Web
The Font Feed

Stacking fonts with CSS:
Building Better Font Stacks
Code Style: Font Stack Builder

Resources for downloading fonts:
Font Squirrel (Free)
Fontspring (For purchase)

Web Font Services:
Google Font Directory
Webfonts Info

To test your text in a browser window with differenet leading, kearning, alignment options:
Type Tester

Make your own handwriting into a font: Your Fonts

ASCII art generators:
Patrick Gillespie’s Text Ascii Art Generator

Automatic font identification system: What The Font

W3Schools HTHL entities page (Charts of code)

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.