[Solved] GUI Design and Prototype

Assignment Prompt & Instructions

## **Overview**

Last week, you described your application navigation, interface look, and feel—a critical step in designing an application prototype. In this third part of your course project, you design interactive wireframes for 3 application pages and leverage them to create a rudimentary prototype.

## **Preparation**

_Note:_ In **Critical Aspects of Interaction Design**, you learned the importance of employing effective techniques for usability, accessibility, responsiveness, and visual appearance. For this assignment, you should focus on usability for the wireframes and visual appearance and functionality for the prototype.

– Review your previous project work, particularly the design specification document, as you start your design.
– Review [Tools of the Interaction Design Process: WireframingLinks to an external site.](https://media.capella.edu/CourseMedia/sumid001893/wrapper.asp?panelID=panel3-wireframe).
– Download the [Wireframes Submission Template [DOCX]](https://canvas.strayer.edu/courses/27618/files/17999303?wrap=1 "cf_Week_7_Wireframes_Submission_Template.docx") [Download Wireframes Submission Template [DOCX]](https://canvas.strayer.edu/courses/27618/files/17999303/download?download_frd=1). Use it to complete and submit this assignment.
– Investigate and choose your preferred wireframing and prototyping tool(s).
– Familiarize yourself with Kaltura if you have not used it. You will use it to record the operation of the prototype you create in Part 2 of the assignment.
– Kaltura Resources:
– [How to submit a Kaltura Media Assignment in CanvasLinks to an external site.](https://learning.kaltura.com/media/How+to+submit+a+Kaltura+Media+Assignment+in+Canvas/1_pfzhyw8y).
– [Kaltura_Capture [PDF]](https://canvas.strayer.edu/courses/27618/files/17999293?wrap=1 "cf_Kaltura_Capture.pdf") [Download Kaltura_Capture [PDF]](https://canvas.strayer.edu/courses/27618/files/17999293/download?download_frd=1).

## **Instructions**

### **Part 1: Design 3 GUI Wireframes**

Complete and submit 3 wireframe renderings of the following pages/screens using the Wireframes Submission Template:

1. **Home Page:** displays content and various options that the user might desire from the app.
2. **Primary (Application Level) Page**: displays as one of the choices from the Home screen.
3. **Secondary Page**(option – choose one of the following):

– Login Page (sequence): displays user name, password, and optional user verification methods with a choice to enroll/obtain a forgotten user name and password, as well as a mechanism to remember the user for faster subsequent login.
– Secondary-Level Page: displays content and navigation at a deeper level.

### **Part 2: Create a Working Prototype**

Create a working prototype of your homepage and one other page using a design prototyping software of your choice. It should:

– Accurately reflect the wireframe designs.
– Include at least one operational interactive element, such as a button that functions as expected.
– Include complimentary design elements like color, branding, content, navigation, et cetera.

_Use Kaltura to record the successful operation of the prototype._

### **Wireframe and Prototype Evaluation Criteria**

Renderings will be evaluated using the following criteria:

**Wireframe Usability:**

– **Simplicity**: Keep interfaces clear, with minimal distractions.
– **Consistency**: Use familiar design patterns so users know what to expect.
– **Feedback**: Provide clear responses to user actions (e.g., button clicks, form submissions).
– **Error Recovery**: Help users recover from mistakes gracefully (e.g., undo or helpful error messages).
– **Navigation**: Guide users logically through content and tasks.

**Prototype Visual Appearance and Functionality:**

– **Color schemes** that align with brand and purpose.
– **Typography** that enhances readability and tone.
– **Whitespace** to improve focus and prevent clutter.
– **Icons and imagery** that are meaningful and consistent.
– **Hierarchy** that guides the user's eye to important elements.
– **Interactive elements function** as expected.

### **Submission Requirements**

Submit the following completed deliverables:

1. Wireframes Submission Template.
2. Kaltura video file that demonstrates successful prototype operation and includes a narration of the video that explains each interface feature.

– [\
\
cf_Week_7_Wireframes_Submission_Template.docx](https://www.sweetstudy.com/files/cf-week-7-wireframes-submission-template-docx "cf_Week_7_Wireframes_Submission_Template.docx")
– [\
\
ToolsoftheInteractionDesignProcess.pdf](https://www.sweetstudy.com/files/toolsoftheinteractiondesignprocess-pdf "ToolsoftheInteractionDesignProcess.pdf")