Interface Design – Vector Graphics

I am going to design a second website interface for my fictitious exhibition ‘The Lost Photographs of Circle R Ranch’ but this time using the vector style of design. Having already designed a header previously to this I am confident to try the whole interface now.

Wire Framing

I start off with 1600 x 1000 pixels as this is going to be large enough for the background, then inside this I mark off the main body. The main body will be the right size for a standard size screen, this is 960 x 760 pixels. Here is my wire frame:web interface design circle ranch western cowboy americana photoshop techniques

I have introduced a ‘teaser’ into this design as I want to make a special feature with a link to the gallery of my photographs. I feel that because this website is ALL about my exhibition and nothing else, so adding extra emphasis onto taking the viewer to the gallery is important.

Interface Design

I have a clear idea in my mind what I want the background for my interface to look like, so using Google image search (2MP+) I search for a desert landscape. The sandy and dry horizon is what I want to use as my background. I then use Illustrator to open the photograph I chose and turn it into a vector graphic. I did this the same way as I have described in my blog post Vector Image Workshop – Creating a Octopus and Header, please see that for instructions on how to transform a photograph into a vector image. So in Photoshop I open the file and resize it to around the size of my document, I have made it bigger because personally I think that the vector image is too big and I only want to include some of it as my background.web interface design circle ranch western cowboy americana photoshop techniques

So now I have positioned the background vector image into the place I want I have now added in a rectangle using the ‘rectangle’ tool. I have filled it with white and reduced the opacity to 10%. I have drawn the box as exactly 960 x 760 pixels because this is going to be the main body of the interface and when I start to add in other elements such as header and footer I want to know where the main body is exactly, also aesthetically I find it works well to highlight the most important area I will be designing. I have put it in ONLY for design purposes, I will remove it later on.

Next I am going to design the header which includes the name of the exhibition, branding and logo. To me this is the most important part of the whole interface design as it allows the style to come through. Having found a number of Western cowboy themed fonts at dafont.com I decided on Carnivalee Freakshow because I found all the others were to modern or too fancy, I wanted a more traditional font. web interface design circle ranch western cowboy americana photoshop techniques

I added a slight shadow to bring the words out of the background. I wanted to use some little pictures as part of the logo as I feel that they are significant to my Western cowboy desert theme. I made them both in Illustrator the same way I changed the background from a photo into a vector image.web interface design circle ranch western cowboy americana photoshop techniques

So this screen shot above shows the lower part of my interface, I have added the navigation bar using another Western themed font and used a ‘outer glow’ in the FX to illuminate it. I have also added the brown rectangle as a semipermanent area for where my hero image will go, as I plan to add this in later on and  want to see how the other elements fit around it. Then I started on adding in the information into the footer such as copyright and my name and the year.web interface design circle ranch western cowboy americana photoshop techniques vector graphic

Now I am adding in my hero image. I have used my photograph of the hanging tree as I think the rounded corners work well with the vector background’s hills. Now I am going to add in a ‘teaser’ to take my view directly to the gallery of photographs. Here is the teaser:web interface design circle ranch western cowboy americana photoshop techniques vector graphic

I have done it the same colour as part of the desert landscape from the background to keep the colour theme consistent for the whole interface design, then using the FX I have added a faint drop shadow. I have used a font that resembles wood as I feel that this is significant to the tree in the photograph. So lastly I add in the social media icons (reluctantly because I feel that they completely destroy what I have designed as they are modern and always have the same little icons, adding a instantly recognisable distraction for my viewer, away from what I have put into the site). Here is the final interface:web interface design circle ranch western cowboy americana photoshop techniques vector graphic

This last screen shot shows the (almost) finished interface. I chose social media icons in colour that I feel are dull and also fit in with the colour scheme of my website. If you look closely I am in the background vector image layer (in the layers box) and I have pressed CMD T (transform), this then highlights around the edge of the vector image which you can see has a white line showing where it is. I have specifically left the vector background image too big as I wanted to be able to move it around at the end, now. The horizon in the background is really important to where it is placed, I either wanted it quite high, making the green sky become a banner/section for the logo, or I wanted to have the horizon quite low, this would mark off the yellow desert as a footer. So as you can see I have chosen the horizon to go along the bottom of the page. This is because I feel that having that much yellow in the design became quite garish and so I felt that the green sky worked better.

web interface design circle ranch western cowboy americana photoshop techniques vector graphic

I am happy with my final vector interface design, I feel that the colours work well together and fit with the vector theme. I have done a almost symmetrical design, although it is not completely symmetrical the logo, navigation bar, hero image all go downwards getting thinner, then I added the teaser which breaks this up. I feel that the teaser is very important for this design as the ‘gallery’ in the navigation bar can easily get slightly overlooked as it fits in with all the other options, so having the teaser is a way of getting the viewer to look at it (using a bright colour) and click on it. Also I feel I have done it well with a Western font so it fits in with my design. So far, this is my favourite interface design!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s