Thurs, 2/6

Creating Wireframes with Paper Prototypes

• Draw site features (header, body with lists, navigation, columns, footer, widgets, features, etc) with the location and name and basic visual structure of your information on pieces of paper. This page should be designed for one of your main site pages (remember we don't create the home page first - create a structure for a page that repeats the most) - Think about your branding schemes and site features - you can refer to your site map and affinity diagrams for this. You can color code each layout element that repeats on different layouts using colored paper.
• Cut your site features out and arrange them into a layout as a group - the parts can be come moveable and interchangeable to help your group decide on the best interface arrangement
• Rearrange your site features for another page
• Use the paper arrangement to create Wireframes for all the pages of your site using whichever design software you please - I gave a demo with Illustrator but you might feel comfortable using PhotoShop
• Remember that your wireframes - the versions you will be creating with design software do NOT yet include color or final logos or anything complete - they are very simple black and white versions of what a more realized mockup or prototype might look like
• Refer back to this page about Wireframes to see examples
• A quick wireframing software that design teams use is called Balsamiq
  Mockups created with this software are extremely sketchy and simple (Look at what a wireframe page for YouTube looks like as an example):
  
  
• The idea is to create rapid, quick drawings with basic interface elements, and the colors and finalized design come later
• Wireframes for all pages of your site are due 2/18 for your midterm presentations
• Here are some paper prototype examples:
  
  
  
  
• Here are some wireframe examples - you will convert your paper version to the black-and-white digital format and create these for EACH page of your site: