Creating a High Fidelity Website

This document provides insights into the process of creating a high fidelity website prototype. It covers the purpose and objectives of the project, planning the website, designing the header, footer, and body sections, website design principles, user acceptance testing, analysis of outcomes, and recommendations. The importance of design principles and user testing in website development is emphasized.

Table of Contents
Introduction................................................................................................................................2
Purpose of the project.............................................................................................................2
Objective................................................................................................................................2
Body content..............................................................................................................................2
Planning the website..............................................................................................................2
Header section....................................................................................................................2
Footer section.....................................................................................................................2
Body section.......................................................................................................................2
Website design.......................................................................................................................2
Page design.............................................................................................................................3
Page organization...............................................................................................................3
Design principles................................................................................................................3
User acceptance test...................................................................................................................4
Analysis..................................................................................................................................5
Outcomes................................................................................................................................5
Quantitative........................................................................................................................5
Recommendations......................................................................................................................5
Summary....................................................................................................................................5

Introduction
High fidelity website is a website that is ready to be used in the market. Design concept must
be put into consideration while building a high fidelity prototype. This project is focused on
creating a website that is ready for the market.
Purpose of the project
Is to create a high fidelity website prototype that can be used by major companies to run their
business.
Objective
1. To use design principles and element of designs to come up with the website.
2. To use the new HTML 5 and CSS 3 technology to build the website.
3. To carry out user testing to determine the strength and weakness of the website.
Body content
Planning the website
Before developing the website is a good idea to plan how elements will be organized, the
major element included in the site are header, body section and footer.
Header section
The section contain the navigations links and the company logo. The company logo is placed
on the top left of the page while navigation is placed on the right side of the logo. The header
section will appear the same on both pages, to create a consistent design on both pages.
The navigation is made up of hyperlinks. The links are used to navigate to different pages.
The hyperlinks are same on both pages to allow user to shift to different pages
Footer section
The footer section will be positioned at the bottom of the website. The footer will contain the
copyright of the company. To maintain consistency of the website ad to give all pages the
same look, the footer will be the same on all pages.
Body section
Body section contain the content of the website, this section will differ from page to page.
We will have five pages in total. Each page will have its different content depending on its
requirement.
Website design
Design is a crucial part of building any protocol; poor design will result in a poor website.
The first process in designing was to come up with a brand. The brand include the logo and
the theme to present the company. To design the logo we had to first choose the colors for
our site. The color were used in building the logo.

Page design
All pages applied the same design, to make the site look unique. Each contained a header, a
body and footer. The header of each page head a brownish background and the text had white
color.
Page organization
Figure 1
The first page that displays when the user visit the site is the home page. From the home
page, you can use the navigation on top of the page to navigate to other pages.
Design principles
To come up with a good design we have to apply the design concept. A design concept is the
idea behind a design. It is how you plans to solve the design problem in front of you. It is the
underlying logic, thinking, and reasoning for how you will design a website. The concept
lead in the choice of colors and the images. To create a stunning website we had to apply
principles of design. The major principles applied were, balancing, white space, alignment
and repetition.
Balancing
Is balancing of website elements colors, font type, images and text (Meg, 2019). Balancing
is done to avoid crowding elements in one area. The principles was applied to the website to
position elements.
Whitespace
Whitespace is used to give the website a breathing space. It shows the objects that are
grouped together.
Alignment
We used alignment to organize and arrange our elements. The website elements need to be
aligned properly to give the website a consistent look. All the text used in the website are
aligned on the left side.
home
marker pen fountain penwater color working hour

Repetition
Repletion is using same design in different area of the website. Repetition create a
consistence design in webpage and a friendly look for the site,
Figure 2
The webpage page shows how balancing, alignment and white space have been used in the
website. All pages apply this three principles.
Repletion has been used in arranging the product elements. All products element use th same
design. This is used to show some similarity in the website.
Repetition has also been used in navigation and footer, the two section has been repeated on
all pages
No table of figures entries found.
Figure 3

User acceptance test
User testing is major process done to get user feedback and error occurrence on the website.
User testing is done before a website is launched to determine the complexity of the website
and to captcha any error that might occur.
Analysis
Four user were used to test the site, each user was given a task from the site which they were
to accomplish. The users were to navigate to different pages.
All users were able to navigate through the website; some of them find it difficult to use the
site.
Outcomes
We used both qualitative and quantitative technique to measure the outcomes of the user test.
Quantitative
All users were able to complete their assigned task.
Two out of four user finished their task within the given time while others finished their task
5 minutes late.
Three errors were found on the home page, the buttons at the bottom were not well linked to
their respective page.
Finding
Through observation and feedbacks from users, we found that the site had some missing
functionalities. The users were able to navigate through the product pages but they did not
find any relevant information of the product. The product information was lacking, this is a
major concern for the website, which need to be taken into consideration.
Some pages took long to respond, which made users lack patience with the website.
Recommendations
Below are recommendation made from the findings of the user testing.
Additional pages need to be created to hold the product information. The page will be linked
with the product images. When the user click the image, he will be redirected to a page
containing the full information of the product.
Reducing the size of the images. Our entire product page make use of images, which must be
sanitized using image editor to reduce their size. Large image take lot of data to load this can
discourage user from using the site.
Summary
It is always a good habit to consider design principles while developing our website. Good
design will produce good website.
User testing must be conducted before the website goes live, it help in identifying faults
found in the website.