GRAPHIC DESIGN FOR WEB PUBLISHING

A. Graphic Art and Design Principles Applied to Web Design

I.Intro.

The pupose of this paper is to help web publishers to create well designed web pages. Applying the principles of good design will make a web site successful. Useability engineering is a good thing to think about in designing web graphics - look at this list to see methods as applied to the web -http://www.webreview.com/ From print layout and composition to on-line design, the best graphics are simple, clean and well thought out. So much potential lies in the design of web pages. Color and sound, animation and text are all elements that can be used to express ideas and create great sites with power and impact. "A picture tells a thousand words" is not an understatement of the effect graphics and design can have on viewers of web pages. Like any medium, art and design take precedence to catch the viewer's attention, and enhance the experience for them. Content is still important and extremely necessary but the presentation of it can be the difference between whether a viewer will visit and absorb the content or will lose interest and never return to the site. The overall design will attract new audiences. Appeal is easy to create with all the great tools and graphics, photos and designs available. The capabilities of the average web designer can be greatly improved with simple color, balance, layout and consistant style guidelines. The possibilities are potentially endless! It is very exciting to explore this new medium with attention to graphic design.

II. Layout and Composition

Possibly the most important part of good design is layout and composition. It sets the stage for visual impact and just like a painting or photograph it dictates the impression the viewer percieves as sensational or unpleasant. Composition is a major part of layout. Just like an empty canvas you can paint a picture that opens your eyes and creates a style. Web pages and sites need organization and planning for layout and design. Structure should be based on navigation and function. Moving through a site and pages should be simple, logical and thorough. Confusion can result from the lack of organization or fragmented pages with random access or links that don’t correlate to the right pages or information with no way to track the path or direction taken. Backing out is not really the best way to order your pages without another directional link out or to the needed information. Especially with interactive graphics the key is balance. With performance and function in mind creating and planning a page or pages of a site can be categorized into several styles. keeping it simple so the audience doesn’t become overwhelmed by graphics, text or the organization of the material will be the best attribute of a well designed site. Examples can really be your best source of inspiration and help to give you great ideas. Look at web sites to compare designs and layout.

A. General Presentation of Web Sites - Organization

Some typical examples of organization are heirarchical with successive layers, branching out into a tree structure. Some are linear, best for narrative pages of information or as web implies, a stellar site steming out from a central home or splash/front page. Starting out with a splash page is closely related or similar to software user interface design. Think of your pages usability much the same as software interface design. Animated logos, image maps, graphics and images along with sound and multi-media for attention grabbers, but should not be used indiscriminately.

1. Top to bottom, Linear, Tree, Sequential vs. Web Design of Sites

Just as site organization can be aligned so can your individual pages Top to bottom design is probably good design for web pages since the most important information or most attraction should grab the veiwers attention on the first veiwed portion or screenpage. The veiwer usually reads top to bottom and left to right. Dividing pages into two windows can be done well if it is not confusing. Too many elements can look awful. Redundancy is not not to be used in the same way as consistency, as with unneccessary decorative ornamentation. A design could be thought of as creating a pattern with separate elements to it. Users seem to like having a static window that they can always refer to see where they are. if going for a more top to bottom design/layout keep the navigational links in mind. Balance is a little different because a page is not always a fully seen in one veiw and may have to be scrolled. Just as graphics guidelines are developed to keep the styles consistant, layout consistency is very important for page design.

B. Content-based Design Formats

1. Interactive graphical elements can serve dual purpose.

First to enhance and secondly to linkto other pages. You wouldn’t want to use more than a few typestyles just as you don’t want to use too many graphical styles or elements.Frames and tables may be used to help layout your page into sections. Visually balancing these elements requires common sense and an eye for simplicity. Don’t mix the styles of graphics or images. Quality and not quantity.

2. Linking Pages/Documents

Linking your pages or documents is simple with text references highlighted or graphics. A good example you may find could include a textual link or a graphical link but not both together. There are two kinds of URLs - absolute and realtive. External links can link users to outside sites or pages but should be relative to information or content of your site.

3. Page design can include the appropriate use of tables, forms, frames, interactive buttons and graphics as well as textual design.

Tables allow you to control the alignment of images but need practice to perfect and plan. Since not all browsers support tables so you should create an alternative page for viewers that don't.

4. Using Image Maps

Working with image maps is simply attaching a URL to a single image object or multiple links. Image maps are convenient and present multiple choices in a visual way. The server is either NCSA or CERN and the code for each map instruction requirements is slightly different. This is your map definition file which is placed in your HTML coding telling it how many pixels, where to go and coordinates. MapEdit is a shareware Image Map program that links the hot spots.There are other image mapping editers, some built into web editors.The best program I have found is Macromedia Fireworks - vector and bitmap graphic editing that optimizes the graphics as well as creating the html javascripting and pages and is completely integrated with the suite of Macromedia products including Flash for animation and Dreamweaver. Other Macromedia products allow web application design and database live links and interaction that are top of the line!