The move from pencil and paper sketches (low-fidelity) towards computer generated models (high-fidelity) is an important one when showing your design solutions for brainstorming and presentations. It is also an important move for invention, delivery, and arrangment. It is important to note that your journey to creating the pencil and paper (low fidelity) sketches was prompted by your usability audit and report. For your high-fidelity prototypes, you will rely on all of your inventional documents and exercises (usability audit, usability report, and low fidelity prototypes) to create more refined and defined visual prototypes that considers the layout, color, type, imagery, and controls and affordances (Visual Usability).

For deCoders, it is likely that you would like to focus on recommendations to edit the template beyond simply coding what you have been given. In addition to producing high fidelity prototypes of your changes before you actually make and code them, you will need to “prototype” your code using Fireworks or Photoshop first and then move to actually implementing the code. It may seem like this is a daunting and some times unnecessary step; however, it allows you to think through what you will actually code, work with other peers to figure out how you will code your document, and provides a low-stakes opportunity to begin coding.

Assignment #12:  Medium Fidelity of  Layout and Controls/Affordances. Due Monday, April 14, 2014 at 11:55p. (12%)

Submit to Moodle

The first round of your prototypes will not focus on typography, photos, or colors. These items tend to cast shade on the problem at hand: How do the solutions you recommend play out in the general layout and controls/affordances? For Assignment #12, please develop high-fidelity prototypes (see NPR case study and the Medium Fidelity section in the “Design Better And Faster With Rapid Prototyping” article). Develop at least two different prototypes for each page your are redesigning. Please use Fireworks for Phototshop to develop your visual prototypes. In your medium fidelity prototypes, you should include the actual content (alphabetical text), such as headers, etc; however, do not include any real images. Only include image placeholders in the form of gray boxes with an overlay text that indicates an image (see NPR medium fidelity image as an example). Only use shaded of black and white as the colors for your prototypes. It is important that you use good contrast to show the differences between elements.

This is also the part where you will learn how to use Fireworks or Photoshop for prototyping.

Design Critique based on “The Rapid Prototyping Process“

1. Prototype: At this point each person has prepared sketches of their prototypes.
2. Review: 
   • Each person must begin the critique with a brief overview of the problem and recommendation. Do not attempt to give an entire overview of the process. It may be helpful to show the pages you are redesigning if your peer is not familiar with your work. 
   • Next, briefly explain how your different sketches respond to the issues you identified in your usability audit and report. Keep in mind that you might not be able to critique every prototype in detail. Therefore, it is helpful to focus on the prototypes that you would like to focus on the most.
   • Each designer will provide a critique of the visual prototypes by focusing on matters of hierarchy, ….. The following questions are useful to ask during your critique:
     • Does the designer actually respond to the problem at hand?
     • What is the designer doing well with the prototypes to provide a solution to the issues and opportunities?
     • Are there any other ways to address the issues and opportunities that might help the designer think of alternative solutions?
     • According to the layout and controls/affordances that the designer has prototyped, critique the elements of design (i.e. placement of information, )
3. Refine: Last, refine one of your prototypes based on feedback to prepare for our workshop on using Fireworks to develop prototypes. Before moving to high-fidelity prototypes, it is useful to conduct a mix of analyses.

Fireworks and Photoshop Workshop

Fireworks help and tutorials

Photoshop help and tutorials

1. Know your workspace [Tutorial: Workspace basics]. Before working with Fireworks, it is important to know what your workspace provides for you, what is necessary to use, and what you will not need to use.Photoshop: Workspace and workflow
2. Create a New Fireworks document [Tutorial: Creating a new Fireworks document]. There are two ways to create a new document:
   • Set default dimensions for new document
   • Create a new document the same size as an object on the Clipboard
3. Create Fireworks Pages of your prototype [Tutorial: Prototyping websites and interfaces using Fireworks pages]. You may choose to create each page of your prototypes beforehand or after you have created one or two prototypes to reuse.
   
4. Create shapes and text [Tutorials: Working with vector objects, Working with text, and Applying color, strokes, and fills]. The major functions you will use in Fireworks for medium-fidelity prototypes are shapes, text, and color.
5. Work with imported or pasted objects [Tutorials: Organize multiple objects, Select objects, and Select pixels]. In addition to creating shapes, you might work with imported or pasted objects. You may want to group some of these elements (organize multiple objects) or modify them by cutting parts of the objects, etc (selecting pixels). If you work with imported or pasted objects then it is useful to convert them to grayscale color if they are in full color. See Color to Grayscale in Fireworks. 
6. Export prototypes [Tutorials: Export pages as image files or Export a single image or Export selected pages]. You can choose to export each Fireworks Page at one time or choose each specific Fireworks page to export.
7. Other: In addition to the aforementioned items, you might want to change the size of the entire Canvas area (the size of the Fireworks document). Additionally, you might want to crop the document or change the size of the entire image. See the Change the canvas tutorials.Also, you might want to undo and repeat multiple actions rather than starting from scratch in case you make a mistake.
8. deCoders: The main function deCoders might use is slicing and exporting slicing. See Creating and editing slices and Preparing slices for export. You will also Optimize graphics files.

Assignment #13:  High Fidelity Prototypes of  Type, Color, and Images. Due Wednesday April 30, 2014 at 8:05a. (13%)

Submit to Moodle

The second round of your high-fidelity prototypes will focus on typography, photos, or colors. In short, you will develop. This is also the part where you will learn advancing coding techniques.

The first step in this process is to:

• (enCoders)  Design a mood board (also see Newfangled and OneXtraPixel) and locate any user interface patterns. Develop two or more different sets of mood boards that communicate a different character and personality. Each moodboard set should be an amalgamation (one large document per mood board with multiple pages) of:
• 1) a collage mood board of inspiration (images, sample web sites, typographic features, textures, and anything else that you think is relevant)
  2) refined/template mood board with proposed color patterns, micro typography (color, contrast, font style for headers, paragraphs, and any other special content), textures, buttons, and any other visual elements that you deem necessary.
  3) photography (if necessary)
  4) User interface patterns from design pattern libraries or common patterns that you have collected by doing a brief review of common design controls and affordances from competitor or similar Web sites.Place key adjectives, such as “Dark, glossy, slick, modern, edgy, hard, aggressive” to keep you focused on the kind of mood and personality the design should portray. To develop these keywords, it is useful to do a personality summary first. Additionally, it might be useful to create your own personality summary of the two mood boards in addition to the keywords.
• (deCoders). Create the base content of your HTML and CSS by doing a quick and early layout  Please see From PSD to HTML: Building a Set of Website Designs Step by Step. I suggest the following steps:
• 1) Build the base HTML content of all pages
  2) Create a CSS file (and a reset.css file) and attach it to the head of each page
  3) Build the CSS of all common elements on all pages (background, page width, and general typographic styles, such as the base font style and size)
  4) Code all of your links in the navigation to the pages you will create
  5) Build the home page in full
  6) Build the most difficult page in full