The 8 steps to creating a website or web application

For any web project, we have two stakeholders: the client, with their needs, wishes and universe, and the service provider with their knowledge and tools.

Very often each of these parties is made up of several people, each with their own roles and respective skills, but this detail will be set aside for the sake of simplicity in order to have an overall view of the project.

In this article I will not cover the different design methods (such as Agile, for example), which can influence the order of these steps and the way of proceeding, in order to keep a general idea of the creation journey.

If you want to learn more about the Agile methodology, I recommend reading my article on the subject.

Note that during each step it is essential to communicate with the client to make sure you stay in line with their expectations, and to have each deliverable validated.

1 - Specifications

The specifications document

The purpose of the specifications document is to protect both the client and the service provider by ensuring that each party has a common document to rely on, containing the terminology of each in order to avoid any confusion.

This document also serves to lay out the client's needs, both explicit and implicit, as well as constraints and technical decisions, along with all the elements necessary for the proper implementation of the project, even if some are put in an appendix.

This document, to be signed by both parties, is not meant to set absolutely every decision related to the project in stone, since the project will inevitably evolve as it progresses, but simply to serve as a basis to avoid any confusion between the client and the service provider.

I invite you to check out my article on writing a minimal technical specifications document!

Formalization

The formalization phase consists of creating reference documents, not intended for the client, but intended for the design team (graphic and technical) in order to avoid wrong turns during the future stages of the project.

This formalization can take the form of user stories (User Stories), UML diagrams, data tables, etc...

2 - Wireframing

Here, no drawing skills are required; it's about drawing squares (and maybe a few circles) to place the important elements of the screens and thus think through the organization of the data and the logic of the site or application.

It is possible to use mockup software, but I recommend starting the work with pen and paper, because software will push you (sometimes unconsciously) to properly align your elements, adjust sizes, center them correctly—in short, it will make you waste a bit of time on details.

Yet what matters in the wireframing phase is that you should not spend more than two to three minutes on your sketches.

Why? The more time you spend on a creation, the more sentimental value you attach to it, and when the right decision is to start over (to improve the user experience), the more you will try to convince yourself that this version is good enough in order to keep it intact.

It is during this step that a large part of the project's usability, and therefore of the user experience, comes into being, so this step should not be neglected.

3 - Design

Once the wireframes have been validated with the client, the design needs to be added to obtain the final screens.

In cases where the client already has a very precise and comprehensive style guide, this step can simply consist of applying all the rules of that guide to the wireframes already created (logo, fonts, colors, sizes, spacing, etc...).

But in cases where the client has none of that, two options are possible depending on the client's wishes:

• Create a style guide from scratch, which will require the involvement of a designer
• Rely on kits or graphic design frameworks (Material Design, Bootstrap, etc...) directly accessible to developers

The second option is mainly valid for applications, which are intended to provide one or more specific features, rather than for a site whose main purpose is to sell and stand out from others.

4 - Development

I won't go into detail about technical development, since there are a million different ways to technically build a project for the same initial need.

Nevertheless, I want to point out that the development phase includes not only coding, but also:

• Setting up the development environment (version control, CI/CD, servers, etc.)
• Unit tests, integration tests, load tests, etc.
• Documentation
• ...

Note that the development stage is not a linear step, but rather one where you iterate, encounter issues, discuss them, and find alternative solutions.

5 - Content implementation

Content is most often provided by the client themselves or by a communications agency, and must be thought out in parallel with development so that it integrates properly, but also because it represents a significant part of the project's natural search engine optimization.

6 - Final acceptance testing

Acceptance testing consists of going through the project to verify that the expected features are indeed present and functional, that the screens match the wireframes, and that all the requirements stated by the client and accepted by the service provider have been incorporated into the project.

Intermediate acceptance tests are of course recommended, but the final acceptance test is the highlight that allows the client to validate the entire project before launch.

Final acceptance testing is more generally specific to websites, because an application is more often subject to evolution and updates, so the development phase and intermediate acceptance tests can continue over several years.

7 - Deployment

From a simple showcase site sent to shared hosting to a complex application hosted on a cloud instance, final deployment is a step that can only happen once the project has reached a sufficiently advanced stage, but it can be prepared in advance.

For certain projects where CI/CD (Continuous integration, continuous delivery) is implemented, the final deployment becomes negligible because throughout its development the project is regularly redeployed on test environments similar to the production environment.

8 - Support / maintenance

Support for a project is often set aside when planning a web project, whereas the cost (in time or money) of this step can sometimes double the initial cost of the project if the development phase was rushed.

Allocating extra time or resources during the previous phases can often save you from disaster during the support or maintenance phase.