Graphic Design for Web Development

When producing graphic assets for a company, website, product, etc., aim to produce versatile assets that can be adapted to a variety of image dimensions and simple design like this one;

Navigation Elements

As with all elements on a website, it is crucial that navigation elements remain scalable. They need to be able to stretch, shrink and accommodate a variable amount of characters. Often we will see the background graphic of a styled hyperlink changing throughout the different states of a link element (dormant, hovered, active, and visited).

Custom Bullets

While PNG-8/24 graphics have become a standard on the web, we can still find the humble GIF lurking in custom bullets and low resolution graphics. Custom bullets are typically anywhere from 6×6 – 12×12.

Background Graphics

When it comes to background graphics, the sky is the limit. Remember that it only takes a 1 px wide graphic repeating infinitely to create a smooth background gradient. Clever CSS can be used to position graphics anywhere on the background of a website. With CSS3 we can (hopefully) look forward to being able to call multiple background images within one element.

Searching for Clues

Each day we find fewer and fewer limits on how we can style a website via graphics and/or CSS. From the body background, to the anchor elements, even down to the search-box input, we can add style to a site with a combination of web graphics and CSS. Read the source HTML and CSS of any sites that you may find interesting. Inspect websites with tools such as Firebug. You may be surprised at just how simple some of the most amazing web styling is.

If you are interested in learning more graphic design for web development, check out our courses.

Leave a Reply

Your email address will not be published.