Sign in to follow this  

[web] Critique my new design please

This topic is 4361 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

It's been a while since I did anything usefull with my own website (aside from hosting pics on it), but I thought it's about time I did. So, in between the GDNet menu's and a customer's site, I've been working on my new layout. What do you all think of it? I developed it under FireFox but so far it seems to work with IE 5, 5.5, 6.0, Opera and Links without any CSS hacks (the design is far from finished, and I only add CSS hacks at the very end).

Share this post


Link to post
Share on other sites
Looks perfect on Safari, too. I especially like the fonts and the overall design. However, those header blocks draw a little bit too much attention if you'd ask me. Very well done!

Share this post


Link to post
Share on other sites
Thanks. The fonts I used is basic "Bitstream Vera Sans". Internet Explorer users probably won't see them though, but get the default font instead. Once the overall design is done, I'll have to find some MS fonts that match them for IE/Win users (I'm running my IE's on Linux).

Share this post


Link to post
Share on other sites
Overall, I think it looks great. The main problem I have with it is that I never really liked three column layouts where the content is pushed to one side. It makes the site look lopsided to me. I prefer it when the content is in the middle column.

Share this post


Link to post
Share on other sites
There's going to be contents in both the left column as in the middle column. The left will be used for articles and the like, while the middle one (the one that says "Blurb") will hold shorter posts, updates and news that are not long/interesting/worthy enough of a full article. The About us box will probabely be a little shorter too, so Blurbs should move up a bit when I start filling the template with contents. Also, when reading articles in full and viewing comments, the middle column disappears entirely.

Thanks for your comments :-)

Share this post


Link to post
Share on other sites
I like the layout, except for one thing. The "About us", "Blurb", "Menu", etc. header images look out of place at their current size. Maybe it's intentional that they're that big, so as to draw attention to them; but, if you're wanting people's attention to go straight for the content, I would make those images with about half the height they are now. Since your main goal is to have people read the content on the page, and use the links columns as a kind of afterthought, their current size detracts from that effect.

*shrug* That's just what I see. Otherwise, it looks nice and clean.

Share this post


Link to post
Share on other sites
It's clean and easy to read.

Interestingly enough I liked it better before the headers were loaded. (Slow modem.) By headers, I'm referring to the green, orange, and gray ones. I would ditch the 5 block logo thing everywhere (or make it less obvious) except for the main header.

As others have mentioned, I think the headers bring way too much attention to themselves. They are bright, big text, and huge padding. Headings for capsule boxes shouldn't be that much different than the content itself.

Share this post


Link to post
Share on other sites
OOhhh, table-less! It's quite nice, and even renders acceptably in IE6, although I wonder if the border on the left and right of the 'wrapper' div are there on purpose. Don't really like that if they are, but that's minor and a question of taste.

[edit] I agree with the others about the headers too.


jfl.

Share this post


Link to post
Share on other sites
YAY! Website critisism! I love this.

Here we go:

  • The first thing I notice is that the menu is on the right (or rather, that the menu wasn't on the left or at the top :). Most websites have the menu either as a row on top of the pages, or as a column on the left (or a combination). Even if it is tempting to be unique in the design, it only confuses users. As the designer of a page, one gets adopted to the rightsided menu real fast, but a typical visitor will browse several sites in the same session as browsing your site, and having to look for the menu just un-smoothens the user experience.

  • As konForce said concerning the headers, I think they are way too big now, and having the non-discrete 5 square logo in the headers as well as in the main site header is confusing, since using the same 'icon' for diffrent things isn't very pedagocial. I would recomend to create more discrete logos (or skip them) for the headers. The same 'type' of headers should look the same (i.e. news headers, subsection headers etc)

  • Finding a good color scheme is a very subjective process, but as a rule of thumb, the less colors you can use the better, which often means one color. Then ofcourse this color can be used in diffrent variations and shades. A good example is IGN.com. IGN uses one color for each section (XBox, PC, etc), but for one specific section, they stick to one specific main color. (I personally think that IGN is one of the best designed sites on the net, an incredible amount of information, yet with good structure, and lots of graphics, but it still feels clean.)

  • Colin Jeanne mentioned that with a three column layout, the "main" column should be in the middle, which I agree with, but that will be a concequence of moving the menu column to the left :)


But it is a real good base. It looks clean (which is the way to go) and aiming for content rather than a fancy design is how everyone should create sites. Sure, it is boring with sites looking similar, but having "standards" benefits the users.

Share this post


Link to post
Share on other sites
I had some time to work on this during my days off so here goes version 2 [smile]

I've made the headers smaller as many people pointed out. I've reduced them to 32px height with smaller fonts and less padding. I've decided to keep the three column, content left layout though. As it's main purpose will be the contents on a single page (blog-style) and not a large site wth many internal links, I think the left-sidedness of the site will do well. Besides that, I'm utterly bored with the traditional 3 column layout. For the rest there's just a bunck of minor tweaks. Font size adjustments, color adjustments. A little less padding and marhin all round. Etcetera.

I've also prepped a second page that shows a full article which has only two columns and incldues a comments section. Just click on any of the article titles on the front page to view the article mockup.

Links:
Front page
Article

Thanks for any comments!

Share this post


Link to post
Share on other sites
Quote:
Original post by Sander
I'm utterly bored with the traditional 3 column layout.

So am I, so I applaud your branching out in a fresh direction. However, my problem is that the page is essentially three long blocks, and to consume everything on it either requires scrolling up and down several times or interrupting the natural flow of each column.

My suggestion/question is whether you couldn't "block off" horizontal swaths of roughly page height, each divided into three columns populated by content, recent/related items and menu operations pertinent to that section?

One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.

Share this post


Link to post
Share on other sites
Quote:
Original post by Oluseyi
Quote:
Original post by Sander
I'm utterly bored with the traditional 3 column layout.

One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.


Same degree with FF 1.5 and Opera 8.51, as far as I can see. But I don't mind it, it wasn't something I really noticed until Olyseyi pointed it out.

Share this post


Link to post
Share on other sites
The second link you posted doesn't seem to wrap the text correctly in firefox. Other than that, and the fact that I can't read any of it... I think it looks pretty good. The menu being on the right really throws me off (left and top are web-standards according to all of the html books i've read)... but, its navigatable. I also like the color scheme... very sharp.

Share this post


Link to post
Share on other sites
Quote:
Original post by Oluseyi
My suggestion/question is whether you couldn't "block off" horizontal swaths of roughly page height, each divided into three columns populated by content, recent/related items and menu operations pertinent to that section?


As yes, I see what you mean now. I'll have to think about what's possible there. Basically, this is going to be a blog-like website. The article columns are just entry points for my most recent blog posts. Blurbs are basically going to be short articles without user comments. I intent to use those if I want to post some brief comments regarding some news event or someone else's blog but when I don't feel like writing a full blown article. I expect those to get posted more often than full articles. The about us is just going to be a really short introduction that links to the main about us page.

I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

Quote:
Original post by aidan_walsh
Quote:
One last thing: in IE6, your page title "Lone Wolves" is not anti-aliased, making it look rather unappealing. I didn't try the page in Firefox.

Same degree with FF 1.5 and Opera 8.51, as far as I can see. But I don't mind it, it wasn't something I really noticed until Olyseyi pointed it out.


I hadn't noticed that. It should be in the final version though, but I decided to tackle the principal design first and make it cross-browser after it's been frozen. The only reason it works in IE right now at all is because I took care to have zero padding and margin on any element that has a specified width.

Quote:
Original post by Cygnus_X
The second link you posted doesn't seem to wrap the text correctly in firefox. Other than that, and the fact that I can't read any of it... I think it looks pretty good.


I take it you are referring to the code block inside the article. I haven't quite figured out how to handle this. Right now it's a <pre> block, hence the wrapping issues. I tried setting an overflow: auto on it, but that makes the page flicker (like the GD frontpage does in IE6). If I can't find the anti-flicker cure I'll probabely end up converting the code to HTML with &nbsp;'s on the server so it wraps nicely.

I've added the overflow: auto; to the stylesheet so you can see it. Go to the article page and reload it to see the flicker problem. If anyone knows what is causing this then I would greatly appreciate it!

Share this post


Link to post
Share on other sites
Quote:
Original post by Sander
I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

At ongoing Tim Bray sometimes has short, one or two sentence blurbs as well. I think they mix in just fine amongst his larger posts. He also only shows the first paragraph so sometimes even his longer posts look like blurbs (if not for the ... links)

Share this post


Link to post
Share on other sites
I like it. I would move the About Us block to the far right column and below the links - or I would just leave it as a link on the menu. It seems to me that as you use the site more, having an "about us" block right in the middle of the page is going to get in the way.

Share this post


Link to post
Share on other sites
Looks great. One thing with Safari though (maybe also other browsers) is that the header labels aren't vertically centered in the blocks, they're somewhat more to the bottom.

Share this post


Link to post
Share on other sites
Quote:
Original post by Colin Jeanne
Quote:
Original post by Sander
I don't think ordering in a chronological way is going to work considering that Blurbs will be posted more often than articles, but maybe some otrher scheme will work instead.

At ongoing Tim Bray sometimes has short, one or two sentence blurbs as well. I think they mix in just fine amongst his larger posts. He also only shows the first paragraph so sometimes even his longer posts look like blurbs (if not for the ... links)


I've seen that as well, but I've consciously chosen not to mix the blurbs and articles. The simple reason inclination to post. If you mix blurbs with the articles then you tend to not post a blurb because you don't want your wonderfull latest full-blown article pushed down that you just posted an hour before. Also, you might be tempted not to post because you don't think it'll be long enough or article-like enough. Separating the blurbs from the full articles removed both these disincentives to post a blurb.

@LessBread: Thanks. I'll try that out.

@Sijmen: I noticed the same thing happening in IE5.5 today. I'm going to fix the crossbrowser issued after I fixed the design though (to make my life easier). Currently I'm developing on FireFox 1.0.7 under Linux.

Thanks all!

Share this post


Link to post
Share on other sites

This topic is 4361 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this