Web Design Flashcards
What is a site structure diagram?
A diagram used to design the names of the required web pages and how the web pages will link together using hyperlinks
What are the two types of site structures?
- Linear
- Hierarchal
What is a linear site structure?
Structure that allows users to move forwards or backwards through a set of web pages - no direct hyperlinks to specific web pages
What is a hierarchal site structure?
Structure that groups web pages into ain topics, which is used to create topic and subtopic web pages
What must an effective user interface have?
4
- Navigational links
- Consistency across multiple pages
- Relative vertical positioning of media
- File formats of the media (text, graphics, video and audio)
What are the two hyperlink types?
- Internal
- External
What does an internal hyperlink do?
Takes the user from one web page to another within the same website
What does an external hyperlink do?
Takes the user from one web page to another in a different website
What is a wireframe used for?
To design the layout of every web page in a website
What must a wireframe include?
4
- All text elements on the page
- Any media elements (graphics, video & audio)
- Elements that allow the user to interact with the page
- Intended position and type of all hyperlinks on page
What are the standard image file formats?
3
- Gif
- PNG
- JPEG
What are the standard video file formats?
2
- MP4
- AVI
What are the standard audio file formats?
2
- MP3
- WAV
Gif Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossless
- Animation: Yes
- Transparency: Yes
- Colour Depth: 8 bit
PNG Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossless
- Animation: No
- Transparency: Yes
- Colour Depth: 24 bit
JPEG Properties
Compression, Animation, Transparency & Colour Depth
- Compression: Lossy
- Animation: No
- Transparency: No
- Colour Depth: 24 bit
MP4 Properties
Compression
Compression: Lossy
AVI Properties
Compression
Compression: Lossless
WAV Properties
Compression, Quality & File Size
- Compression: Lossless
- Quality: Higher
- File Size: Larger
MP3 Properties
Compression, Quality & File Size
- Compression: Lossy
- Quality: Lower
- File Size: Smaller
What are prototypes used for?
To demonstrate or test the usability of the website design
What is a low-fidelity prototype?
Paper based prototype
What factors affect size / quality?
3
- Resolution
- Colour Depth
- Sampling Rate
How does resolution affect size / quality?
The larger the resolution, the more pixels (better quality), the more datat store and the larger the file size
How does colour depth affect size / quality?
The larger the colour depth, the more colours can be used (better quality), the more data and the larger file size
How does sampling rate affect size / quality?
The larger the sampling rate, the more data to store (better quality) and the larger file size