Lab 10: University
Due Date: April 11
- Learn to use software tools to create low- and mid-fidelity wireframes
- Apply design principles to the creation of wireframes
Due Date: April 11
If you have not already done so, please download the Balsamiq wireframing tool available at https://balsamiq.com/wireframes/desktop/. Once you download and open the app, register it with the following information:
If you have another wireframing package, you are allowed to use it. That said, I want to emphasize that we are NOT looking high-fidelity wireframes. Do not spend too much time creating details -- as we said in class, the purpose of these early wireframes is to understand the interactions the user is having with the app and the information, not on the aesthetics of the app.
We have played on and off in class with an app called
University that allows us to track faculty, students, and courses at some university. Today we are going to build some wireframes to help us map out some additional functionality in this app. In this first part, we are going to create some partials that can be used as part of a Department Head's dashboard and then place them onto a web page wireframe.
In the first partial, we want to get a sense of which faculty may be carrying a lighter load teaching-wise and which might have a heavier burden. To that end, we want you to use Balsamiq to build out a wireframe for a table (placed on a card) that has the following:
In the second partial, we want a graph (again, placed on a card) that presents the total student enrollment in all department courses over the past eight semesters. There should be some way to compare those numbers to the average department enrollment each semester. (Note: we are not looking for realistic numbers, we are really looking for the type of comparison you are making for illustration purposes.)
Now place these two partials on a single web page with an appropriate layout. When you have completed this, show it to a TA and get his/her feedback on your wireframe.
In the second part, we want to create the wireframe for a simple form that will allow us to add a new course to the system. Reusing the same layout as above, create a form wireframe with the following elements in any order you think appropriate:
When you have completed this, show it to a TA and get his/her feedback on your wireframe.