Tuesday 14 January 2014

OUGD504: Design for print and web/ Studio brief 3 - Propose website and app sketches.

Today I started sketching up the ideas for both my proposed website and app for the Full stop canteen.
I knew on the website that I wanted to include 'images' of the canteen (photos that I had superimposed to look like the canteen) and so I started to look around.
The venue that I found most suited the dynamic of my canteen was a newly built starbucks in Amsterdam. The restaurant uses mostly wood textures (the printed material is printed on all brown stock) with accents of black (my design uses only black and red inks) and therefore fits within the colour scheme. What also suits about this building is the size, As the canteen would probably be incorporated mostly into larger airports with a heavy throughput of travellers and therefore situated in locations such as London and Manchester, the canteen would need to be large as is this venue.

Images of the venue:





Taken from: source. 

Image that I placed a mock up sign on:


Website sketches:

I looked at the pages I wanted to put on my website and brain stormed what I wanted to place on each page. 
The pages included about us, Menu, testimonials (reviews) and a contact us page. I chose these 4 different pages off of the homepage that would appeal to the needs of franchisers or partners. 




The about us page will be split into two sections; about the company and franchising, These pages will be simple like the homepage using an image of either the restaurant setting (starbucks) or the products in which they sell as a background image. Overlaid over the top will be a low opacity black box containing information about either franchising or the company. Users can navigate between the two by using the small toolbar to the left of the page. 


For the menu page I wanted to keep it as I had designed the physical menu I was producing. Using a brown craft paper texture as the background, and writing over this in black and red in exactly the same design as the printed menu. I also wanted to add a border to this page using the punctuation and letters food pattern I had created, as the nav bar acted as the header to the menu. I wouldn't be able to include the original header into the design which uses this pattern. 


For the testimonials page I used the same kind of idea as the menu, with the use of the vertical borders at the sides. I decided to list the reviews in the format of flight tickets, a motif I had used for the sticky labels used for my printed materials. For the reviews users would enter their name, email, the location they visited, a written review and a rating. I also wanted to place another low opacity box over the top of the content that took shape of a form which users could easily cross off is they are only wanting to read the reviews or fill it in to make a review. 


The contact us page was a really simple idea, I wanted to again use the same layout that I had for the 
homepage and about me page using an image, particularly one that encompassed some of the printed material I had created etc. I then want to place two lower opacity boxes over the top of the image one with contact information and the other a form which customers or potential partners can contact Full stop about something more specific.


App


Next I started up brainstorming the app side of my web proposal. As I had previously mentioned the app had a slightly different target audience and was aimed moreso at the customers rather than any business relations. 
The final concepts I put together for the app were for:
- Customers to be able to see the location of Full stop canteens. 
- Cusotmers to order food before they visit the canteen. 
- Customers to write and read reviews. 
- To vote for their favourite dishes. 

The above image shows my workings out, in which I started to think about what information would need to be presented on each screen for it to be functional, I also thought about how the user would travel from screen to screen, and the the 5 journeys from main menu to the 5 concepts shown above. 


After I had done this I drew up every app screen properly taking design influences and ideas from both the printed material and website designs. All together I will be digitalising 16 app screens. 





No comments:

Post a Comment