Web Development Project: Process, Design, Usability and Testing

This project report details the comprehensive process of website development, encompassing planning, design, and implementation. It begins by emphasizing the importance of defining the website's goal and target audience, followed by content planning, sketching design ideas, and the actual coding phase using HTML, CSS, and JavaScript. The report highlights key considerations such as typography, color selection, and testing. It also includes a personal brand statement about beer and discusses usability requirements like browser compatibility and responsive design. The project covers the entire lifecycle of website creation, from initial concepts to the final testing stages, providing a practical guide to developing a functional and user-friendly website.

Process:
The process of website development includes a lot more than just coding the pages. The
technologies like HTML, CSS give our website the look and the feel that we expect but there is a
lot more than this coding process in a development of a fully functional website. The website
developed for this project was developed considering many things like the goal of the website,
the target audience for the website, the design which we want for the website, the content flow of
the website, navigation and many more.
First of all, to develop a website we need to define the goal and objective of the website.
This includes defining of the goal as well as understanding who their target audience is. Target
audience is the users or the customer for whom the website is being made. Defining the target
audience is important because it gives a clear idea of the goal of the website and helps the
website during its initial and critical phases. The goal and audience must be clear in one’s mind
before proceeding to another stage in website development.
Plan:
After this, the next step is planning everything about the website out. This means that we should
not directly jump onto coding and developing the website before planning important things.
These things are the main content for the website, like text, images, videos, icons etc. The
content should be collected and arranged in a single text document and all the images should be
collected in a single folder with proper and understandable naming convention. This should be
done so that it is easier to identify where to place the content while making the website. These
are important as when we know what content we need to show in our website then we can
efficiently design the look of the website. The content is arranged in a Node-link tree diagram to
visualize the hierarchy of content in our website.
After this, the next step is sketching our ideas before starting to design. In this, it is very
important that one sits with a pen and paper and think of different desired designs for website.
This is the process of sketching one’s ideas. We can make as many sketches as we want but
should not try to make them perfect. This phase is important as one should never start designing
before having an idea of what they wanna build.
Now comes the phase in which we will actually design our website. This phase includes
the coding of web pages in Html and designing their look with help of CSS. We can use all the
information gathered in the previous steps to code our webpage. All the content that we collected
and designed in the Information Architecture should be used in this phase. Although, HTML and
CSS are enough to design beautiful and attractive websites, still to make the website dynamic we
can make use of javascript. The designs made in previous steps should now be converted into
pages. The website may get a little deviated from what we thought it would look like but one
should not worry as this happens. This happens because in sketches we make a vague idea of

what we desire for our website while during the actual development we see the real possibilities
and may find that some things turn out to be even better than what we thought.
There are several things one should keep in mind while developing the website. One of
such things is typography, we should use a font-size between 15px and 25 px in order to give our
website a professional look. We should only use the big fonts for the headlines i.e. fonts like
60px or 34px. Also, for larger font-sizes, we should decrease the font-weight. The font chosen
for website should be good and a line should contain 45 to 90 characters only and not more than
that. The question is how to choose the font for our website? We should choose a font that
reflects the look and feel of our website and we should only use one typeface throughout the
website.
While using the colors in the website, we must keep in mind that there should be only one
base color. The selection of color should be done wisely as there is different meaning and feeling
hidden behind the use of every color. Our website reflects yellow color as the color yellow
signifies liveliness, intelligence, curiosity and happiness. So, the basic look of this website is
made to be full of energy and this totally serves the topic/purpose of our website i.e. beer.
After the coding is done, we can test the functioning of our website. It would be better if
we test the website elements after coding some elements and repeating this process of coding and
testing. This is better because it avoids unnecessary fuss and saves a lot of time. If we don’t do
this and test the website at the end when all the coding is completed, then possibly in most cases
what we will get is a website with a lot of syntactical mistakes and half of the elements not
working properly due to this.
Personal brand statement:
Beer is one of the oldest and most widely consumed alcoholic drinks in the world, and the third
most popular drink overall after water and tea. Beer is brewed from cereal grains—most
commonly from malted barley, though wheat, maize (corn), and rice are also used. During the
brewing process, fermentation of the starch sugars in the wort produces ethanol and carbonation
in the resulting beer. Most modern beer is brewed with hops, which add bitterness and other
flavours and act as a natural preservative and stabilizing agent. Other flavouring agents such as
gruit, herbs, or fruits may be included or used instead of hops. In commercial brewing, the
natural carbonation effect is often removed during processing and replaced with forced
carbonation

Wireframes:
Home:
INNER PAGES:

Design:

Usability Requirements:
Internet web browser like Google chrome or Mozilla Firefox is required to access the site.
We site is responsive in nature so it can support a wide variety of screen sizes.
Proper size of fonts are used to make it easy to read the contents of web page.