Web Design, Graphic Design, and SEO — The Trifecta of a Good Website

While there is no argument that having a good product, service, or informational offering can make or break a website, it is equally important to showcase your offering in a positive, innovative manner. The quality of your Web Design, and the quality of your Graphic Design can prove very important in winning this battle. In addition, knowledge of Search Engine Optimization is essential to avoid costly errors that could keep your website from reaching its full potential.

In the paragraphs below, I will attempt to identify and dispense a baseline of useful knowledge that I have come to possess over my years of Web Design, Graphic Design, and Search Engine Optimization.

Web Design

In order to create a strong, effective website, you must first gather requirements and plan. It would be silly to design a five page, non-database driven website if the site is expected to house a stores inventory of thousands of items. By creating a list of requirements you can plan accordingly to make certain you have, or can acquire, the skills and resources necessary to complete the website.

A few questions you may wish to ask yourself or your client:

1. How many pages does the website need to be?

As mentioned above, designing a website for 5 pages is very different than designing a website for 100+ pages. Also, if the website’s page count is expected to increase over time, a different approach may be taken to allow for a fluid expansion of the site’s navigation.

2. Will this website have any special features that may require a programmer? If so, will the website’s design need to accommodate them?

Think of a search box implemented into the design of the site. Or, if a header image is expected to be replaced often, any black text that displays over that image should likely have a white background implemented with it. This would allow the text to be legible even upon a darker header image.

3. Will the website rely on search engines as a source of traffic?

If so, Search Engine Optimization is an important aspect of this website’s design. Conversely, a company that has a healthy advertising budget in a very competitive niche may have no intention of reaching a top ten SERP (Search Engine Results Page) ranking. This website may want to focus on feature rich, flash based design and throw Search Engine Optimization to the wind.

Next, you will want to determine what your client would like the website to look like. Forget about asking the client this directly, the answer will likely be useless. After all, a client that says he / she would like the website have a “modern” design may, in fact, want a more Web 2.0 look. Also, who’s to say your definition of “modern” is the same as, or even in the same ballpark, as theirs? A much better technique that I have found is to ask your client to provide you with a few (3 or more if possible) websites that they like, and would like their website to resemble. Then, ask them to find the same number of websites they do not like. For each website, ask the client to define exactly what they do, and what they do not like. This will give you valuable feedback to help you determine in which ways you should proceed with the website design.

Next, try to nail down a color scheme that the client prefers. Odds are good that you will get a decent idea of this as the client describes what they like / don’t like about their chosen websites. Attempt to confirm any of your findings with the client.

After you have the answers to the above questions, set about brainstorming the website’s layout. Jot down a few website designs based on your client’s responses. Ask your client to look at a few of your layouts and sign off (approve) the ones they like. These will be your first design concepts.

Now, you’ll want to move along to the Graphic Design phase.

Graphic Design

At this point it is assumed that you have completed all of the above steps, have a few layouts and a few color schemes in mind. Next, open up your graphic design program–it doesn’t matter which graphic design program you use, as long as it allows you to design on layers. Choose a layout that you prefer, or that you believe the client prefers, and set about your graphic design. You will want to create a complete graphic representation of the homepage, including filler text (lorem ipsum will suffice).

The idea here is that, once complete, the graphic design of the website can be sent to the client for approval, denial or alteration request. In most cases, alterations can be made more easily to a graphic than to a website’s code. Colors can be changed, shapes, sizes, dimensions. And, once approved, the graphic elements can be extracted from each layer with relative ease and used to assemble the website.

Be sure to preserve an original copy of the graphic file containing the site’s layered elements. You never know when a client will call asking for the site to be recreated using a slightly darker blue.

Search Engine Optimization (SEO)

I wish I could bottle a magic potion for you all that would alleviate the burden that SEO poses day-in and day-out. Alas, I cannot. But, I can provide you with one undeniable truth: content is king. In the world of SEO, content is the single most important factor. I’ve witnessed content be the missing component from an otherwise perfect website that, once implemented, turned a business around. The only time that I would consider content not to be paramount to the SEO success of a website is when competition for a niche, keyword or keyword phrase does not exist. Remember, in the realm of SEO, content is king. The more keyword rich content you can provide on your site, the better.

Beyond content’s stranglehold on SEO are a few other points that should never be forgotten or neglected. Page Titles, Meta Description tags, Meta Keyword tags, Title tags, Alt Text tags, Heading tags, Strong tags and Inbound Links. Before I get into those, however, I would like to share a few SEO tips and tidbits.

SEO Tips and Tidbits

1. Search Engine Optimization

SEO stands for Search Engine Optimization. SEO is the process of optimizing a website in many different ways in order to make it display higher on SERPs (Search Engine Results Pages).

2. Search Engine Spiders / Crawlers

Search Engine Spiders are essentially programs that browse the many websites on the internet. While browsing, they collect various types of information. For instance, they will search your content and count the number of times keywords show up. So, if your website has the keywords “Video Game Tips and Tricks” show up multiple times (or more often than other sites), odds are good that these keywords have something to do with the theme of your website. This means that your website will be more likely to show up on a SERP if someone searches for “Video Game Tips and Tricks.”

3. Pictures and Flash Animations

Let’s say I’m a graphic designer (and I am), and I’m also a web designer (I am also this), and I want to have an awesome header image on my website that shows the title of my blog (normally I do). Well, there is one drawback to doing this. Computers, Search Engines, and Programs can’t read text in images. To a computer, images are just a grouping of colored pixels. To a human looking at an image, it can contain a myriad of things, not the least of which being text. Being as images cannot contain text, an Alt tag is utilized to “describe” the images content to a computer, or disabled visitors who otherwise cannot see the image (using screen reader software). This is one of the biggest problems with pure flash websites. Although they can be nice, fun, and pretty to look at, they can be detrimental to SEO attempts.

Now, a little more information on Page Titles, Meta Description tags, Meta Keyword tags, Title tags, Alt Text tags, Heading tags, Strong tags and Inbound Links.

1. Page Title

Your page titles should be descriptive of the page’s content, but also contain your site’s keywords whenever possible. The page title is what displays on a SERP (Search Engine Results Page) along with the Meta Description. Being as this displays to a searcher if your site appears within search results, this is a very important aspect of SEO.

2. Meta Description tag

The meta description tag should describe the page’s content in more detail then that of the page title. It is still beneficial to include keywords where possible. The Meta Description tag also displays on the SERP, below the page title. If a searcher is interested in your listing, he or she may read the description in order to determine if they want to visit your site. The description should describe the page’s content so that the searcher can decide if it contains what they are looking for.

3. Meta Keyword tag

The meta keyword tag contains a list of comma separated keywords or keyword phrases. The impact of this tag is debatable. However, in my opinion, it is better to have it and not need it, than need it and not have it. Besides, why miss out on keyword content?

4. Title tags

The Title tag is different from the Page Title. You can add a title tag to a link or an image and, when a cursor hovers over the link or image, the text in the Title tag will display as a tool-tip. Now, some of you might be thinking, “That’s what the Alt Text tag does.” Ah young grasshoppa, although you are correct, you have much to learn. Read on…

5. Alt Text tags

The Alt Text tag will display as a tool-tip when the mouse cursor hovers over an image ONLY when a Title tag is absent. The Alt Text tag has a purpose other than acting as a tool-tip, two purposes actually. The use of an Alt Text tag is 1) to display the Alt Text in the instant that the Image fails to load and 2) to serve as a description of the image to be read by screen reading software for the disabled. While this is true, keyword content is useful in this tag as it describes the image which is otherwise useless and “unreadable” by search engine spiders.

6. Heading tags

Heading tags are believed to “showcase” importance of their contents. Search Engines MAY give more weight to keywords that are within heading tags as they generally describe the information contained int he paragraphs below them.

7. Strong tags

Strong tags, or bolding text, are considered to have the same effect as the Heading tags discussed above.

8. Inbound Links

Some search engines will count the number of links on websites that they crawl that point to other websites and count them as a “vote” for that website. So, if website A places a link on their website to website B, it is considered that website A is saying something like, “We believe that website B has quality, useful content.” This means that, depending upon the importance / popularity of website A, website B will receive a boost to their website’s ranking, or importance / popularity. This could result in website B displaying higher in search results.