Introduction to Site Maps, UI Flows, Wireframes and Compositions.

In todays tutorial session, we continued with the process of making toast and we were asked to map out a user flow diagram for “How to Make Toast”.

Below is an image of the user flow diagram of “How to Make Toast” that I had a go at sketching.

User Flow- Making Toast .png

As you can see above, each screen is different and therefore demonstrates a quick overview of what may happen in each slide when users use the interactive design.

After that process, we were then asked to take the map we created above and list any primary and secondary navigation elements and produce a site map on “How to Make Toast”.

Below is an image of the sitemap on “How to Make toast”

Sitemap- Making Toast .png

Above, we see where users will start and finish. Through this sitemap allows us to distinguish what things are group together and how all the interfaces connect to make up one final interactive design.

Finally, with using the navigation found in the sitemap, we were then asked to make rough wireframes of what “How to Make Toast” website will look like and it’s layout.

Below is an image of the wireframes on “How to Make Toast” website.

Wireframes- Making Toast .png

Through drawing rough wireframe diagrams of the interactive website, it enables designers and users to develop an understanding of which components and sections will go  where and how the final site should similarly look like.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s