I've just been getting some thoughts on a design for my website, now it's several years since I've done anything like this (nearly 10) and this is a very early version, but thoughts so far? It's only a mockup in photoshop at the moment.
thoughts on my initial design
- Thread starter PaulStat
- Start date
![Earth[Tera].bin](/styles/overclockers/avatars/5.png){kind=avatar}
Soldato
- Joined
- 12 Sep 2007
- Posts
- 3,082
Nice and clean. Possibly try adding a small border to the image ( grey colour already in use ).
Soldato
- Joined
- 12 Feb 2006
- Posts
- 17,651
- Location
- Surrey
looks ok. although it looks nice and clean, it's extremely dull at the moment. sorry i can't suggest a way to liven it up
Definitely a good start. 
It is very minimalist (not a bad thing) but there's a few things I'd iron out:
I'd tie the header and nav to the far right to keep your right margin consistent.
It looks a bit odd having the horizontal bar, the image and the disclaimer tied to the far right and then the title and nav inset slightly.
Alternatively bring the horizontal bar back in like with the end of the title/nav.
Similarly, the horizontal bar just 'stops' on the left. It's not tied to anything and looks 'floaty'. I'd either take it the full width to align with the left edge of the body copy or bring it in to the left-hand-side of the main image.
On a similar note, the social-media icons are inset slightly from the left edge of the body copy.
With regard to the title, the K of '.co.uk' isn't aligned to the T of 'contact' and I'd probably shift it down slightly so that it's got equal vertical space between the title, the line and the nav.
If you're going to go so drastically minimal, these little things make all the difference. You could introduce a few little devices like keylines to make everything look connected.
I know the body copy is only a placeholder but you really shouldn't use hyphenation.
The only other thing I would say is that the footer bar is very strong in black, it's fighting with the image for attention on such a muted-grey page. Maybe tone it down slightly (75% black) or introduce a single strong colour (magenta/cyan/green) etc to give it all some character.
Have you thought about rollovers for the nav and any other hyperlinks? What will they do?
I know it's a 'first draft' so I hope you don't think I'm being too critical.
It is very minimalist (not a bad thing) but there's a few things I'd iron out:I'd tie the header and nav to the far right to keep your right margin consistent.
It looks a bit odd having the horizontal bar, the image and the disclaimer tied to the far right and then the title and nav inset slightly.
Alternatively bring the horizontal bar back in like with the end of the title/nav.
Similarly, the horizontal bar just 'stops' on the left. It's not tied to anything and looks 'floaty'. I'd either take it the full width to align with the left edge of the body copy or bring it in to the left-hand-side of the main image.
On a similar note, the social-media icons are inset slightly from the left edge of the body copy.
With regard to the title, the K of '.co.uk' isn't aligned to the T of 'contact' and I'd probably shift it down slightly so that it's got equal vertical space between the title, the line and the nav.
If you're going to go so drastically minimal, these little things make all the difference. You could introduce a few little devices like keylines to make everything look connected.
I know the body copy is only a placeholder but you really shouldn't use hyphenation.
The only other thing I would say is that the footer bar is very strong in black, it's fighting with the image for attention on such a muted-grey page. Maybe tone it down slightly (75% black) or introduce a single strong colour (magenta/cyan/green) etc to give it all some character.
Have you thought about rollovers for the nav and any other hyperlinks? What will they do?
I know it's a 'first draft' so I hope you don't think I'm being too critical.
Definitely a good start.
I'd tie the header and nav to the far right to keep your right margin consistent.
It looks a bit odd having the horizontal bar, the image and the disclaimer tied to the far right and then the title and nav inset slightly.
Alternatively bring the horizontal bar back in like with the end of the title/nav.
Similarly, the horizontal bar just 'stops' on the left. It's not tied to anything and looks 'floaty'. I'd either take it the full width to align with the left edge of the body copy or bring it in to the left-hand-side of the main image.
On a similar note, the social-media icons are inset slightly from the left edge of the body copy.
With regard to the title, the K of '.co.uk' isn't aligned to the T of 'contact' and I'd probably shift it down slightly so that it's got equal vertical space between the title, the line and the nav.
If you're going to go so drastically minimal, these little things make all the difference. You could introduce a few little devices like keylines to make everything look connected.
I know the body copy is only a placeholder but you really shouldn't use hyphenation.
The only other thing I would say is that the footer bar is very strong in black, it's fighting with the image for attention on such a muted-grey page. Maybe tone it down slightly (75% black) or introduce a single strong colour (magenta/cyan/green) etc to give it all some character.
Have you thought about rollovers for the nav and any other hyperlinks? What will they do?
I know it's a 'first draft' so I hope you don't think I'm being too critical.
wow thanks very detailed
, not too critical at all. It is minimal, I like minimal, although I will try and make it a bit less minimal, not too sure how yet? What do you mean by keynotes btw?One of the ideas I have at the moment is for the middle image to be on a slide show type thing that rotates through my gallery images every x seconds or so.
Edit: Took some of your advice, good call on the black credits bar at the bottom
Last edited:
I think a monotone colour scheme is always good for photography websites as it enables the photos themselves to stand out more.
I was going to list a few points about how I would improve it but I ended up just photoshopping some in as I had a spare 10 minutes.
I might be completely off the mark with what you're wanting to achieve, but I guess it's always good to have another spin on things.
I was going to list a few points about how I would improve it but I ended up just photoshopping some in as I had a spare 10 minutes.
I might be completely off the mark with what you're wanting to achieve, but I guess it's always good to have another spin on things.
Last edited:
Couple of things for me...
'paulstathamphotography.co.uk' - maybe fiddle about with typefaces to stop it looking like one long word, possibly remove the .co.uk?
'shopping cart' - sounds american
Could always introduce a colour to tie in with your footer bar, it could be implemented in drop down menus too, i.e. grey button gives orange drop down list.
My shoddy edit
'paulstathamphotography.co.uk' - maybe fiddle about with typefaces to stop it looking like one long word, possibly remove the .co.uk?
'shopping cart' - sounds american
Could always introduce a colour to tie in with your footer bar, it could be implemented in drop down menus too, i.e. grey button gives orange drop down list.
My shoddy edit
As stated above it does look a bit bland, Maybe have a monotone colour scheme with one colour added in, something between #000088 - #0000aa or in a similar colour range. For the pure reason that it makes it look a little more interesting.
Quite nice so far.
Personally I would put a slight texture on the background and possibly a small light drop shadow on the picture to pull it slightly off the page. Need to be carefull to not over cook it though.
Link the "Welcome" by making it bigger as per BFCToms example but change colour to match that of "Photography". This should help to give three distinct areas, the title, Welcome block and the photo.
I would also look for other ideas on where to put the copyright notice. Maybe under the photo in one line ?
If you are going to use the social networking icons, correct their backgrounds to match the green bar.
Having a big white chunk in the top left is so tempting to fill but it may be better to leave it as it is.
Regards
RB
Personally I would put a slight texture on the background and possibly a small light drop shadow on the picture to pull it slightly off the page. Need to be carefull to not over cook it though.
Link the "Welcome" by making it bigger as per BFCToms example but change colour to match that of "Photography". This should help to give three distinct areas, the title, Welcome block and the photo.
I would also look for other ideas on where to put the copyright notice. Maybe under the photo in one line ?
If you are going to use the social networking icons, correct their backgrounds to match the green bar.
Having a big white chunk in the top left is so tempting to fill but it may be better to leave it as it is.
Regards
RB
Huge improvement Paul.
I agree with RimBock's suggestions about the welcome header. Maybe make it a bit bigger, align it to the top of the main image and colour it to match 'photography'.
Textures and drop shadows will help to give the page a bit of depth but as RB says, don't over-cook it. If you feel it's making your minimalist layout too busy then leave it.
If you apply the default Photoshop drop shadow, turn it down to at least 25%.
If you remove the background of the social media icons and save as a transparent .png then you won't have to worry about matching the background colour to your bar.
I'd also leave the negative space at the top left, I quite like it.
I agree with RimBock's suggestions about the welcome header. Maybe make it a bit bigger, align it to the top of the main image and colour it to match 'photography'.
Textures and drop shadows will help to give the page a bit of depth but as RB says, don't over-cook it. If you feel it's making your minimalist layout too busy then leave it.
If you apply the default Photoshop drop shadow, turn it down to at least 25%.
If you remove the background of the social media icons and save as a transparent .png then you won't have to worry about matching the background colour to your bar.
I'd also leave the negative space at the top left, I quite like it.
Thanks again all, started to think about other pages now, it's starting to look pretty good if I do say so myself (with a little bit of help ).
Not sure about the drop shadow thing, as I said on the main front page I'll have it cycling through my gallery every few seconds with a fade between pictures (once I figure out how). Also I'll get round to correcting the background for the social networking links later
Guess I'd better figure out how to code it now
).Not sure about the drop shadow thing, as I said on the main front page I'll have it cycling through my gallery every few seconds with a fade between pictures (once I figure out how). Also I'll get round to correcting the background for the social networking links later
Guess I'd better figure out how to code it now
Last edited:
I would use the same colours you are using for an on-state for your navigation. Other than that, I like it.
Personally though I would get rid of the footer colour and go for something like a light grey #cccccc. I just think using those colours more subtle on your main page headings and navigation would look more appealing and the footer becomes less distracting that way.
Personally though I would get rid of the footer colour and go for something like a light grey #cccccc. I just think using those colours more subtle on your main page headings and navigation would look more appealing and the footer becomes less distracting that way.
Last edited:
Looking really good. I like the sub sections for the nav and the new pages.
The only thing I'd say is keep your headings on the left at a consistent height and align them to the top of the image box on the left.
I'm specifically thinking about the 'Seascape' and 'News' pages because the 'Ballon Accent' and 'Welcome' pages look brilliant.
The only thing I'd say is keep your headings on the left at a consistent height and align them to the top of the image box on the left.
I'm specifically thinking about the 'Seascape' and 'News' pages because the 'Ballon Accent' and 'Welcome' pages look brilliant.