OK, so part of what daisy wanted me to do included mocking up a website to send to a web developer in order to construct a website she's happy with. We had a brief discussion about the kinds of things that she wanted to do. She gave me a list of a few websites that stylistically she wanted to capture:
http://www.sandykim.com/http://www.cookseystudio.com/http://fashiontography.blogspot.com/http://www.bonrobot.com/As you can see, they're all very clean, basic and minimalist layouts that don't involve a lot of motion necessarily. She said she wanted something like these, but specifically employing a black background with everything reversed out against it.
She also stated that she really liked the ligature on the logo between the S and the W, she wanted the S's on menus etc. to always join with whatever letter is to it's right. So here's me quickly messing around with the categories she's given me, trying to make the S's into ligatures, again using century gothic, which has seemingly become the font unanimous with her as a brand.
Sections Daisy wants:
I had to make the S lower, and Ollie pointed out how odd it looked to have the letters at a different height, so I decided to extend the stem, turning the t into a full sized, lower case t.
The h had similar problems, where I was forced to reduce the height of one stem, but because the other one extends to the same height as the rest of the type it works quite well, giving it quite a quirky appearance that I like.
I also decided to be quite cheeky and use the w from dsw upside down as the m for home. I think it works quite effectively and helps to tie the menu and the logo together even more.
Here's a quick look at a basic page layout with the menu dropping down the side. I decided to include a 2 pt weighted line to divide the logo and the rest of the menu, and then worked out how to align the contact details with this menu. Which looked ok, but I quickly realised that the line between the menu and the logo was sperfluous. I also hadn't used a line like this in anything else in Daisy's promotional material, and so it didn't really make sense to do it this way.
Once I'd removed that line, I started looking through the photos that Daisy had given me for the publication and to start mocking up this website. I found this one of her in some underwear that she'd designed and the humorous yet macabre aspect of it really suited the brand, and given that it was a portrait of her, I thought it was a good photo to put on the homepage. This can obviously be substituted or updated in the future.
Just making things align to the menu and that they all align left to the same margin, which is exactly 20 pixels away from where the drop down menu is., providing adequate space for the eye to recognise that the menu and the information are to be read separately.
After I'd done this, I decided to blow the image up to take up the entire background of the webpage, I thought all the images she'd given me were 300 dpi and so this would be ok, however the ones for this shoot were only 72, causing it ti pixelate. It kind of made what would have been quite a nice effect impossible, because she doesn't seem to possess any larger quality images.
Once I'd got this page designed, I began to look at the work section. I quickly realised that the optimal layout is not having the options down the side, but along the top, this provides space down the side for further menus, so I could put the different names of her portfolio linked to that work along the side.
Final home page (minus replacing text)
Once I'de done this (talked about below) I went back and addressed the homepage in this fashion. I took out a few of the sections of the website out for a few reasons, one; it wouldn't fit at a readable and adequate point size, two; something like stockists can be put in contact details, 'the published in' section can be removed and this information can be added as a bit of information about each product that she's done.
With what's been said before, I began mocking up a work section using some of the photos Daisy had given me and knowing the names of those projects. I didn't know the names of the rest of the work that she wanted to include though, so I basically just but in some silly words of varying lengths to create the illusion of a lot of different projects. I ensured that the photo aligned with both the vertical menu to the side and the main menu along the top to create some order.
I quickly tried to put in the colourful logo that I'd so far used in the business cards, but I don't think I like it on the business cards and it certainly doesn't work in this setting so never mind. I may have to tone it down a bit in the stationary anyway, because my personal view is that it looks a bit tacky.
Up till now, I've been working with a circle to use as a marker on the menu to indicate what part of the website people are currently on, but I tried an underscore on the side menu to see what it looked like. I don't think the break in continuity is very effective though, so I stuck to a circle for this menu too. I also added a previous and next bit at the bottom to allow people to scroll through the photos of the project. Daisy specifically requested that there be no pop out windows for ehr work, I'm inclined to agree because it reduces the functionality of the website and makes it much harder to navigate.
I then added a bit of information at the top of the photograph by moving the photo and the prev & next down. I just put basic information about the photographer, what daisy designed and also the make up artist, which can be added or removed if neccassary. This bit might need a bit of a play with because I need to put a bit of an 'about this project' section on the same pages, so it's possible that all this will move to underneath the photograph.
This is the same thing mocked up but with a different project just to demonstrate to Daisy that the website layout is basic enough to work with most photographs that she's going to want to stick on there. I may need to tweak it in the way stated before. With this image, I made sure it was aligned far right with the main menu along the top and at the same height to the prev. and next. buttons as the last photograph, this way despite different image sizes there will be a consistant placement for the images.
Finally I went back to the contact page and redid this in the style of the rest of the web page, with the menu running along the top and the contact details running a long the top. I'm going to need to change this to input a list of different contacts, i.e. different stockists and photographers as well.
All in all, I'm pleased with the direction this mock up is heading in and it was quite easy because it was informed by most of the other work, I've been doing for it, it just needs a few little tweaks to demonstrate everything I need it to to the client. Once this is done and probably after hand in (I don't have time to devote to this when it's not technically gradeable, plus she's not in a real hurry for the web presence) I will break it into components for a web developer to work with.
