Following the design of the icons I started with the design for the pages of the App.
I decided that the design of the Pull & Bear App is what I wanted to use as influence for the main pages of this App.
Pull & Bear:
As the main pages are image based, the layout needs to be simple and consistent. There is no need for a navigation bar at the bottom. I wanted the top navigation bar to be simple and fit in with the brand. It will be a fixed feature on every page of the app.
I decided on the brand name in the middle, with space either side for the navigation buttons. The 'menu' button will be fixed and will be on every page. The 'back' button will be on all pages apart from the main menu. Pressing this button will take whatever page back to the main menu page for whichever section the user is currently on.
Top navigation bar:
Following this I started with the first layout of the App - the main menu pages. I wanted this format to be consistent over the main menu, cafe menu & bakery menu. Following the style of design shown above in the Pull & Bear App, I created the wireframes for these three pages.
Main menu:
Bakery/Cafe menus:
The brown boxes indicate it will be image content. I decided that when a section is selected, this image/icon will move to the top of the page, and the icon will turn gold to show the difference between this and the other buttons on the page. This indicates the page which the user is on. To further indicate this, I added a thin gold strip under the selected section, showing the divide.
Happy with the design, I moved onto the next sections that needed designing. I started with the 'menu' as this appears in both of the main sections.
While I wanted to reflect the content already created for this brand in the printed material, I needed to adapt this to the digital media and make it as useable as possible.
For the menu, I decided on just having the content in a list, with the sections clear, and prices shown for each product.
Menu:
The design is simple, but I think it works well and is very useable in the fact that the user would just need to scroll down.
I then created the 'opening times' page, as this is also on both menus. I followed the same format of the menu in having the content in a list.
I think the inclusion of the icons works well and strengthens their use instead of just having them for buttons. Using them in as much context as possible will give each section its own identity. Once again the layout is very simple and self explanatory.
Following this, I created the 'about us' page as I also wanted this to follow the same format.
About us:
I decided that it would be quite nice to have some images to flick through at the bottom, showing the store or some of the food. It gives the user something to look at and relate back to the text.
I then moved onto the 'make an order' section for the Bakery.
The first thing I decided was that there needed to be a fixed bar along the bottom, showing the total amount spent, as well as a 'checkout' button. This means that at every point the user can see how much they have spent, and can finish at any point they want.
The main consideration that I need to think about is the usability of this section. It needs to be very clear to the user where they are and what they have ordered.
I decided that there really only needs to be two page designs for this - the initial 'make an order' page, with the sections available to order (bread, cakes etc), and then a more in depth page, with the products available for each of these sections, where the price and quantity must be shown.
Make an order pages:
Following the brand guidelines, I decided on using a 20% opacity of the dark brown for the buttons. I think that this keeps it quite light, and also contrasts against the use of the image.
With the success of this design, I applied it to the 'make a reservation' page, adapting it to what would need to be known for this to work.
Make a reservation page:
I edited the bottom bar so it suited the context, keeping the same overall style. The circles next to the information will fill in when the information is entered. This shows the user that they have completed the section.
As I was happy with the overall design and look of the app, I started working on the image side to it. I had a very clear idea for the images, as previous said. This is that on the menu pages the images will be brown, and when the section is chosen, they will turn to colour. As the icon will also change to gold, the colour must not clash so a darker tone might be needed.
Image colour effects:
 |
| Original |
 |
| Brown Tint |
 |
| Brown Tint with icon |
 |
| Dark colour |
 |
| Dark colour with selected icon |
Each section will have its own image, which will stay throughout the App. The colour image must be darker as the gold icon doesn't work well over a full colour image. The brown image with the white icon works really well, I think, and keeps in with the brand guidelines and what has previous been created.
I then went onto Photoshop and mocked up each of the pages, complete with the images.
Main menu:
Bakery/Cafe Menus:
Menu:
Make a reservation:
About us:
Opening times:
Overall I am quite happy with the look of the App. While I know there are definitely some tweaks to be worked out, I do think that the majority of the design is consistent and complete.
No comments:
Post a Comment