Skip to content

Instantly share code, notes, and snippets.

@nikolaswise
Last active December 12, 2015 12:18
Show Gist options
  • Save nikolaswise/4770511 to your computer and use it in GitHub Desktop.
Save nikolaswise/4770511 to your computer and use it in GitHub Desktop.
Processes and steps to complete goals and responsibilities with We Love Words

We Love Words Processes

Storyboarding

  1. Define and prioritize information and actions.
  2. Express sites information hierarchy for each element of the site. Focus on the most important user actions and pages.
    1. Homepage
    2. Member Profile
    3. Dashboard
    4. Word Market
    5. Contest Page
    6. Read a Work
    7. Write a Work
    8. etc
  3. Create clear and usable mobile wireframe based on information hierarchies.
  4. Expand this wireframe for larger and larger screen sizes using responsive design framework tools.
  5. Test work flows for essential actions, modify and iterate as needed.

Visual Design

  1. Identify essential motifs and goals for tone and feel, define visual design goals.
  2. Create a number of rough style sheets that explore and address visual design goals in a range of ways.
  3. Select a direction to move in, start refining and tightening the visual design.
  4. Identify comprehensive list of elements that are necessary to the site
    1. Forms
    2. Buttons
    3. Icons
    4. Typographic Elements
    5. etc
  5. Expand visual design solutions into rough drafts for each of these elements
  6. Iterate these visual elements until a final design is reached.

Integration

  1. Combine visual styles and elements with wireframes
  2. Iterate wireframes and design elements together to insure smooth function and cohesive style.
  3. Use wireframes to create functional layout files for use with the Rails App.

Style Guide / Marketing Materials

  1. Define any differences in design goals for in-house use and marketing materials.
  2. Refine visual design to address new goals.
  3. Create suite of elements and tools for use in marketing materials
    1. Layouts
    2. Templates
    3. Typographic Styles
    4. Colors
    5. Horizontal Rules
    6. etc

Client Content / Contest Banners

  1. Define all relevant information
  2. Create range of drafts, each displaying essential information, but addressing the presentation in different ways.
  3. Pick a draft to bring to final.
  4. Create all deliverable materials from final draft of design. (different banner sizes, etc etc)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment