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.

AI- Example UI Workflow Layer Setup.png

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”.

How to Meme Example Wireframe Activity.png

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”.

How to Make Toast Wireframe Layout.png

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.

How to Make Toast Composition.png

How to Make Toast Compisition Interactive Demo.png


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s