Posts tagged ‘web design’

Mock Up

January 1st, 2008

Part of the web design process is to present clients with a representation of what their web site will look like when finished. This enables the designer to obtain sign off on that stage of the project and to create discussion about any changes that may be required.

The visuals created for this are called a mock up.

 

Masthead

January 1st, 2008

This term has transferred to web design from newspaper publishing.

It refers to the common elements usually found at the top of a web site.

Most web sites follow fairly standard design patterns in order to make it easy for people to know how to use their web site.

A masthead usually contains elements such as a logo or other branding picture, some navigation elements and perhaps prominent contact details such as a telephone number.

The important thing is that the masthead remains the same on all the pages.

White Space

January 1st, 2008

White space is a page layout term and refers to the areas of a web page that have no text or graphics on them.

Put simply, white space, is the space between stuff.

A typical web page will be made up of headers, text, photographs, videos etc. How much space is left between each of these elements is an important aesthetic decision.

White space isn't worthless or empty. It makes a page readable and useable. Clients often include the word "clean" in a brief, saying that they want their web site to be clean. In many ways, this is achieved by good use of white space.

Where space is at a premium, e.g. where it is related to advertising, a web page can become cluttered.

Of course, the background colour of a web page can be changed or textured, so white space isn't always white, but in this case, the term would still be used.

Table based layout

January 1st, 2008

A table is an HTML element that should be used to present tabular data. During the early years of web site development, tables were used (incorrectly) to form layout grids for web sites.

This arose partly because web design was a new profession, partly because inconsistencies in web browsers meant that is was difficult to achieve complex layouts without them and partly because software used to create web pages used table in their off the shelf templates.

Table based layout is easy for beginner to learn, but leads to web sites which are neither search engine friendly or easy to maintain.

By avoiding the use of tables for layout, a web designer created pages which are more flexible, easier to maintain and load faster. All modern websites and site redesigns should not rely on tables for their layout.

An example correct usage of a table is shown below.

People
Name Age Height
John 28 176
Mary 42 180
Alan 57 168

In this instance, the table is only used to present a grid of information like a spreadsheet.

Brochureware

January 1st, 2008

This is a slightly derogatory term which is used to refer to simple web sites that try to do no more that offer a couple of pages of information.

The term arises because a web site enables organisations to move beyond the publishing constraints of print. Web designers sometimes get frustrated at organisations simply trying to replicate their "brochures" online rather than using their web site to its full potential.

However, a brochureware style website can be adequate for some comany requirements or as a first step on to the internet.

Lightbox

January 1st, 2008

A lightbox is a means of displaying a photograph or gallery of photographs on a web site.

A small version of the picture is shown on a page of the web site. When the visitor clicks on this picture, the page is usually blanked out and a larger version of the picture displayed. By blanking out the rest of the page, complete focus is given to the picture, displaying it to best effect.

Font

January 1st, 2008

A font is a type face. At the moment, web designers are limited in the the number of fonts that they can use for text when designing a web site as they are reliant on the font being available on the readers machine.

When creating graphics, any font can be used. But it is not advisable to use graphics to replace text on your website as it will not be very search engin friendly or accessible. Graphics most commonly used to replace text for elements of a web site such as a corporate logo and occasionally for headings.

Alt Text

January 1st, 2008

When you use graphics or photography on a web page you should include Alt Text for each of these pictures. Alt Text is contained in an Alt Tag and is text that describes the picture so that visually impaired people using screen readers can have a description of the picture read out to them. The Alt Text is not displayed unless the picture is missing or the visitor runs their mouse over the picture.

For a site to be standards compliant each picture should have and Alt Tag, though it is not necessary to add Alt Text to each picture.

An example Alt Ext would be "Acme 1000 Widget. Click this picture for product details"

Above The Fold

January 1st, 2008

"Above the fold" is a concept that originated in print design. It describes information that is displayed in the upper half of a page on a news paper or magazine. Advertisers often pay more to display their information "above the fold".

The term is used by some web designers to indicate the placement of important information near the top of a web page. This ensures that the information is visible on screen when the visitor enters the page without having to scroll down.

However, the notion of where the "fold" is on a web page is not as easy to determine as in print. This is because the amount of a page that is visible depends on the your screen resolution, whether or not you have your browser window maximised and how many tool bars and menus you have open. Therefore the "fold" will be in a different place for different kinds of visitors and keeping content "Above the fold" should not really be a guiding principle for your design.

The notion that visitors do not scroll down to find information on a web site really isn't true. In fact page length has increased over the years due to the increasing popularity of blogs.

 

Accordion

January 1st, 2008

An accordion is a layout mechanism used on a web site.

It is a means of saving space on screen by hiding information until a heading is clicked.

When you click on the heading, the information that has been hidden is revealed usually in a smooth animation.

Accordions can be used in navigation menus on your web site or to compact long web pages into on screen, giving visitors the option to jump to the section of the page they find most relevant.

One advantage of using an accordion on a long web page is that it although you only display the information in small chunks (great for your readers), all of the information is contained within the page (great for search engines)