The document summarizes the design choices made in creating a website for a youth group using the Wix website builder. Key design elements included choosing a "Community Church" template that was suitable despite being for a different purpose, changing the homepage background for better visibility, including important information like contact details and maps, and adding features like a sermon archive, event calendar, and online shop. Color, image, font, and navigation choices were made to create an easy to use design that represented the youth group.

1. www.wix.com/hkbc-eyf

2. Choice of website generator:
The reason why I chose to work on wix.com is
because it is easy to use and has many
reasonably free freatures like themes,
shapes, video upload etc.

3. Themes
I chose the “Community church” template because the template’s name suggests that the template is for a community church and
although the client does not lead a community church but rather a youth group, the community church template contents would
be similar to the one that the client would want.
The content to us doesn’t matter at this stage but we chose this template mainly because it was designed for church purposes.
This template does not only look relatively appealing to the eye but is also easy to customize and make the design suit our
objectives

4. HOMEPAGE
We changed the style and background of the
website because the colour splash background
was too colourful and so the page didn’t stand
out as well. With the black wood background, it
stands out better so you can see clearly the
features of the website. The pictures as well as
the buttons were not very visible either with the
old background as the background colours made
the website colours

5. Toolbar
The toolbar stands out with the
four colours that were used. The
highlight colour indicating what
page you are on conveniently. The
buttons are big so that it is easily
accessible. The words for the
toolbar are also big so that the eye
can easily read it without
squinting.
Current page
highlighter
Large buttons
Big letters
Huge website
name

6. About Page
The about page is not really that
special. It is just a page explaining
what EYF is about and its basic info
like when it starts, event overview etc.
We added a picture to allow readers to
visualize and know what to expect
when they do get to EYF. Like how
people say, a picture is worth a
thousand words so we added the
picture in.
Short paragraphs to
explain what EYF is
about.
Picture to go with the
website
We added bible verses highlighted in
red to encourage youth in EYF. We
highlighted the text red so that it
stands out to the human eye.

7. Contact
The whole point of the “contact us”
page is to allow parents or youth to
ask questions or anything in general
to improve EYF as a whole to make
it more enjoyable and appealing to
the youth. The name and email is
optional just in case the people who
want to ask questions or those who
want to improve don’t want their
identity to be revealed.
A contact us box
Map to ensure
easy
directions to
get to
destination
The map and address are there to
allow easy navigation as well as the
direct location of the church. This
enables people especially
newcomers to know how to get to
the church directly.
Exact address of
HKBC

8. Past Sermons Page
We made a past sermons page because we
thought it would be useful if the youth could just
download the online version of the sermon if they
missed it that day. This page will be updated
regularly and will contain many more sermon
documents. This will not only help youths when
they miss out on services, but it can serve as a
online backup for past sermon documents.
Large icons
King chess
piece to
symbolize
importance
The colours and shapes that we added do not
serve any purpose. The two diagonal lines are just
there to make the webpage not so plain. The king
chess piece also fills in the emptiness in the middle
but we thought that the king symbolizes triumph
and ruler of all evil so we added that in as well. We
were originally were going to make the chess piece
white but unfortunately that didn’t stand out so we
made it black instead.

9. Upcoming Events
This page like the “Past sermons” page will
be updated every week so that church
members will be able to keep up to date
with the upcoming events. We will also
post these events on Facebook or Email
depending on the youth. Unfortunately the
“Follow us” button is very small and cannot
be resized to make it bigger so we will
have to be satisfied with the buttons. The
“follow us” button allows the youth to keep
track of church news but on their prefered
social networking site.
The “book tickets” part will make it easier
for the youth to buy tickets online and so
that the youth can buy the tickets easier
and will not have to physically go to HKBC
to actually purchase the tickets.
Book Tickets
feature
Updates

10. Online Shop
The online shop was the hardest and the most time
consuming page that we have done comparing to the
other pages created. We needed pictures and needed
to make sure that the website actually worked. It does
and we have included a product description, fee
payment, pricing, product picture as well as a working
virtual shopping cart. The shopping cart tells you how
many articles or products that you have checked out so
this makes it easier for customers or viewers to buy
items online.
The range of products right now are limited as there
are idea is relatively new so we didn’t have much time
to add more products either by the youth or other
sourced products.
Like what the website says, 25% of the profit made will
go to feeding the homeless once a week. This helps
the poor and the needy.
Shopping
cart
how many
articles in cart
Product

11. Colour Choice
The colour choices we picked are not too overwhelming. We chose orange,
purple, grey and black because we thought these colours contrast well
together and at the same time will not make any. The matching colours are
orange - black, orange - purple, orange - grey, black - grey, purple - grey
and purple - grey. The colour wheel on the right is the diagram that we have
used to reference what colours go well with what other colours. We didn’t
make it exact but we made it similar. The colours are bright so that it
appeals to the youth’s eyes and makes them drawn to
the website. At first the website background is a bunch of
paint spatters together but that looked too colourful so we
replaced it with a black wood background.

12. Choice of certain images
We made sure that we chose images that had a cheerful
atmosphere and that they represented EYF as a whole.
Some images are used from the “Add shapes and lines”
menu but we added them because they followed our
requirements for our images which were that they
needed to represent EYF and that they were simple as
well as easy to get.

13. Font choice
We chose a narrow range of font size and choice because
we thought it may confuse the viewer. This narrow range
of font size allows the viewer to easily read the text
written on the website instead of squinting their eyes to
see the text. If they do that, the website is considered
bad as it doesn’t meet the requirements of a basic
website. Big text is to capture the viewer’s attention and
so that they will read it and concentrate on it more that
the rest of the small text. The font choice doesn’t change
so that viewers can read it clearly without any confusion.

14. Choice of navigation
We chose a top toolbar as a choice of navigation because
it allows easy reading instead of a vertical toolbar. If it
was a vertical toolbar, then it wouldn’t stand out as much
as the human eye is trained to move from left to right,
not from top to bottom. We also made a highlight colour
to tell you what page you are on so that you will not have
to scroll up or down to know what page you are on.