Web Design Basics
This is list of web design basics. It is for people with little or no experience building websites. These web design basics are important even to the most experienced web designer.
- People get a fairly quick first impression of your website from its design and layout. That first impression can cause the visitor to be open to what you have to say or not.
- You want your site design to be attractive without being distractive. If your design distracts your visitor, no matter how "good" it looks, you won't be able to get your message across. Make your site professional and simple. By the way... if you are interested, here is an article that reviews: Free Web Design Software.
Web Page Layout
- Layout is basically how things are "laid out" or placed on a page.
- Don't try to reinvent the wheel. Put your website's (or company's) name at the top. Put your main navigation links down the left side of your page. Your valuable information or content should take up most of the rest of the area of the page.
- Your website's header, the area at the top of each page, should communicate instantly what your website is about. Your header image(s) should communicate additional information or create an appropriate feeling for your visitors.
- Give your content room. Don't try to squeeze too many things into your pages. Leave lots of space between paragraphs, above and below headings, and around images.
Web Page Colors
In the beginning, keep it simple. Limit your design to two main colors, an accent color (used sparingly), and black and white. Generally speaking, multicolored "rainbow" sites look like they were done by a beginner. There are exceptions - sites for children, clowns, parties etc. But even they don't need to use many colors.
Take this site for example. As you can see I follow my own web design advice. The site was designed to be very simple. A simple color scheme was used - various shades of blue along with black, white, and gray. I was a web designer for 5 years so it could have really been jazzed up. I chose simplicity for the design because it seemed to fit the "beginner tutorial" theme of this site.
Web Design Tips
- Forget about images or patterns in the background of your text for now. They usually just distract your visitors.
- Stick with very dark text. Black is best.
- Use only a very light background. White is best. For more information please see this article on: Web Page Backgrounds.
- Too many big or bold words all over the page is a sure sign of a rookie web designer. A professional site uses bold and italics lettering only where appropriate for emphasis or clarification. Words using a larger font are appropriate for headings.
- Use Arial or Helvetica fonts for your text at first. If it's good enough for Yahoo it's good enough for you. As you get more experience you'll learn what fonts are best for different situations.
- Most of the time, animated gifs (images that move) are unnecessary for a hobby or business website. A good rule of thumb is: If you are just starting out as a web designer don't use anything that moves. If it moves it's either annoying to the visitor or it causes your page to load slowly. Words and pictures are more than adequate to get your point across at first. As you get more experience you will learn how to use animated gifs, flash and other things to get your point across without distracting your visitors.
- Use your header to instantly communicate a feeling or message to your visitor with image(s). On this site I decided to place images of construction and construction workers in the header. This, I hope, gives the immediate feeling of "work" to all my visitors. Good website building takes a little work. This site is about learning the fundamentals of website building and long-term success. I didn't want this to be one of those "get your site up in 10 minutes" kind of websites.
Keep the above web design basics in mind while you are building your site. Review this article again after you get some more experience creating websites. Here is another article about web design basics.