SB3: Wireframing

Wireframing is designing a visual outline for a mobile UX. Its purpose is to clearly lay out specific content, functions, and connections between pages. A wireframe often doesn’t take colour or visual aesthetics into account outside of space allotment, and it represents the bare bones of your future design.

Without a wireframe, you’ll end up lost and with digital writer’s block. This is how you’ll figure out what works and what doesn’t early on in the process.

List of all the things my final design should include:

• log in
• sign up - personal details, billing details, info about subscription
• welcome page - get to know each other
• preferences: diet, allergies, dislikes, skill level
• tool bar, including search, inspo/trending, recipe book
• search options: main ingredient, cuisine, chef, course - a filter on the search (cooking time, dietary, skill level)
• search results
• recipe page - add to recipe book
• account recipe book - breakfast/ brunch, lunch, dinner, dessert and small plates 
• sort by a-z and search option

“Who is my audience, and how can I make experience of using my site as seamless and enjoyable as possible for them?”