The Web Design Newbie 101 Guide 
Rules & Order of Web Design
We see so many web sites out there that are full of quality content, but never get visitors because the designer did not know how to properly design the site for visitors to enjoy it. If you do not properly optimize your web pages then you can just forget about happy visitors and high traffic. You will learn the steps you should take to have a successful website, and you can get started by putting things into perspective by reading below.
In real life we all have to follow rules to prevent chaos in our lives and communities. The same rule applies to web design and if you do not follow rules the site will likely fail. We have to take steps in a certain order so that we can successfully complete the project we are working on, all while keeping in line with the ultimate goal of the site. Building a website is somewhat like putting a desk together. Yes, in a way this is very true, when we open that box with all the desk parts we first look for the directions booklet. What happens if you do not follow the set of step by step directions in the "order" the directions suggested? The answer is pretty simple. You end up with something that is unstable and likely will not hold up over time.
If we do not follow a few simple rules when designing our website we can easily hurt our chances of success. We also must consider how people search for information on the Internet before we start our design or the site will easily get lost in the search engines. Think of it this way, would you head out to the open sea with a hole in your ship, no compass, maps, or radio? No, of course not so lets not enter out into the web design and search engine world without making sure we have what we need to survive out there. Below we will go over a few important tips you should consider before you even begin to design your website.
Colors & Fonts To See or Not To See?
The colors, fonts, and sizes you choose could be the death of your website! How many times have you visited a website that had a royal blue background and their text was in a bright red color? I have and I can tell you right now that it hurt my eyes and I left the site quickly. I am actually amazed that the designer could actually see what they were typing. I know that people that are color blind they tend to prefer the brighter colors and maybe that is why some design with those color choices. However, when designing a website we must consider the majority of our visitors have good vision, but we also cannot forget that 10% of our population is color blind. Red - Green color blindness is by far the most common form, about 99%, and causes problems in distinguishing reds and greens. Another color deficiency Blue - Yellow also exists, but is rare. With this said you should consider all visitors and even the 10% that are color blind. Below you will see some examples of what would be considered bad color design, and good color design. I am not saying the better choices are ideal, but what I am showing you is that muted and softer colors please the eyes and make it easier for visitors to read text on a web page.
Here are some examples of the big NO NO's:
 |
 |
 |
|---|
Here are some examples of better choices:
 |
 |
 |
|---|
How can you easily offer a website that can been seen by those that are color blind? The answer today is that you can design two CSS style sheets or you may know them as skins. Set a link so that those that are color blind can choose the style sheet that best suits them. Where would you put this link? I personally would make a link in the link bar or within the footer for users with disabilities. As long as it is easily located I am sure the visitors will find it and use it.
Fast Loading Pages The 10 Second Rule
The most important thing to consider is your web page loading times. If a page does not load completely within the first 10 to 15 seconds the viewer is likely to click the back button and never see your page. We all would like a visually appealing web site, but we must not go overboard with graphics and scripts. Graphics that are not optimized and having many scripts on a page can enter your web site to a slow crawl which will always have a negative impact on your web site traffic. You must optimize your web pages and everything within it, but how? Below are a few things to consider when optimizing your website for speed, and the tools needed to do it.
Start first with a decent Host: If your hosting is always down and is slow this will greatly impact your website page load. Consider a higher quality hosting plan that professionals use to host their website's.
Use images only when needed. A major design mistake is to build a web page with graphics that are large in both size and quality, animated, and poor optimization settings. Some website's just have no choice, and they must use many graphics on their website's. A great example of a web site that might want to use a lot of graphics is a graphic design web site. How would a graphic design website battle the issues with loading times? Well they can start with having a few simple rules, and the first rule would be to keep images on the site under 300 x 300 pixels in size. The second rule would be to make sure the image has a purpose and not just for decoration only.
The affordable solution for optimizing your graphics is Paint Shop Pro Photo X2 Paint Shop Pro is more affordable to a new website design budget, and has the ability to help you properly design, and optimize your web site images. The budget spent on affordable graphic design software will pay for themselves in the end because the traffic will increase, and your web site graphics will look professional.
Limit the use of flash animations Flash sure looks beautiful and professional on a web site, and at times the file size of a flash animation can be much smaller then a graphic these days. Flash should only be used for special purposes, and please never use messy graphics in your flash designs. Flash looks beautiful and professional when you use professional "clean" graphics. I've seen black background web site's with flash animation and the images had jagged white pixel edges.
If you must use flash within your HTML designed website please make sure it is optimized to load faster, and you use a quality flash design program. My suggestion is to use
Adobe Flash CS4 Professional - Full
to Create and deliver rich interactive content. Adobe® Flash® CS4 Professional
To triple optimize you can use Paint Shop Pro Photo X2
to design your images, and then import them into your flash program.
Here is a looped example of an unprofessional and a professional flash animation design. Note the jagged pixels on the dirty loop compared to the nice clean images.
Use CSS style sheets Today we have such a wonderful way of designing our website styles and it is called CSS (cascading style sheet) CSS code helps your page load times. You can create several styles for one website and tell each page which style you would like to use on that page. You can use styles for almost all aspects of your web page such as rollover buttons, text styles, padding, font colors, sizes, and so much more. The web design software we recommend and use ourselves is Dreamweaver and you can use it today by Downloading Adobe Dreamweaver CS4 directly at Adobe.com. Michele's Paint Shop uses this program to design our own website and style sheets. We added a few of the popular color theme collections to help with CSS color designing of a website via a CSS sheet. Help yourself to those colors and see what you can come up with.
Mystery Navigation? Website Menu Disasters
The above set of buttons represents my impression of a bad set of website navigation buttons or icons. I have placed a question mark on them because I have no clue what they represent. Some web sites use this type of navigation and it is a major design mistake. I've visited many web site's that have these types of mystery links and because I did not know what the icon represented I feared foul play, and who knows where it may have taken me? What do you think I did at that point? Of course the answer is that I just left the site. I am sure the website owner thinks their navigation is great, but you can clearly see that they did not consider their visitors and how the visitors would be surfing their website.
The same goes for those that are visually or hearing impaired. When you design a website you should consider those that have special needs. The most important thing to do when designing a website is to add proper alt and title tags. When you do not add the proper information into the alt and title tag sections they may never find what they are looking for at your website. Using these tags is also an excellent source for optimizing your website for the search engines.
Alt tags: If someone visited this page today, and they were blind they would likely have a text to speech engine reading the page to them. When the speech engine hit the area of the above image it would look for the alternate text (alt tag) for that image, and read the alt text to the visitor. The example image above has an alt tag text that reads "Mystery Website Navigation Example Image."
Here is what the alt tag code looks like behind the scenes. <img src="images/mystery-navigation.gif" alt="Bad Design Mystery Website Navigation Example Image" />
Title Tags: The next tag to consider would be the title tag. The title tag offers room to allow for a better description to the original text link, and again helps those that are visually or hearing impaired. Here is an example of how you can use title tags. <a href="index.php" target="_top" title="Newbie 101 Web Design">Newbie 101 Home</a>
Make sure you clearly label your alt & title tags and do not use them to spam your keywords. The easiest and best link navigation you could use is text and that is because you can use keywords as your anchor text and the link will be relevant to the destination. To grab some buttons for your website you can head on over to our graphic tubes section or you can visit this wonderful free graphic site
Below is an active example of how you can use a graphic that is mapped out, but each area is noted with a brief description on where the link will take you.
Putting things into perspective means organizing the key areas of web design below
Other Important Tips Making A Rough Draft
Putting things into perspective means organizing the key areas of web design
Below you will find more information on what you need to do before you even begin building a website. It is best to get a website down on paper first so that you can visually see your ideas first hand. Read along and then grab a notebook and start making your notes now.
1. The site subject - You must pick something that you enjoy so much that you will be able to keep up with it for years to come. Do not just make a website an any subject, it must be something that you have great knowledge in and can share your views about the subject.
2. Subject sections or niche - Each subject should have more then just one area of interest. Example if you were to make a website about graphic design, you should consider sections on software, tutorials, and other website's that you might want to link to. You may even decide that you will need an interactive section such as a forum. These things should be considered before you even begin your design so that you can properly map out your website ideas. Speaking of mapping things out... I found an excellent free resource that I think any project manager should have in their arsenal. Michele's Paint Shop recommends and uses Freemind to help map out website projects. I suggest you first use it to design a menu map, and from there you should get a good feel for the program.
3. Logos, Banners, buttons, and images - Every website should have consideration to using graphics. They not only make the website look impressive, the images can make a bold statement and help visitors get the feel for your website subject. You should make notes on what type of graphics you will want on the website, and where they will be placed. Keep notes as to why the image is needed, and list all the benefits of the image so you can weigh out its use. If you plan on adding photos of you, your employees, the business building, rooms, products, machines, and more, make sure you take several shots of the items because you will not want to just settle for any photo. Make sure you use highly optimized, resized images so that they do not lag the site load times down.
4. Link Structure - You will want to make a list of what pages you want to have, and design your structure. You may not want all links connected to a specific page in your list. Getting this down on paper first, then using a mapping program like the Freemind mentioned above is ideal.
5. Keywords, Phrases, and Titles - When you have the above items in order you should have a good idea on what keywords, phrases and titles you will want to use across the website. Make a list of your top five main keywords, phrases, and make a list of titles for each page of the website. Research them online to see what competition you may have, and what seems to work best. Writing down your results in your notebook will help you review them later
Attract & Keep Your Visitors Smooth clean website's
The visitors coming to your website will stay and look around if the site itself if it is visually appealing and easy to navigate. How did they find you in the first place? They likely found you by doing a search for a phrase in their favorite browser, and you came up in the top 10 results. This is a good thing, and you need to know why you were found, and why you are listed in the top 10 results. To do this you need to know more about website analytics, and SEO. Our website offers website guides in these subjects and we hope you review them as they can offer you the tips you need to have a successful website.
Best Wishes!
| 
