[web] Website design comments
I have uploaded a sample page of my upcoming website reworking. It has already been checked for HTML and CSS validity using the w3c validator, and also checked over a wide range of browsers using BrowserShots (there are a few small problems with some browsers, but nothing important so far).
Any comments about the design are welcome!
markup-wise, it's excellent.
But you asked about design, so put on your Critique Shield:
- OMG!!!11 Grey! They have these things called colors now. (sorry couldn't resist). Right now if i was an employer looking for your online resume, i'd say the site makes you look instant-boring.
- Right now it feels a bit dark (mostly because of the top). That's cool for 14 year old MMORPG junkies, bad for business. If this is intended for luring potential employers, probably better to go light. That's a psychological / business issue, not a styling one.
- You might be going for an intentionally flat look. In that case, pick your two (or possibly three if you count text) favorite colors and use ONLY those. The Plume XMMS skin is a good example. I think i even have a sample flat look i mocked up for someone else still online.
- As i'm sure you've noticed, gradients are the big web 2.0 look right now. That doesn't mean you have to use them, but they are cheap and easy and make your site look instantly better.
- Box Borders are a decent standards-compliant way to jazz things up. Remember that you have lots to choose from: solid, inset, outset, groove, ridge, dashed, dotted. And you can vary the width or only have them on some sides.
- A drop shadow here or there would make it less flat.
- Consider using background texture for the non-text-essential areas. Paper, krinkle, low-key brushed metal, cross-hatch, or something simple like that.
- Consider using off-black instead of black for the text color on spaces of white. It's easier on the eyes for bright monitors but no one will notice the change, only that it "feels" nicer to read. (use #333 or #666). You could also go the other route and change the bg color of the text blocks from white to off-white or cream.
- Consider images. Not necessarily pictures, but just some simple accents for the different page elements.
- A logo or other site branding would help a LOT.
But you asked about design, so put on your Critique Shield:
- OMG!!!11 Grey! They have these things called colors now. (sorry couldn't resist). Right now if i was an employer looking for your online resume, i'd say the site makes you look instant-boring.
- Right now it feels a bit dark (mostly because of the top). That's cool for 14 year old MMORPG junkies, bad for business. If this is intended for luring potential employers, probably better to go light. That's a psychological / business issue, not a styling one.
- You might be going for an intentionally flat look. In that case, pick your two (or possibly three if you count text) favorite colors and use ONLY those. The Plume XMMS skin is a good example. I think i even have a sample flat look i mocked up for someone else still online.
- As i'm sure you've noticed, gradients are the big web 2.0 look right now. That doesn't mean you have to use them, but they are cheap and easy and make your site look instantly better.
- Box Borders are a decent standards-compliant way to jazz things up. Remember that you have lots to choose from: solid, inset, outset, groove, ridge, dashed, dotted. And you can vary the width or only have them on some sides.
- A drop shadow here or there would make it less flat.
- Consider using background texture for the non-text-essential areas. Paper, krinkle, low-key brushed metal, cross-hatch, or something simple like that.
- Consider using off-black instead of black for the text color on spaces of white. It's easier on the eyes for bright monitors but no one will notice the change, only that it "feels" nicer to read. (use #333 or #666). You could also go the other route and change the bg color of the text blocks from white to off-white or cream.
- Consider images. Not necessarily pictures, but just some simple accents for the different page elements.
- A logo or other site branding would help a LOT.
Seeing it was jarring at first. After a minute, it's not nearly so jarring, but it was quite a shock at first. But I can't pin-point why it was so jarring. Here's my guess anyways:
You start the top of the page off with a black background, then you move onto a dark gray, then a lighter gray, and finally white. All of this is fine, and creates a nice little stacking effect, as if each section is on top of the previous one. So far, not bad. Then we get to the titles! We switch back down to the black, hurling me down the stack of sections back to the top. And *bamf* I hit the ground hard.
Well, that's my best guess at least. I played around in Firebug for a bit with it. IMO, putting the headings inside of the white section or using a light, non-gray color for the headings' background color is an improvement.
Hope that helps.
You start the top of the page off with a black background, then you move onto a dark gray, then a lighter gray, and finally white. All of this is fine, and creates a nice little stacking effect, as if each section is on top of the previous one. So far, not bad. Then we get to the titles! We switch back down to the black, hurling me down the stack of sections back to the top. And *bamf* I hit the ground hard.
Well, that's my best guess at least. I played around in Firebug for a bit with it. IMO, putting the headings inside of the white section or using a light, non-gray color for the headings' background color is an improvement.
Hope that helps.
My opinion:
The menu feels confusing. Is the second line a submenu of the main menu? If so, make it more clear by perhaps using a smaller font size, lining them out properly or grouping them together by something like a shared background or bordering. The menu highlighting by changing the background color only slightly is too difficult to quickly spot.
The title bars (resume, teaching, development) are too obtrusive, and one of the side effects is that the title and text underneath it no longer form single logical/graphical unit.
The "logo" and menu could do with some more margin around them. There should be room enough on a page to waste some white space.
Because of all the shaded rectangles in the background, the design looks very "blocky". Removing some of them will make sure that any text (which is more irregular by nature) will give it a softer feeling.
The contrast in colors is to extreme, making to layout look very busy, especially if you try to convey fairly serious information. Try to tone down the black or dark gray areas, and use some small variations on the orange color to make it a bit less intimidating and easier on the eye.
To be honest, the current design of your web site looks better than the new one to me: it could do without the horizontal and vertical lines, and the menu could be made a little nicer, but overall it's not too far off.
Successfully passing the validation tests is great, but that's normally done after a design is completely set and converted to HTML. It's not something you want to worry about too early.
The menu feels confusing. Is the second line a submenu of the main menu? If so, make it more clear by perhaps using a smaller font size, lining them out properly or grouping them together by something like a shared background or bordering. The menu highlighting by changing the background color only slightly is too difficult to quickly spot.
The title bars (resume, teaching, development) are too obtrusive, and one of the side effects is that the title and text underneath it no longer form single logical/graphical unit.
The "logo" and menu could do with some more margin around them. There should be room enough on a page to waste some white space.
Because of all the shaded rectangles in the background, the design looks very "blocky". Removing some of them will make sure that any text (which is more irregular by nature) will give it a softer feeling.
The contrast in colors is to extreme, making to layout look very busy, especially if you try to convey fairly serious information. Try to tone down the black or dark gray areas, and use some small variations on the orange color to make it a bit less intimidating and easier on the eye.
To be honest, the current design of your web site looks better than the new one to me: it could do without the horizontal and vertical lines, and the menu could be made a little nicer, but overall it's not too far off.
Successfully passing the validation tests is great, but that's normally done after a design is completely set and converted to HTML. It's not something you want to worry about too early.
oh my, look at all this free time i have today - i should be doing something useful.
Revamp - just changed the CSS
Revamp 2 - added some random picture i found on google. the title area is ripe for an image.
another thing i noticed is that the left-alignment of the text is totally wacky in the original. The H1, P's, H2's, and nav LI's all start at different places. so i lined those up here in the revamps.
hopefully something to spark some ideas. just playing around*.
* i don't recommend, endorse, promote, or otherwise plug these examples
Revamp - just changed the CSS
Revamp 2 - added some random picture i found on google. the title area is ripe for an image.
another thing i noticed is that the left-alignment of the text is totally wacky in the original. The H1, P's, H2's, and nav LI's all start at different places. so i lined those up here in the revamps.
hopefully something to spark some ideas. just playing around*.
* i don't recommend, endorse, promote, or otherwise plug these examples
Basically it needs more colors, images, and less of a box-you-in kind of feel. I felt like I was in a concrete block [wink]
The grey, the sharp edges, and the headings spanning across the whole page don't work for me.
But I'm glad it's not fixed-width and it uses proper HTML/CSS!
The grey, the sharp edges, and the headings spanning across the whole page don't work for me.
But I'm glad it's not fixed-width and it uses proper HTML/CSS!
The revamps look a lot better than the original, but the first thing that popped in my mind when I saw them was "Eeww... pink!".
Quote:Original post by Sander
The revamps look a lot better than the original, but the first thing that popped in my mind when I saw them was "Eeww... pink!".
Well, probably my 6yo CRT monitor. It's going bad. It changes color from dark to light as i type. It looked like orange & brown to me, i swear!
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement