Design Mockups |
![]() |
Goal | First cut at a full visual design. The idea is to get all of the layout, color, workflow and visual design issues worked out BEFORE you start implementing. There is no programming language that is good for expressing visual design. Much of bad UI design comes from programmers trying to design in code. | |
Group Preparation |
Pick one of your wireframe designs or some variation of those designs that responds to the critique.
Decide on the set of widgets (buttons, scroll bars, text boxes, etc.) that your design will need and build a PowerPoint slide that has each of these designs. Pick one of these looks and redo your wireframe design with the actual theme you have chosen. This should be a first cut at how your user interface will look and behave. Prepare slides with your widget designs and your UI mockup for presentation in class. In addition, prepare slides with each of your UI mockup slides annotated with the role, purpose, or behavior of every widget on every slide. Submit all slides through LearningSuite. |
|
Individual |
Each of you independently prepare 2 different "themes" for your widget designs. A theme is a different combination of fonts, colors and shapes.
For each widget prepare a visual design in PowerPoint that shows each of the 3 states ( Idle, Rollover, Active) for each of the three different themes. Come to class prepared to discuss these alternatives. Each of you should individually prepare a FLIQ mockup of your personally developed themes. Your FLIQ mockup should show working mockups of each of your widgets including their various shapes and colors under rollover and active pressing. There should be a FLIQ page for each of your themes and a button on each theme that will switch back to the other one. Submit the URL of your FLIQ mockup through Learning Suite (must work in FireFox) |
|
Group |
Pick one of your themes and redo your PowerPoint wireframe mockup.
Bring your slide deck to class for critique One of you submit your mockup slide deck to Learning Suite. |