Wireframes and Compositions using Adobe Illustrator
Image: N, A. (2016). Wireframe [Image]. Retrieved from
In today’s studio session, we continued with the process of “How to make toast” from last weeks tutorial.
As a class activity, we were asked to create a wireframe for a sample interactive app on “How to Meme”. As reference to the composition produced by the teacher, we were asked to produce a wireframe layout, through using Adobe Illustrator and templates.
Image: Hughes, G. (2016). AI- Example UI Workflow Layer Setup [Screenshot]. Retrieved from https://vuws.westernsydney.edu.au/webapps/blackboard/content/listContent.jsp?course_id=_21122_1&content_id=_2519214_1
Below is the class activity wireframe of “How to Meme”.
Through this activity, it enabled us to regain our Adobe Illustrator skills as well as act as an essential tool towards applying it to our own assessments and interactive design planning in the future.
Using the same technique and process, we were asked to create a simple wireframe of what we felt the “How to Make Toast” interactive app will look like.
Below is the wireframe for “How to Make Toast”.
After completing this process, we were then asked to create a composition of what the final layout of “How to Make Toast” app will look like using the wireframe produced above.
Below is the sample composition of what “How to Make Toast” app may look like.