Elements of Web Design For a Website

Monica Ionescu

Written by Monica Ionescu on August 13th 2010
Posted in: Featured, Technology
no comments

Do you like this story?


With a good Web design package, creating a website is very straightforward. Webpages include typically a combination of the following elements:

Text is typed in by the designer or prepared in a word processor and copied into place. It can be made to appear in different sizes, colours and positions on the page. More advanced design software can make it appear in a variety of different lettering styles, known as fonts. When talking about Word applications coming from Microsoft, Mac iOS or Linux operating systems, this is by default, but when referring to writing a website directly at the website’s address, this does not necessarily provide all the known fonts. While this can look impressive, it is something of a special effect and is an unnecessary complication for a beginner’s first pages.

Photographs are available from a number of sources. They can be copied into a computer directly from a digital camera, which takes pictures without film, or via a hardware extra called a scanner, that can convert a photograph or any other kind of picture into an electronic image; this can be modified using an image editor, which is roughly said a kind of electronic darkroom, with a range of sophisticated tools for working with images electronically.

Scanners in general are very cheap and are easy to use. Good image editing software is also very affordable. Appart from tidying up photographs by correcting brightness, contrast and colour balance, it is also possible to cut out the most interesting part of a photograph electronically. This makes it easy to cut out someone’s face from a group shot, for example. Even the simplest image-editing software can add a huge variety of special effects. Once a photo has been prepared, it can be imported into a Web design and positioned on a Web page.

Graphics typically include cartoon-like illustrations, drawings of buttons, arrows and so on, or purely abstract decorative designs and can be bought in bulk from major computer stores. Or they can be copied from other Web pages. This is an automatic process. When you view a Web page, all the information appears in your Web browsers’s cache directory’. Graphics and other information can be copied out of this directory for use in your own pages. Using graphics from other sites may cause copyright problems. However, some graphic elements , such as rainbow bar – a small rainbow-coloured line, are used on so many pages that they appear to be public domain and can be used freely by anyone.

Some websites specialise in offering graphics to Web designers for free or at a very low cost. To find these, use a search engine to look for Web graphics. Graphics can be also home-made, again using image-editing software. Unlike photographs, however, they can only be created successfully by those with some artistic talent.

Background textures are simply standard Web graphics used as a background. Unlike other photographs and graphics that appear on a page, these are tiled – in other words, they are copied repeatedly in the background, to make a pattern. You can use any graphic or photo as a background texture. Very colourful or complex designs, however, tend to clash with text and large images increase the time it takes the page to appear and can sometimes look lumpy.

The most successful backgrounds are either quite dark and suitable for light text, quite light and hence suitable for dark text, or concentrated on a single colour, using a contrasting colour for any text on the page then makes it easy to read. Abstract designs often look attractive as Web page backgrounds.

As with other Web graphics, these can be bought in bulk or – copyright permitting – copied from other Web pages. They are usually modified so that they provide a seamless texture without edges when tiled and good image-editing software can smooth out the edges of an image to make this possible. It’s perfectly acceptable to use a single colour for a background, instead of a graphic and many Web pages still use the default shade of grey as a background for plain black text.

Links can be created on any word, phrase or image. In most design software, this is very easy and can be done by highlighting the word, phrase or image with a mouse, selecting a create link option and then typing in the URL the link leads to.

With good design software, combining these elements into a page design is simply a case of telling the software where you would like each element to appear – for example, you can place some large text in the middle at the top of the page to make a heading, insert a photograph underneath it, add more text in a smaller size underneath the photograph, set up a short phrase in this text so that it acts as a link and so on, until the design is complete.

Once your page layouts are finished, they are converted to HTML. The HTML is a kind of recipe that defines what appears on the pages.

Note that while all the text of a site is included in the HTML, photographs and graphics are not. Still, you can edit the dimensions of a photo and other elements, but only if you are working with special platforms, such as WordPress, which lets the user define a photo the way he wants it to be. When you copy your pages to your ISP’s Web computers, the latter also have to be copied in full to make sure that your page appears exactly as you designed it.

All the most popular design software includes tutorials which explain how to get the best from it and show beginners exactly how to create their site in detail. Some also offer wizards – automated design tools – which aim to simplify the design process as much as possible by providing a range of standard pre-prepared site designs which can be filled in with suitable text and images.

Did you like it? Share it!

Watch tweets on:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>