Part 0: Setup

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:

• License Key: MobileAppDevelopment2020|h92qeJxzCncxiQ+p8c1PysxJVXAsKFBwSS1LzckvyE3NK1EwMjAyqDE0M7QwMTYwMQABAIPFDmg=
• License End Date: May 14, 2021

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.

Part 1: Components for a Department Head's dashboard

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:

• An appropriate title
• A column of the faculty by name (link to faculty details)
• A column indicating the total number of enrolled students in the faculty member's courses this semester
• A column indicating the change in prior column from the previous semester
• A column indicating the total number of student credits in the faculty member's courses this semester (multiplying the number of students in each course with the units that course carries)
• A column indicating the change in prior column from the previous semester

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.

Part 2: A form to create new courses

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:

• A textbox for the name of the course (e.g., App Design & Development)
• A textbox for the number of the course (e.g., 67-272)
• A number stepper for the number of units for the course
• A set of radio buttons or a button bar to indicate if the course is offered 'Fall', 'Spring', or 'Summer'
• A dropdown list for the faculty assigned to the course
• A text area field for a course description
• A form title
• A submit button

When you have completed this, show it to a TA and get his/her feedback on your wireframe.