Apologies for cross posting from the Webmaster stack exchange but I have a question I'd like to resolve as urgently as possible.

I'm starting to design a site and am at the stage where I have most of the basic layout of the page done. But there seems to be something lacking in that it looks distinctly amateurish rather than professional. The site is meant to be simple. Can anyone suggest ways in which I could give it a more professional sheen (I'm a programmer rather than a designer)? I'm not quite sure what it's missing but it's meant to be a template for a luxury community somewhere. Perhaps a textured background image rather than a gradient? Images that 'break' out of their div borders? I'd greatly appreciate any input as I'm not sure what sets apart those professional looking sites from others.

Almost forgot the site is here

  • 3
    There are similar questions here. If your question will generate something new, add screen shots here for posterity's sake. Here's a few questions to browse: Make it less 90s, Interesting websites with minimal palettes, Less clutter Jan 16, 2013 at 23:15
  • 2
    A couple more: My site looks awful, Modern site design Jan 16, 2013 at 23:17
  • 1
    Hire a professional designer. I also don't see how this question is so urgent that you need to be cross posting across sites.
    – DA01
    Jan 17, 2013 at 3:49
  • Thanks for the site references. They definitely make some interesting read. @DA01, that's hardly a constructive answer. Everyone has to start somewhere so 'hire a designer' isn't helpful at all.
    – Sonoman
    Jan 17, 2013 at 9:49
  • 1
    It's not an answer. It's a comment. But it does address your question. Reverse the question: "I don't know anything about programming. What should I do to make my code more professional? Should I add a variable or a function?" Not trying to be rude...but perhaps blunt--just pointing out that the question, as is, is simply too broad to be answerable short of 'hire someone'. (in either case, please don't cross-post)
    – DA01
    Jan 17, 2013 at 9:52

1 Answer 1


There are some good comments above, but I would say, take a look at the some of the top design/aware winners for web sites (of 2012), which you can google for. One of the simples things you can do to fix basic design issues is to make the font a tad smaller, and to increase the leading (the vertical space in-between lines, so that it's open and easier for the eye to track. Optimally you only want between 12-16 words per line, no more, otherwise when the eye tracks to the next line, it is less (word) distance to travel, and easier to pick-up the next (left side) starting point.

Also, don't be afraid of negative space, the empty white space, in fact, using it as a visual counterpoint can be just as effective as an image. Speaking of images, I'd probably stay aware from adding a texture, just to add a texture, as it may not help the site (and can quite possibly distract from the text or images). Gradients, while less obtrusive can pose the same problem.

Think about the message that the site is trying to convey, is it a feeling of luxury and openness, or coziness? These emotional messages can be represented as visual association, say a beautiful photo of a fairway (if the complex has a golf course), or a bay/harbor (if it has one), etc... Make it the entire size of the (maximized) background, (take a look at About.met for examples of full size background images, or Bing for that matter). It adds a bit of richness... but do not do it at the expense of detracting from any readability, as the textual message is one of the most important things.

Think about using text treatments as elements to add as sense of style to the site. Use a font, maybe a legible script for all of the headers and use a style (CSS) to move offset the text -9999px so that the text is there (defaults to/searchable) but not visible leaving only the background image (with the text treatment) visible in the headers. CSS Zen Garden (.com) shows an excellent example of separating HTML (document model/content) and CSS (document layout/style), and by designing it properly, you only need change the CSS and images to change the look and layout of a site various ways.

These are only a few ideas and thoughts. I'd also recommend you pick-up or check out from the library, a few copies of Communication Arts, particularly their Interactive Media Annuals, as it has many web sites.

I hope this helps you some and good luck with your endeavors.

MORE: I just looked at the site, and I'll quickly say a few things. Their is a thing called (above the fold) that is to say, all of the information/content that is visible when the (web) page loads. Looking at the site, I see that a large area at the top is used only for user login credentials, and while that is fine, you're shifting the main content down almost an inch for it—not a good use of space.

The menu at the bottom of the image is, okay, however, the font is hard to read (but would be a good font for the headers and tag lines if it were larger)... I think you're using Zapfino, so you'll have to play with the size as it's a strange font. You may want to consider moving the entire menu to the top of the screen (left aligned) with the login section to the right (right aligned). Consider using Sans-Serif fonts for the main links, nav, and a Serif font for the body of the text (which you are)—and remember to add the leading to the body text as well (for readability). Remember, if it's at all hard to read, or to navigate, it's not going to be conducive to a good user experience.

Also, the image's that are rotating have no caption, therefore no message, which is okay, but you're suffering from the mail-slot effect, that is to say, a wide area that's not to high, with, in this case, visual information. This alone makes the site seem a little cramped. If you move the menu up, you'll have another inch you could add to the images (if you don't decide to just use one large image for the background (with a semi-opaque background for the content blocks).

Also, if you are making a nav-header, you can make it FIXED so that when you scroll down the page, the nav-header stays on screen, this allows the user to always have access to the navigation as well as login feature. In addition, if you are making a nav-header, then you probably want a footer that matches, across the whole screen. This can help balance the page.

As for the side images, I would suggest, making them larger, and only have one per paragraph—and add more spacing between the paragraphs. If you'd like to have more images, make a gallery page. Oh, and all inline images should be clickable with a larger version as a pop-up...

Okay, I hope this helps as well. Good luck and let us know what you do. Cheers! (^_^)

  • 1
    Fantastic answer! Very detailed with some incredibly helpful feedback. All taken on board and I'll set about making some changes. I'm a little unsure of the color scheme (i.e. whether the colors complement each other). Could you perhaps offer your 2c on that? Thanks very much!
    – Sonoman
    Jan 17, 2013 at 9:43
  • Hey Chris, I'm glad you found the information useful. As to the colors, I would say that your main colors need to come from the branding of the clients identity system, that is to say, if the site uses Orange and Blue, you should be using Orange and Blue (but not as the main colors). Remember that readability is one of the first issues, so color needs to guide the eye or reinforce information. Also, consider using tints/harmonies of the base colors to create a complementary pallet, and try to keep the main colors around 4-5. If I knew the colors I may be able to help more. Good luck! (^_^) Jan 19, 2013 at 3:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.