Saturday, January 7, 2017

OUGD504 Studio Brief 02 - Detailed Wireframes (Continued)

Detailed Wireframes (Continued):


The first sketch shows how the recipes screen would be laid out. The top bar would have a back arrow on the left hand side, 'Recipes' in the middle, and a next arrow which would take you to ingredients. Below this bar is a large image of the recipe which takes up about three quarters of the screen. Under this would be the prep and cook times along with the rating of ease. There will also be an editable serving size which will update measurements automatically. There would also be brief info about the recipe, again with icons at the bottom. Users will be able to either use the arrows or swipe left and right. The middle sketch represents the ingredient layout. Ingredients will be in a list format which will show the amount / weights. To the right of that will be a '+' sign to indicate being able to add to a shopping list. This will then bring up the option to choose what shopping list. The last sketch indicates the method of cooking, each step will be on one screen to help make the information as clear as possible.


The first sketch on the next sheet, shows the layout for the sync with the online shop. The top bar remains the same except for the change of heading to 'Sync'. A sign in box is in the middle of the screen which links with online shops. The next sketch shows the layout for the calendar, this has a bar with the month in the middle and an arrow either side for navigating through the months. In the bottom right corner of the calendar is the number of items going out of date this month. Below are the scan and sync buttons. The final sketch shows the layout of the share screen. The camera would be used and viewed in the top three quarters of the screen, with a capture button below that. There would be editing options below this. Then a share button which when pressed would link social media icons to choose the platform to present it on.


The first sketch on the last sheet shows the shopping list layout. This would list your different types of lists, these can be edited or deleted by tapping on them. At the bottom is an online shop button which again links to the online shops. In the top right corner is an '+' button to add a new shopping list. The middle sketch shows the screen if you were to make a shopping list. The name at the top would be editable, and next to that a tick to save the list. The list format would be similar to a real shopping list with check boxes on the right and list on the left. The last sketch shows the layout for the history page. This will list recipes that the user has completed, when tapped on it would link you directly to that recipe page.

No comments:

Post a Comment