Web Design Portfolio Report

This report presents a detailed analysis of a web design portfolio, outlining the structure, content, and visual design of the website. It includes a need analysis, target audience assessment, and a comprehensive overview of each page's design and functionality. The report emphasizes the importance of user experience and consistent design across all pages, ensuring that visitors can easily navigate and engage with the content. Additionally, it discusses the significance of color schemes, typography, and overall composition in creating an appealing and effective portfolio website.

REPORT
[Document subtitle]
STUDENT NAME
[Company name]
[Company address]
AUGUST 29, 2017

Contents
1 Need analysis............................................................................................................................................4
1.1 Description...................................................................................................................................4
1.1.1 Home page...........................................................................................................................4
1.1.2 Education page....................................................................................................................4
1.1.3 Experience page...................................................................................................................4
1.1.4 Hobbies page.......................................................................................................................4
1.1.5 Gallery page.........................................................................................................................5
1.1.6 Career page..........................................................................................................................5
1.1.7 Contact page........................................................................................................................5
1.1.8 Testimonials page................................................................................................................5
2 Target audience analysis...........................................................................................................................5
2.1 Demographics....................................................................................................................................5
2.2 Justification........................................................................................................................................5
3. Site content and structure.......................................................................................................................6
3.1 Content inventory..............................................................................................................................6
3.4 Featured content...............................................................................................................................6
3.3 Sitemap..............................................................................................................................................6
3.4 Navigation scheme............................................................................................................................6
4. Content & Page Design............................................................................................................................7
4.1 Page Design.......................................................................................................................................7
4.2 Wireframes........................................................................................................................................7
4.2.1 Home page..................................................................................................................................7
4.2.2 Education page...........................................................................................................................8
4.2.3 Experience page..........................................................................................................................9
4.2.4 Hobbies page............................................................................................................................10
4.2.5 Gallery page..............................................................................................................................11
4.2.6 Career page...............................................................................................................................12
4.2.7 Testimonials page.....................................................................................................................13
4.2.8 Contact page.............................................................................................................................14
5 Visual Design..........................................................................................................................................14

5.1 Composition....................................................................................................................................14
5.2 Colour scheme.................................................................................................................................15
5.3 Typography......................................................................................................................................15
5.4 Mock-up of Home page...................................................................................................................16
6. Appendix................................................................................................................................................17
6.1 Raw data collection.........................................................................................................................17
6.2 References.......................................................................................................................................17
Table of figures
Figure 1: Site map........................................................................................................................................6
Figure 2: Homepage wireframe...................................................................................................................7
Figure 3Experience page wireframe............................................................................................................9
Figure 4: Hobbies page wireframe.............................................................................................................10
Figure 5: Gallery page wireframe..............................................................................................................11
Figure 6: career page wireframe...............................................................................................................12
Figure 7: Testimonials page wireframe......................................................................................................13
Figure 8: Contact page wireframe.............................................................................................................14
Figure 9: home page mockup....................................................................................................................16

1 Need analysis
Ned analysis is the process of studying how a product achieves or addresses its intended purpose. The
aim of need analysis is to identify how the product has been developed in view of the end user or its
intended audience (Christensen, 2016). For this website, its main purpose is to provide a portfolio of
myself to any person who might be interested with my passion of web design or who might any help
regarding web design. The website has been designed perfectly to meets all the design constraints
needed for a portfolio website. When compared to other websites on the internet the website stands
thus is able to reach its intended audience.
1.1 Description
The proposed website is a portfolio type of website describing my career in web design be y
demonstrating everything about my career. The title of the website is Chiraq which is my name. The
website has been is name after my name since the website is a portfolio type of website. The website
has seven pages each which has its own function and content. The following are the pages making up
the website;
1.1.1 Home page
The home page is the first page that any user who visits the website sees. The home page is designed to
be very effective and catchy to the eyes of any visitor who visits the website either for the first time or
an existing user who has visited the website for a number of times. The home page has a banner which
has a very quality picture with an overlay to enable appending of information about the website. By
reading the message on the banner the visitor is able to get an overview of the whole website. The
banner also has a menu which provides link to all the other seven pages of the website. The website also
has a small content area which has motivational information about the website. The last section of the
website is a footer which has the copyright information and the name of the person who designed the
website.
1.1.2 Education page
The education page contain information about my education. This information is about personal
achievements I have made in my education history. The education page takes a new structure where
there is a header, content area and a footer. The header contains the menu of the website which has
links to all the other 7 pages. The meu has been designed to have a background image which gives a
more appealing look. The content area contains the actual information about my history of education
while the footer contains information about the copyright and the name of the designer.
1.1.3 Experience page
The experience page contains information about my experience as website designer. The information on
the experience page which mainly indicates previous objects which I have done for various clients. The
structure of the education page consists of a header, content area and a footer. The header contains the
menu of the website while the content area contains the actual information about my experience. The
footer contains copyright information and the name of the designer.
1.1.4 Hobbies page
The hobbies page contains information about my hobbies. Hobbies are areas of interest I undertake
when am not working. The page structure consist of a header, content area and a footer. The header has

the menu of the website while the content area contains the actual information about my hobbies. The
hobbies are provided in a list format. The footer like all the other pages contains the copyright
information and the name of the designer.
1.1.5 Gallery page
The gallery page contains picture from my gallery. The page has been designed to use a similar structure
like all the other pages whereby the page has a header, content area and a footer. The header has the
menu of the website while the content area has the actual images making up the gallery. The footer has
copyright information and the name of the designer.
1.1.6 Career page
The career page contains information about my career as a web designer. The page has a structure
consisting of a header, content area and a footer. The header has the menu of the website which
provides navigation across all the other pages. The content area has the actual information about my
career while the footer has copyright information and the name of the designer.
1.1.7 Contact page
The contact page is the page that visitors can use to contact me directly from the website. The contact
page uses a structure which consists of the header, content area and a footer. The header has the
navigation meu used to navigate the website. The content area has the actual form that the user uses to
send a message. The footer has copyright information
1.1.8 Testimonials page
The contact page is the page containing testimonials of the clients I have worked with. The testimonials
page uses a structure which consists of the header, content area and a footer. The header has the
navigation meu used to navigate the website. The content area has the actual testimonials from
different user. The footer has copyright information
2 Target audience analysis
Target analysis is the process of identifying the intended target to which a website or a project is
intended to reach (Huddy, 2016). For the proposed website target analysis involves identifying visitors of
the website who might be interested with my work as a web designer.
2.1 Demographics
Demographics is a target audience analysis process of identifying the different age groups and sexes the
website is intended for. For the proposed website, the website is intended for all sexes at any age who
might be interested with a website design.
2.2 Justification
The website has no specific audience because it is a portfolio type of website so any visitor who might
find it interesting can become the target audience.

3. Site content and structure.
3.1 Content inventory
The website is divided into 8 pages as specified in section 1 above. Each webpage forming the website
can be defined as to having three sections that make up the page;
 Header
 Content area
 Footer
The header consists the navigation menu of the website. The header an be found in every page of the
website. The diagram below shows the sitemap of the website.
The content area of each web page contains information relevant to that page while the footer contains
the copyright information and the name of the website designer.
3.4 Featured content
The website has been designed with a consistent design in all the pages. Every page has information
relevant to that page as the content of the page. The page that stands out among all the other pages is
the gallery page because it has a very rich feature which enables the user to preview an image by just
hovering through the image using a mouse pointer. This feature has been implemented using JavaScript
whereby an action is added to detect the user’s mouse event when he place the mouse pointer on top
of the image.
3.3 Sitemap
Figure 1: Site map
3.4 Navigation scheme
Navigation through all the websites can be achieved using the menu on the header of every page. When
the user opens the website, the first page they see is the home page. From there, the user can choose
any page by clicking on the link relevant to that page. The navigation menu is identical on all pages so
the user needs to navigate by just clicking the link of the age they want to visit. This implies the user can
visit any page of the website while they are on any other page of the website.

4. Content & Page Design
4.1 Page Design
The website has eight pages and each page has been designed using a specified structure. The basic
structure of the website consists of a header, followed by a content area and a footer at the bottom of
every page. The header contains the navigation menu and the content area of every website contains
the information relevant to that page. The footer which is at the bottom of every page has the copyright
information.
The reason for choosing this structure for all the pages making up the website is to give the user a
seamless transition from on page to another. The user should not feel like they have visited another
different website when navigate from one [age to the other thus use of a consistent design structure
ensures the website maintains a common design in all the pages.
4.2 Wireframes
4.2.1 Home page
Figure 2: Homepage wireframe

The home page is the first page that any user who visits the website sees. The home page is designed to
be very effective and catchy to the eyes of any visitor who visits the website either for the first time or
an existing user who has visited the website for a number of times. The home page has a banner which
has a very quality picture with an overlay to enable appending of information about the website. By
reading the message on the banner the visitor is able to get an overview of the whole website. The
banner also has a menu which provides link to all the other seven pages of the website. The website also
has a small content area which has motivational information about the website. The last section of the
website is a footer which has the copyright information and the name of the person who designed the
website.
4.2.2 Education page
The header contains the menu of the website which has links to all the other 7 pages. The meu has been
designed to have a background image which gives a more appealing look. The content area contains the
actual information about my history of education while the footer contains information about the
copyright and the name of the designer.

4.2.3 Experience page
Figure 3Experience page wireframe
The structure of the education page consists of a header, content area and a footer. The header contains
the menu of the website while the content area contains the actual information about my experience.
The footer contains copyright information and the name of the designer

4.2.4 Hobbies page
Figure 4: Hobbies page wireframe
The page structure consist of a header, content area and a footer. The header has the menu of the
website while the content area contains the actual information about my hobbies. The hobbies are
provided in a list format. The footer like all the other pages contains the copyright information and the
name of the designer.

4.2.5 Gallery page
Figure 5: Gallery page wireframe
. The header has the menu of the website while the content area has the actual images making up the
gallery. The footer has copyright information and the name of the designer.

4.2.6 Career page
Figure 6: career page wireframe
The header has the menu of the website which provides navigation across all the other pages. The
content area has the actual information about my career while the footer has copyright information and
the name of the designer.

4.2.7 Testimonials page
Figure 7: Testimonials page wireframe
The header has the navigation meu used to navigate the website. The content area has the actual
testimonials from different user. The footer has copyright information

4.2.8 Contact page
Figure 8: Contact page wireframe
The header has the navigation meu used to navigate the website. The content area has the actual form
that the user uses to send a message. The footer has copyright information.
5 Visual Design
5.1 Composition
A website composition should be designed to cater for visitors who are visiting the website for the first
time and for visitors who have already the website for a number of times. The proposed website has
been designed with one common structure where by each page is subdivided into sections. The header
contains the menu in all the pages thus if the user wants to use the navigation menu, then the user
knows that they should scroll up while they are at any page of the website. The navigation menu is also
found in every page to ease navigation such that the user can visit any page while they are viewing any
page in the website. The header, content area and footer are all designed using the same structure. This
helps the visitor because they know where everything is after visiting any page on the website.

5.2 Colour scheme
Choosing colors is a crucial step in the design of a website. For the proposed site one color has been
chosen as the theme color. This color is green. The color is used to show an emphasis where by all titles
and highlighted use this color. The background color is white thus the font color is black to make the
font visible. For any section of the website that has a background as green the font color changes to
white.
5.3 Typography
Font selection is an important step in website design. If visitors are not able to read the content of the
website then the website loses its purpose. The font used in the website is Arial, sans-serif with size of
76%. This font size is used all over the website except for the headings.

5.4 Mock-up of Home page
Figure 9: home page mockup

6. Appendix
6.1 Raw data collection
banner.jpeg My own personal image
Banner2.jpg http://www.google.com
Banner3.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
Images/image1.jpg http://www.google.com
The rest of the data was my own.
6.2 References
Christensen, B. (2016, July). Needs Assessment vs Needs Analysis: What's the Diff? Retrieved August 30,
2017, from
http://www.ispi.org/ISPI/Resources/PX/Articles/Editors__Pick/Needs_Assessment_vs_Needs_A
nalysis__What_s_the_Diff_.aspx
Huddy, G. (2016). Back to Blog What is Audience Analysis? Retrieved August 30, 2017, from
https://www.crimsonhexagon.com/blog/what-is-audience-analysis/