Texture Design Workshop – Creating a Interface for Sussex Skateboards

So now that I have learnt how to make a header using two layers and a layer blend to combine them to create a texture, and then adding text I am now going to do this again, but not just create the header but create the whole interface design for the website Sussex Skateboards. I am going to do this in Photoshop and I want my home page for this website to be the standard screen size so open a new document at 960 x 760 pixels, 72 dpi RGB. I am going to design the website with a grungey style as this is what is popular with the target audience of the website which is skateboarders, mountain bikers, and this kind of sports, whilst also having a youthful appearance as it is very popular hobby with teenagers.

To start off with before I start designing any textures, colours, fonts, etc I am going to draw out the wire frame for the layout of the website the same way as I have done in the wire framing workshop. Marking out the designated areas in the wire frame allows me to pick up and move around the elements I have included such as header, hero image, navigation bar etc as much as I like until I am happy with the layout. For this design I am already going to have a background image and a hero image on top so firstly I am going to create a header and I don’t want this to be a photograph as there is already two dominating the website so I am going to create a grunge texture which then I will put the text on. I searched Google Images for ‘grunge texture’ to find the one I used but here is another website for finding them. Because I have already been looking at photographs to use as the background I have chosen one that has quite a lot of blue/teal in it and made the header this colour which I took using the ‘colour picker’, this meant that I colour then lay the texture I had chosen of concrete over the blue/teal and then choose a suitable layer blend option. I wanted the cement texture to be prominent so in the blue/teal was only showing in a small area of the header, I feel this colour from the image below gives the design some colour consistency Once happy with that I then chose a font and used the ‘FX’ to give it a inner glow and outer shadow, this making it look really 3D. I also add the navigation bar here as well making sure it stands out so that the viewers eye is drawn to it quickly.

So now I have a background image in place and the header with the branding and logo, so I am going to choose a fairly ‘open’ hero image, by open I mean I don’t want it to have anyones faces, any other brands/branding such as Etnies also I don’t want a image of anyone doing any impressive skateboarding tricks because this might make younger and inexperienced skateboards feel it is a ‘pro’ only site, I want a image that speaks to every skateboarder so I have chosen something quite unfussy, basic and modest.

skateboard sussex interface design

I have changed the font style for this navigation bar as I feel its not easy to read. See updated version below.

I have chosen to place the hero image in the middle as I want to have the teasers either side, on the left I have put the teasers as links to go into the shop to buy the merchandise and on the right hand side I have made two very pronounced buttons to take the viewer into a gallery of images related to the company and also to the sale items. I created the texture on the teasers to make them look like buttons, I did this using the ’rounded rectangle tool’ and then altering them in the ‘FX’ to create the 3D effect. I used a inner glow among other effects, to create the look of ‘lit up’.

Now I add the very important social media link icons at the bottom to allow viewers to instantly go and follow the company on Facebook/Twitter.

Lastly I am going to add more texture as I feel all the lines and colours are still quite clean cut and not grungy enough yet so I am going to use the ‘brush’ tool as a stamp to create this texture on top of what I have already done. Using the brush tool I add more texture by choosing a appropriate colour, I have chosen a dark grey from the concrete and a dark red burgundy which is similar to rust and used the different brushes I have stamped them randomly to add to the texture. Below is my finished interface.

skateboard sussex interface designSo this is my finished interface for Sussex Skateboards. I feel that adding in the texture in the logo, header, and the teasers, as well as around the edges works well because it brings the design to life, like I said before about adding that 3D effect it makes the buttons really stand out. I have done a glow around the navigation bar and the teaser on the right as I wanted to make them stand out more than the left hand teasers. I feel that there is  a lot of empty space around the bottom of the page, but because I am designing as a photographer I think that its really important not to take away the essence of the photograph by covering it up with lots of other elements. So this is why I have left this open space.



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s