WEBSITE PROJECT LOG EXAMPLE

Describe relevant implications

Implications relevant to the Website

Functionality
It is important for the website to have all the components it needs to achieve its
purpose, and that these are all working/displayed correctly. For example, images will
be an important part of promoting TreeHousePro because these give people a clear
indication of the type of treehouses Sam can build. It also helps to get and keep
people’s attention, therefore hopefully making them interested to find out more. If
these images don’t load or display correctly, it could mean the website it not able to
achieve its intended purpose.
….

End-user considerations, including accessibility and usability

The end-user needs to be kept in mind in all aspects of the website and its creation.
This includes thinking about who will be using the website and what they will be using
it for. It is important to make sure the website is accessible to as many people as
possible. For example, it is important that people are able to access the website and
its content on many different types of devices (eg laptop, desktop), and using
different browsers (eg Google Chrome, Firefox, etc).

The end-user also needs to be considered when it comes to the usability of the site.
Usability has to do with how easy it is for the end-user to use the website for its
intended purpose. This could include things such as ensuring a clean and logical
navigation, and making sure the user can quickly and easily find the information they
want.

….
Create the website using tools, techniques, and design
elements that are appropriate for the purpose and end users

Font and colour

• The font used is clear and easy to read on screen
• Some colour is used (eg for the main heading) to support the purpose of
the site (brown because the site is about treehouses)

Scale and hierarchy

• Different heading levels (font size) used
• Body font size is smaller than the
headings

Repetition
Sub-heading, text, image
repeated for each of the
different treehouse types

Composition and white (negative) space

• Related content is grouped together (eg heading, text and image)
• White space is used to group content and provide an uncluttered, ‘clean’ look

Apply data integrity and testing

I did the following data integrity and testing

• viewed the website in a browser to ensure all text was legible
• checked the content on the website against the supplied brief to ensure all
required information was included
• tested all links to ensure they resolved correctly
• checked that the images on the site displayed correctly
• proofread the text on the website to identify any spelling or grammar errors
and corrected these
Note: The learner’s writing ability should not be assessed. They only need to
ensure that what they have written is appropriate for the purpose and end
users.
 Evidence of the above could be provided in a variety of forms:
• a rudimentary test plan listing each of the items above, with a checkmark
next to each completed
• scans of printouts made of each page with spelling/grammar errors
highlighted
• items ticked off on the brief as the learner checked they were included
• teacher observation of the links being tested
• screenshots of the webpages.

Using information gathered from testing to improve the

quality and functioning of the website

Sam asked for one big image to be added at

the top of the page – to grab attention

Sam wants ‘contact us’

link after intro paragraph

End users suggest moving

image to under sub-
heading (followed by text)

End users suggest coloured page

background and coloured headings
 The use of link states for navigation
links could improve usability.
Better use could be made of
spacing between navigation links.

More contrast is needed between the heading

text and page background colour. A darker
colour would stand out better on the page.

The call-to-action (‘contact us’) could

stand out more (eg made bigger, bolder,
use of button, etc)

There could be more white

(negative) space between the sub-
heading, image, and text.
Images could be slightly larger for
greater impact.
Addressing implications relevant to the website
• the target end users found the site easy to use for its intended purpose
(usability)
• they felt the website was aesthetically pleasing
• the text copy was socially, culturally, and ethically appropriate.
Note: The learner’s writing ability should not be assessed. They only need to
ensure that what they have written is appropriate for the purpose and end
users, and addresses any relevant implications.
Based on the feedback received, I made the changes needed to address social,
cultural, ethical, usability, and aesthetics implications.

I also:

• included alt attributes for images to address accessibility (see HTML file)
• tested the website using a range of browsers (Google Chrome, Internet
Explorer, Edge, and Firefox) (to address accessibility and functionality
implications)
• included link states (eg a link looking different when a mouse is hovered over
it) to improve usability
• addressed intellectual property considerations (eg all images used were either
supplied by the ‘client’ or could be used for commercial purposes without
requiring attribution; details of the copyright licence and the source of all
images were recorded in file properties or a text file; etc).
Applying design elements effectively

The use of link states (design element) – background

changes when navigation item hovered over with mouse

Effective use of contrast to ensure overlay text is clear

and impactful against background image

Use of a button to make the call-to-

action stand out on the page

Effective use of composition, white (negative space), scale,

colour (including background colours), repetition, and
hierarchy to:
• clearly group related information (headings, images, text)
• separate content (eg main body separated clearly from
footer content)
• ensure a clean, uncluttered and aesthetically pleasing look
• support the content and purpose of the website.
Iterative improvement
I applied testing procedures throughout the development of the website.
This included:
• drawing up different page sketches for the homepage and deciding on the
one they thought would be most effective
• getting feedback from their key stakeholder (Sam) on the page sketch for
the homepage and incorporating Sam’s feedback to improve the design
• creating a rough first version of the homepage (not fully functional) to get
feedback from Sam and target end users on the overall layout and
appearance of the page
• using feedback on the homepage to improve the design
• adding functionality to the homepage (eg working links, adding styling for
different states of navigation links, etc) and getting feedback again from
stakeholders
• using the feedback from stakeholders to make further refinements to the
homepage to improve the quality and functioning of the page
• building the remaining pages of the site using a similar process of
feedback and refinements as outlined for the homepage
• doing final data integrity and other tests to ensure the content on the site
was accurate and that all components of the site worked correctly.
I have provided evidence of the above using:
• annotated screenshots indicating feedback from stakeholders
• ‘before and after’ screenshots indicating changes made in response to
feedback
• different versions of the HTML and CSS files to show changes made
• development log noting what was done to test the website on an ongoing
basis and how the information from this was used to make improvements
to the website (including test plans used to test different aspects of the
website at different times).