by John Eberhard
Everybody wants a good looking web site, but what are the factors that create a really top notch web site as opposed to a boring or mundane design?
I have been doing a lot of web design lately, and I want to present my opinions on what factors go together to make up a really stellar web site design.
First of all and possibly the most important, a good web design has to have a good color scheme. There is a fair amount of technology on how to combine colors correctly, and you have to know the color wheel and what it means and how to use it. One technique is to combine color opposites on the color wheel, i.e. blue-orange, red-green, or yellow-purple. Usually you have one color that is the dominant one and the other is there to a lesser degree. I also think it is important to include contrast in terms of light and dark. You want to avoid a boring, monotone look.
Size does matter on a web site Virginia. 3-4 years ago everybody had screen resolutions of 800 x 600, so all the web designers were making web sites 700 to 800 pixels wide so you wouldn’t have to scroll back and forth to see it all. Today those web sites look hopelessly tiny in the middle of the screen since everyone today has screen resolutions of 1100 pixels wide or more. So I think web sites today should be 1000 pixels wide or more.
Most web sites today are designed with a centered text area and sidebar of fixed width, with a background around that. Some people prefer a white background and lots of white space, but often today you see the text area and sidebar in the middle with a colored background of some type around it. I tend to favor making the background some kind of pattern or color gradation, i.e. light at the top going to dark at the bottom or vice versa. You can also make the background a large picture.
Many sites today have some kind of slide show on the home page. I like to make these big, usually going across the whole screen, which then gives them really good impact. I used to do these in Flash, but recently started using a program called the Nivo Slider, which gives some cool transition effects between the slides.
Not everyone likes this and I don’t use it all the time, but one useful technique is to use Photoshop effects to make things in your header, navigational bar and sidebar look like they are in 3D. This includes beveling, drop shadows and other 3D effects. I think 3D effects can really add a lot to a web site.
This is not an aesthetic consideration but an effectiveness consideration. With a web site you want as many of your visitors as possible to either call you or fill out a form of some kind on the site. In online marketing we call this a conversion. So it is smart to offer something on the site and get people to fill out a form with minimally their name and email to get it. Lately the trend is to put a response form right in the sidebar so it is visible on every single page. It’s also smart to put your phone number right in the header so it’s very visible on every page.
It’s common for web sites today to have a sidebar, i.e. a bar that starts below the header and goes the rest of the way down the page. Sometimes you can leave this out on the home page. Then this content is visible on all or nearly all of the pages. Common sidebar contents can include:
- Your address and phone
- A response form
- Small pictures linking to various pages inside the site
- Links to social media accounts
- Business hours
- Links to various free offers or things you are selling
- Links to your other web sites
- Sometimes navigation buttons are placed in the sidebar, though some content management systems like WordPress make this difficult
- Share or like buttons
It can be interesting to add Flash animations or scrolling text or other things moving on your page. But be careful as this can easily be badly overdone.
I have just started experimenting with having a large picture go all the way across in the background, and having the main text box and sidebar be partially transparent, so you can read the contents, but you can also still see the picture in the background. Stay tuned to see the results on this.
The main text box in the middle of the page can be white, but it can also be a color, or it can even have a background pattern or gradation like the overall background of the page. This can work really well but you have to make sure it works in combination with your overall page background, and that it doesn’t detract from the contents of your page.
All these factors work together to make up your web page, and you have to work with them and try things and combine them until you come up with something that works and looks great. So don’t settle for mundane or mediocre. Go for greatness.