Slides badge

Design

Learning Intentions

  • Describe an exemplify a website structure

  • Describe, exemplify and implement a website design

  • Compare file formats in terms of file size and quality

  • Describe copyright laws affecting the content of a website

Success Criteria

  • I can design a website, based on a set of requirements
  • I can compare several file formats based on file size and quality
  • I can discuss the legal implications of building a website

Website 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.

tOP-LEVEL

  • 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.

  • The SQA will highlight the pages that are to appear in the navigational bar using an area of shaded background, the home page SHOULD ALWAYS be in the navigational bar.

Second-level hierarchical diagrams

  • 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.

Website structure

  • 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

  • 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)

Wireframes

  • 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.

Wireframes

  • 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.

User interface

  • The user interface is the way in which the computer and user communicate.
  • If a UI is poor, then no matter how good the software is, no one will want to use it.
  • The person who designs a user interface is called a user experience (UX) designer.

Target audience

  • The target audience is the group of people who will use the website.
  • Any website that is built, needs to take in to consideration the target audience - what they need and want from the website.
  • The target audience can be experienced users or inexperienced users, they may be employees or they may be clients.

Age range

  • The age range of the users can also be helpful in deciding how the website should be built.
  • For example, younger generations may find using a tablet interface easier than an older generation who may struggle. Further, younger generations might find desktop computers harder to use than a smartphone or tablet computer.
  • All of this can help generate a target audience of a website.

User interface requirements

  • The user interface requirements are the features of the user interface that should be taken in to consideration by the web designer.
  • User interface design should consider the following:
    • Visual layout
    • Readability
    • Navigation links
    • Consistency

low-fidelity prototypes

  • 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.

low-fidelity prototypes

This is my BSc Honours Year dissertation low-fidelity prototype (I did my study at Knox Academy in 2016!)

Create a wireframe for each of the following websites:

  • apple.com
  • amazon.co.uk
  • ebay.co.uk
  • gov.uk

Task

Standard file formats

  • 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.

Standard file formats

  • 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 size and compression

  • 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

  • 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.

Standard file formats: GRAPHICS

  • There are three standard file formats used for storing images:

    • JPEG

    • GIF

    • PNG

cOMPARING GRAPHICS file FORMATS

  • 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

  • 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.

JPEG

  • 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.

JPEG

  • 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.

JPEG

  • 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

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

  • Unlike JPEG however, GIF is not suitable for photographs.

  • GIF is limited to 8 bits for each pixel, meaning that only 256 different colours can be used in a GIF image.

  • GIFs also support animation

  • GIFs were developed when the web was relatively new to make file sizes of images very small

GIF

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

  • Unlike JPEG however, GIF is not suitable for photographs.

  • GIF is limited to 8 bits for each pixel, meaning that only 256 different colours can be used in a GIF image.

  • GIFs also support animation

  • GIFs were developed when the web was relatively new to make file sizes of images very small

GIF

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

  • They are particularly well suited to cartoon drawing and simple icons.

  • GIF files also use a technique known as interlacing which allows them to have a low quality version whilst the image is loading.

GIF

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

  • They are particularly well suited to cartoon drawing and simple icons.

  • GIF files also use a technique known as interlacing which allows them to have a low quality version whilst the image is loading.

Png

  • 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. 

Png

  • 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. 

Complete the grid drawings provided in low-quality and high-quality.

Task

Standard File Formats: Audio

  • There are only two standard file formats that you need to know about for National 5 and Higher:
    • WAV
    • MP3

Comparing audio file formats

  • There are several different ways audio files can differ:
    • 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

WAV

  • WAV or Waveform Audio is uncompressed audio file format.
  • WAV is more often found in Windows than on Linux or macOS systems, however, it is supported by both. 
  • It is commonly found on CD quality music due to it's lack of compression.
  • WAV files are large, in comparison to MP3 files, WAV files are up to 10 times larger.

MP3

  • MP3 or MPEG-1 Audio Layer 3 is a compressed audio file format.
  • MP3 uses lossy compression
  • A standard MP3 file comes in at around about 3 or 4MB for a 3 minute long song.

Standard file formats: Video

  • For National 5 and Higher, there are only two standard video file formats you need to know about:
    • MPEG
    • AVI

Comparing video file formats

  • The quality of video files can be compared in several different ways:
    • 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

MPEG

  • MPEG or Motion Picture Expert Group is a file format that is capable of storing compressed video and audio.
  • Quality of the video and audio depends on how compressed the file is.
  • A popular MPEG extension is the .mp4 file or, on a Mac, a .mov file.
  • MPEG is a container file because it contains multiple different types of file (streams) inside it, in MPEG's case you have both audio and video.

AVI

  • AVI or Audio Video Interleave is a file format that is capable of storing video and audio.
  • AVI files are quite large.
  • AVI is not so suitable for streaming and is more suited to downloading due to it's larger file size.

Why do we compress files?

  • Compression is needed, even with today's much larger storage capacities and faster download speeds, to optimise both storage space and to make downloading files as quick as possible. 
  • There are two types of compression; lossy and lossless.
  • Lossy compression involves removing some of the data to reduce the file size. 
  • Lossless does not remove data but applies a special algorithm to make file sizes smaller.

Copyright, Designs and Patents Act (1998)

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

  • It's often the case that a website designed or developer includes a copyright statement about materials used.

  • Sometimes the website developer may not own materials on the website. If this is the case:
    • credit for use of material must be given
    • the permission to use the materials needs to be obtained

Look up and summarise the following into your own notes:

  • Creative Commons
  • Copyright, Designs and Patents Act (1988)
  • Piracy

Task

Answer the questions in the worksheet.

Task

Presentation Overview
Close
JB
Design
© J Balfour
13:28 | 07-12-2023
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Dark Mode
Bold Text
Random Selector
Timer
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files