Web & Graphic Design Newbie 101 Tips:
Prepare to have a great website

Newbie 101: Learn the do's and don'ts of design such as how to build, market, design, and optimize a perfect site. We see so many web sites out there that are good, but never get visitors because the designer did not know how to properly introduce the website to the world. The first advice is If you do not properly optimize your web pages then you can just forget about traffic. There are steps one must take to have a successful website, and you can get started by putting things into perspective.

The Rules and Order of Web Design:
Website Design ideas must be thought out first

If you do not follow rules, and directions you are likely to fail. Once we ignore those rules we invite problems into our lives, and the same rule applies to your website's.

Then of course we also have an "order" in our lives. We have to follow steps in a certain order so that we can successfully complete a project we are working on. What happens if you do not follow a set of step by step directions in "order"? The answer is pretty simple. You end up with something that is unstable. Rules, patterns, and a certain order certainly apply to web design and the search engines. Do you want to invite problems to your domain, and would you like to also get lost in the search engines along the 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.

Before you even start working in your editor:
You must have a draft on paper and other ideas in your head

Below you will find some 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. Grab a notebook and follow the links below (icons) to learn more.

Putting things into perspective means organizing the key areas of web design below

Free Graphic Resources
Now for the fun part of designing website's. Finding great graphic resources

You can design your website with graphics from free resources on the Internet. There are many great resources out there that offer fantastic graphics. Sometimes they come with rules, and these rules typically are the do not want you to direct link to the graphics on their server. Believe it or not there are people out there that love to design, share, and are proud to have you use their graphics.

I highly suggest you visit the website bellsnwhistles.com as they offer free animated and non animated pictures, bullets, icons and other graphics, Cut-n-paste javascript, backgrounds, links, resources, and other information to design a great website. Their site is a large collection of tools for web designers.

Using free resources to design your website is a time saver which allows you to spend more time on the more important areas of web design. You will learn that having a well designed, well thought out website with great content pays off in the end.

Make your visitors say WOW
Smooth and clean website's

The visitors coming to your website will stay and look around if the site itself is visually appealing and easy to navigate. There are so many areas within web design that one needs to consider when building a web page. Did you know it can take a professional web designer over seven days to just come up with a flattering design just for you and your business? Did you know it can take a few days just to make the text is placed in special areas so the search engines find them? There is so much to consider when it comes to web design and knowing some of these tips before you get started making your own site is important. The same goes if you have decided to hire a design team to do it for you. This knowledge goes a very long way.

Fast Loading Web Pages:
The 10 second website rule is STRICT

The second most important thing to consider is your web page loading times. If you 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 website, but we must not go overboard with graphics and scripts. These can slow down your website to a slow crawl, and that will have a negative impact on your website traffic. You need to optimize your web pages and everything within it. The question is how? Below are a few areas that you should consider when optimizing and the tools needed to do it.

• Use images only when needed.- A major design mistake is to build a web page with graphics that are large, animated, and without any proper optimization settings. A simple rule to follow is to keep images under 300x300 pixels in size. The ideal image would have a purpose and it would not be for decoration. The two solutions I recommend for image optimization is Paint Shop Pro Photo X2 Full and Photoshop Creative Suite 3 Extended.


• Limit the use of flash animations - Flash sure looks beautiful and professional on a website. Let me say that again this way Flash looks beautiful and professional when you use professional "clean" graphics. I've seen black background website's with flash animation and gif's all over it (that is a big design no, no) and the images had jagged white pixel edges. It looks horrible to your visitors, but flash can be used if you take your time to design properly. What are the other reasons to NOT use flash? Well, for one it can take to much time to load and your visitors will not even see it because they clicked the back button. If you must use flash then use it within your HTML designed website and make sure it is optimized to load faster, and looks awesome. My suggestion is to use Flash Creative Suite 3. Create and deliver rich, internet content. Order Now!

   


• 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, rollover buttons, text styles and so much more. Dreamweaver Creative Suite 3. helps you design your very own style sheets. We added a few color theme collections to help with designing a website via a CSS sheet. Help yourself to those colors and see what you can come up with.

Do you want to lay at the bottom of the search engine result pages? Read on to make sure your website design choices are good enough for your viewers.

Horrors of Colors and 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 their site quickly. I am actually amazed that the designer could actually see what they were reading. 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 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 the 10% that are color blind.

Here are some examples of the big NO NO's:

Here are some examples of better choices:

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 us to read text on a web page.

Mystery Navigation

How many times have you went to a website and had to guess what and where the links were? I've visited many website's that have these mystery links, and I call them this because I did not know what the icon represented. I felt lost, and I just left the site. I am sure the website owner thinks their navigation is great, but did they consider their visitors at all? The same goes for those that are visually or hearing impaired when you do not add the proper information in the alt tags they may never know what they are truly looking at.

Example this image above has an alt (alternate text) that reads "Mystery Website Navigation Example Image."
Code sample is <img src="images/mystery-navigation.gif" alt="Bad Design Mystery Website Navigation Example Image" />

Also consider using title tags within your links such as this sample <a href="index.php" target="_top" title="Newbie 101 Web Design">Newbie 101 Home</a> These tags will help the visual and hearing impaired. The above set of buttons represents my impression of a bad set of website navigation 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.

Please be considerate to everyone that visits your website. Make sure you clearly label your alt & title tags and do not spam them with keywords. The 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.

If you found this page helpful please recommend it to others, and bookmark this page. Add to Favorites

Graphics on site: This web sites graphics were all made by me using the Corel Paint Shop Professional program. We are currently working with software by Corel, and you can buy Corel Software directly from official site Corel.com . All animations are typically made with Corels Animation Shop 3. Animation Shop 3 Download (11.2 MB)