Five Crucial Components of Web Design

Professional website developers know the importance of web design and the role it plays in making a website successful.

Designing a successful website is no easy task, especially for someone who is new to the world of web development. With the help of web development applications many people can and do create decent websites. But decent in most cases is not good enough to make a site successful from a traffic or financial standpoint.

There are five crucial components of web design that you must focus on in order to make a site valuable to its visitors and successful for you.

- SEO -
Getting free traffic to your site.

- Usability -
Ease of navigating around the site and finding desired information quickly.

- Aesthetics -
Visual appeal.

- Content -
Valid, up to date, relevant information.

- Graphics -
Eye candy that relays relevant visual information to the visitor.

SEO

Before you ever lay down a byte of HTML code for a site you have to know and understand at least the basics of SEO and how it fits into the design. SEO is the art of designing a site in a fashion that gives the site an advantage for obtaining free and abundant traffic.

The number one aspect of SEO is selecting keywords relevant to your site. The keywords you select should be based on high usage, low competition and relevancy to your topic. Once you select keywords you can then begin the development of your site. Keep in mind keywords are a critical aspect of the design. The keywords you choose will be applied within the design in strategic fashion to benefit the flow of traffic to your site. To understand more on how to implement SEO you should read and learn more about this important subject. If you don't, your website success will be difficult to achieve.

Usability

Your website must be easy to navigate and designed in a way that makes it easy to find information. Visitors will not stay long if it takes more than one or two clicks to get the information they want or if it takes brain power to figure out how to get the information they want. One of the goals of your site design is to keep usability easy, and simple. To do this, apply the following three fundamentals of usability.

* Provide a site search tool.

A visitor in a hurry can quickly find the info they desire then move on to the action they desire.

* Provide simple, intuitive and consistent site navigation.

This provides visitors the tool they need to leisurely explore their way through your site.

* Provide logical and simple to follow content.

The message of a site should start off in a simple and basic fashion with well defined links pointing the way to more detailed information or explanation as needed.

In the cases above the goal is to make it easy for your visitor to find the information they want without frustration or difficulty. Doing this well will have a positive effect on increasing the return of your visitors.

Aesthetics

A website has to look clean, uncomplicated and strike a balance in layout that is pleasant to the visitor. Pleasing aesthetics come about when the colors of a site complement each other, the graphics blend and lend continuation of the theme and the layout brings unity and openness to the page.

Often overlooked by novice designers is the color palette of the site. While you can select color in a willy-nilly fashion and still provide a visually appealing site, a better idea for color selection should be based on an understanding of the color wheel and proven color strategies.

Many web designers often view a web page as an opportunity to blast a visitor with lots of information in hopes this will convince the visitor to take action. Usually this results in a quick exit due to the overwhelming visual effect and complicated look. A better approach is to provide less content and open space (referred to as white space) to allow visitors eyes to scan and explore with ease.

Content

An important feature of any website is the quality of the text content. Visitors come to a site expecting to find answers to their questions, solutions to their problems or for entertainment value. The content offered at your site must be well-written, without grammatical or spelling errors. It also has to be relevant to the theme of your site, with valid, up to date information for your visitors. Content is King!

Graphics

You can have a functional and usable website without graphic elements. However, if there are similar sites to yours that employ graphics, guess which site will get the most traffic. The necessary companions to any well-designed site are the images and illustrations that grace its pages. The images can't be any willy-nilly graphic that you might think is cool. Graphic imagery has to support your branding, and communicate the message you are trying to convey. Before you incorporate graphic elements into your site, take some time to look around the web. Notice what looks good and how elements are laid out. These same layouts techniques can be used as models for your site.

The Internet is a highly competitive business arena. To be successful with a commercial website, you have to keep these five crucial web design elements in mind. Contrary to what many will tell you, it is rarely possible to have commercial success without the benefit of a professional website. This is not to say that you must hire a professional, however you must implement professional design elements to improve your chances for success.

About the Author: Woody Longacre, Internet Web Design. We invite you to visit the Web Hosting Goods Store for Web Design Services, Web Hosting, and Domain Registration.

SEO: 5 Things To Hate About Web Design (and how to fix them)

What do you hate most about websites? If you browse websites as much as we do, then there is a lot to hate. Because there are so many terribly designed, user non-friendly websites on the Internet today, we have put together this short but detailed list of things to hate about web design. In addition to compiling this list, we’ve also provided a solution for each of the problems.

When creating a web design, there are a number of things that a web designer should take into consideration if their goal is to produce a high quality, user friendly website.

1. Vomit Inducing Color Schemes

There is nothing worse than visiting a website and seeing a borderline-gruesome, mismatched, out of control color scheme. As basic as it is, some people have a terrible time choosing successful color schemes. Though there are millions of colors to choose from, it doesn’t have to be a difficult process. Whether you want to pay for a piece of software that will significantly simplify the color scheme selection process or use one of the free color scheme tools available on the Internet, you will be implementing attractive and successful color schemes in no time.

To Pay

If you want to pay for a color scheme application that will do all of the work for you, then your best solution is the Color Schemer Studio. Located at http://www.colorschemer.com/index.php and available in both Mac OS X and Windows flavors, this tool not only builds you an entire color scheme based on a single color, but it also generates monochromatic, complement, split complement, triad, tetrad, and analogous harmonies based off of that same single color that you choose. It is absolutely remarkable. There are a lot of other neat and extremely useful features built into this application, too.

Not to Pay

If you would rather not pay the $49.99 for the Color Schemer Studio (even though it is worth every penny), then there are free alternatives available. Navigate to http://www.colorsontheweb.com/colorwizard.asp and you will find a Flash based color scheme tool called the Color Wizard. Although not quite as user friendly as the Color Schemer Studio, the Color Wizard has a lot of features built into it. You can either enter a hex color code or move the sliders back and forth to find the color that you’re looking for. The Color Wizard also gives you multiple harmonies based off of the single color that you choose. The Color Wizard is a solid (and free) color schemer product. The only downside to the Color Wizard is that it is available only to be used on the Internet. In comparison, the Color Schemer Studio does not require an Internet connection since it located on your computer’s hard drive.

Continue reading.. SEO: 5 Things To Hate About Web Design (and how to fix them)

Tags : SEO, Internet Marketing, Web Traffic, Web Design, color schemes, Color Schemer Studio, Search Engine Optimization, CSS, cascading style sheets, Navigation, CSS drop down, web designer, Color scheme, Internet Marketing

The Art of Website Maintenance By Erin Ferree (c) 2007

Now that you've designed and launched your website, you have a powerful marketing tool for your business. But, your website is only as useful as the content is current. The process of keeping the content on your site current is called website maintenance, and it's important to keep both visitors and search engines supplied with new information. Just like regular maintenance on your car, you have to make changes on your website every few months to make sure that things run smoothly.

If you update the content on your website on a regular basis, potential clients will be drawn back to your site to find out "what's new". The search engines pay visits to websites in their queue regularly. The catch is that you'll stay in the queue only if you update your site regularly. If the search engines visit your site several times in a row, and don't find anything new, they may decide not to come back-which can be a blow to your search engine rankings.

So, when is it appropriate to update your website? You don't want to waste time and monëy nitpicking at your site if you don't have updates of real value to add. You should update your site if you've:

- Grown your skills. Have you gotten a new accreditation? New licensing? Improved your skills? Any change in your skill set is a great reason to update your website - and your potential clients - with your new capabilities.

- Expanded your products or services. Do you have a new offering? Add it to your website and start making new sales in that area.

- Completed a successful project. If you've just finished a project, include it on your website. Create an online portfolio, add a case study - build a section on your website to use as a place to show the world your success.

- Gotten more testimonials, or added to your client list. Including more feedback on your offering helps to build your credibility. Be sure to get a testimonial from each of your successful client projects. Updating your testimonials regularly will also show clients who have visited your site a few times that your offerings are "up to snuff".

- Written an article. Writing articles is a great way to keep your website up-to-date and to put more content on your site. Search engines love content-rich sites, and visitors will love to see the new information. So, if you write articles to educate your clients and promote your business, be sure to place them on your website as well. They're likely to be full of keywords related to your area of specialty, which will help your ranking in the search engines.

- Issued Press releases. You should post all press releases and other information you publish about your company to your website. You nevër know who may be visiting, and you may get written up for your accomplishments.

- Made changes in your business. Have you hired someone? Changed your business structure, and you're now required to notify the public of that? If so, you should probably review your website and evaluate how you can add that information.

- Made Yearly checkups. You should do a basic review of your site at least once a year, to make sure that the content is current. Some things to look for include:

• Your copyright statements should be updated yearly

• Test and validate your links, to ensure that they still work

• Your time references should be changed. If your "About" page says how many years you've been in business, this is the time to change that!

• Your pricing and offerings - do you have new products or services? Have your prices increased over the past year?

Spotlight any major updates on your home page as well, so that people will learn of those updates as soon as they enter your site. The search engines will also discover the new update as soon as they enter your home page if you leave a bit of information, with a link to the full story, on the home page. That will act as a breadcrumb for the engine to follow - the engines will follow your link to learn more about it.

Any of these reasons, and dozens of others, are great reasons to make changes to your site. If you make keeping your website current a priority, it will pay off with better search engine rankings and increased sales and leads through your website.

Once you've decided to make your changes, the next choice is how to go about doing that. There are two steps involved in maintaining your site:

1. First, decide whether you prefer to edit your content on paper or online. This can be done in a couple of ways. You can start by printing the pages that have outdated information and then updating that information on paper first. Or, you can copy and paste the outdated content from your website into a word processing program such as Microsoft Word and then edit that file on your computer.

2. After you have updated your text content you can choose either to make the changes yourself or to hire a web designer to make the changes. There are several tools that you can use to make changes to your site yourself. We recommend an easy-to-use tool called Macromedia Contribute. It's fairly inexpensive, its simple to set up and learn, and it allows you to back up to older versions of your site if you make mistakes.

We suggest that you use this tool to make only simple text changes. More complicated changes - for example, to the overall design or navigation - are more difficult to make, and having a professional make those changes will save you energy and frustration.

If you are comfortable with a more complicated software program, then we recommend a professional-grade tool such as Dreamweaver. With a better software package, you'll be able to make some of the more complicated changes yourself.

By building more and more current information into your website, you will also begin to build trust with your potential clients, since they will have a snapshot of what's currently happening in your business available to them. Your website can go a long way towards making sure that your online prospects know, like, and trust you - which can lead to more sales from your website.

About The Author
Erin Ferree is a brand identity designer who creates big visibility for small businesses. Her workbook, "Design a Website That Works", will walk you through all of the questíons that you need to answer in order to create the best possible website. Elf-Design.com Elf-Design Web Workbook

50 Common Web Design Mistakes

This started out as a “Top Ten Newbie Web Mistakes” for my beginning web design students but it quickly became obvious that I couldn’t limit it to only ten. I was finally able to edit it down to 50. But I suspect, as soon as the comments start, it will begin growing again.And, yes, I’ve made them all at one time or another.

Page Titles
1. Untitled documents: “Untitled Document” is the default title for pages created in Dreamweaver and other web design programs. Too many people forget to change it.
2. Same title for all pages: The title is important. Help the world know which of your pages they want to see.
3. Non-descriptive titles: The page title is the headline for your link in search results (not to mention an important factor in determining those results). Instead of “Jim’s Page” try something like “Cartoons and Illustrations by Jim” or better yet “Political Cartoons.”
Meta Tags
4. Duplicate meta information on all pages: The keywords and description meta tags in the head of your page help search engines categorize your page. If you duplicate the tags across all pages of your site, they will look alike to searchers. Customize the keywords and descriptions for each page or don’t use them at all.
Site Structure
5. No index.html (or equivalent) in the root directory: By default the index.html (or an equivalent such as index.htm, index.php, default.htm, etc.) is displayed when you visit http://www.yourdomain.com. If you don’t include it, visitors will get an error message or be required to type out the full URI including the file name.
6. Disorganized file structure: How you organize your site files won’t affect what the site looks like but lack of organization can make your life hell down the road when you’re trying to update or redesign the site. Use directories (folders) to help organize your pages and images.
7. Uploading non-web files: Accidentally uploading a few native Photoshop files can eat up your disk space quickly (not to mention take forever). Store your resource files (Photoshop images, Word files, etc.) in a separate folder outside your local web folder.
Pages
8. “Under Construction” pages: If a page isn’t ready to post, don’t post it. If you can’t help yourself, remember “Under Construction” is supposed to be a temporary condition and, after a month or, so it starts to seem permanent.
9. Frames: There are good reasons why you might want to use frames but there are no good reasons to actually use them.
10. Horizontal scrolling: The least common denominator for monitor width is currently 800 pixels. You also need to leave space for scroll bars, page margins etc. so 760 pixels is a good standard width for your web pages. Wider may be acceptable depending upon your target audience but be careful!
11. Worthless content: If you don’t have anything to say, then don’t say it.
12. Out-of date content: If your content is no longer timely, delete it and, if you’re going to include a copyright notice, update it each January.
13. Overly long pages: Contrary to popular belief, there’s nothing wrong with long web pages (that’s what the scroll bar is for) if the content warrants it. But, if it can be done logically, it’s usually a good idea to have several shorter pages than one very long one. If you do have very long pages, provide additional navigation to make it easy for readers to move within or off the page (such as a simplified menu of text links at the bottom of the page).
14. Unnecessarily short pages: In an effort to make the content “fit” the design, designers often resort to a series of short pages when one long one would be more user-friendly.
15. “Orphan” pages: Pages you forget to provide links to don’t exist as far as the rest of the world is concerned.
16. “Alien” pages: Pages that completely ignore the look and feel of the rest of your website leave users feeling like they’ve been suddenly transported to a website far, far away.
Navigation, navigation, who’s got the navigation?
17. Pages without navigation: If you don’t offer them an option, visitors are more likely to close your page than to hit the browser’s “Back” button.
18. Broken links: ‘Nuff said!
19. “Hidden” links: Make links easily identifiable by using a contrasting color, underlining them, using “button” images or altering the rollover state.
20. “False” links: Underlined text and rollover images scream link. Use them cautiously.
21. Menus that move: Establish consistent “navigation zones” and stick with them.
22. Inconsistent navigation: Once the user learns how to use your site’s navigation, don’t change it on him.
Headlines
23. Restyling text instead of using heading tags:

is not the same as big paragraph text.
24. Using heading tags for design: Headings are structural elements and should be used to define the purpose of the text they enclose. Don’t use them just because you want big bold text.
Body Text
25. Using images for text: Text in images can’t be read by search engines or screen readers.
26. Justified type: It’s hard enough to make justified text look presentable on a static printed page. On a dynamic web page it’s nearly impossible.
27. Using

instead of
: It will make formatting difficult.
28. Using
to control line breaks within paragraphs: Let the browser determine where your lines break within paragraphs. If you force the issue you may get strange results as not all browsers size type exactly the same.
29. Typos and grammatical errors: use your spell checker and check out 10 flagrant grammar mistakes that make you look stupid.
30. Type too small: Really, 9 point type on a printed page isn’t comfortable for most people. On screen it’s unreadable for anyone over 30. Except for the “small type” you’re trying to make unreadable 12 points (or even 14) should be your minimum.
31. Too little contrast between text and background: It’s really hard to read!
32. Using non-breaking spaces to align type: For tabular data use tables. To position type as a design element use CSS styles.
33. “Ransom” note styling: Using too many fonts, too many styles, too many weights, too many sizes and too many colors is simply too much.
Images
34. Images without the alt attribute: Search engines, screen readers, and that little text box that sometimes pops up when your mouse is over an image all use the alt attribute. You should too.
35. Jigsaw puzzle graphics: Don’t slice images more than necessary. Each slice requires an extra call to the server.
36. Resizing images in the browser: Size your images in your image editing program before placing them on your pages. Images that are blown up in the browser lose quality and images that are reduced in the browser increase the loading time of a page. For example, a 1 inch by 1 inch image loads 4 times quicker than a 2 inch by 2 inch image, even if they are displayed at the same size.
37. Improper image format: JPEGs are best for photos and continuous tone images. GIFs are best for images with large areas of flat color. Also, transparent GIFs are prone to “ghosting” if used incorrectly.
38. Use of transparent PNGs without Explorer fix: PNGs offer true transparency but it doesn’t work properly in Explorer 6 without a javascript fix.
Animations
39. Gratuitous Flash: No matter how fantastic your Flash splash page is, nobody really wants to watch it more than once. If you must “Flash” yourself, at least provide a “skip animation” link.
40. Non-stop animations: Let your animation cycle a few times and then stop it before it gets overly annoying.
41. Too many animations: More than one animation on a page is just annoying.
42. Use of the tag: Thankfully some browsers ignore it.
Philosophy
43 “Sheet of paper” pages: Your screen is not eight-and-a-half inches wide, things don’t necessarily stay where you put them and, when you get to the bottom, you can scroll. Take advantage of the design possibilities those attributes and others offer.
44 Confusing content and design: HTML tags (p, h1, h2, etc.) are structural elements and, by themselves, say nothing about how your page should look (see for example…). Organize your content using HTML and create the design of your pages with CSS (and maybe a table if absolutely necessary).
Miscellaneous
45. No contact information: The purpose of a website is communication. Right? Make sure people have a way to contact you if they’re interested in your work, product or service.
46. Reliance on email links: E-mail links only work if the user has an email program available and correctly configured. And they don’t work with G-mail and similar services. So people in libraries or school labs can’t use them. Most ISPs offer a form processing script that can convert the contents of a form to an email and send it to you. Use it.
47. Failure to respond to contacts: Sure you can ignore spam but, when a legitimate visitor takes the time to contact you, a prompt reply is just good manners.
48. Auto-play sounds: Unexpected sounds are annoying especially in an office or classroom.
49. Opening too many windows: Cluttering up someone’s screen with a new window every time they click on a link is just bad manners.
50. Failure to check for cross-browser inconsistencies: Your site should work on Macs and Windows, in Explorer, Firefox and Safari. If it doesn’t you’ll drive visitors away.