Web design should take into account the same principles and elements that are common to other design disciplines such as lithography, typography, photography, painting and
illustration. Some of these principles are outlined below:
Balance is implied in the beholder judging the objects within the design in regards to their visual weight or equilibrium in comparison with the other objects within the design.
Symmetrical balance, or formal balance, is achieved when the objects within the design are displayed evenly on either side of a horizontal, or vertical axis. In other words, arranging
elements of a design so that no one section of the canvas appears to draw the main focus. A large light shape can be balanced by a smaller dark shape in the opposite pane of a canvas
divided in two.
Asymmetrical balance, or informal balance, is characteristic when the reverse occurs and will generally invoke a sense of visual tension. In other words, the weight of the composition is
not distributed evenly around any axis. The sense of equilibrium within the design may be maintained by a larger object being offset by lots of smaller objects. Shades of dark and light
tones are also used to create or upset balance in design.
Rhythm gives the suggestion of movement within a design. It is often achieved by the repitition of a pattern of colours, lines, or shapes throughout, sometimes with some variation
to avoid monotomy.
Similarly, a gradation of tonal contrast can imply linear perspective and cause the eye to move along such a shape in the design.
Proportion can often to relate to balance or symmetry since it is apparent in the comparison of the dimensions of one object against the dimensions of another object within the
design. Proportion can be used to make one object appear to be in the forefront of an image, while other objects reside in the background.
Dominance is the way in which objects within the design are scaled in order of their importance, or emphasis. The dominant object will usually be noticed first, while other sub-dominant
objects are only noticed afterwards. The subordinate object within the design is noticed last, and has very little emphasis. Dominance can be used to place emphasis in a certain element or
area of the design.
Unity encompasses the way in which separate objects make up the design as a whole. This is achieved through objects of similar shape being grouped together or through the use of
lines which imply different effects such as of three dimensions within the design. A passive subject would be complimented by soft texture and minimal tonal contrast.
Contrast, or opposition, is encapsulated by the conflict that may be apparent between the objects within a design. The main focal point within a design should contain the most significant
contrast.
Harmony, on the other hand, can give a more appealing effect when complimentary or analagous colours and similar shapes are used so that they look they belong together.
Positive and negative space present a duality within the design through the sense of a plain background or space, with more dominant objects making up the forefront.
The elements of design are the building blocks of a design, the basic components which are built up and arranged to make up the composition. These elements are addressed below.
A point is a single mark with no extension. Multiple points in space can make up the basis of a line or shape.
A line can suggest direction, perspective, or continuity within a design, and were once traditionally the result of the movement of a pencil or brush. Lines with differing weights can be used
to imply value, emphasis or density.
Shape is created through closed lines or a line, and are commonly derived from the basic shapes of a triangle, circle or square. Shape automaticaly creates negative space around itself.
The space around shapes is sometimes more approving to the eye, and can avoid making the deisgn look chaotic.
Whilst shapes are generally thought of as two-dimensional, forms are regarded as three-dimensional, and give the illusion that they occupy space. Through the use of shading techniques a
three-dimensional effect is created implying that the form can be seen from many angles. Shapes and forms and can be used to represent real objects, or abstract ideas.
Texture is used to create the effect of a tactile experience on the surface of the element. It represents the roughness or smoothness of an object.
Colour can be described in many different ways. It is often the most expressive element in a design. One of the most important uses of colour in web design is the concept of colour harmony,
or how different colours can be combined within the same canvas. When opposite colours are placed in the same vicinity, they tend to enhance the intensity of each other. A commonly found
use of colour in many newer website designs is the use of analaguous colours, or colours from a similar family being used together. Colour can also be used to create the illusion of depth since
the eye perceives the colour red as coming into the foreground, and the reverse for the colour blue.
Typography is the use and understanding of typefaces. The choice of typeface, line length and height, point size, and the way in which they are arranged contribute greatly to the design.
Typography can contribute to, or create the feel of a design through the complexity or simplicity, and emphasis of typeface. An appropriate use of typeography lends its self to clarity and
legibility, and also enhances the desire to read what is presented.
Design within the context of the World Wide Web requires an understanding of the aspects of the medium of the web itself. Some of these aspects are highlighted below:
Screen size, commonly referred to as screen resolution, is a measurement of how many pixels are available within a user's display. Common settings are 1024 * 768, and 1280 * 800. With
the advent of the popularity of larger monitors, an increased amount of space has become available to some users. Since screen size will dictate how much of a web page a user will see, as well
as the fact that different users may not be seeing the web page in the same way, it is important to design a site to suit most people who could potentially browse to it.
Percentage-based design, where the elements of a web page are stretched or condensed in proportion to the available space within a browser, is one approach which tries to lend itself to
accomodate all of the different screen sizes. When a design is to be ideally viewed within certain boundaries, it can be a useful approach, however it does not always lead to the same results
across the broad spectrum of screen sizes now available - especially when viewed on larger monitors.
Fixed-width design involves specifically allocating widths and heights to the elements of a web page, so that no matter what screen size is being used, the elements of the page will remain static.
Browser type refers to the application used by people to view web pages on their computer. It is the tool by which users can interface to, and interact with, the web page itself. Since web
pages are displayed in browsers, and since different types of browsers can differ in the way they display web pages, it is very important to take into consideration when designing web pages.
Quite often a website designed and tested specifically for Internet Explorer can appear to be quite different in a Mozilla browser. Best practice would dictate the need for cross-browser
compatible web design. Through the use of non-deprecated HTML (ie. HTML that is not deemed to be obsolete) and CSS (ie. properties that lend style to the elements of a web page) that is
accepted by the W3C, it is easier to try and accomodate to a wider range of users.
Cross-browser compatibility, and the concept of web standards is quite a daunting topic for many developers. To complicate issues further, unexpected results can arise when a web page
is viewed using different versions of the same browser! It can be quite difficult to remain up to date with different standards, and an even bigger hurdle to cater for the idiosyncrasies that exist
between different browser types. However, it is not acceptable to claim that since the majority of users engage the web with Internet Explorer, the web page will therefore reach the higher
percentage of people who browse to it as long as the page is designed to suit Internet Explorer. A lot of work has been done to make it possible to allow web users to have a similar browsing
experience if standards ard recognised and adhered to within web design.
The idea of web standards also lends itself to accessibility for users. Since web design should support the ideal that public sites should be accessible by every user, even those users with
physical, auditory, or visual impairments. Amongst the many standards being put in place by the W3C, the
Web Accessibility Initiative serves to improve the browsing experience of everyone.