As this is only a look and feel, I didn't bother with scamps for wireframes, as they will be done at a later stage, when I start to actually design the website.
I sort of forgot to document the progress of this, as I've not really done any blogging over the summer, so I've had to work backwards, almost. I started off by created a 1366x768 document, which is a fairly standard web design size to work with - the height was later altered to fit all the content, but the width remained the same. Working in 72dpi RGB as it's a web document.
Something I picked up at Bloom whilst working on a website for a client, a quick way to create accurate grids in photoshop is to use Grid Calculator. I opted for a twelve column grid, as it's divisible by two, three, four and six. Grid calculator lets you enter the width, and the you have to play the gutter and margin widths (to reasonable level) until the column width and the page with both go green. You can then download the JavaScript file for the grid.
It's really easy to add the grid in photoshop - File > Scripts > Browse - select the JS file, and it adds the grid to the document for you.
Ignore the horizontal guides, they are there just to get my spacing right, but you can see the vertical guides added by the JS file. The overview of the design is to keep it really simple. Using a large image which would either promote a shoot, or feature OAC's best work. The image can work on a slider, and even have a link over the top - like a button or something.
Below the main image are two sub images. Because of the grid system, there can be even three or four, depending on the clients needs. Really simple, they link out to secondary or tertiary pages within the website. A photography project, or a testimonial, for example. Vertically, I've classed 50px as the spacing. You can see the type below the images, with a spacing of 50px. Whereas the spacing between the main image and the sub images is 100px - to separate the sections.
Working on the nav, I wanted to communicate the different menu actions - active, inactive and rollover. To do this, I added a cursor to the design, which shows the rollover. The Home button is active, and the remaining are inactive.
Leave your comment