High-Fidelity-Wireframe

Project-Butter Cafe
Objective- Order a coffee online
Process-

This piece was created through Adobe's XD software which is an application to construct the online platform for a company. I had never worked in this field of design before but gradually built an understanding of the dynamics of digital content production. To begin this process I did extensive research to observe and determine how other companies layout their services online. This step was a significant factor because I discovered layout methods that were efficient and more importantly what did not work cohesively.

The next step was to take that information and apply it to a users journey to order a coffee online. This was laid out as wire flow to represent this navigational process. This step of the process enabled me to establish what key decisions the user is required to make while navigating a screen. These actions would consist of clicking buttons, filling out forms, and selecting preferred options. Moving forward, I took this map and put together a wire frame. To put it simply  a wire frame is the bare bones of a set of screens. This means that placeholders are used for the intended images, colours, fonts and titles. Through patient and focused instruction I learned how to determine the most important elements needed on any given screen.

FInally, it was time to bring the wire frames to life and apply the content. Through careful consideration I selected images, colours and fonts which I felt fit the intended target audience's style.. In this instance, the target audience consisted of college\university students and young adults looking to quickly order a coffee in a convenient way.  Though I had never created this type of content before, I enjoyed building it to polished stage and am quite pleased with the results

High-Fidelity-Wireframe-Menu

You may also like

Back to Top