Version History:
- Released 2020/1/31
The subject of the project is either a stand alone ordering system for a restaurant [MENU], such as those seen locally as places like In and Out Deli, Panera, and Jimmy's Pita and Poke or an inventory system in a video game [GAME], as seen in Borderlands, Mass Effects, and many RPGs.
In this milestone we are:
- Stating the context of use of our interface
- Generating preliminary designs
The artifacts generated should be presented in a single HTML page as described
below. No style information should be in the HTML tags. Do not use
HTML tags like <center>, <b>, or <i> to alter visual appearance.
Programmatically added SVG elements may have style attributes.
Use the following link to create your github repository for this assignment:
https://classroom.github.com/a/nhcEZjk7
At the time of submission, your git repository should contain one HTML file
named PM2.html as well as one CSS file named PM2.css and one JS file
called PM2.js. It should also include any images or media needed for the
report and PM2.html. This assignment is due Friday 2/14 at 11:59 PM.
For the purposes of this assignment, we are assuming the user goal of:
[MENU] ordering lunch
[GAME] selecting a piece of equipment for use
Write clearly the context of use for your interface. All three elements of the context of use should be described.
For example, in the menu case, we expect some serve people walking up to be seated later, some are for To-Go users only, and some are table-side. Some accept credit only and some allow cash. Any of these is fine, but this should be made clear.
Similarly in the game case, we expect a wide variety of games to have such interfaces, some will have inventory limits, some will not. Any of these is fine, but this should be made clear.
Note: There is context of use to define beyond the examples above.
Include images of your rough brainstorming sketches. Number each design. There should be at least ten. You may take photos and upload those.
After sketching, roup the designs by commonality and explain why they were grouped the way there were but what the differences between them are.
You will be graded on the diversity of designs, their appropriateness to the user's task, and the thoroughness and thoughtfulness in explaining their grouping. While you will not be graded on artistic ability, please use annotations as necessary to communicate your design to others.
Having difficulty coming up with ten unique designs? Consider looking through design patterns. Consider looking at existing websites, games, and apps, which may or may not have to do with food or your particular context. Consider picking a (potentially unrelated) object and theming a design around that.
You may include as many images as you need per section. You don't need the roughs or anything else to fit in just one image.
Pick three of your most promising brainstorming designs and sketch an elaborated design. The elaborated design should show the layout and functionality. To elaborate on the design, you may need to draw the sketch in more detail, include more windows/menus not seen in the initial design, annotate more clearly to explain interactivity and how the screens are related.
For each elaborated design, also explain the conceptual model, metaphor, and/or inspiration as well as the advantages and disadvantages of the design, including with respect to design principles/rationale, but also with any other issues you think are of importance.
You will be graded on (a) the choice of the three designs and whether they cover your design space, (b) the thoroughness in communicating the design and its interactions, (c) the thoroughness and appropriateness of the concept/metaphor explanation as well as (d) the explanation of the advantages and disadvantages with respect to design principles annd rationale. At least three advantages and disadvantages of each design are expected.
Please write your report in a tabbed webpage as shown below with the section
titles Context, Roughs, Design #1, Design #2, and Design #3 each in
14pt sans-serif font. They are color coded with bisque, #E8E8E8, #DDDDDD,
#B8B8B8, and #AAAAAA respectively. The tabs are rounded on top. The content in
each tab should be 750 pixels wide. The shown body is rounded in all free
areas. The background of the entire page should be lightsteelblue.
Clicking on a tab should display the content of only that tab. All text
content should be within a single HTML file. Do not use multiple HTML files.
Consider using display: none; in CSS to hide content and JS to handle the
interactivity.
The body text should be 12 pt sans-serif and black. Blocks of text should be prevented from running within 25pts of the left and right side. There should be 15 pts of spacing underneath each block. Any section headings in the body should be 14 pt sans-serif bold and at least 5 pts in all directions from any other elements.
Images should be at most 600 pixels in any direction and surrounded by a 2 pixel black border with a 15 pixel margin at the bottom. Clicking on an image should link to a bigger view. Make full-size images no bigger than 2048 pixels wide.
You may include as many images as you need per section.
Lists (i.e., advantages and disadvantages) should also have a bottom margin of 20 pts and 5pts from the top. The bullet items should be 25 pts from either left or right side and 5 pts from each other vertically.
Please write your report in the format described below. As with the previous PM, the bulk of the credit is in the content, not in the format.
A movie demonstrating the report format is available here: PM2-2020.mov