Design / Colors feedback

[darthomir]

Hi guys. I have a website I made and I based my style/layout on some other website for now since I wanted to spend more time on coding than design. I've asked my friends and their opinion is mixed. Many says it looks like some of these websites you get when you mistype the address and you get a page with tons of links. Its a social bookmarking website, so I do need to put links on the first pages. Any suggestions to make it better, or its just fine the way it is? Personally, I like its simpleness, in the sense that the content gets all the space, while keeping a convenient menu at the top. Also, I'm trying to make it XHTML compliant (you can check the source code), so that it uses proper standards.
Here's the [a href=\"http://www.getboo.com\" target=\"_blank\"]website[/a].

Thanks, I appreciate!
Max

[moberemk]

It's very Web2.0-ish, that's for sure. You'll want to validate your CSS-you have a few errors there, though you manage to comply with XHTML1.1 effectively, which is very good. I'm not too sure about the background colors of the tabs at the top though-the contrast between the bottom of the tab and the box beneath is really grating. And finally, on the side, you have a big, ugly, grey border on the items, particularly the header of your bookmark box. Also, bring down the brightness on your header links, and maybe rework the logo a bit. Outside of that, this is pretty good!

[steviewdr]

With some modifications etc. this site has good potential.

I see exactly what your friends mean about your website looking like a "domain parking" website with adds etc.

What your site needs:

Headings that Stand out and seperate the various areas.
The orange div with the "Welcome to GetBoo" needs to be smaller in height - so your top header div (white) with your logo stands out more. There is also little reason for this orange div to be so tall.

I think your website needs a little more, what myself and Ober call "containment". The bottom of your website doesnt have a proper footer area - just the Number of people registered.
Also nothing sperates the search area, from the text content area, from the Keep, Share, Find text area.

The popular tags area needs a little rework - the different font sizes on the items looks offputting.
The various grey borders look strange and out of sync also.

These of course are only my opinions and ramblings.
-steve

[darthomir]

Hey guys, thanks a lot for your replies! I didn't have much time, but I did two minors modifications: the "Welcome" <h2> header is smaller, and the grey box around "Popular Tags" and also the other boxes on the other pages is gone, replaced by a skinner black border.

moberemk: for the CSS, I will check for the cursors, but I think I had to do this for IE to display a proper "hand" for buttons to make them look like links (use in the members section). As for the other tags starting with an underscore, it is a "hack" for IE again, wich seems to read these properties since it doesn't do everything as it does in Firefox (in FF the font is bold, whereas in IE it doesnt, hence the extra _font-weight: bold). Also, I am not sure what you mean by "bring down the brightness on your header links", and that "the contrast between the bottom of the tab and the box beneath is really grating" (I know in IE the png gradient doesn't display properly).

steviewdr: for the footer, I had problems in the past with making it stick to the bottom when the content of the page is not long enough, and I am aware there are many proposed solutions or hacks but I don't want to bother with a footer for now. Do you have any suggestions in order to make it more "contained" ?As for the font-sizes in the popular tags box, I'm trying to make what is called a "tag cloud", where more popular tags are displayed with bigger fonts. I know some sizes look weird, so is there any rules like certain sizes?

Thanks a lot guys, I value your opinion as I wasn't 100% satisfied with my design but couldn't know why.
Max

[moberemk]

Well, at the bottom of the gradient, it's a dark color, and then you go into the much lighter orange bar beneath it. That's what I mean-it's disjointed. Also, your link colors are too bright-blue for my tastes, but that's just me.

[darthomir]

Ok I did a couple of changes, minor for most but I think it looks better now. Let me know what you think!
Thank you!
Max

[redbullmarky]

i can't really say much, as it has been said before. but your site is now looking much less like a 'parking' site and more like something that's useful.

whilst the layout is very simple, sometimes i think it's just too simple. orange is very dominant colour so you really have to be careful with its use. i think with a bit more thought behind the initial page in terms of style and layout, you'll have a better result on your hands.
look at google. probably one of the most simple homepages on the web, but in no way overkill or bland.

[steviewdr]

In my opinion the website is still very fragmented. The "<a hrefs" in your page have different colours - changing from light blue to a pale green colour.
Also on the fragmented part - you have the popular tags div out on its own, and un-integrated into the website. The same with the "Keep Share Find" div - its out on its own.
It could be my resolution too - 1280 X 1024 which makes the Popular div very wide. I think its width should be fixed - with a slender width.

Change the default blue colour on the <a hrefs and try and view your site at different resolutions.
Rgds,
Steve

[darthomir]

Ok I did more modifications, added some content. I think fragmentation is better now, but still not sure how to handle the popular tags on the first page (if you look at the other pages it makes more senses with the added "recent tags" div). Tell me if its going in the right direction!

Thanks,
Max

[ober]

*ugh* That's my first impression. I know why your friends think it's one of those parked sites. You've got no life. You need a banner image. You need definition. You need more content.

I think my biggest gripe at the moment is the fact that your lack of content doesn't look good at full-width. For a site like this, it would look much better and your content would be much more controlled with a fixed-width layout.

It's very very simple and I don't see a demo of how the inside works or anything. Show me what it does before I login and you'll attract more people. Hiding things doesn't convey trust, my friend.

My other big gripe is that you've left out Opera users. Our numbers are growing and you really can't ignore the Opera browser anymore. Try it out if you haven't. I've converted a lot of people on this site to being Opera users, and now that it's completely free (no ads either), there's no reason not to try it.

[darthomir]

Hi ober. I installed Opera, and I noticed that the header <h2> (Welcome to GetBoo) isn't displayed on the left. I tried for the last hour to make it correct, but I couldn't achive any results. I think it is because of the float for the tab elements, but playing with their margin and padding, and with clear: both didn't solve the problem. Also, the ? in the forms don't work on mouse-over.

I had a demo account before, but since I allow people to make their bookmarks public, I removed it. But it is back again, so you can try demo/demo to see the inside.

As for the content, it is mainly the users who generate the content, hence the reference to "web 2.0". I like to take full width of the screen, especially when you pay for a big lcd screen you like websites when they use it all, rather than displaying a small 800X600 window. I am not sure a fix-width content would work. I use em in my style a lot so if the user changes the size of the display it should remains ok.

Max

[ober]

Just a technicality... "Web 2.0" does not refer to user-generated content websites. It refers to the use of web services, AJAX and syndication methods, as well as things like Web Forms 2.0 (a thread about this is in Miscellaneous). So calling a "bookmark" site "web 2.0" is a bit of a mis-use of the term.

Also, I'm not sure if you installed 8.5 or the beta version of Opera, but it shows up fine in the Beta version. I don't notice any difference between your site in Opera and Firefox. Besides, Opera is THE most standards compliant browser available, so I'd suggest if it doesn't work in Opera, that it's probably your usage of the standard.

Also, you should provide some visuals of what the user will see when he logs in.... kind of like a "tour" from the main page.

And as far as the width of the site, I'd rather see you use fixed-width nicely than full-width poorly. Just my opinion.

[darthomir]

Ok thanks for the info, we just make fun at school of the web 2.0 name since it doesn't *really* exists.

As for Opera, I tried 8.5 first, and now I'm trying the version 9 beta, and it works perfectly. So is it that 8.5 has different rendering than version 9? Should I try to make it work in 8.5, or I shouldn't bother since it works in 9 and in IE and FF (that I tested so far)?

For the tour, I will do that soon along with the help. I just want to make sure my content and design is ok before capturing images of the site, since I would have to do it all over again every time I make a major change.

For the fix-width, do you have any suggestion in term of how I could apply it to the website? I am not sure to understand the need or difference of fix width versus taking all the space.

Thanks,
Max

[ober]

I would try to make it work in 8.5, since that is the current stable version and it usually takes people a while to upgrade.

The main difference between fixed and full width for you will be your content management. Right now some of your pages have content sprawled all over the page. If you can contain the content and give it defined areas to stay in, then full width will be fine. But right now some of your pages look very unorganized and poorly designed on bigger resolutions.

[moberemk]

I actually meant Web2.0 in the design sense. See this article: [a href=\"http://mittermayr.wordpress.com/2006/02/03/20-culture/\" target=\"_blank\"]http://mittermayr.wordpress.com/2006/02/03/20-culture/[/a].

[darthomir]

Hey, it makes more sense for 2.0 referring to "very strange brand names", "tags, clouds, ...". That's pretty much the case of my website.

ober: even though it is not fixed in term of width, I made the content smaller so it looks more contained and it doesnt spread all over (for the public bookmarks). Can you tell me more on "some of your pages look very unorganized and poorly designed on bigger resolutions"? Like which ones in particular? I have 1024X768 at work now, but I have 1280X1024 at home and last time I checked it looked fine. You might be referring to the "Groups" section, if you tried to log in using the demo account. I know about this section.

Thanks,
Max