Wednesday, 1 January 2014

OUGD504 - Design For Print & Web (5)

Print Proposals
After completing all the products that will be printed, I started on the printed proposals. These are all the printed material I would make if I had the resources.
The print proposals I will be doing are:

  • Exterior
  • Exterior signage
  • Interior
  • T-shirt
  • Delivery van
  • Advertising posters
  • Takeaway coffee cups
  • Coffee cup
  • Plate
Exterior 

I wanted the exterior to reflect the branding of the business, so kept it very simple and with the colour scheme. There would be frosted glass where the type pattern was, the rest of the glass as normal. As it is primarily a take-away, I imagine it would be quite a small store in general.

Exterior Sign

Like the exterior design, the sign would be simple and keeping in with the colour scheme, just simply the green logo on a white sign, with a grey boarder. This would stand out quite a lot agains the exterior buildings around.

Interior
For the interior I wanted to focus on the typographical pattern, but display it in a way which wouldn't be so overpowering. I tried out different combinations of this with the colour schemes and decided that the one above was the least overpowering, and could work well throughout the whole interior.

T-shirt
As far as restaurant/takeaway staff t-shirts go, they're usually pretty standard and boring, so I wanted to change that for this restaurant. I wanted to have a contemporary feel to it, and make it look less like a typical work t-shirt. I took the two most important features from my branding - the type pattern and the logo - and created a few designs around this idea. The one chosen is the most young and contemporary looking and sits well on a white t-shirt.

Delivery Van
If this were a real restaurant, eventually there would be deliveries if it were to get larger, so I proposed the idea for the van design. Like the rest of the branding, it wouldn't be too overpowering, so I decided against using the type pattern, and just using the logo. I split it into the two separate elements, putting one on the side and the other on the back. Each are recognisable without the other so it would be clear from any angle exactly what it was for.

Advertising/Signage
As advertising can incorporate a large amount of media, I decided to focus on just large posters in the street/bus stop posters as they were all the same format. This means that I can create a variety of designs in the same space and keep a uniformity to them.
As it is advertising, it also means I can use a wide variety of content. So I decided to use both the type pattern and the photographs to create two separate posters for the restaurant.
On top of this I also made a poster design for possible signage and direction to the restaurant if it was close by.

Coffee Cups/Plate
I wanted these to be very simple overall and reuse ideas that I have implemented in different areas of the branding. For the paper coffee cups, I did three different sizes and showed three possible cup covers that could be printed. These show the wide variety that is available for me to do with a small amount of branding. For the cup & plate I wanted to keep them very simple so just used the logo on them.

Website Proposal
After completing the print side of this brief, I focussed my attention on the web-based side, designing a website for the restaurant.

I first started by researching into current restaurant website designs.

Research

The first thing I did was choose the content I would be having on it, and then design around this.
Content:
  1. Home page
  2. About page
  3. Menu page
  4. Takeaway order page
  5. Ampersandwich own range page
  6. Contact page
For each of these pages I did a break down of the navigation.
After doing this I looked back over the branding I did for the printed material and applied it to the website.
I started by drawing out each of the different pages.

When I was happy with these, I drew out two basic grids, one for the homepage and one for the content pages. I wanted to keep the grids quite simple so I have a lot of leeway when fitting the content in. I also wanted to design this website with the idea that when it is viewed on a tablet/phone the aesthetics of it wouldn't have to change much/at all. So I want it to be interactive for someone using a mouse as well as a touch screen.
Grids
I then took these into InDesign.
Homepage
Content pages
I then added the basic content and frames.
Homepage
About
Menu
Takeaway order/ampersandwich own
ampersandwich own product
After doing this for all the pages I input all the content.
The basic idea for the website is that the six main pages fit together as one continuous scrolling page. There will be small arrows at the bottom of each page to put you onto the next, but also a navigation bar which will appear on the page after the homepage. This will be fixed, and when the arrow button is pressed it will be the content that moves instead of the whole page.
Homepage
I wanted to keep this very simple and minimal to fit in with the branding. As it is the top of the website there is a top margin, as there will be a bottom on the last page.

Content page 1 - About
I have decided that the main content pages will be laid out in this format with the same idea that I had when creating the printed menu, the title on the left, the text on the right.
Initially the image behind the title was a square, however using a circle instead looks much better and fits in with the identity of the brand and aesthetic I am going for throughout this website.
I think this works well as there isn't so much information on the page, but on pages like the one above where there won't be much text, it doesn't look bare or pointless.

Content page 2 - Menu
The menu page is simple a PDF of the printed menu as this seemed the most efficient way of displaying it. As it didn't fit the frame placed, I added the typographical pattern.

Content page 3 - Takeaway Order
These pages are relatively straight forward with a simple layout. After the title page I wanted all of the order pages to be very similar and easy to read/see.

Content page 4 - ampersandwich Own Range
There are three page designs to this section of the website. The first is the front page, the second a range choice page, and the third the product page. The product page is the only one which will change, depending on which range is chosen, however the layout of this page will stay the same.
As the rest of the website was quite structured I wanted this page to be a little bit more free, so have given the page three elements instead of just the left and the right side. I think this works well as it looks a bit more playful than the rest of the pages but keeps in the general look of them with the positioning of the text and image.

Content page 5 - Contact
This is the final content page of the website, so has the margin at the bottom to indicate this. It keeps the general layout of the main content pages, but in place of text, there is a map to show the location of the restaurant. This would be a fully interactive map linked to GoogleMaps, so it would be moveable and work in exactly the same way as GoogleMaps does. I also added a line of contact details above as this is what would be on the page realistically.

Website - as if to scroll through the main pages
Overall I am happy with the way the website has turned out and how I managed to design to the same aesthetic for each page and fit the content in a way that it doesn't look out of place if the positioning of one part is changed.
I am completely happy with the content, however what I will be changing is the background image. At the minute it is one of the photographs I have used in the menu, but as this is a typographically themed restaurant, it seems a bit more fitting to having a type-based background.
So I changed the photo to the grey version of the typographic pattern.

Final Website
After doing this, I took the six main pages and applied them to a tablet/phone.
As I had designed the website to work well on these devices, the only thing I changed was getting rid of the typographical pattern, keeping the whole page white instead. This works much better on these devices and gives more room for the content.
iPad View
iPhone View

No comments:

Post a Comment