My first blog, showing the process of learning to research, design and build a website.

Interface Design – Textures

I am going to make my final three interface designs, starting with the theme of using ‘texture’ in the design.

I have been thinking about what textures I want to incorporate into the design as I feel that the textures must relevant to what my fictitious exhibition is of, so because all my photos were taken at the ranch there are some textures that will work really well such as, wood grain, sand, leather and (old) paper. Before I start any of the design I am going to draw out the wire frame so I can plan where everything will be located.

Wire Framing

Here is a plan of the wire frame, I have blocked out the areas for the interface design so that I can assess what works and what doesn’t and move the areas around until I am happy with a effective layout.I have used the ‘rectangle’ tool to mark off each area, then used the ‘text’ tool to label each one. Here is the final wire frame:

To start off I created my interface as the dimensions 1600×1000 pixels for the whole canvas, this is because the interface needs to fill any size screen, even the large screens (although I don’t use one) so that there is always some ‘background’. Here the background is white, then inside of that I made the main body which is in light grey 960×760 pixels. The main body is this size because that is the standard size for a computer screen, I don’t want to it be longer or wider because other wise the viewer would have to be scrolling up, down, left or right to be able to view the whole interface, I don’t want this because its not appropriate for the viewing of a home page.

Interface Design

So now that I have marked off each area I am going to work OVER it in Photoshop, so I bring in a background image and ‘hide’ the layers that I don’t want to see at this time. For example in the screen shot below, I first of all hid the wire framing layers so that I could work on the background design, then I ‘unhid’ the layers to get a idea of what it will look like when I have added the rest of the areas.For the background I used a two images, one of the wood grain, and the other is off some dirt/sand. I then used a ‘Layer Blend’ between them to get what is in the screen shot above. I chose the one ‘Darken’ because I wanted the wood the stay more prominent and the dirt/sand layer to add some more texture on top of the wood.

Now I am happy with the background I am going to add in the ‘main body’ area with another texture. For me the wood is going to stay the main texture of the whole website so for the main body I am going to add something quite subtle that just differentiates the main body slightly from the background. I chose a texture of a old folded up piece of paper, this is what it looks like: (I have hidden the wire framing layers also)So this screen shot shows the ‘main body’ as the piece of paper over the background, but I want to use another Layer Blend so that the main body becomes part of the background, this will create more texture on top of the background to show the where main body differentiates from it. I have chosen the Layer blend ‘soft light’, see my final interface design below to see what it looks like!

Now I am going to design what I think is the most important part, the Header and the logo, combined these two elements help to create some branding and also some character to the websites style/theme. The font used in the logo is what allows this to come through. Because my website is about a Western cowboy themed exhibition I have chosen a very Western font as this truly suits the interface design that I am trying to achieve. Below is a screen shot of the header and logo:So this screen shot was taken when it is not finished..! The logo (letter ‘R’) I made in Photoshop separately to this file so that it is transparent and therefore shows the background underneath it. I have done this because it is meant to symbolise the branding iron that is used to identify animals on a farm or ranch. For the writing I have used a font that I downloaded from dafont.com. This website has a huge selection of Western themed fonts to download. I have used one called Carnivalee Freakshow and chosen a rustic deep maroon red as I feel this adds to the theme well. I have then used the FX to add more detail and 3D-ness to the text to make it stand out and have depth. I have added: inner shadow and a drop shadow, although it is quite a small image here please see my final image for a better look. I used the character palette to move the text nearer as I wanted the top line and bottom line to be almost touching. I am very happy with my logo and branding as well as the background for the Western theme.

Next I add in a navigation bar, I only have a primary navigation bar as I only have a few different options because it is quite a simple site and I am not trying to sell anything or advertise anything. For this I chose a similar but different font to the logo, also when designing I decided to change the location of it. As showed in my wire frame it was on the left of the hero image, but I decided it looked best just above the hero image instead.

Next I added the hero image, I chose this one from the project as I feel it is one of the better images, also it is a portrait not landscape which makes people respond to it more.

Then lastly in the footer I add in my name and ‘copyright’ symbol in one corner and also some social media icons in the other corner.

Here is my final interface design belowI am very happy with the final result of this design. At first I thought the idea of having a whole website based around textures as I felt it would be ‘too much’. But then having thought about the images I am using for the fictitious exhibition I then thought about what textures would really suit what the exhibition is about and then in my mind it all started to come together. I want my interface design to be very clear and none of the textures to take over from the images, for example the textures layered up with all the elements could look messy or cluttered. The last thing I did to the design was add a simple thin black border around my hero image as it needed some definition from the background as a lot of the colours that I have used are quite similar, but this is because I think that they add towards the Western theme, browns like wood and pale yellows like sand. I have also used this colour theme in the social media icons, as although usually they all have their own distinctive colours (which is part of their easily distinguished branding) I thought having blue or red or bright colours would really destroy the design I have done and become very eye catching to the viewer as they would really stand out against the rest, so I chose a yellow for the social media icons to make sure they fitted in with my sandy theme.