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