Design

Site Navigation

Site Structure

Navigation can be structured in two types of structure:

Linear

This type of navigation structure links pages together in a sequential order, one after another.

It doesn’t give the user much flexibility when navigating a site.

Hierarchical

Pages are grouped together by topic and are accessed from the main page. This is common in websites with lots of pages that fall into different categories.

Links

A URL (Uniform Resource Locator) is the name given to the address of a page. Every page on the web has its own unique URL.

Internal Links

This is a link that keeps you within the website you are visiting, but takes you to a different page. The domain name will not change.

Videos on YouTube normally link to another page completely, but are still internal to the YouTube website.

External

This is a link that take you to another website. The domain name will change.

Advertising links normally ask you to click on them and they take you to their own website.

Links on tweets may take you away from your Twitter feed to an external website.

Relative Addressing

Relative links in web pages link to a location in the same directory. They are flexible and only contain the path to the page or media being linked to on the same server.

Relative links are used in case the domain or path of a page changes, meaning the link still works.

Relative links work out the pathway to a file by themselves and are usually shorter.

For example, the browser would automatically put the full address location before

/ picture1.jpg.

Absolute Addressing

Absolute links are completely fixed.

They do not change and point directly to a specific location online.

They include all information needed for the browser to locate the file, including the server address, path and filename.

http:// www.bbc.co.uk / weather.html

Wireframes

A wire-frame is used in the design of a website to provide a skeletal outline before detailing the specifics.

Wireframes should clearly show:

navigational links
text areas
media used (including file format)
position and type of hyperlinks on a page

A wire-frame uses boxes and lines to indicate where elements such as buttons, drop-down menus, text, images etc. will be placed before it is created.

Using a wire-frame to design the website ensures the consistency of the pages.

This example shows a wire-frame which indicates where images, text, navigation controls and command buttons are positioned.

The specific details of the content of are not specified at this stage.

Low-Fidelity Prototyping

A wireframe may be passed to a graphic design artist who will try to replicate the desired layout. The design artist may start to develop low fidelity prototypes that can be compared to the wireframe design.

These prototypes are created using pen and paper. They should be shown to the end-user group and their feedback should be considered when the final version of the site is being developed.

Low fidelity prototypes will often include more detail than a wireframe:

text areas might contain all intended text
image and video areas might contain hand-drawn versions of the final image/video still

Legal Implications

Copyright Designs and Patents Act

When creating a website, any images, text, or media used must either be original, licensed, or properly credited if the copyright owner allows it. Unauthorized use of copyrighted materials can lead to legal consequences, particularly if the content is used for commercial gain.

The Copyright, Designs and Patents Act protects against:

Software piracy through illegal downloads or distribution.
Using software without a proper license.
Copying and redistributing intellectual property such as designs, logos, and written work.
Downloading or using images without the copyright holder’s permission.
Illegally downloading or distributing video and audio files

Even modifying an image does not necessarily make it legal to use. Some regions allow "fair use," but this varies by country and is not a guaranteed legal defense. When in doubt, always seek permission or use royalty-free and Creative Commons-licensed materials.

Standard File Formats

Web developers will consider the format of the media files that are to be used on the website.

Audio Files

Web developers must choose audio file formats based on factors like compression, quality, file size, and compatibility. The two most common formats are:

Key Points:

WAV is best for high-quality audio applications (e.g., music production, broadcasting) but is too large for web use.
MP3 is the most commonly used format online due to its small file size and decent quality.

Image Files

Images are stored in various formats, each with different advantages depending on their use.

These formats should be understood in terms of:

compression
animation
transparency
colour depth

Key Points:

JPEG is ideal for photos due to its compression efficiency but lacks transparency.
GIF is best for simple animations but has a limited color range.
PNG supports transparency and is commonly used for web graphics, logos, and icons.
WebP is increasingly preferred for web use due to its smaller file sizes and better quality compared to JPEG and PNG

Gif

JPG (No Transparency)

PNG (Supports Transparency)

Video Files

MP4 is a compressed video format that creates a video by:

Compressing each frame as a JPEG
Compressing the audio track as an MP3

AVI is another video format which is uncompressed.

Factors Affecting Video Performance

A combination of audio and graphic factors:

Audio sample rate
Audio sample size
Number of audio channels
Graphic resolution
Graphic colour depth

Key Points:

MP4 is the industry standard for high-quality videos while keeping file sizes manageable.
AVI is rarely used online due to its large file sizes.
WEBM is an excellent alternative for web streaming, offering good compression and quality.

Compression

Using compressed media files is essential for web performance, reducing storage costs and improving load times. Compression techniques fall into two categories:

Lossy

Removes some data to reduce file size.
Can lead to visible artifacts in images (pixelation) or degraded sound quality in audio files if over-applied.
Example: JPEG images, MP3 audio, MP4 video.

Lossless

Retains all original data but reduces file size by optimizing data storage.
No loss in quality, but file sizes are generally larger than lossy formats.
Example: PNG images, FLAC audio, ZIP files.

By choosing the right format and compression method, developers can balance quality and performance for an optimal user experience online.