This is the
stage where website starts to take a specific shape. The main role of the
design is to represent the information layout, illustrate the content, and
display the key functions of the website. The visual design is composed of
various colours, images, logos, and provides a general idea of the future product
and services. It is important here that the project’s original goals and aims
and the target audience are considered when working on a design.
requirements are basically procedures and tasks that need to be fulfilled to
achieve the successful execution of a project. They offer a clear idea of the
tasks that need to be performed.
Refer It Game is eventually intended for the researchers and
supporting them users with purpose to collect and analyse data. Application
will be deployed in form of the website, accessible to all users. Website will
act as main interface for the user data and the execution of implemented
functionalities, however this website will be only a part of a larger system.
Ready application will be hosted on web server, including database where all
the data is kept. Before website goes live, development will take place on
local machine (MS Windows) with Apache web server solution (XAMPP).
technique is the most ideal way for crafting a structured list of those needs.
MoSCoW is actually an acronym of must, should, could and lastly would.
M – Must have
this requirement to fulfil the needs
S – Should
have this requirement if applicable but the project completion does not
depend on it
C – Could
have this requirement if it doesn’t influence any other aspect of the project
W – Would
like to have this requirement later but it will not be delivered this time
appearing in MoSCoW are there to make this acronym easier to pronounce and
don’t have any meaning. MoSCoW as an arrangement method is performed to choose
which needs have to be fulfilled first, which come second, and which can wait
or be taken off. As opposed to a numerical method for listing priorities, the
words here bear a meaning which eases the discussion of what is necessary to be
1.2 Gantt Chart
One of the
top used methods for monitoring web projects is the utilization of a Gantt
chart. A Gantt chart frames all larger-scale procedures and additionally the
tasks linked with each activity as well as dates of beginning and end. The
Gantt chart acts as a visual note, illustrating the timeframes of each stage
and the connections between these stages.
and Site Architecture
architecture consists of the sitemap and the page wireframes. The generation of
a sitemap guarantees that all the main website pages have been taken into
account, illustrating their connection with each other and determining the
sites general navigation arrangement. Wireframes offer a thorough outlook of
the content that will be shown on each page. Despite the fact that wireframes
don’t illustrate any design aspects, they offer a guide for determining the
content structure appearing on the page. This results of these processes will
be used during the production of application initial prototype, prepared in
Graphic aspects that have been designed during the earlier
stage should be used for building the actual website. The homepage is developed
first and then all the other pages, based on the website structure created
earlier as a sitemap. All of the planned elements that were designed in previous
phases should be added accordingly and then checked. Next, required
functionality, interactivity and other features of the application should be
incorporated and entire system carefully tested.
The Prototyping Model is used to describe a Systems
Development Method (SDM) that involves building a prototype (a close
representation of what a final product would look like). This prototype goes
through series of tests and modifications till all parties are satisfied with
it and this prototype can now serve as the basis for the development of the
final product. This model is ideal for scenarios where some of the project
requirements are unknown ahead of time. It is usually a trial-and-error process
that occurs between the developers and the users.
The steps involved in the Prototyping Model include:
The new system requirements are spelled out in
clear detail, as it often involves interviewing users who represent every
aspect of the existing system.
The programmer come up with a preliminary design
for the new system
The preliminary design is used to create the
first prototype of the new system. The system is usually scaled-down and
possesses the qualities of the expected final product.
The users are allowed to evaluate the first
prototype, identifying its weaknesses, strengths, as well as what can be
improved upon. The programmer collates and analyses the feedback from the
Based on users’ feedback, the first prototype is
modified, and the programmer comes up with a upgraded prototype of the new
The second prototype goes through the same
evaluation path as the first prototype.
There’s iteration of the preceding steps several
times until the users are convinced that the prototype is an ideal
representation of the expected final product.
The final system or product is created, based on
the final prototype.
The final product then goes through thorough
evaluation and testing. Also, routine maintenance is done periodically to avert
monumental failures and to reduce downtime.