Rocketface® Webmaster's Workshop
Designing A Website   
A beginners guide to building a classic website


Including the step-by-step webmasters tutorial
How to Design a Website

Home Sitemap Archive Index Privacy About Search AddThis Social Bookmark Button
Webmasters Tutorial Navbar
How to Design a Website
About Domain Names
About Web Hosts
Free Web Hosts
Private Web Hosts
Types of Websites
Building a Website
Analyze Website
Analyze Audience
Analyze Content
Website Design Tips
Website Journal
Effective Communication
Target Audience
Demographics
Website Goals
Organize Website
Website Basic Layout
Webpage Design
Website Navigation
Website Structure
Website Sections
Website Theme
Webpage Layout
Website Content
HTML Editors
White Space
Develop Website
Sitemap Construction
Webpage Construction
Website Assembly
Website Construction
Website Graphics
Website Templates
Implement Website
FTP Website
Fine Tuning Website
Upload Organization
Ftp Checklist
User Interaction
Maintain Website
Website Promotion
Marketing Website
Viral Marketing
Content
Product Sales
Affiliate Programs
OnLine Services
Optimize Website
Keywords
The SEO Process
Website Traffic Analysis
Increasing Website Traffic
Links Tracking
Link Baiting
ROR RSS Sitemap
Generator
Summary
Webmaster Resources
Webmasters Tutorial Start
The SEO Process
Mini Site Design - 101
HTML Tutorial
A beginners guide to effective email
Resources
Glossary
Newsletter
Feedback
Webmasters Article Archive

Bookmark
Bookmark Rocketface Workshop


Website Graphics

Special graphics techniques

Let's talk for a minute about background graphics. If you are using a background image, make sure that it remains a ''background''. What I mean is that the design, pattern or color should not dominate. A visitor to your website should never notice the background first. When a background becomes more of a foreground element itself, the effect has failed.

Information Choosing Website Colors

Image tags

For every image tag you have on your web pages, make sure to include the height and width attributes. This is important because as your page loads, if there are no measurements listed for the images, the rest of the page will not load until the image has been completely downloaded. If you have the size attributes, the browser knows how much space to allow and loads the rest of the page as the image is downloading.

Information Professional Graphics

Be sure and include the ''alt'' attribute in every image tag for those who either cannot or choose not to view graphics as they browse. The alt tag will present a name box telling the visitor about the graphic so make sure it is descriptive. Make the "alt" tag part of the content of your website. Also, search engines will be able to better index your page content when the "alt" tags are used.

Information Graphic Design Using Color


Webpage graphics programs

You will need a source for graphics or be able to create your own. The flexibility of knowing how to design your own graphics is the best way to go. Great programs for creating graphics, retouching photographs, designing text and building animated gifs are, PaintShopPro or Photoshop. You can also find links to some free graphics programs in the Webmaster Toolbox.

Information Standard Rates For Graphic Design

Graphics resources

If you need a source for ready-made graphics, there are many sources online. There are websites that offer paid memberships for their graphics and there are also hundreds of sites offering free graphics. Be sure, however, to read and comply with the rules of use for any graphics you use.

Information Web Site Design Tips - Graphics

Your choice of graphics should compliment the theme of your site. Remember that a theme can be as simple as color choice or a logo design and there are many examples of this on the website coolhomepages. Check out the website designs that fit your needs and learn from them.

Optimizing graphics

When creating or selecting graphics, keep in mind that you want your pages to load quickly . Web users will not wait to see what's on your website if it takes over 30-45 seconds to load and display the first page. If you have large graphics, spread them out over several pages rather than putting them all on one page or better still optimize them with your graphics program.

Information Take Advantage of Eye Tracking Tests

Failure to optimize your graphics will lead to excessively long loading times and this will cause you to lose visitors. Using small icons and pictures works well on the Internet. Large images are really not necessary. Limit the physical size of complex images and optimize the file size as well. This is best accomplished through the use of a good graphics program.

Note: make sure you include the ''alt'' attribute with every graphic so that those viewing without graphic display will know what is in that spot.

Information WYSIWYG Web Design Software - Which One is Best?

Webpage Designing - Further Reading

Information Designing Web Pages
Information Icon All About Design Principles and Elements
Information Icon An Issue of Width - The Resolution Problem
Information Icon Critical Web Design Rules
Information Icon An Easy Way to Choose Attractive Color Combinations
Information Icon 8 Ways To Improve Bad Website Design
Information Professional Webpage Layout
Information Icon Visit the Webmasters Article Archive for further information on website design and webmastering.



Check out the webmasters article archive.
Copyright© 1999 - 2008
Rocketface® Graphics
Home Analyze Organize Develop Implement Maintain Site Map Index