logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

Effective Use of Graphics

Guest Author - Christin Sander

When choosing graphics, there are many important things to keep in mind. Graphics can enhance a website when used properly, but when they overpower a website or drag down the load time for the user, graphics-heavy websites may drive potential customers away.

These days, slow loading graphics are less of a problem than they were in days past when many people still had dial-up. Today, most people have a fast connection, but that doesn't mean that load times shouldn't still be considered. Graphics that are still loading after the content has loaded are very distracting and tend to annoy visitors because it gives the illusion of a slow loading website.

People who are surfing for information are notoriously impatient. They want to find what they are looking for quickly and without distraction. Heavy use of graphics, animation, or other overpowering visuals are a turnoff and will result in visitors getting frustrated and quickly clicking away from your website.

Small, clear images that highlight your content can go a long way in helping people find the information they are looking for. A website with a nice layout and relevant graphics that help the eye flow in the direction of the primary content are a plus for web-design. Graphics should not just be pretty, but functional as well. Anyone can slap a pretty picture on a page, but not everyone knows how to get that pretty picture to work for them.

Your graphics choices, from backgrounds, to placement, to images used within the content, should enhance the structure of your website and not overwhelm it. Not every element on your page will require visual representation, so choose only the most important subjects to highlight visually to avoid page clutter. Less is truly more with graphics in web-design.

Background Graphics

Background graphics should never be excessively bright or busy. Graphics directly behind text should be used very sparingly, if at all, because different browsers and devices will display that content differently. What looks clear and easy to read on your computer screen may be impossible to decipher on your visitors phone or device. Content backgrounds and text should always contrast for improved readability.

Bold Graphics

A punch of bright, vivid color or an amazing graphic that catches the eye can be very useful so long as they are not overdone. Some of the best web designs have amazing use of graphics that work as a frame without going into the main content. Complementary colors are then used to tie it all together. One, or maybe two, beautiful eye-catching graphics are plenty. Overdoing it loses the desired effect and can distract from your customers true reason for visiting your website. Use a great graphic and use it well, but keep the primary focus on the message of the website.

Other Considerations

Don't become too dependent on graphics for conveying information. Always have good copy to go with images for those who may not be able to view images.

Simple images like textures and seamless tiles are fast loading and can give a little something to the background of a content area without overwhelming it. Consider using subtle textures and tiles to help punch up a design without getting too “busy”.

Watch for pixelation and other forms of distortion. It looks sloppy and unprofessional. Graphics should be crisp and clear.

Be sure your text and other colors in your layout match or complement the graphics on your page. This ties the whole design together as a cohesive unit. I usually take color samples of my graphics in Photoshop with the eyedropper tool and use the hex-code to plug into the CSS of my design.
This site needs an editor - click to learn more!

Add Effective+Use+of+Graphics to Twitter Add Effective+Use+of+Graphics to Facebook Add Effective+Use+of+Graphics to MySpace Add Effective+Use+of+Graphics to Del.icio.us Digg Effective+Use+of+Graphics Add Effective+Use+of+Graphics to Yahoo My Web Add Effective+Use+of+Graphics to Google Bookmarks Add Effective+Use+of+Graphics to Stumbleupon Add Effective+Use+of+Graphics to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Web Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Christin Sander. All rights reserved.
This content was written by Christin Sander. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Creating Image Links and Image Maps

Using Website Templates

CSS Design Layouts

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor