Thinking further about what my app is going to look like, I have sketched out more thorough wireframes to provide a clearer picture of my design.
The first sketch is what would appear as soon as you open the app. The logo would appear at the top of the page, and the different app buttons at the bottom (My Food, Calendar, Share and History). A search bar is at the top with a knife a fork icon below it. The second sketch shows what happens when you tap onto the search bar, the keyboard comes up from the bottom, and as each word is typed, separated by a space, it turns them into tags. As more items are typed in the search bar drops down to accommodate. The 3rd sketch shows the screen it would take you too once you have searched for the items. The number of matches would appear in the top right and a back button in the top left. Recipes will appear down the screen split half with image half with brief info about the recipe, also included is a rating of ease.
Next the first sketch depicts what would happen if you had tapped the 'My Food' icon. That icon would then change to a 'Home' icon. At the top is the title of the page you are on with a back arrow in the top left corner and a plus icon in the right to add items. Below this is a search bar, to search within the users own ingredients. Below are image icons for each button area. The next sketch shows the screen for the 'Fridge', but this layout will also be used for the 'Freezer' and 'Cupboards'. Again at the top you have a back arrow and title of page, below this another search bar specific to the fridge. Item names will list on the right hand side with the date of expiry on the right. The final sketch here shows the screen if you were to add or edit an item.
The first sketch here is the screen for the personal suggestions, a similar layout to the previous, with the names of items in a list format down the screen. If you tap on the item it will give you a recipe idea. This is what the 2nd sketch shows, there will be a large image of the food with a rating of ease below that, then some brief info on the recipe. Swipe right for ingredients and step by step guide on how to make. The final sketch shows the screen where you would scan in items using the camera of the phone. A green tick will appear when successfully scanned - option to then choose where to store the item.
From these wireframe sketches I have done a rough digital interpretation of the first two screens:
For the magnifying glass and the knife and fork icon I got them off a free website for icons, the only condition is if I used these in my final design would be to place the attribution on the credits/description page of the application.
Magnifying glass icon made by Madebyoliver from www.flaticon.com
Knife and fork icon made by Freepik from www.flaticon.com
No comments:
Post a Comment