Thursday 9 January 2014

DESIGN FOR PRINT + WEB: WEBSITE DEVELOPMENT

Although the main design production of this brief for me is print based, I also had to create a website to go alongside the website.

To create the website I drew up some thumbnail designs for me to create a variation of ideas.



From my thumbnails I felt that these one's would work with the overall aesthetic of my printed material.

Home

To create my website I used Adobe Illustrator to mock up how the webpages would look like. 


After some consideration I decided to not to include the white boarder around the webpage because I felt it took away from the simplicity of the rest of my work and looked tacky.



I then applied some slider buttons to indicate what images would be on the home page.




I then applied some images of what the restaurant interior would possibly look like and changed to buttons to circles to match the logo.


After changing the buttons I then considered the whole aesthetic of the website and thought it would be better to make them square again to make the design look cohesive.

About


To create my about page I mocked up the about, contact details and address for the restaurant. 



Finally I added the images I had taken from my photoshoot.



Menu



Initially I wanted to propose a drop down navigation for my menu, but when mocking this up it looked slightly over crowed.


I then proposed some side options but the big box didn't look aesthetically pleasing so I decided to experiment further.


I then created separate buttons for each of the options and overall I thought this work successfully.


I then re-added the scroll bar to the webpage as an option for users to flick through the menu and a pdf download option to see the menu in a bigger view.

Reserve



I mocked up the layout of the reserve page with just a simple image and a button which would re-locate the user to an email page for them to book a table.





I then added my images from the photoshoot and experimented with the type.


I then went back to my original mock up as I thought this worked best with the whole aesthetic of the pages.

Overall the process of creating th website was made a lot easier by the thumbnails I created prior. I had a strong idea of what I wanted the website to look like due to the production of my printed collateral. If I had more to for the module I would have liked to attempt at coding and creating the actual website.

No comments:

Post a Comment