This class proved to be a great way to streamline designs and focus on the User Interface. Creating simple sketches with key components, trying them out on 3 target audiences via live testing proved to be insightful. My target groups also seemed to really enjoy ‘trying out’ the design before it is set into action and since one of them is a student in the class that I am designing the course website for, she was even more engaged. During testings, I realized I had placed no back buttons – not a problem on an app where one slides from screen to screen but would be helpful to have them or ‘breadcrumb’ navigation on a desktop/laptop site – standard web page.
Getting the interface onto/into XD proved to be a challenge as I discovered it would not work like Adobe Comp on my phone. Instead I had to attach my phone to my Mac and could not use XD as an app. But overall it worked out in terms of getting basic elements into a wireframe and show the flow.
Because the site I am working with has multiple components, I chose to focus on just one navigational flow. This proved to be a great way to systemize the design – using repeat grid was amazing! I did use the XD videos on the Adobe site to compliment the information in the Live Class.
In developing the wireframes in XD I learned about using color and selected cool colors for the design. Each section (Module) has a distinct color for its button, so following that color through throughout the navigation for that aspect worked well.
From flow chart to seeing the UI in action, I realize there are also some extra clicking steps I should remove from my UI such as possibly the Images button could actually list the topic units right there rather than needing to go to an additional page.
So overall the using and creating of wireframes, testing prototypes have proved to be invaluable. Once again I thank you for the Live Classes – they have been a great place to learn directly, ask questions and engage with our community of learners. It has been very cool to see many of the same people here as have been in our other courses.
Screen Shot of XD Layout and Wireframes