Saturday 11 January 2014

OUGD504- Digital Development

PRINT

Menu

For the menu I decided to make it so it opens from back to front instead of front to back because Japanese books read like this, so I thought it would add to the concept of the design.



I started off in Illustrator to map out the layout of the from and back. I decided to keep the cover black to match the bowls and plate.



I felt the inside needed something more so I started to experiment with blocks of colour.  


I was experimenting with different shapes and got the idea to arrange the shapes to suggest the image of a dragon. Japanese dragons were associated with Gods and they have three claws which I thought was appropriate for the design. 


In Indesign I started to layout the content. For the smaller copy I used the font Tw Cen MT. I decided to use a sans-serif font for the copy for better legibility and readability.

Because of the pop-up on the front cover I have designed the pages to have a half circle cut out of the top. This should improve the functionality of the menu and allows the logo to be on show on every page.




While I was laying out the copy I started think about adding some character to the pages. First I tried lines of black across the top and bottom but this looked too sickly as there is a lot of black the cover.



I was looking at the square plate and bowl that I am using, this made me think about using squares the highlight areas of the page.


I wanted to keep a lot of white negative space to balance out the black of the covers. 




Because I want it to open from back to front I realised I need to swap the drinks section round with the rice and sides. This means the drinks will be the first page, followed by the main menu, and the sides and rice on the last page. 

Final Designs 




Final Designs 



Outside Menu


I was walking past a restaurant in town and I realised most places have a menu outside so people can have a look before deciding weather to eat there or not. I made a simple menu to be displayed at the front of the bar. It has the dishes that are served on it, I left out drinks as I didn't think it was necessary for an outside menu.


Chopstick Holder/Packaging 


Grids


I created some guidelines on each document to remind me where they need to fold.


I tried a few variations of designs and colour ways for the chopstick holder. I think the top two are best suited because they are simple. I don't want to over do the design for the sake of having the stripes on them. I think the minimal approach best fits the overall identity.

Final Design 






I did the same for the chopstick packaging. I like the the far right design but I realised it might not go with the rest of the branding because of the high amount of white. I am going to reverse the colours to see if that better suits.

Final Design





This will be the final designs for the packaging. I decided to keep it simple because it has the most impact and works with the other material.


Coaters




The coasters are the same design as the chopstick holders to keep it consistent. I will print them double sided so they can be reversible.


Business Card



I made the business cards square to relate to the shape of the table ware. I will print the front and back separately and spray mount them with a layer of red card in-between.


Promotional Flyer 




The flyer will be printed double sided, I can use the front the propose posters or bus add etc...

WEB

Desktop Layout

Homepage



I decided to use the same design as the inside of the menu for the home page to keep continuity.


To indicate that the headings are buttons, a red line will appear when hovered over.


Menu Page


I decided to have the drop down menu on the right to mirror the physical menu as this opens from back to front.


 When on the menu page the link will appear red as an extra indication.


The links on the right open a drop down menu when clicked to display the menu sections. I made a box with the opacity lowered to help distinguish the content from the background. 



Contact Page




I sourced the map from google maps to illustrate how it would look. 


The social networks icons have flat backgrounds but I wanted to use a shadow effect on the letterforms to help distinguish them as links.





Final Designs



Ipad and Iphone layouts


The iPad and phone layout will be the same design. I removed the side sections of back and enlarged the text to compensate for the screen size.


The menu section will be type as buttons that can be pressed to take you to the menu content. The red arrow on the bottom left corner takes you back to the list.




The contact page is the same size as the homepage. The logo can be pressed to take you back to the homepage.


I have made horizontal versions as well to adjust when the pad or phone changes orientation. I left the negative space round the sides because I think it works well and creates space for the eye to rest which helps on a smaller screen.


The menu page is the same layout but I moved the back button to the left to utilise the space.




Final Designs



Ipad ordering system




My original design had the menu buttons at the top but I found it worked better to the left.


How it works is the red section of the buttons can be pressed. This swipes the screen to the right and the menu content is revealed.


The send button is pressed when the order is ready to be sent to the kitchen.


I originally had the logo in the center but I think it works better above the buttons as it fits to a grid.


This is how it will look when the menu buttons are pressed.


I separated the content with lines to help make it clear with section aligns with the quantity section.


To choose the quantity of selection the user will press the plus button to add dishes and the minus incase a mistake is made or the customer changes their mind.



I added the separation lines to the main page and the plus/minus boxes for extra ease if an alteration to the order is needed.


So, once the choices have been input they will appear on the main screen. To return to the home screen the user simply swipes the screen to the left.


Final Design 


The image above illustrates step by step how the ordering system would work.

No comments:

Post a Comment