- Define and prioritize information and actions.
- Express sites information hierarchy for each element of the site. Focus on the most important user actions and pages.
- Homepage
- Member Profile
- Dashboard
- Word Market
- Contest Page
- Read a Work
- Write a Work
- etc
- Create clear and usable mobile wireframe based on information hierarchies.
- Expand this wireframe for larger and larger screen sizes using responsive design framework tools.
- Test work flows for essential actions, modify and iterate as needed.
- Identify essential motifs and goals for tone and feel, define visual design goals.
- Create a number of rough style sheets that explore and address visual design goals in a range of ways.
- Select a direction to move in, start refining and tightening the visual design.
- Identify comprehensive list of elements that are necessary to the site
- Forms
- Buttons
- Icons
- Typographic Elements
- etc
- Expand visual design solutions into rough drafts for each of these elements
- Iterate these visual elements until a final design is reached.
- Combine visual styles and elements with wireframes
- Iterate wireframes and design elements together to insure smooth function and cohesive style.
- Use wireframes to create functional layout files for use with the Rails App.
- Define any differences in design goals for in-house use and marketing materials.
- Refine visual design to address new goals.
- Create suite of elements and tools for use in marketing materials
- Layouts
- Templates
- Typographic Styles
- Colors
- Horizontal Rules
- etc
- Define all relevant information
- Create range of drafts, each displaying essential information, but addressing the presentation in different ways.
- Pick a draft to bring to final.
- Create all deliverable materials from final draft of design. (different banner sizes, etc etc)