A complete guide to professional website design - Webmax Solutions (Website Design Company) Article

When the web was in its nascent stages, it was homogenous in design. The pages were almost identical with most of them having a white/gray background with black text. The only different aspect was the colored hypertext links and the headings using common HTML header tags. It was only with the surfacing of GUI interfaces that the web gained popularity. However the relationship between computers and images can be traced back to 1965, to Ivan Sutherland's Sketchpad project, which showed viability of computerized creation, alteration and storage of pictures. Today's professional website design depends heavily on the use of images to promote brands and the recall of their websites all over the world.

Computer graphics most commonly fall into two distinct groups: vector and bitmap. First up, we will go into detail about bitmap graphics, which are usually created by using the common tools like Photoshop and Paint Shop Pro. Well known bitmap formats include PSD, PICT, BMP and TIFF.

These variations are never used for the web because their file size becomes too large which in turn slows down the downloading time and affects the pages usability. As the saying goes "If you don't have fast images, you don't have fast pages." Other options such as tweaking HTML code, incorporating style sheets and shortening sentences all have minimal effect on file size when compared to file size of images. Since file size is given so much priority in electronic publishing, its compression is necessary, which is not decreased resolution but simply making the file smaller.

Types of bitmap graphics

1. GIF images:- The most widely used formats on professional website design at present are GIF (Graphic Interchange Format) and JPG/JPEG (Joint Photographic Experts Group). They are made up of pixels i.e. tiny square picture elements which when seen from a distance looks like a smooth image. A small piece of computer memory is allocated to store each individual pixel. Hence an image scaled to 75% will consume less memory than the same image at 100% in size.

Professional website design can maintain quick downloads if they utilize the capabilities of the image formats. For example GIF images can be interlaced, animated and made transparent. Interlaced GIF images are those which when downloaded, at first look blurred and like blocks but eventually become smooth as their resolution sharpens. From a usability point of view this technique is usually opted for because it provides the user with something to focus on before it is completely downloaded. However, interlaced GIF images serve their purpose on non-essential graphics, they only frustrate end users when used on essential graphics as a navigation icon, for example must be seen in order to fulfill its function.

The most common practice while creating images is to make them as square or rectangular files. However one can create the illusion of irregular shaped images by making the pixels in an image transparent. In animated GIF images you can combine numerous images to store them as a single GIF image. When these numerous images are shown rapidly together, they form animation. Some advantages with GIF images are that they are easy to create enjoy browser support and the user requires no additional plug-ins to play them.

2. JPEG images:- JPEGs compress the files in 24 bit-color. Designed particularly for photographic images, they are able to handle color gradations with ease but handle solid color blocks poorly.

3. Vector Graphics: - A popular, highly usable and aesthetically superior image format that is slowly but steadily taking over the popularity of bitmap images on the web. They are formed on the basis of mathematical formula. A bitmap creation uses a relatively large amount of computer memory; however the same image could be described in vector format by a simple mathematical instruction.

Vector Graphics Vs. Bitmap Graphics

1. The huge advantage with Vector graphics is that they are resolution independent or scalable i.e. their size can be changed as per their output device such as a printer without blocking more disk space. For professional website design usability it means that the download time for an image will be the same no matter the size.

2. With vector graphics the sharpness of the resolution will remain the same even if scaled to a different size whereas a bitmap image will lose its smoothness and sharpness if changed. This ease in scaling is the main factors that rates vector higher than bitmap among professionals and makes it irresistible to professional website design.

3. Bitmap formats are the standard graphic file formats on the web at present, which means that vector graphics have to be fixed in order to be displayed in current browsers.

The code can be written within HTML code, eliminating the need for additional files in contrast to flash, which uses additional binary files. Vector graphics can be manipulated using JavaScript, which means that effects such as animation and rollover effects could be applied. Reining the attribute capabilities of images has huge potential for retrieving the image.

Positioning of vector graphics will be determined using CSS. By harnessing the power of CSS vector graphics will be capable of grouping and layering and will be able to incorporate text and be named, which allows them to be used for scripting. They can be defined and used elsewhere much like the class attributes of CSS. The use of the vector graphics has only just been tapped and it has tremendous possibilities in the future for professional website design.

Back