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
If you create a website and use an image that doesn’t belong to you, you must have permission from the owner of the image.
Use of an image without permission is in breach of the Copyright Designs and Patents Act and can lead of legal action being taken (particularly if you have made money through use of the image).
The unauthorised copy of written work that doesn’t belong to you is plagiarism and is also in breach of the Copyright Designs and Patents Act.
The Copyright, Designs and Patents Act protects against:
Software piracy by illegal download or distribution
Use of software without the relevant software license
Theft of intellectual property such as designs and text / written work
Using / downloading images without permission of the copyright holder
Illegal download of video and audio files
Standard File Formats
Web developers will consider the format of the media files that are to be used on the website.
Audio Files
WAV and MP3 are two common standard file formats used to store audio.
These formats should be understood in terms of:
compression
quality
sampling rate (number of times sound is captured per second)
file size
WAV files are usually uncompressed but can use lossless compression.
MP3 is a compressed format that can produce near-cd quality in a file about 10% of the size of a WAV file. It is a very common format because it can store high quality audio at a very low file size.
MP3 uses lossy compression so if it is over-compressed, the quality of the audio can be poor.
Image Files
JPEG, GIF and PNG are three standard file formats for bit mapped graphics.
These formats should be understood in terms of:
compression
animation
transparency
colour depth
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
Compression
Using compressed media files on websites is desirable for two reasons:
Lower storage requirements server side
More responsive upload rates/less time taken to transfer files to client sid
Compression techniques are categorised as lossy or lossless.
Lossy
This is when detail from the file is removed. Too much of this will significantly reduce the quality of the file if applied too much. JPG files are a good example of this.
Lossless
This is when the data of the file is manipulated so that for example repeated data can be manipulated and stored in a more efficient manner. The key fact being that the original source file can always be re-created. PNG's can use lossless compression.