Website

Design
Project Name

Student Details: Docume

nt
Term and Year:

Wentworth Institute of Higher Education

Master of Information Technology
Table of Contents
1. Overview:............................................................................................................................................3
1.1. Description...................................................................................................................................3
1.2. Competitive Analysis (Website critique)......................................................................................3
1.3. Target Audience...........................................................................................................................3
2. Content and Structure:........................................................................................................................3
2.1. Sitemap........................................................................................................................................3
2.2. Content Inventory........................................................................................................................3
2.3. Navigation....................................................................................................................................3
3. Content Design:...................................................................................................................................3
3.1. Page Layout.................................................................................................................................3
3.2. Special effects..............................................................................................................................3
3.3. Wireframes..................................................................................................................................3
4. Visual Design:......................................................................................................................................4
4.1. Color Scheme...............................................................................................................................4
4.2. Typography..................................................................................................................................4
4.3. Mockup........................................................................................................................................4
5. Conclusion:..........................................................................................................................................4
6. References:..........................................................................................................................................4
1. Overview:
1.1. Description
The exam calls for the development of a 15-page Personal Website that is both unique
and polished. The goal of the site is to advertise oneself and one's aspirations in the
professional world. HTML5 must be used for the site's markup, and there must be at
least three separate CSS3 style sheets used, as well as JavaScript for form validation and
uniform header, navigation, and footer elements. The website should feature a
homepage with a picture and brief bio, a "contact me" page with a functional HTML
form, and 13 more pages on subjects of r choosing. The evaluation also places an
emphasis on preparing the content and visual design, such as by drawing up wireframes
and gathering all the required media resources.

1.2. Competitive Analysis (Website critique)

Homepage: Design a home page that will entice users to explore the rest of r site.

About us: Include a part that summarizes who I am and what I want to accomplish
professionally.

Skills: Highlight r most relevant experience and talents, maybe by using visual aids like
bar graphs or iconography.

Services: If appropriate, please describe the services provide or r areas of expertise.

Portfolio: Showcase of skills and experience with a portfolio of my work, projects, or

accomplishments.

Testimonials: Include customer comments or testimonials to establish trust and

authenticity.

Pricing: Present price or package choices for my services if they are applicable.

Publications: Please include any books, articles, or other literary works to which I have
contributed.

Awards: Highlight any accolades or acclaim 've earned.

Education: List any relevant coursework, certificates, or degrees 've earned.

Blog: Article on something that are interested in to share r knowledge and ideas with
others.

Contact: Provide a simple way for site visitors to get in touch with me, such as a contact
form or a list of r contact details.

Target Audience
 Depending on the person's professional aspirations, the site's target audience may
change. However, some examples of people who could be interested in seeing a
personal website are:

 Employers/Recruiters: Professionals looking to showcase their skills,

experiences, and achievements to potential employers or recruiters.
 Clients/Customers: Entrepreneurs or freelancers who want to present their
services, portfolio, or products to attract potential clients or customers.
 Colleagues/Peers: Individuals aiming to connect with and share their work or
industry insights with colleagues, peers, or like-minded professionals.
 Students/Researchers: Individuals in academic or research fields who want to
share their publications, educational background, or expertise.
 Networking Connections: Professionals seeking to expand their professional
network and connect with individuals in their field industries.

When deciding who should see a person's personal website, it's crucial to think about
the site's purpose. When I know my audience and what they want from a website, I can
build one just for them.

2. Content and Structure:

2.1. Sitemap

2.2. Content Inventory

Provide detailed content inventory in the following table.

Page Name Content Type

Home Welcome to my Personal Website! Landing page
About me I am a passionate and dedicated professional with a Informational
strong background in graphic designing.
Skills Skills and expertise. Visual
Services Services that I offer. Informational visual
Portfolio Projects and achievements. Gallery
Testimonials What clients are saying about me. Carousel
Pricing Choose the package that best suits r needs and Informational
budget.
Publications Award, education and blog. Showcase
Awards Description of the award. List
Education Academic details. Chronological
Blog Stay updated with my layoutest insights, Articles
experiences, and industry trends through my blog
posts.
Contact Have a question or want to discuss a potential Form
collaboration?

2.3. Navigation
3. Content Design:
3.1. Page Layout
The homepage's design should be visually appealing, with a banner or heading that
introduces the website that stands out clearly. It could have some introductory text
about me and the site's focus. might want to add some clickable links, a hero image,
and a slideshow to r site's navigation menu.

The design of About Me page should center on providing concise and clear information
about myself. It could feature a headshot, a brief biography, and an overview of r most
relevant qualifications and accomplishments. Make the content scannable by
incorporating text, headings, and visuals.

The Skills page can be formatted in a list or grid to showcase r expertise. Think about
using symbols or a bar graph to show how far along I am in the development of each
skill. Put similar abilities in the same section to make the list easier to read.

The structure of the Services page may comprise a brief explanation of each service,
followed by a list or grid emphasizing the various services available. Each service can
have its own section or tabbed interface in which additional information can be
provided. More people are likely to read and retain the material if it is formatted with
clear headings, bullet points, and applicable graphics.

Portfolio page should highlight r best work and have a clean, well-organized design.
Think about employing a grid or gallery layout with thumbnails that can be clicked on to
be taken to in-depth project pages. can describe the project, explain r role in it, and
highlight the results 've achieved on its own page.

A list of testimonials from satisfied customers or satisfied employees can be found on

the Testimonial page layout. A short quote or feedback from each reviewer can be
displayed alongside their name and organization. If I have access to a photo of the
person, including it can help establish their credibility and authenticity.
 We can compare and contrast various plans and prices with the help of a table or chart
on the Pricing page's design. Provide package prices and a list of what's included in each
offering. A popular or highly suggested bundle can also be featured. Make the pricing
information clear and distinct.

Titles and brief summaries of each publication can be displayed in a list or grid format
on the Publications page. Links to view or download the publications are encouraged,
and users can be aided in their search by the inclusion of filters and/or categorization.

The Awards page design can show r awards in a list or grid format, complete with the
name of the award and a brief explanation of what I did to earn it. Use icons or other
visual elements to make the awards more engaging.

One possible arrangement for the Education section is a reverse chronological list of r
academic accomplishments. Specify the title of the degree or certification, the name of
the awarding institution, and the year it was received. If necessary, I can provide further
explanation or description.

The Blog page design typically displays a list or grid of blog posts, including the post's
title, date, and a brief excerpt or preview. It may be appealing to include thumbnails of
images. Make it possible for visitors to r blog to read the full post, offer feedback, and
share it on social media.

The Contact page layout should prominently feature a contact form where visitors can
fill in their details and send a message. Include clear labels for each field and consider
adding a simple captcha or anti-spam mechanism. can also provide additional contact
information such as r email address or phone number, and include links to r social media
profiles if desired.

3.2. Special effects

Smooth animations and transitions can now be applied to website elements with the
help of CSS3 transitions. When a user hovers over a button, for instance, the button's
color and size can be made to transition gradually. Users will have a more interesting
and exciting time as a result.

With CSS3's rounded corners, I can give elements like buttons and images a softer, more
aesthetically pleasing look. can give r website a more sophisticated look by adding
rounded corners with the border-radius property.

CSS3 Embedded Fonts: CSS3 allows to use custom fonts on r website by embedding
them directly into r CSS code. By utilizing @font-face rules, I can integrate unique and
visually striking fonts, enhancing the overall aesthetics and branding of r website.
 JavaScript Image Slider: An image slider is a popular JavaScript special effect that allows
to showcase multiple images or content in a dynamic and interactive manner. With
JavaScript libraries like jQuery or pure JavaScript code, I can create image sliders that
automatically transition between images, display captions, and provide navigation
controls for users to manually browse through the images.

3.3. Wireframes
Home: Consider a wireframe with a prominent header/banner introducing r website, a
navigation menu, a section for r photo and a brief introduction, and possibly a section
for a photo gallery or featured projects.

About Me: Design a wireframe that includes sections for r profile photo, a concise
biography, key skills, experiences, and achievements. Consider using headings, bullet
points, or icons to structure the information.

Skills: Create a wireframe with a list or grid layout to showcase r skills. Each skill can be
represented by a label or icon with a short description or proficiency level.

Services: Design a wireframe with sections for service descriptions, possibly

accompanied by relevant icons or images. can use a grid or list format to present
different services.

Portfolio: Create a wireframe that displays project thumbnails or previews in a grid or

carousel format. Clicking on a thumbnail can lead to a detailed project page with
images, descriptions, and project details.

Testimonial: Consider a wireframe with a section to display testimonials, featuring the

name, affiliation, and feedback. can use a list or a carousel to showcase multiple
testimonials.

Pricing: Create a table or section in my wireframe that details the features and costs of
each pricing tier.

Publications: Make a flowchart detailing r published works' titles, perhaps with

abstracts. might want to add some buttons or links so that others can read the
complete articles.
 Awards: Design a wireframe that presents a list or grid layout to showcase the awards I
have received, including the title and a brief description or achievement.

Education: Create a wireframe that lists r educational qualifications in a chronological

or hierarchical format, including the degree/certification, institution, and year of
completion.

Blog: Design a wireframe that showcases a list of blog post previews, displaying titles,
dates, and short excerpts. Each preview can link to the full blog post page.

Contact: Consider a wireframe that features a contact form with input fields for name,
email, subject, and message. can also include additional contact information and links
to social media profiles.

4. Visual Design:
4.1. Color Scheme
A white base divided into a cream pattern. According to the site's choices, certain pages
have a blue backdrop with yellow text.

4.2. Typography
Typography plays a crucial role in the design of a personal website. It involves selecting
appropriate fonts and arranging them effectively to enhance readability and convey the
desired tone. Key considerations include font selection, font sizes, line spacing, and font
pairing. Choose fonts that are legible and reflect r personal brand. Use different font
sizes to create visual hierarchy, ensuring the main body text is easily readable. Proper
line spacing and letter spacing contribute to readability and aesthetics. If using multiple
fonts, ensure they complement each other for a cohesive look.

4.3. Mockup
Creating mockups is an essential step in the website design process. For the home page,
consider a layout with a prominent header/banner, a navigation menu, a section for r
photo and introduction, and optional sections like a photo gallery or featured projects.
The contact me page mockup should feature a contact form with fields for name, email,
subject, and message. Include additional contact information and links to social media
profiles if desired. Use visually appealing typography, proper alignment, and spacing to
create a professional and engaging design. Tools like Adobe XD, Figma, or Sketch can be
used to create mockups, allowing to visualize and refine the overall look and sense of r
site before development.
5. Conclusion:
In conclusion, there are many details to consider while making a site for oneself, including
content, layout, typography, color scheme, and usability. A website that accurately reflects r
subjective brand and conveys professional person goals should be both visually beautiful and
easy to use. Considering the needs and interests of r intended audience is essential to crafting a
compelling online presence that effectively showcases r skills, credentials, and expertise. A user-
friendly and interesting website will admit content that is easy to read, easy to access, and
constantly visually appealing.

6. References:
APA style references required. Also, in-text citations must be present.