Subject: Thoughts on Design

Hey All,

We've come a long way with respect to design, just give http://archive.p2pu.org a look and see for yourself. That said, there's still quite a lot that we can do to improve. We've been pushing out functional changes quite regularly, but the improvements lack an overarching design strategy and in some cases are inconsistent. I'd like to introduce my thoughts on design for P2PU and get you involved in making some general decisions that will be used as a guide across the site. 

First I'd like to make a distinction between design and functionality. When we talk about design, we're limiting ourselves to the aesthetic. This includes things like: color, style, shape, composition, and the like. We're specifically not talking about content or behaviors.

I've outlined three major aspects (colors, visuals, and interfaces) of our design and suggested a direction in each with supporting reasoning and how that reasoning informed the attached example. This work also includes a lot of the feedback from previous designs. Please take a look and let me know what you think.

Quoting Vanessa: "As their feedback process, the Lifelong Kindergarden Lab passes out red, yellow and green post it notes to solicit what's not working, what's confusing/you have questions about, and what's awesome."

Green: List the awesome stuff
Yellow: List the things you are unsure about and want to discuss / clarify
Red: List the things that don't work and _why_ they don't work

IMPORTANT: Please take the time to think about the reasoning behind your opinions and share supporting logic. I'd like to keep personal opinion out of this as much as possible and would prefer discussing problems and reasoning as opposed to suggested changes without supporting arguments.

EXAMPLE:
* PDF with full comments - http://jdb.io/zlBNZm

* JPG Plain - http://jdb.io/wlE1kT
* JPG Notes - http://jdb.io/xBfoM7

Comments from the PDF in text form

# Colors - Some reasoning behind color choices

A. Design Feature: Importance (Non-white background)
  * Reasoning
    * Ability to use white background to call attention to important content
    * Supports blending with elements in the foreground
  * In this example
    * light blue - normal importance level
    * white - subtly calls attention to content as more important
    * bg-blended gray - strong contrast, indicates actions (ui) the user can take

B. Design Feature: Color Accents
  * Reasoning
    * Distinguishes different types of content
    * Emphasizes related content
  * In this example
    * default accent - orange
    * user/account - yellow
    * posting/creating/making - green
    * search/discovery - blue

# Visuals - Setting the style for visual elements

C. Design Feature: Visuals are Related to the Logo
  * Reasoning
    * Logo is the foundation of our identity
  * In this example
    * Uses the four colors in the logo
    * Uses solid fill, no gradients or patterns, like the logo
    * Uses a line-drawing style that relates to the outlined style of the logo
    * Isometric which relates to the sharpness and angular style of the logo - http://en.wikipedia.org/wiki/Isometric_projection

D. Design Feature: Visuals are Stylized & Repeatable
  * Reasoning
    * Easy to draw / low cost
    * Establishes consistency across the site
    * Fewer decisions to make in the future
  * In this example
    * We set the pattern for other visuals: four colors, solid fill, line style, isometric
    * It wasn't complicated to make, so the cost for creating matching elements will be low

# Interfaces - Styling user interfaces

E. Design Feature: Simple Interface Elements
  * Reasoning
    * Don't distract people with unnecessary flair
    * Stylized elements are more likely to go out of style, minimal / basic should stand the test of time
    * Easy to implement cross browser
  * In this example
    * Interface elements have solid backgrounds with text
    * normal, hover, and active states all follow the style

F. Design Feature: Interface Shows State    
  * Reasoning
    * Orient the user (Where am I?)
    * Awareness of interactivity (What can I do?)
    * Interactive feedback (Can I click this?)
  * In this example
    * Primary Navigation
      * Normal - bg-blended gray with white text
      * Hover - white with blended gray text
      * Active - white with accent text