: Professional looking websites 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

@Chiappetta793

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! (^_^)

Vote Up Vote Down