The design and construction of a Website/application require
development teams to follow series of steps for its completion. For a
customer or a business owner, understanding the process is very important
before and during the project.
If you are a customer or a business owner, this article is for
you. Over the years working as an interface designer at a COMPANY IN UAE and
Australia, I have seen the pain faced by developers due to confusions in
projects, so I wanted to share my opinions and describe basic steps of web
development to make the whole process easy to understand hoping it will help
you in your future projects.
Stage 1:
Groundwork & Planning
The Groundwork & planning stage of WEB DEVELOPMENT project is most important, and it is
even more critical than the actual development. A good plan provides an
infrastructure for designers, developers, managers, content publishers,
clients, etc. A plan gets altered during the process, but it is favorable to
keep the core plan intact. Let’s look at three important steps of planning.
Requirements Analysis
This step is used to develop a summary of the project, to obtain
a clear picture of your target audience, your objectives for the project and
generally understanding in detail about Website’s direction and end user needs
for it.
Information Architecture
It is also known as site tree, The information architecture is a
structured design of pages, sections, user interactions, elements and basic
contents of the website. The customers and business owners should pay
particular attention to this because it ensures that all the key pages of the
site have been examined, showing their relationship to each other and also
defining how the navigation experience should be.
Technology and Resources
A clear picture of the project requires seeing the final result.
For example, what type of server will be required, what type of specialized
tools the site will be utilizing, what are the software requirements, what
maintenance plans will be put in place post launch. All of these decisions and
when they are implemented impact the project success over its lifetime.
Stage 2: Designing
Once the planning phase is completed, all the information is
obtained from the customer and the resources are collected, Now it’s time to
focus on the visual aesthetics of the project. The design team will break down
the planning and requirements of the project and begin the process that will
lead to creation of a beautiful design, unique to the brand of your company.
Designers use a few tried and proven methods to produce refined designs and
happy clients.
Wireframes
Some designers use paper and pencil to draw the rough view of
how the content will appear on the page, Others like the use of specialized
wire framing tools such as BALSAMIC or MOCKFLOW. No matter whatever method is
being used the goal is to show basic design layout.
Mockups
Mockups are detailed designs that start with wireframe but take
things to the advance level. They are created in programmes like PHOTOSHOP or
FIREWORKS. This step should not be taken lightly because it determines the
design that users will see and interact each time they visit your site. Take as
much time and effort as necessary in order to ensure a solid basis for the
visual identity of your online presence. It is immensely important!
Review and Craft
Review and crafting take place throughout a project and is
considered to be very important step in any project. When this phase is
complete, the real development begins to build your new Website or an online
application. The emphasis here is to ensure that all participants are involved
in the project to accept and report the mockups that have been developed. This
implies to reemphasize the design and modification of the page layout. Working
closely with the client to obtain a Market ready Website is important so
that all requirements are met.
Stage 3: Development
Now that approval has been given on the visuals of the project,
it’s time to slice up the mockup, break out the design elements, and jump into
code. Many core tasks are involved here such as building the site structure,
constructing the models, importing data, publishing content, and creating news
stories and events, etc. Of course, rigorous testing is performed for
functionality and performance throughout this stage. Below I have broken out several
key concepts.
Bootstrap
The Developers Load the project in a controlled repository by
source and put in place the CMS or the framework of custom development so that
entire team can access the code and use.
Chrome & Skelton
Interface designers cut the final creative design and start
using it in the Code. A job well done here will show in the web browser the
site’s brand, navigational elements, header and footer, as well as all the
other elements of the site, as well as a complete site structure with all pages
created and accessible in the CMS (if applicable).
Special Features
The specific characteristics of the site require special
attention during the construction. Usually, these features are customized
according to the requirements of the project. All kinds of features belong to
this category, such as the advanced search, Map/GPS based searching, data
exporting, reporting, the PDF creation at the request to name only a few. Once
a feature is complete it then gets placed on its respective page(s) of the
site.
Client Training
Inevitably, customers will need to work with the product that we
build. The amendment of the text, images, the publication of the new/events,
creating /editing/removing pages is all that our customers need to do in their
own way. At this phase of the project, we are almost ready to launch, but we
ensure that our clients understand their software and can work with it at full
speed.
Stage 4: Launch
Now that the project has been developed and ready to be
unleashed to the world.While we have covered a long way but still we are left
with few tasks like final touch ups, getting everything over the production
server, further testing and then we are ready to go.
Improvements
Taking one last opportunity to better improve the WEB DEVELOPMENT is the basic element of high fidelity
of work. All sorts of improvements are welcome here, such as performance,
responsiveness, user experience, padding, margins, and one last dab of paint
Testing functionality
& responsive checks
Everything is done, the world can see, it’s now time to run the
site for the final test in the production environment and to ensure the
functioning of the site on all browsers and modern devices. A lot of things can
be tested automatically, others require manual testing. Tools such as SauceLabs
or BrowserStack can be used to test for browsers and devices.
Stage 5: Post Launch
We are still not done yet, At this stage, we will discuss
additional needs, provide documentation etc.Even though the website has been
launched and the project has been completed but in order to make sure the
effective running of the project it will require ongoing care and maintenance.
An Online Care Plan must be considered by the team for the client.
Handing off Documents
The clients that host and maintain their own site/application
generally require that all source files and databases to be delivered. The
purpose here is to provide everything that the customer requires in order to
achieve customer satisfaction & loyalty.
Further Client Training
When the client has market experience of the website it is
recommended to further train the client as now he has gone through the website
professionally.
Final Thoughts
I hope that this publication has helped you better understand
the basic process used to undertake a project from the beginning to the end. If
there are follow-up questions on this or any related topic on which you want to
learn, please comment below.
Sign up here with your email
ConversionConversion EmoticonEmoticon