Hotbeans Website
Contents
Introduction ................................................................................................................................. 1
Client Requirements..................................................................................................................... 2
Target Audience............................................................................................................................ 2
Project Plan ................................................................................................................................. 2
Initial Design Ideas/Prototypes ...................................................................................................... 4
Storyboard ............................................................................................................................... 4
Mood Board .............................................................................................................................. 8
Justifications of website design .................................................................................................. 8
Alternative Designs ................................................................................................................... 9
Sitemap ................................................................................................................................. 10
Flowchart ............................................................................................................................... 11
Logo....................................................................................................................................... 12
Website Design Reviews ............................................................................................................. 12
Review with the Client ................................................................................................................ 14
Developing the Website .............................................................................................................. 15
Asset Table ................................................................................................................................ 21
Test Plan .................................................................................................................................... 22
Website Optimisation ................................................................................................................. 23
Review of Final Website .............................................................................................................. 23
Review of Final Website from Client ............................................................................................. 25
Legal and Ethical Considerations ................................................................................................ 25
Final Evaluation .......................................................................................................................... 26
What Would I Do Next Time? .................................................................................................... 26
References ................................................................................................................................ 26
Introduction
This is the documentation for the development of the website for Hotbeans. It will include the early
stages and planning of the website, as well as the development and reviews of it. Usage of interactive
features like Web 2.0 technologies (like CSS, JavaScript, etc.) will be necessary to deliver client
requirements such as form submissions and appealing designs.
,Meeting the client requirements will require thorough planning of each element of the website ranging
from the structure of it to the logo as well as providing navigational detail. Doing this ensures that the
final iteration of the website is visually appealing, intuitive and easy to digest for the user.
Moreover, reviews will be conducted by peers and by the client to confirm that the designs are
suitable for the wider web of users based on popular interest which ensures a great user experience
as well as providing a positive brand image for Hotbeans. This also involves creating timescales for
each task to ensure that each task can be created with maximum amount of e iciency and e ort as it
will help focus on the task at hand without being burdened by the stress of memorising all subsequent
tasks.
During the development of the website, careful consideration will be taken to ensure that the layout is
followed as well as considering all the design changes vetoed by the client and making use of popular
suggestions. I will also ensure that I use the appropriate and most minimal CSS properties and HTML
elements that can meet the requirements to not use up too much bandwidth and storage space with
excess of information which can create server-side issues.
I will also ensure that testing is done for all the functionalities on the website so users can enjoy a
positive user experience with no issues and avoidance of issues server-side, such as with form
validations.
The project will end with a review from peers and the client to evaluate my e orts in this project.
Client Requirements
The Hotbeans website will contain the following as per the requirements specified by the client:
- A profile of the company itself
- Profiles of existing trainee web developers
- Job specifications and required qualifications.
- Online application form
- Links to web development courses
Target Audience
The target audience for the site is people who have completed training courses or qualifications
related to web development and are now looking for a job as a web developer. Interactive features will
be necessary.
Project Plan
To fulfil the requirements, a storyboard/design will be created as a draft of the design for the various
web pages it will contain, as well as a sitemap to plan the navigation around it. A flowchart will also be
designed to plan testing for various features such as form submissions.
Therefore, these 8 web pages will be created:
- Home Page
- Contact Page
, - Job Information Page
- About Hotbeans Page
- Job Application Form Page
- Web Development Courses Page
- FAQ Page
- Profiles of Existing Trainee Web Developers Page
CSS (Cascading Style Sheet) will be used as the main method of styling elements in the web page due
to its simplicity of usage and variety. For this, a separate file must be made containing the CSS code.
JavaScript will also be used for certain elements to add interactivity.
Testing of the website will also be conducted to ensure that the website is functional.
A lot of tasks will have to be completed, so a Gantt chart will be created to e iciently plan the tasks.
These timescales allow for a set time to complete each task to complete the project by the deadline,
and the tasks will be explained below in the meeting minutes.
Meeting minutes:
1) Creating Layouts: The layouts for each web page will be designed here and used as a reference
when creating the websites.
2) Alternative designs: These will be drafted for some of the website designs as alternatives that
may prove to be superior to their original designs.
3) Sitemap: This will be created to showcase how one would navigate around the website.
4) Logo: This part contains the design of the logo that will be showcased across the website for
Hotbeans branding.
5) Gather design reviews: In this task, I will ask my peers to review my designs so far and ask them
what they think and if they have any suggestions.
6) Meeting with the owner: The designs will be sent to the client to see if he approves of them or
not and if he would like to veto in any changes on the design.
7) Developing the website: This is where the website gets made. All the code will be written using
the 3 web 2.0 technologies.
8) Conduct Testing: Testing if every function on the website works properly and adjusting if they
don’t.
Contents
Introduction ................................................................................................................................. 1
Client Requirements..................................................................................................................... 2
Target Audience............................................................................................................................ 2
Project Plan ................................................................................................................................. 2
Initial Design Ideas/Prototypes ...................................................................................................... 4
Storyboard ............................................................................................................................... 4
Mood Board .............................................................................................................................. 8
Justifications of website design .................................................................................................. 8
Alternative Designs ................................................................................................................... 9
Sitemap ................................................................................................................................. 10
Flowchart ............................................................................................................................... 11
Logo....................................................................................................................................... 12
Website Design Reviews ............................................................................................................. 12
Review with the Client ................................................................................................................ 14
Developing the Website .............................................................................................................. 15
Asset Table ................................................................................................................................ 21
Test Plan .................................................................................................................................... 22
Website Optimisation ................................................................................................................. 23
Review of Final Website .............................................................................................................. 23
Review of Final Website from Client ............................................................................................. 25
Legal and Ethical Considerations ................................................................................................ 25
Final Evaluation .......................................................................................................................... 26
What Would I Do Next Time? .................................................................................................... 26
References ................................................................................................................................ 26
Introduction
This is the documentation for the development of the website for Hotbeans. It will include the early
stages and planning of the website, as well as the development and reviews of it. Usage of interactive
features like Web 2.0 technologies (like CSS, JavaScript, etc.) will be necessary to deliver client
requirements such as form submissions and appealing designs.
,Meeting the client requirements will require thorough planning of each element of the website ranging
from the structure of it to the logo as well as providing navigational detail. Doing this ensures that the
final iteration of the website is visually appealing, intuitive and easy to digest for the user.
Moreover, reviews will be conducted by peers and by the client to confirm that the designs are
suitable for the wider web of users based on popular interest which ensures a great user experience
as well as providing a positive brand image for Hotbeans. This also involves creating timescales for
each task to ensure that each task can be created with maximum amount of e iciency and e ort as it
will help focus on the task at hand without being burdened by the stress of memorising all subsequent
tasks.
During the development of the website, careful consideration will be taken to ensure that the layout is
followed as well as considering all the design changes vetoed by the client and making use of popular
suggestions. I will also ensure that I use the appropriate and most minimal CSS properties and HTML
elements that can meet the requirements to not use up too much bandwidth and storage space with
excess of information which can create server-side issues.
I will also ensure that testing is done for all the functionalities on the website so users can enjoy a
positive user experience with no issues and avoidance of issues server-side, such as with form
validations.
The project will end with a review from peers and the client to evaluate my e orts in this project.
Client Requirements
The Hotbeans website will contain the following as per the requirements specified by the client:
- A profile of the company itself
- Profiles of existing trainee web developers
- Job specifications and required qualifications.
- Online application form
- Links to web development courses
Target Audience
The target audience for the site is people who have completed training courses or qualifications
related to web development and are now looking for a job as a web developer. Interactive features will
be necessary.
Project Plan
To fulfil the requirements, a storyboard/design will be created as a draft of the design for the various
web pages it will contain, as well as a sitemap to plan the navigation around it. A flowchart will also be
designed to plan testing for various features such as form submissions.
Therefore, these 8 web pages will be created:
- Home Page
- Contact Page
, - Job Information Page
- About Hotbeans Page
- Job Application Form Page
- Web Development Courses Page
- FAQ Page
- Profiles of Existing Trainee Web Developers Page
CSS (Cascading Style Sheet) will be used as the main method of styling elements in the web page due
to its simplicity of usage and variety. For this, a separate file must be made containing the CSS code.
JavaScript will also be used for certain elements to add interactivity.
Testing of the website will also be conducted to ensure that the website is functional.
A lot of tasks will have to be completed, so a Gantt chart will be created to e iciently plan the tasks.
These timescales allow for a set time to complete each task to complete the project by the deadline,
and the tasks will be explained below in the meeting minutes.
Meeting minutes:
1) Creating Layouts: The layouts for each web page will be designed here and used as a reference
when creating the websites.
2) Alternative designs: These will be drafted for some of the website designs as alternatives that
may prove to be superior to their original designs.
3) Sitemap: This will be created to showcase how one would navigate around the website.
4) Logo: This part contains the design of the logo that will be showcased across the website for
Hotbeans branding.
5) Gather design reviews: In this task, I will ask my peers to review my designs so far and ask them
what they think and if they have any suggestions.
6) Meeting with the owner: The designs will be sent to the client to see if he approves of them or
not and if he would like to veto in any changes on the design.
7) Developing the website: This is where the website gets made. All the code will be written using
the 3 web 2.0 technologies.
8) Conduct Testing: Testing if every function on the website works properly and adjusting if they
don’t.
