New Design

Associate
Joined
2 Nov 2004
Posts
582
Location
London, UK
Had a bit of free time since exams finished, so started on something new to pass the time. Contact form does not work yet, everything else should be functional. Comments and critism welcomed :)

http://www.simplestuff.co.uk/summer/1

I'd also like to know if you think its any better than the current.

Thanks :)

EDIT:

Here is the second rendition:

http://www.simplestuff.co.uk/summer/2
 
Last edited:
looks good mate.

Only sugestion would be about the bottom Contacts bit and or text on the Current Work section headings might look better centered and not to the sides.
 
I'm not sure centering the titles would work, because of the slants it would look a little cramped.

Thanks for the suggestion though, I'm still fiddling :p
 
Personally, I'd create a 4x4 and have 'Current Work' and 'Contact' side by side, the same size as 'Welcome' and 'About'.

Or at least stretch the 'Current Work' block so its inline with 'About'.
 
The main body of type/content could do with some tracking/leading. The slightly skewed content boxes don't contrast well with the rigidity of the layout and text. Have you thought about designing with a grid? At the moment the overall layout is lacking, the headers aren't aligned to content and are generally all over the place. It's very web 2.0 in look/style, which isn't to my taste, to many superfluous gradients and nicey nicey recflections. The header graphic doesn't fit at all, it looks like you were redirected to your site by another site but their header graphic has stayed atop the page.
 
The main body of type/content could do with some tracking/leading. The slightly skewed content boxes don't contrast well with the rigidity of the layout and text. Have you thought about designing with a grid? At the moment the overall layout is lacking, the headers aren't aligned to content and are generally all over the place. It's very web 2.0 in look/style, which isn't to my taste, to many superfluous gradients and nicey nicey recflections. The header graphic doesn't fit at all, it looks like you were redirected to your site by another site but their header graphic has stayed atop the page.
Thanks for the comments.

I totally agree with your last comment, now all I can see is a dodgy frame at the top. With regards to the skewness, that was the general idea, ordered mess if you like. I'm not entirely sure what you mean by "tracking/leading", and by grid do you mean a simple 4x4?

I wanted to get away from a very neat, structured layout, but I may have to go back to the drawing board.

Thanks again :)
 
Tracking and leading are the fundamentals of typography. The grid is the mainstay of structed and good design. You can read about it in a 5 part article here.
It's quite mathematical, it involves dividing up the page by it's aspect ratio and so forth.
 
leading is the space between lines. Try reducing this in CSS. Kerning is the space between letters. And the often used helvetica typeface tends to look best when slightly negatively kerned making it tighter.

If your doing design you should know this. Google basic typography and that may help you. Also try the post about jon hicks i made in the HTML forum a day or two ago.
 
Kerning is the space between individual letters, which you wouldn't really use for body text, mainly for titles/headers. Tracking on the other hand controls the overall letter spacing. As for the typeface, that most certainly isn't helvetica.
 
Sorry, your right, got my self a bit muddled there, but I was not saying it was Helvetica but pointing out that helvetica tends to look best when the space between the letters is slightly less than normal, I was trying to illustrate that it makes a difference to how it looks.
 
Personally, I'd create a 4x4 and have 'Current Work' and 'Contact' side by side, the same size as 'Welcome' and 'About'.

Or at least stretch the 'Current Work' block so its inline with 'About'.

I agree with Mr.Sly the contact needs to be a stand out point further up for symmetry IMO or create a new page for it but thats defeating your design a tad

Tbh I like what your using now it's quite nice
 
Cheers guys, I think I'm going to have to start over, I've got a few more ideas. I appreciate the links above aswell, I'll have a read of those before I set out on the next one.

:)
 
Managed to knock something else together, I think I'm happier with this one, a little less gothic. I have had to resort to png's for some of the transparency effects, rather than gif's with matte, so at the moment it will look horrible in IE 6, if I decide to go live with it, I will obviously have to rectify this. My only other gripe at the moment are my h1 styling, but I'm working on this.

Comments appreciated :)

http://www.simplestuff.co.uk/summer/2
 
1 is much nicer for me to look at than 2.

With regard to the png transparency stuff, there's a good way to get it working in IE6 with some limitations (no background repeating/positions) but it works. That guy who owns the iblog is going to call me a big hypocrite, but I don't care! I wrote a post on how I incorporate PNG transparency in IE6 this and it actually works pretty well. The website the original fix comes from doesn't give too much insight into how to get it working so hopefully that'll be helpful.
 
This is much better, still some issues though. The line spacing of your main content is still a tiny bit too much.

it reads like this,

kind of annoying.


Lose the blue on the headers and the effects, they look kinda kiddy. The red would work much better, blackgrey/red/white is a good colour scheme. I'm not fond of the font you used for titles/headers, something bolder/cleaner definitely would make it feel more contemporary and professional.

Here's something I whipped up, I didn't correct the leading on the content (just an idea really);

samplecopysh0.jpg
 
Last edited:
Back
Top Bottom