Wireframes

The title of this blog post is a nod in the direction of Mr. Gary Numan. It felt like the right time to get some simple mock-ups ready in Adobe Fireworks; thus we became electric and moved away from paper, but only temporarily as this will speedup some of the low-fi paper prototypes that I plan later on. Fireworks seemed like the best choice as it is javascript-centric and I think that in all likelihood the final product would be coded in Bootstrap JS (but that would be up to my hypothetical developer). This is going to be a very long journal entry as there were a lot of decisions involved in taking the jump to the new format. Bear with me. So first on my list, although I did it second (as I ’think’ in colour) was to create a flexible frame-based mock-up of a topic page where learning content would be delivered. The frame size is set to 805 X 604 as this is the size of the window typically specified by Xerte, the University of Nottingham’s Learning Object creation tool. The specific Xerte example that I drew inspiration from can be found at the following link: http://www.nottingham.ac.uk/toolkits/play_8203. You will see that my progression buttons at the bottom of the page bears some resemblance to theirs, as I felt that it was an elegant solution to the problem in both a browser window and on a mobile device. I would be sure to cite this in my final code! However, I do think that a bit of polishing is needed and possibly an alternative for testing purposes; I think that the “2 / 4” looks like a button too, which could lead to confusion, so that is something to fix.

8 Jan, 2016

References Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). USA: Prentice Hall PTR.

31 Dec, 2015

References Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). USA: Prentice Hall PTR.

30 Dec, 2015