Class 5

Learning Journal

https://xd.adobe.com/view/e88970df-9e27-4710-8ba9-bb5ea2b1aa2f/

Please send feedback on my prototype after viewing. It will be appreciated. I plan to edit my prototype based upon some of the feedback I receive.

User Interface Design has been a process to learn about and explore. The incorporation of live people into our testing scenarios displays the varying manners people relate and react to an interactive interface.

This class was about creating a prototype of a user interface. This working prototype was developed from previous ideas, yet I cleaned up the design a bit. I minimized some of the elements, adjusted the colors and made a more integrated visual array. I used the idea of reducing and eliminating unnecessary parts to develop a cleaner interface. This is in part learning from my instructors’ design examples along with my peers in this class.

My key takeaways from this class are it is a good idea to have a plan in mind before beginning to develop a prototype as well as learning how to use the very amazing easy to use XD application. Seeing and experiencing what this application can do in creating live prototypes is impressive. I plan to use this tool in designing interfaces for my courses, in particular designing for cell phone sizes and ipads and more so directly is a gigantic plus.

The interface visual elements were created in Photoshop. I created 3 iPhone 6 artboards in XD and used the drag and drop method from my desktop to bring in the visual backgrounds into XD.

In XD I created the rectangles. I left them with a degree of opacity in order to signify which links were active when testing. I then linked these rectangle ‘buttons’ the next artboard, selected either slide left or right as would be logical. Then I used the ellipse tool to create a circular overlay of the back arrows. Then I linked the page with the previous page using slide left.

When I tested the first time, the first page ‘button’ was not working. This was puzzling to me but I recognized that perhaps I did not save it before proceeding to creating the next ‘button’ overlay. When I redid this step and saved it, the entire design began to work – showing clear interactivity.

The second test things worked as planned. I then recorded my test and have embedded it into a Spark Page and the link is here.