The Computing Zone
Unit One Introduction
Unit Summary
Looking at the content of the unit…

When your attention is captured by a web page advertising a competition, promoting an event or launching a new product, what makes you stop and look?

Don’t be fooled by technical wizardry. It may have spectacular images, eye-catching animation or attention grabbing text, but what makes it effective is the way the components work together.

This unit aims to give you the knowledge and skills you need to produce attention grabbing web products using web authoring software, multimedia assets and navigation features.

You will demonstrate your ability to design, build and test a web product in a practical computer-based examination set by Pearson.

1.1 Audience and Purpose
A look at how you will be learning and assessed…

A web product is a self-contained and designed product which is viewed in a browser and hosted on the web or on an intranet. It may be linked from a parent website and include visual links such as a logo, which make users aware of this.
You need to know that the key to producing a successful web product is to be clear about its purpose from the outset. This may be to:

  • convey a message (eg a campaign)
  • attract attention (eg advertising)
  • inform (eg educational webpages)
  • persuade (eg to buy something)
  • entertain (eg quizzes and online games).
You need to know who the target audience is so that the web product meets their needs. This may include:
  • who will use the product, eg age, gender
  • how much they know already
  • their level of literacy/language skills
  • what they want from the product and what will get them to look further.

1.2 Client briefs and the project lifecycle
What your teacher can tell you and when…

The starting point is likely to be a client brief so you need to know what this typically includes:

  • information about the client
  • information about the target audience and purpose of the web product
  • technical information about product, eg an overview of the:
  • site structure
  • functionality
  • contentdesign.
You need to know how to translate this brief into a project by following the project lifecycle. A typical project lifecycle is:
  • design the product
  • site structure
  • product consistency, such as template and style
  • composition and page design
  • accessibility
  • create the product
  • content selection and preparation
  • coding
  • testing
  • evaluate the product.

1.3 Site structure
What you will be doing and when…

The first design step is to establish an overall structure for the web product – what pages are needed and how they are related. A client brief may specify some or all aspects of the required structure.
You need to know how to make use of a structure chart to give an overview of the hierarchy of a product. Although the main pages of a product are usually accessible via a navigation bar on every page, users will need to ‘drill down’ to find more detailed information. This is often achieved by links within the body of a main page.

1.4 Consistency
What you will be doing and when…

All the pages must have some consistency in terms of structure and appearance to help users find their way around the product. A useful method to achieve this is to produce a storyboard, which will map out the layout and features of web products, eg positioning of logos and navigation bar.
You need to understand that a simple navigation bar:

  • includes two or more links to other pages within the product
  • appears on the left-hand side or top area of every page
  • uses text links or graphical links
  • does not take up too much space.
You will learn how to create and use a template or master page to fix some aspects of every page:
  • page size and resolution
  • banner height and width
  • logo size and position
  • internal and external hyperlinks
  • navigation bar.
If you are working to a brief there may be a house style (colour scheme, fonts, etc) which you must use.
Using a pre-defined colour scheme and a standard set of fonts will help to make your web products more consistent.

1.5 Composition and page design
What you will be doing and when…

Having designed a template and established some design rules for consistency, the next stage is to decide on the composition and design of each page:

  • title
  • text – writing for the web, quantity
  • images, including dimensions and quality
  • embedded multimedia files (video, sound, animation) and their appearance on the page
  • links, hotspots and rollovers.
You will learn about important design concepts:
  • composition
  • colour, shape and line
  • balance and contrast
  • visual hierarchy
  • layout
  • headings and sub-headings to separate sections of text
  • tables to fix the position of content
  • use of white space
  • minimising scrolling.

1.6 Accessibility
What you will be doing and when…

You need to understand the importance of making your web products accessible to people with visual impairments. You will learn how to improve the accessibility of products by:

  • avoiding colour combinations such as red and green on your web pages
  • using a high contrast between text and background
  • adding ALT (alternative) text to images
  • using scaleable fonts.

1.7 Content selection and preparation
What you will be doing and when…

A client brief may specify some of the content required but you will need to make decisions about what to include and how it should look. Quality content improves the user experience and it is important to avoid anything that distracts or irritates users. For example, animated graphics or scrolling text should be avoided unless they enhance the content or user experience.
To organise content, you will learn how to:

  • create and use tables
  • insert and position assets, including text, images, video, sound and animation on web pages
  • resize images (percentage of original, fixed size, crop)
  • retain proportions
  • create and use thumbnail images
  • control how users view multimedia assets.
You will learn how to present text clearly using formatting features, such as:
  • alignment
  • line spacing
  • bullets and numbering
  • case
  • emboldening
  • colour
  • web-friendly fonts
  • font sizes and styles
  • headings and subheadings.
To allow users to access content you will learn how to create interactive components, including:
  • navigation bars
  • hotspots
  • hyperlinks (internal, external, email)
  • rollovers.
Assets need to be carefully prepared and optimised to ensure that pages are not slow to load. You will learn how to:
  • use image compression formats (png, jpg, gif) and convert from one format to another
  • select and use compression formats for multimedia assets, including sound, video and animation, and convert from one format to another.

1.8 Coding
What you will be doing and when…

Web authoring software automatically creates the HTML code on which each page is based. However, sometimes it is easier to edit the HTML code directly. You will learn how to make simple changes to the code, for example to change the colour of a heading or position of an image.
You will learn to understand and use hexadecimal colour codes/RGB values.
You need to learn how to insert and position simple given applets (programs written in Java) into an HTML page:

  • hit counters
  • clocks
  • calendars.

1.9 Testing
What you will be doing and when…

You will learn how to carry out systematic functionality testing of a web product to ensure that it works as intended, including:

  • the layout and presentation of pages are appropriate and consistent
  • the content, including text, is accurate and appropriate
  • multimedia assets work as intended
  • hyperlinks work and go where expected with no dead ends
  • any interactive actions work as intended.
You will also learn how to carry out usability testing to assess the effectiveness of the product in terms of:
  • a user interface
  • accessibility
  • ease of navigation
  • overall user experience

1.10 Evaluation
What you will be doing and when…

It is always important to reflect on the success of a product and be able to review the extent to which it meets the needs of the:

  • audience and purpose
  • any client requirements.
You need to learn how to explain how your choice of design features has addressed these needs, and give examples. However good the product, there will always be room for improvement and you must be able to identify possible enhancements.

If you need to get in touch with Mr McG then this is the way….

What's your name?
Thank you [name], that's great.

Can I ask where you are from?
Hey [name], can I ask where you are from?
Hey [name], which class are you in?
OK [name], thanks for that.

I will need your email address so I can get back to you!!
Thanks [name], nearly there.

What can I help you with?

Thanks [name] from [whichclass][location], Mr McG will get your message…"
[message]"…and will get back to you ASAP via [email]. Catch you soon.

Thank you [name], Mr McG got your message.
Thanks [name], Mr McG will get back to you as soon as he can!!

Have a great day!!

K McGuinness - 2018

No personal data will be shared with any third party. The only data processed via this website is anonymous browsing data to best manage your user experience.