1

DEVELOP A WEBSITE
Module 1 – Design a Website
Level 1 – 4 Credits
 WHAT YOU WILL LEARN
• How to identify the purpose and end users of a website
• The implications you need to consider when creating a website
• Design elements to be used when creating a website

2
 TERMINOLOGY
• Purpose: what the outcome is meant to do or be used for.
• End users: the people who will be using/viewing the website.
• Brief: a description of the website that needs to be created. It usually
includes information about the purpose of the website, the end user(s), and
the requirements for the website.

3
 Creating a website for a specified purpose and
end user
• The purpose of a website and the end users are key elements to be
considered when creating your website
• The tools, techniques, and design elements you choose to create your website
need to be appropriate for the purpose of the website and the end users.
• This means they need to allow the website to:
• achieve its specified purpose
• be appropriate to the people who are going to use it (end users).

4
 Activity 1.1 – Identify the purpose and end
users
Below is the brief for the website that we will be creating together. Read the brief and answer
the questions that follow.
Brief: TreeHousePro Website
Sam is a professional builder. He creates many different types of buildings, but he most enjoys building
treehouses. Lately, more people have been asking for treehouses, and he has decided to start building
only treehouses from now on. To do this, he has started a new business called TreeHousePros.
Sam needs a website to promote his business and show people the amazing treehouses he is able to
build. This includes treehouses in different styles (eg modern, rustic, etc). It also includes treehouses
that are for adults and families – not just children!
Sam also wants the website to allow people to contact him easily, and to include information on the
building process.

5
He would like the website to include pictures of the treehouses he has built, as
well as his logo. You can find photographs of the treehouses he has built and his
logo in the Resources folder. You can use other suitable images on the website too
and can also add other media (eg audio and/or video) if you wish.

On the next page is some basic information on the different types of treehouses
Sam builds and the contact details for TreeHousePro – to help you with the text
you need to write for the website.

6
Different types of treehouses
Rustic treehouse
Made from basic rough-sawn timber
All come with roof and either stairs or ladder Under 5m2
Built in medium-sized tree or on posts
Modern treehouse
Made from dressed timber or marine ply
Have skirting around doors and windows
Can include balcony
Built in medium-sized sturdy tree or on posts
Fantasy treehouse
Made from weather-proof materials
Can include glazing and lockable doors
Usually bigger than 10m2 (consent needed)
Built in large sturdy tree
Ideal for large wooded area 7
Grown-up treehouse
Similar to a ‘cabin in the trees’
Can be lived in for part or all of a year
Can include a fireplace and/or power
Fully insulated and weathertight to current building standards Up to 50m2 (consent required)
Often built between multiple large sturdy trees
Best suited for large wooded areas

Contact details

Address:
123 Treehouse Lane Woodhill
0000

8
 Activity 1.1
Identify the purpose and end users
Complete the handout activity

9
 Implications to consider when
developing a website
• The table below shows implications you need to consider.
• Keep in mind that:
• not all the implications will apply to the website you are creating
• some of these implications overlap (eg social and cultural,
accessibility and functionality, etc).

10
Social
Meaning Example
 How social considerations  If you show someone
can impact on the design smoking on the website,
and development of the could it encourage young
outcome. people to smoke?
 Could any of the images on
the website be frightening
to children?

11
Cultural
Meaning Example
 Aspects of culture that  In some cultures, images
can affect the outcome showing too much skin would
to be developed. be considered offensive.
 Language, beliefs,
traditions, and religion
are all aspects of
culture.

12
Accessibility
Meaning Example
 Making sure the  considering people who
may have visual
outcome can be difficulties, hearing
accessed by as many difficulties, etc.
people as possible.  considering the different
devices and software
people may use (eg some
people may access a
website on their iPhone
using the Safari browser,
while others may access
the same site on a laptop
using the Google Chrome
browser)
13
Usibility
Meaning Example
 Able to be used effectively to  Is the information on the
achieve a particular goal. website organised in a way that
 Closely linked to accessibility, makes it easy for the user to
functionality, and end user find the information they
considerations. need?
 Is the text content on the
website easy to read and
understand?

14
Functionality
Meaning Example
 Different things the outcome  Does the website clearly
is able to do, allowing it to present the information
perform its intended function. needed in order to achieve its
specified purpose?
 Do all the links work correctly?
 Are all the images displaying
correctly?

15
Sustainability and Future Proofing
Meaning Example
 Creating an outcome in a way  Consider the fact that additional
that ensures it can serve its pages may be added to the
current intended purpose and website in the future. Will your
that it can be used in the future current navigation be able to
as well. easily handle additional web
pages?
 Considering how the outcome
may be used in the future.

16
End-user considerations
Meaning Example
 Thinking about how the  If your end users have
end user will use the visual difficulties, you will
outcome. need to make sure any
buttons, etc are big enough
 This includes thinking
for them to see and use.
about who the end user is,
and if they have any
specific needs.

17
Legal
Meaning Example
 Implications related to the  See the examples for
laws of a country. intellectual property,
privacy/confidentiality, and
 There are certain laws you
health and safety.
have to abide by, or you
could be fined,
imprisoned, etc.

18
Ethical
Meaning Example
 Ethics has to do with  Using a photograph of
what is considered right someone taken in a public
and wrong. place, without their
permission, is not against
 It overlaps with legal the law.
implications. However,  But is it ethical?
something could
 Is it ‘the right thing to do’?
 be legal, but still
‘wrong’ or not ethical
to do.

19
Intellectual Property
Meaning Example
 Intellectual property is  Any work someone creates
something that exists as a (eg a photograph or
result of someone’s website).
creativity and skill.
 Also includes the design for
something (eg a website,
app, etc).

20
 Intellectual Property
• A common example of intellectual property is copyright: the right of the
creator/developer of an original work to control whether the work can be
copied and/or how it can be used. In New Zealand, copyright is protected
under law (eg Copyright Act 1994 and Copyright (New Technologies)
Amendment Act 2008). For more information see:
• https://www.mbie.govt.nz/business-and- employment/business/intellectual-
property/copyright/copyright-protection-in-new-zealand/
• https://www.iponz.govt.nz/about-ip/copyright/
21
Privacy
Meaning Example
 Privacy refers to the right  Under the Privacy Act, you
to keep personal should not give out someone’s
information private. personal details (eg their name,
 In New Zealand, privacy phone number, etc) without
requirements are set out getting their permission to do
in law – in the Privacy so.
Act 1993.
 If you take a photograph of
 For more someone, you should first check
informatiohttps://privac with them before using the
y.org.nz/privacy-for- photograph in the outcome you
agencies/your- create.
obligations/n see:
22
Confidentiality
Meaning Example
 Confidentiality refers to  Confidentiality can also be
keeping information relevant to the creation of
secret. an item (eg keeping secret
an idea for an outcome
 It can be related to
that is being developed).
privacy (ie keeping
people’s personal  Confidentiality can overlap
information confidential) with intellectual property
and keeping an because keeping an idea
organisation’s sensitive secret helps to protect
information secret (eg intellectual property.
future plans for the
organisation, etc). 23
Health and Safety
Meaning Example
 The Health and Safety  The main health and
at Work Act 2015 is safety considerations
the main law that related to digital
governs how health outcomes have to do
and safety should be
met in a workplace. with strain, pain, and
injury that can result
 There are several from using digital tools
guidelines intended to such as computers,
ensure people stay
tablets, smartphones,
healthy and safe when
working. etc.
24
 Common causes of problems are pain and
strain from:
• repeated actions (eg lots of scrolling or clicking on a mouse, strain from
typing, etc)
• looking at a screen for long periods of time
• sitting in an uncomfortable position and/or sitting still for long periods of
time.

25
Aesthetics
Meaning Example
 Aesthetics has to do  There are some basic
with what looks or principles of what is
sounds good. generally considered to
make a website look
 It is important to good.
keep in mind that
what looks good to
one person (or group
of people), might not
look good to
someone else.
26
 Activity 1.2

Identify implications relevant to websites

Complete the handout

27
 Activity 1.3

Describe implications
Complete the handout

28
 Design elements

Colour How it is used

Colour can help:
• create a particular mood (eg soft colours for a
relaxed feeling)
• attract attention (eg bright, bold colours)
• support the content of the website (eg blues
for a website about the ocean)
• create emphasis (see the section on hierarchy)

29
 Design elements

Lines How it is used

Lines can be used to:
• separate unrelated information (eg a
new topic)
• add emphasis and draw attention (eg
underlining)
• create a sense of movement on the
page.

30
 Design elements

Scale How it is used

• a bigger font size is used for headings
• bigger images get more attention than
smaller ones, etc.
• See also the section on hierarchy. Scale
is used to create a hierarchy on a page.

31
 Design elements

Scale How it is used

• a bigger font size is used for headings
• bigger images get more attention than
smaller ones, etc.
• See also the section on hierarchy. Scale
is used to create a hierarchy on a page.

32
 Design elements

Hierarchy How it is used

• Hierarchy means ordering things in terms of their
importance.
• It is an important aspect of the usability of a
website.
Hierarchy:
• helps users navigate your page easily
• emphasises the most important information.
• One example is to use scaling for different heading
levels to show the relative importance of different
headings:
33
 Design elements

Contrast How it is used

• Contrast is the amount of difference between
items. Examples include light and dark, thick
and thin, big and small, etc.
• Contrast is used to:
• get and keep users’ attention
• emphasise certain items
• ensure text is readable and legible (eg if you
use blue text against a blue background or
picture of the sea, the text might be difficult to
read).
34
 Design elements

Composition How it is used

• Composition is the way that different
items are positioned on the page.
• It is used along with scale and hierarchy to
indicate the relevant importance of items
on the page.
• Composition is also used to group
together related items.
• For example, text and an image that are
related should be grouped together. 35
 Design elements

Typography How it is used

• Typography includes items such as the font type,
colour, size, style, etc.
• Your font choices need to ensure the text is legible,
readable, and appealing when read on screen.
• Your choice of font should also be appropriate to
the content and purpose of the website, as well as
the target audience.
• Comic Sans might be fine for a website advertising
comic books. However, a more ‘formal’ font would
be more appropriate for a website for a business. 36
 Design elements

White space How it is used

• White space (sometimes called ‘negative space’)
is the space between items on a page.
• It does not have to be white - it can be any
colour.
• White space is used to help avoid your page
looking too cluttered.
• A cluttered page makes it difficult for the user to
focus on what is important, and to find the
information they need. 37
 Design elements

Repetition How it is used

• Repetition can be achieved in many ways
including:
• using similar colours across a page, and the entire
website
• using consistent font styling
• including a logo on every page
• including important elements (eg navigation
menu) in the same position, and with the same
look on all pages of the site.
38
 Design elements

Images How it is used

Using images that support the purpose of the website
and help to:
• get the end user’s attention can help ensure the
website is both:
• aesthetically (visually) pleasing
• able to achieve its intended purpose.
• It is important to choose images that are
appropriate for the target end users and that will not
cause offence.
• Also remember privacy and intellectual property
considerations. 39
 Design elements

For more details on these and other design elements, go to:

https://www.canva.com/learn/design-elements-principles/

40
 Activity 1.4

Design elements for a website

Complete the handout activity

41