What To Do To Polish A Website Design?

I'm the type of person who's between a programmer (because I enjoy it) and a designer (because I have a sense for it).

I've been designing various websites in the past years and while they've been far from the ugly 90's type of sites, they've never been as “polished”, or cool or “wow” as designers' sites out there.

Some people have zero sense for design, I have some that lets me realise when a design is good or bad. But in either cases I don't know why it's good or bad. It's only recently that I realised that the thing I was missing was design theory, the rules of aesthetics. I tried to use some of them (golden number, 2/3, contrast, alignment, complementary colours) in the site below, but I'm not totally satisfied with the result, especially with the menu's appearance, the header and also the “immersion” (I wanted to get rid of the flatness). N.B. the logo is fake just like the text, but is similar to the real one.

I think the design is pretty nice and professional looking. I think it is polished looking. As far as striving to have a site that is cool or evokes a wow, I don't know how important that is. I guess it depends what the site is about. I think the sites of the biggest companies out there - like Home Depot, Amazon, Spiegel, Macys, Barnes and Noble, Target, Bed Bath Beyond, and I can list 50 more, are professional, but I don't think they are especially cool, or wow-like.

I think a nice, clean design is more important.

Re: your design below - you have navigation on the left, right, and top. That seems a bit much to me. There a space in the yellow nav buttons on the top, which interrupts the flow. Line spacing and margins and point size are important to me. I'd increase the left and right margin, increase the line spacing a bit more, and maybe make the point size one smaller. I like all these features at http://outspokenmedia.com/. I think that font is corbel or calibri. The white space is great there.

I think the only thing that looks weird is the buttons around the page... top and right. It's not the buttons, themselves, even if I would have left a little gap between them. It's the center justification, and because all words have different lengths, they look kind of crooked. Try switching to a left justification to see... smaller font, or a different one. Beside that... it's great.

What I wanted to do with the menu was to separate it into sections corresponding to who are the visitors and what they want. The site is for owners of a particular video game, the left top menu is for those who haven't bought it yet, the top left (≠ left top) is for those who just got the game, the top right menu is for the regular players and the right top menu is for the website's regulars.Because it's a fan site it has a lot more content than the official site and it can't all fit above the main content, and as the tabs are tabs, they must be attached to the content, that's why I put them on the sides - but I'm thinking of making only top and bottom tabs.I made them equal width to maintain their aspect ratio (golden number), unequal width seems really weird to me, I don't remember seeing it anywhere except maybe where there's only text and no background or border.

I'd also suggest that the portal should mimic the layout/imagery of the game. At the moment it looks pretty boring

I thought of adding a background image. Other than that I don't see what I could add, actually this was my question…

Get rid of the scroll bars. A page scroll is far easier to use with a game controller. Note the scroll bar on the main content doesn't even work for me.

An attached scroll bar is the only way to access content when the element has a height or a top and bottom (it was a page scroll before).It doesn't work for you except if you click on the lower part of the bar or use the mouse scroll, correct ? I'm looking for a fix.

I still don't understand why you have to use the scrolling system. Why not just make the whole page scroll down. If the lefthand navigation is a real problem then rework the navigation so scrolling isn't required. This is where the real skill of the designer comes into play: producing a layour that works for all users across all browser/OS configurations.

As to the background - look at the game portal and replicate. This way there will be a seamless transition from website to the game login.

Check the page width as well, on a low resolution screen or when the window isn't full sized most of the content gets chopped.

That's a very arbitrary decision. Visitors will probably want to access each section. Plus it adds an unnecessary and unclear extra level to the site's structure.

I still don't understand why you have to use the scrolling system. Why not just make the whole page scroll down.

Because… when elements have a defined height or top and bottom and a content longer than them, the only way to access it is via an attached scroll bar. (if you've got a miracle solution show me a demo).Look on this very forum, when you write a post there's a sidebar with tons of smilies. The scrolling is horizontal but if it was vertical, it wouldn't make sense to extend the side bar to the whole page just to use the page's scrolling, that's not how the layout or the semantic is designed. Why don't you like scroll bars on the page ? they're ugly ? I find they fit well in my design.On my site I need the sidebar to be visible at all time, the only solution is an attached scrollbar.

Check the page width as well, on a low resolution screen or when the window isn't full sized most of the content gets chopped.

I don't think the width is a problem, the most common resolution is 1024x768 (soon 1366x768) and I guess most modern sites use a >800 width if not the common 960 (970 for me).Among my visitors only 11% are below 970px, I don't think they should dictate the layout.I could place the sidebar to the right so that they don't have to scroll horizontally, but while it seems more natural I never been fond of it. Plus I believe that a TOC belongs to the left in left to right reading.

The only problem is that I reduced the window's width and discovered that the horizontal bar scrolls but not the page ! :-\

If the Windows ones are Windows phones then they are all phones and tablets.

It's not important what you think or consider to be a good layout. All that matters is meeting the needs of the visitor to the site.

Whilst your clever navigation might alleviate a perceived problem with different levels of visitor, most will expect to see something much simpler.

You thread title indicate that this is a gaming portal. If this is the case then that's all you need to provide. Every extra link in the navigation means access slows as the visitor has to work out which one they need.

I'm not even sure what it is you mean by elements with defined heights. When you read the threads on this forum and visit every single gaming site they all use page scrolling. Try to access and use your solution on an ipad or use game controller or webtv and you will understand why the internal scrolling is pants.

Until you have done some user testing with the user of the game in question you won'y know if your layout is going to be any good. You may find that 90% of the navigation is redundant.

I forgot to mention in my previous post that the game being a computer game, the site will be accessed via computers.
The only other device that I have is a trackpad and I can scroll fine with 2 fingers. I can imagine that game controllers and webtv don't have ways to scroll but that smartphones and tablets do. Do they ?
I don't see what's the difference between page and element scroll bars, you just need to be above the content that is going to scroll.

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Not quite. You're already getting an idea of user reaction here, though you are disagreeing with us quite a bit.

If this is a new domain, it can take months or even years to get enough traffic to draw statistically relevant conclusions about user actions. Do you really want to wait before making improvements? Trot it out with "faux" users (us and others!) and soak up all of the information you can get. User testing doesn't have to happen after the site is live. You can do it now. You should do it now.

I think that the points about all those navigation tabs are well taken. I like it as a decorative design element, but I think you're going to lose people who are looking for navigation. users will make snap decisions about if they've found what they want on your page. Seconds, as in five or ten, ten being a lot, then they're out of there. If and only if they already think they know they'll find what they want, a few will hang around hunt, but it won't be a hunt to figure out what you're about.

Users will scroll if they need to, but it will be for their own reasons. If they have to use scroll bars because your site is awkward to use, you will lose them.

It's hard to say about the menu, without knowing what the items are. I would be hesitant about having too many menu items rotated as it makes things that much harder to read. A few sites use them for things like a link to twitter but I wouldn't use them for main navigation options. The grouping is a little puzzling - is the one that fell off the left hand side, on it's own or part of the other three on the left.

I agree about the scrolling - I want to use the native scroll bars not inset ones. Also the scroll bars don't work for me if I try to click and drag only using my scroll button/arrow keys. You might look at using CSS to fix the menus in place and just allow the content to scroll as normal.

I don't like the brownish yellow for the tab, it's kinda an icky colour.

The content section formatting looks good though. Black text on white is a good choice for readibility and you've kept the line length readible.

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Why wait? If you plan on marketing your new site, you may want to seriously consider making sure it works and meets user expectations before rollout.

What are your site requirements? Are you going to earn revenue from it? If so, it has to be usable. As a UX person, I can tell you it will not pass web site usability or search engine optimization standards.

Human behavior on the web is studied at great depth. We know what people do and all the things that confuse and frustrate them. Multiple navigation schemes are a problem, especially when inside a site. Navigation has to be forward momentum oriented, which your's is, but also offer a sense of place inside the site, a way backwards from any level (no browser back button), and cross linking from hub to hub, or level to level.

Have you tested your site for color contrasts? It will not pass in critical areas such as navigation. In chrome, the main content scollbar is not functioning. Your site has to work in all major browsers and Opera, if your users are in Europe.

A polished look these days comes from using CSS3 and even HTML5. This is how designers are making some amazing new designs without relying on tables and images.

With today's monitors you can go as wide as fixed 970 width but I suggest flex width for content, not fixed. In testing, we don't even test for 800 resolution anymore. We do, however, test for mobile and tablets if the site requirements include their usage. Your content is squished into a small place...would love to see you use more real estate for it.

Another thing...if you want people to stay on site and relax, warmer colors are called for. If your target is mostly male, you can get away with bolder colors but avoid red (both genders dislike it) and browns. What you want is for people to not feel tension while browsing.

[quote](AbleReach:) I agree about the scrolling - I want to use the native scroll bars not inset ones. [/quote]And why is that ? To me it looks purely like a mental barrier. I myself didn't like the idea, but I must admit that they fit just fine.I use element scrolling because:I want the men to be visible at all time, this to me is the way navigation should be done (why the hell scroll down and back up to reach the menu), yet nobody seems to do it.Fixed menu and page scrolling mean that the content is going to scroll behind header and footer. This creates 3 problems: 1) bookmarks (#) are offset and id="" are positioned behind the header 2) content cannot be controlled and content is hidden by the footer 3) you can't have a content top and bottom such as my inner box shadow.

I cannot test before launch because I'm very late on schedule and launch is imminent.I am very confident on the site's success because 1) it has a single competitor 2) lots of exclusive content 3) a good number of visitors considering it still haven't launched 4) a very god number of subscribers to the newsletter from people who know little about it or the site. 5) this is not the kind of site that you find in google and leave if it doesn't answer you, it's a companion website.

Yes the site will earn me money. I could read all the books I have gathered but I'm already behind schedule. And above all, this project was not planned at all, I was going to work on something completely different.

[quote](cre8pc:)I can tell you it will not pass web site usability [/quote]What are they ? have a list somewhere ?[quote="cre8pc"or search engine optimization standards. [/quote]This I want to know why. I consider that I know SEO rather well and I don't see what I could have forgotten to do or done wrong.

[quote](cre8pc:)Have you tested your site for color contrasts? It will not pass in critical areas such as navigation.[/quote]The FF extension to analyse contrast is not compatible anymore so no, but I have switched my screen to grayscale and the contrast is strong enough everywhere.

The target audience is 100% male and blue color is like the manufacturer's mark. I chose orange (warm) for interactive element. I think it balances well.

I'm thinking of asking a couple of users to test the site with me. We'll get on Skype and I'll watch their screen and listen to them but won't interact with them until they are done browsing. Is this appropriate ?I'm also looking for a free online service that let the user annotate my site very easily, possibly without registering.

And why is that ? To me it looks purely like a mental barrier. I myself didn't like the idea, but I must admit that they fit just fine.I use element scrolling because:I want the men to be visible at all time, this to me is the way navigation should be done (why the hell scroll down and back up to reach the menu), yet nobody seems to do it.Fixed menu and page scrolling mean that the content is going to scroll behind header and footer. This creates 3 problems: 1) bookmarks (#) are offset and id="" are positioned behind the header 2) content cannot be controlled and content is hidden by the footer 3) you can't have a content top and bottom such as my inner box shadow.

Everything in your quote relates to how YOU want things to be. It is not how everybody else likes to use a website. The concept of fixed height content disappeared when frames were junked.

The fact that the content is unique and there are no competitors is irrelevant. If people don't like the interface then they will leave no matter how good the game.

Because you are being so defensive I get the feeling you will find any excuse to keep the current layout instead of exploring the different options.

Many people have tested many layouts over the years. All sorts of navigation systems have been trialled along with fixed sized elements.

If your idea was usable and accessible them you would see it on a number of websites. The fact that you don't means variants have been market tested and proven to be unworkable. Traditional navigation systems are the most effective because people are used to them. Change established systems and people react badly. Internal scrolling doesn't work because the normal controls don't function: page up/down keys, scrolls wheels and so on become redundant which means people have to move outside their comfort zone and that unnerves them.

The only way to find out if users like the site is to test it. If you launch and it fails then the potential gamers will never return. It would be far better to delay the launch and do some proper testing to make sure everything works.

The fact that you don't means variants have been market tested and proven to be unworkable.

I don't trust majority, I don't think most sites have it right. Even the biggest sites fail miserably at some things. Seems like the only well web designed sites are those about usability designed by usability experts.If all computer manufacturers had it right, then all computers would be Macintoshes, don't you think ? :-D

Internal scrolling doesn't work because the normal controls don't function: page up/down keys, scrolls wheels and so on become redundant which means people have to move outside their comfort zone and that unnerves them.

I tried with keys and it works, you just need to select the element, surely I can give it focus automatically so that no extra action is required. You haven't answered me on how smartphones and tablets can't do elements scrolling. By redundant you mean that there will be a scroll bar for the page in addition of one for the element ? well no there won't be one for the page because I control the height and everything is accessible within 600px.

While there might be a disadvantage to fixed layout, you fail to see the advantage: the user gets site and page navigation visible at all time !

5 seconds is simply too short to find out if this is the right site or not. But thx I'm gonna use it now on what I already have.

I have criticized the game developer for not making the game perfect before release and you ask the same from me, but I realise that if I launch too early I'll lose much less customers than if I don't launch :-D cause customers wants things when they want them and later they don't want them anymore.

I tried with keys and it works, you just need to select the element, surely I can give it focus automatically so that no extra action is required. You haven't answered me on how smartphones and tablets can't do elements scrolling. By redundant you mean that there will be a scroll bar for the page in addition of one for the element ? well no there won't be one for the page because I control the height and everything is accessible within 600px.

Where did you get the 600px from? I'm using a large netbook/small laptop (screen size 11.2") and the bottom of your left menu is cut off by the footer. I have absolutely no way to access the last few menu options.

The content scrollbar doesn't work (FF6.0.2) - so I can't view the end of that either.

You want fact, not opinion?

To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.

To determine if the contrast is sufficient, they provide the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Brightness difference should be greater then 125 and the color difference greater then 500.

You background is #001665 and menu link color is: #c37b00. This gives you a brightness of 106 and a colour difference of 397. Which does not mean the guidelines.

Unfortunately, it's not just about what you like. You also have a moral and legal obligation to meet accessibility laws.

I, and I'm sure other here, could give you a wealth of usability studies to back up our opinions but it's not our job to do the research for you. You asked us for opinions, we gave you areas to focus attention on to save you time. If you don't want to or don't have the time for making any changes then I'm not really sure what you expected to achieve by asking us for our opinions.

Where did you get the 600px from? I'm using a large netbook/small laptop (screen size 11.2") and the bottom of your left menu is cut off by the footer. I have absolutely no way to access the last few menu options.

For a 1024x768 screen the space available for the page is ≈1005x585. From memory I thought it was 600, at 600px the footer hides the sidebar by ≈5px, I can fix that.

The content scrollbar doesn't work (FF6.0.2) - so I can't view the end of that either.

You've all said that. From my tests it totally works except if you try to grab it near the right menu. It's fixed locally.

By the way, none of you answered my initial question. Probably this was the wrong place to post.

Website cleanliness/polishedness comes from visitor's ability to quickly find and perceive the needed information the website has, which is enabled by the following:- text readability- page layout- website functionality

The principles that make the site smooth are:- least effort to read text with more contrast, larger size, line height, etc- the required information is immediately available/findable (the site uses the words visitors use and displays most hints above the fold)- the visitor can quickly do what he wants/needs on the website (which comes from useful, easily identifiable links, readable/easy forms, etc)

Here's what jumped at me, when I looked at your live website (not this mirror):

1. The contrast in your left side menu needs to be increased. I'd suggest lightening the overall background tone to a very light color (light blue) and using a dark color for text (black). Or you can do otherwise, but use a much lighter (yellow) color for the menu.

If you agree that contrast is one of the rules of aesthetics, then you'll probably improve your current color scheme (even if it matches the game color scheme). You can lighten/darken existing colors here:http://www.colorsche...com/online.html

2. It'd help to increase the font size to about 14-16px or equivalent in pt, navigation font can be 1-2px larger, than the content area. If you use lots of conditional min/max-widths in your CSS files, you can specify individual readable font sizes for similar or each mobile device.

Risa had suggested decreasing top navigation font size, but it's probably because it's bold and hard to read. I'd suggest making it normal and keeping or increasing the font size, if it doesn't make the navigation too large.

3. Also, it'd help to lighten the color of your top navigation menu background to increase contrast.

4. A break in the top navigation isn't usual, either (note, most visitors spend 99% of their time on other websites). I'd suggest using descriptive section names for top nav elements and removing the break, because game owners might want to use the other stuff and the potential buyers might want to take a glimpse in the current game statistics. The break in the navigation is like an eyesore to a web surfer, in my opinion.

If you want more, you can write above/below the top nav that those sections are for owners/visitors and/or use different top nav button background color to separate the sections. You might keep a small separator, but floating the elements

5. I'd drop the frames, because they require extra effort in unobvious places to use them, which would lose you most (50-60%) visitors:+ using the habitual scrolling wheel, when the cursor is outside the frame, doesn't scroll the frame+ to use the page up/down buttons, I have to click inside the frame, which isn't obvious

6. You have to use words that best describe website sections in your top navigation (on your live website) instead of arrows/hovers to discover the first element, because otherwise, the visitors won't be able to immediately find the needed section - they wouldn't want to spend the extra effort of hovering over each individual top navigation element to find what they need. (Note: using Opera 11.62 to browse your live site and I see no section names in the top nav.)

I have to say, it's no surprise that we have suggested similar improvements. It happened, because:- the principles of usability/design is what makes a website smooth/polished/clean/easy to read and use- the principles of usability apply universally- you need to fix the most obvious stuff before we'd look at the minute details that we haven't noticed during our brief analyses, because fixing tiny, unimportant details without improving bigger issues won't get you the ROI you'd like to get.

This is one of the best resources on web usability, so after you study it, I'm sure you can find alternative information on http://useit.com or other websites.If you want to read about design/website composition, some of the better websites are http://alistapart.com, http://thinkvitamin.com and a few others.

Feel free to ask any questions about design/usability that apply to your website here or ask general questions in specific forums

1. I can change the sidebar's background colour but I'm very reluctant to change its links color because I want it to be consistent.

2. Is 14px the new minimum for Web 2.0 trendy sites ? I'm probably fine with increasing the size, I'd just have to adjust the headings.

3. I switched to white text so…

4. I reorganized and repositioned the main menu.

5. Those are CSS, not iframe, and I totally don't buy that 50-60% thingFor < 970 I switch to relative positioning and normal scrolling

6. I think I'm doing this...

I do have books on usability and on just about everything but they are huge and this was and unplanned project so I didn't stop to learn something in depth.

Website cleanliness/polishedness comes from visitor's ability to quickly find and perceive the needed information the website has, which is enabled by the following:

The principles that make the site smooth are:

Hmmm but what I was interested in was giving a professional look. It's something that just evades me. It shouldn't depend on information, I could recognize a well designed site even if it was in Chinese.

1. The current trendy font size is 14-16px, depending on line spacing, white space, etc. I prefer it to be a bit larger (15-16), but that's me.

2. I didn't look at the code, but at the page behaviour. If your content scrolling behaves the way it is (even if it's CSS, but not frames), it just isn't very usable and will put off visitors, since it's a barrier in front of the information they need (the content below the fold). You may not buy my assessment, but it's just plain obvious to anyone, who has read about a lot or studied or improved, analyzed and tested a few websites. You may already have read somewhere that the less clicks, the better, etc.

3. Like I said, a professional look comes from many elements. If any other web designer comes to your website and sees your top navigation without words, with just downward arrows, he wouldn't call that professional.

If you want more elements to look at, consider the web usability guidelines I've recommended. You pretty much have to study and use them to make your site more professional, if you really need that.

3. Like I said, a professional look comes from many elements. If any other web designer comes to your website and sees your top navigation without words, with just downward arrows, he wouldn't call that professional.

Ooooooh I see now what you mean ! Seems like an Opera specific bug. I would greatly appreciate a fix.

I'm not a developer, so you'd have to ask about a solution of your problem either in our web dev forum or a specific http://Dev.Opera.com community that might be more helpful.

On second thought, if you are more worried about looks, than functionality, then you do need to study some design principles, including web accessibility (it's not just for the disabled, but it makes sites better for sighted people as well).

Since I'm not a designer, you'd have to ask about shiny design rules in our web design forum or read a few books, such as this one. Then again, if I remember right, this book still does contain at least some web usability guidelines, since they are crucial and universal.