January 17, 2011 § Leave a comment
For this project we have to redesign the interface for a website that we chose before. First thing was to analyze it and make a report through a form that the teacher gave us during the course ( see the report ).
The website that I chose is for a restaurant – caffe, situated in USA, it is called Rebar Modern Food. I found it on Google, I searched modern food and it came out in third position (www.rebarmodernfood.com).
I redesigned three different interfaces with three different styles for it. I chose to remake it with a grunge, vector and minimalist style.
In the original website they have some cliparts, I think they want to be friendly because they aren’t a big company so they want to have more relation with the customers. First thing was to design with Adobe Illustrator all the illustrations.
Then I transfered them in Adobe Photoshop to compose the interface. To make the container I used a picture of a diary that I found on internet. With Photoshop I added the shadow duplicated and reflected it to make the reflection. For the reflection I added a layer mask and a gradient tool and regulated the opacity.
I chose a diary that gives an idea of daily and freshness because it supposed to be something that change everyday.
I gave to the characters a white stroke and a shadow so they look like stickers pasted on paper.
For the text I chose three kind of fonts. One is Lobster (I downloaded it from www.dafont.com), one is Arial and the last one is Bell Gotich Std. I used Lobster to give more details and style to the design because it looks like a script but it is very readble. I used it for the navigation and for the main text. I used Arial for the longest paragraph because it is easy to read and we know that people go on the website to read the content. For the right sidebar I used the Bell Gotich, I think it is very readble and useful for those kind of informations.
I like this interface: it is happy and colourful. I only made two example pages because drawing with Illustrator require a lot of time.
For this interface I chose a minimalist monochrome style. Although they are only in black and white the photographs from the original website are very good, so I tried to use an minimalist interface to complement them.
After I downloaded the photographs I made an header with them that looks like a mosaic or a black and white film strip where you can see the restaurant’s life and the people working there.
To divide the interface’s sections I used a simple yellow line. I chose that colour because it’s associated, in the colour theory, with food and because it gives a very high contrast with the black and white pictures.
For this interface I used only two fonts: Arial, bold in the title and in the navigation, and regular for the content and Bell Gotich in the navigation.
In the internal pages I added a left navigation and some details as hand drawn style vectors (you can see the arrows in the left navigation and the stars on the bottom-left). I downloaded them from www.thinkdesignblog.com .
I like this kind of interface, it is very simple but at the same time very stylish.
It’s good for a business that on one hand wants to show itself through the pictures in the header and on other hand wants to communicate style and simplicity.
The idea behind this interface is to communicate a life style. It’s very common for a cafe/coffee brand.
I tried to communicate a vintage life style but also a sense of global and multicultural community.
For the background I chose two different paper textures, to give a sense of vintage, and I blended them on a big image taken from the Rebar’s pictures gallery. The image shows a detail of the restaurant ( a chinese figure with the black board menu on the background) that I feel communicates the idea of a global world.
The navigation is a simple black stripe where the opacity is regulated on 30%. The navigation’s font is Bell Gotich Std. The circle around a selected page is a vector found in an arrow’s collection downloaded from www.thinkdesignblog.com.
The container is a rectangle made with the same paper texture of the background which I then applied a shadow to. The ornament on the bottom-left is a vector found in an other collection but from the same blog (www.thinkdesignblog.com). For the content I used Arial Regular.
The right sidebar appears like something written on the serrated paper. For it I used a script font called Throw My Hands Up, downloaded from www.dafont.com, and a Bell Gotich Std.
In the internal pages I also added a left navigation made with the same texture of the container and some details from the same vector’s collection of the circle in the navigation. You can also see some details in the container corresponding to the different pages, for example a transparent glass of wine in the page Wine List or a notebook in the page Recipes.
I like this style interface; of the three I think this is maybe my favourite interface because I think it is appropiate for this kind of business and it is useful to communicate a life style.