Design

The first step of website development is to plan the structure of the website. This is how the pages will link together, to allow for navigation between pages of the website and any links to external pages.

All of the designs will start with the homepage at the top level,
and then there will be the pages of level one (there will be no
more than 4 internal pages linked). The homepage and the pages
on level one will be the links that appear in the navigational bar.

When showing how the pages on level two will link we add to the
diagram similar to the following.

In the structure designs the pages linked with horizontal lines (level one and the homepage in the examples) will be two way links. The pages linked by vertical lines will be one way links from the source of the line.

However, it is not always the case that a website has a linear or hierarchical structure. On occasion, website structure is a bi-directional link between the homepage and other subpages.

Wireframes are a way of representing the visual design of a webpage and are very common in the industry.

A wireframe should:

• navigational bars/links

• text elements on the page (but not necessarily including all the text that will be in the element)

• interactive elements such as buttons

• images, videos and audio

• form inputs

• hyperlinks (and where they go)

Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

• Visual layout
• Readability
• Navigation links
• Consistency

After a wireframe is built, the web development team often move towards the construction of a low-fidelity prototype. 

This is often developed by a graphics designer.

Low-fidelity prototypes are often more detailed than wireframes and may contain more text than a wireframe and images might actually be hand drawn into the prototype.

Construction of a low-fidelity prototype is cheaper than building the finished product as it is faster to build. This way the client can suggest changes early on in the development cycle.

Over the years computers have been developed, so too have many standard file formats.

Standard file formats are used to ensure that no matter what platform you are using the system will be able to understand the file.

Some applications such as Adobe Photoshop do not save their files in a standard file format by default to allow them to store more than just the standard file (in Photoshop's case, the image).

For example, Photoshop stores things like information on layers, whereas exporting to a JPEG or PNG (which are both standard file formats) will remove the information on layers.

File formats are compared on how much space they take up on a system. This is called the file size.

Compressing a file can reduce the amount of space that is required for the file, often by removing parts of the file that are unnecessary.

Quality may be judged by comparing an uncompressed file with a compressed format or a file in a different file format. 

For example, the quality of a PNG file is much higher than that of a GIF or JPEG file.

There are three standard file formats used for storing images:

• JPEG

• GIF

• PNG

Graphics file formats are compared on several different attributes:

• The colour-depth: the number of different colours that can be represented by each pixel

• The resolution: the number of pixels going downwards multiplied by those going across

• The file format's compression method: JPEG looks for areas that are not visible to the human eye from a distance and merges them, however, zooming in on an image these changes become more obvious

JPEG or Joint Photographic Expert Group was developed to store with a compression ratio of 2:1 all the way to 30:1 (meaning it can be between half the size to a 30th of the size of a non-compressed file)

JPEG or Joint Photographic Expert Group was developed to store with a compression ratio of 2:1 all the way to 30:1 (meaning it can be between half the size to a 30th of the size of a non-compressed file)

JPEG is generally used for storing still photographs using 24 bit (true) colour.

GIF or Graphics Interchange Format is another format for storing graphics. 

Unlike JPEG files, GIF files can have transparency, meaning that the pixel in the image is see-through.

Unlike JPEG files, GIF files can have transparency, meaning that the pixel in the image is see-through.

PNG or Portable Network Graphics combines the best of all graphics formats but has the largest file size.

PNG or Portable Network Graphics combines the best of all graphics formats but has the largest file size.

PNG can be up to 48 bits in colour depth, meaning 48 bits per pixel. It is more common to see 32 bits per pixel than 48.

Like GIF files, PNG files can support transparency, but they also support partial transparency. 

• WAV
• MP3

• The sample rate: how many times in a second a computer measured sound when recording (remembering that across one second music can change quite a bit)
• The file compression: like JPEG, MP3 removes parts of the file that we don't hear

• MPEG
• AVI

• The resolution: the number of pixels going downwards multiplied by the number of pixels going across
• The colour-depth: the number of different colours that each pixel can represent
• The sample rate: since video files also contain audio, the sample rate can affect the quality
• The type of file format (and compression) used

The Copyrights, Designs and Patents act covers all sorts of media, ranging from text to graphics to video and audio.