TECM 3200 Dr. Lam

Project 1: Designing/developing a professional website  Web design process  Content on the web  Laying out your website

 Writing is tied closely with design. Content is always the first thing a communicator should be concerned with.  Thinking and persuading should happen before you decide on design  Design makes good writing better and persuasive communication even more persuasive

 Intimately tied with decision making  Impacts perceptions well beyond “looking nice”  Credibility  Trustworthiness  Expertise  Impacts usability- “form follows function”

 Contrast  Repetition  Alignment  Proximity  More info can be found in Robin Williams’ “The non-designer’s design book”

 Supersedes “feeling”  It provides us (especially those of us who aren’t naturally design-oriented) with objective guidelines  It’s simple and will always (yes, always) make a document or product better

 PARC is easier and more effective  Starting with proximity first is actually the best way to work as a designer  Information first, then design

The Proximity Principle  Group related elements  Separate different elements  Proximity involves “architecture”  Start by understanding what information you have (Inventory)  Grouping like pieces of information  Creating an organizational hierarchy Web Considerations for Proximity  Hyperlinks encourage proximity  Thoughtful navigation encourages proximity  Proximity can be accomplished in bolder ways (color, vertical, horizontal, and images)  Example:

The Alignment Principle  Nothing on the page should be placed on the page arbitrarily (nothing!)  Every element should have some visual connection with another element on the page  Strong lines can make it easier for a user to scan a document  Good alignment often described as “clean”  Alignment, like proximity, also has an impact on information Web Considerations for Alignment  Alignment happens both horizontally and vertically  Images that are sized in different ways can make entire site look out of alignment 

The Repetition Principle  Repeat visual elements of the design throughout the piece.  Color, shape, texture, spatial relationships, line thickness, sizes, etc.  Repetition helps develop organization and strengthens unity  Common repeated elements: headers and sub-heads; color; images or logos; spacing  Especially important in longer documents Web Design Considerations  Repeat micro-interactions (e.g., hover animations, clicking an element) 

The Contrast Principle  Make elements that are different appear very different.  Making elements only slightly different will only confuse the reader Web Design Considerations  Background images need to contrast foregrounded text  Contrast can change from section to section  Little changes make a big difference  Example:

 Complete the CRAP exercise on the Resources page of the website.  Upload to Blackboard before class Wednesday