Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the Web
Webmaster's Tutorial -------------- Webmaster's Tutorial Index -------------- Article Archive -------------- Sitemap -------------- Privacy -------------- About

Webmaster's Tutorial
About Domain Names
About Web Hosts

Analyze Website
Analyze Audience
Target Audience
Demographics
Website Goals

Organize Website
Website Basic Layout
Website Structure
Website Sections
Website Content
Website Navigation

Develop Website
Website Construction
Sitemap Construction
Webpage Construction

Implement Website
FTP Website
Fine Tune Website
Upload Organization
User Interaction

Maintain Website
Maintenance Plan
Website Optimization
Optimize Website
Website Promotion
Website Traffic Analysis

Resources
Main Site Index
Article Archive

Website Graphics
Website graphics and how to manage them

Special graphics techniques

Background graphics

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.

Using a safety palette

If you want the vast majority of visitors to see your web pages as they appear to you, you will have to limit your graphics and text colors to what is called the safety palette or web-safe palette.

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.

The "alt" tag

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.

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.

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.

Complimenting your website theme

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.

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.



BACK: Typography and Website Design - Layout NEXT: Web Safe Colors


Copyright© 1999 - 2011
Rocketface® Graphics
Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index