Designing a successful interactive product is a complex process that requires in depth planning before developing the final product. In this post I will be showing a wireframe and the final UI sketch of a website informing the process of making a toast.
Wireframe
Wireframes, also known as page schematic, are visual layouts that defines the structure of information and design. Designers use these to determine the hierarchy of information and as a guide before creating the rough UI sketch of their interactive media.
UI Sketch
The UI sketch is the screen design that would be used for the end product of the interactive media. The image below is a page design that would be for a website on how to make toast.
The UI sketch is a design for the page “How to Toast” which shows the process of toasting bread in steps.
The user would use the yellow circles on the left as an indication of their progress through the process of the instructions.
As well as the “How to Toast” page, there would be an about page of the creators and a FAQs page for users that came across issues in the process of toasting.
Journey through Interactive Design 