The phases of a web design

When we face a web design project it is important to carry out a step-by-step methodology, in order to reach the established objectives.

Here we tell you what steps we take in the projects of our web design agency.

Phase 1. Briefing

To start the web design process well, communication between the client and the agency is essential. The information provided by the client will be crucial in order to establish the basis of the project and the most relevant data for the web design.

What is briefing

The briefing or brief is a document that establishes the basis of the project and the basic information for designing the website.

This document should be comprehensive and detailed, including not only the objectives and description of the business, but also any specific expectations of the client regarding the visual style and functionality of the website.

The document should include information such as:

• Main objectives
• Information and description of the business.
• Mission, vision and values of the company.
• Language and geographic scope.
• Market and competitors.
• Domain or possible name suggestions.
• Deadlines.
• Observations and limitations.

In the briefing phase, it is crucial to clearly identify the type of customer the website is aimed at, as this factor will have a decisive influence on all elements of the design and content, as well as the structure of the website itself. A thorough understanding of the customer profile helps us to personalise the strategy and ensure that the web design is not only attractive but also functional for the target audience.

In addition, it is also important to determine what type of website our client wants. The type of website will influence the rest of the phases, which we will discuss below.

We can find different types of websites such as:

• Corporate website
• Online catalogues
• Online shop or e-commerce
• Thematic blogs
• Forums
• Institutional websites

Example of a briefing

In order to show in a more intuitive and simple way one of the most important phases of the creation of a website, we are going to create a fictitious briefing about a possible client. This fictitious client is a local shop that wants to reach more customers online. This shop sells women's clothing.

1. General client information

Client's name: Boutique Luz de Luna
Business Type: Women's clothing shop
Location: Barcelona, Spain
Website Objective: To expand local clientele to a wider market through online sales. In addition to making itself known to a wider audience in the towns surrounding its shop.

2. Project objectives

Increase Visibility: Improve online presence to attract customers outside the locality.
Increase Sales: Establish an effective and secure online sales channel.
Customer Loyalty: Create a platform to maintain and increase the loyalty of existing customers.

3. Business description

Mission: To offer quality women's fashion products, standing out for our personalised service and detailed attention, always adapted to new trends.
Vision: To be a local and online reference in women's fashion, known for its quality and unique style.
Values: Commitment to quality, personalised attention, and respect for the diversity of bodies and styles.

4. Market research

Target Audience: Women from 25 to 45 years old, interested in fashion and trends, with a medium-high income. As we are talking about medium-priced products, identified by their high quality.
Competitors: Local women's fashion shops, large chains with online presence, and fashion e-commerce platforms.
Key differentiators: Personalised service, exclusive collections, and a focus on sustainable fashion.

5. Specific requirements

Languages: Spanish, with the possibility of adding English in the future.
Type of website: E-commerce with incorporated blog for fashion tips and trends.
Visual Style and Tone: Modern and sophisticated, using a neutral colour palette with touches of vibrant colours. The tone of the content should be friendly, professional and motivational.

6. Technical Details

E-commerce platform: Preference for systems such as Shopify, PrestaShop or WooCommerce for their ease of use and management.
Essential functionalities: Shopping cart, inventory management, search filters, integrated blog, and secure payment system.
SEO and Digital Marketing: Strategies to improve local and international SEO, and campaigns on social networks and Google Ads.

7. Deadlines and observations

Project Start Date: 1 May 2023
Launch date: 1 August 2023
Comments: Need to integrate web analytics tools to monitor user behaviour and adjust strategies.

Once the briefing with the client has been completed, we will go on to analyse in detail all the information we have about the project. We will have to take into account all the graphic material that the client has, especially if the brand already exists or may have had a website before.

Phase 2. Analysis of the information

In the analysis phase, the main objective is to deepen the data collected during the briefing in order to develop a web design strategy that not only meets the client's expectations, but also stands out in the competitive market.

Therefore, once we have all the necessary information from the client, we will move on to the more exhaustive analysis phase. Once we have all the necessary information from the client, we will move on to the analysis phase. In this phase, we will take into account all the above-mentioned points in order to develop the strategy to be followed.

In order to develop the right web design, it will be necessary to take into account the strategies of competitors and within the sector itself.

We study direct and indirect competitors to identify their strengths and weaknesses. This includes reviewing their websites, integrated functionalities, aesthetics and design, as well as the marketing strategies they have in place.

If the client already had a previous website, we review their situation to identify areas for improvement. This includes performing an analysis of traffic, conversion rates, and other parameters that can help us understand user behaviour.

Phase 3. Planning

Once we have analysed the information and set the objectives we wish to achieve, we will move on to the Planning phase.

In the Planning we establish the steps to reach the objectives and the different tasks to be carried out. It is essential to be clear about which department is responsible for each of the tasks and the appropriate coordination of all of them in order to achieve these objectives.

It is important that we define the sitemap so that we can work well on the web design and content of the website. This map will help us to define the structure of the website, organising the pages and categories in a logical and intuitive way to facilitate user navigation. As well as defining the navigation menus of the website.

Another important factor to take into account will be the type of website our client wants and the technology we will use, but always with a tailor-made design. In turn, we plan the interactive features of the site, such as forms, interactive elements or customised tools, which enhance the user experience.

Therefore, during this planning phase, we will focus on the allocation and coordination of tasks in order to be able to define the roles of responsibility to each of the departments, as well as establish a delivery schedule.

In order to move on to the next phase, it will be necessary to meet with the client and evaluate the steps to follow and the material needed. It is essential that we can work on the web design based on the material provided by the client, such as images, texts and more.

Phase 4. Design and prototyping

During the design stage, we will establish the client's entire brand image, as well as the colours, typographies, iconography and styles. We will also create the logo, following the previously established style, if and when the client needs it.

To start the design process, it is important that we always create wireframes first, in order to fix the structure and layout of the elements on the website. 

Here is an example of what a wireframe might look like for a potential client who wants to create a website.


In this case, the example consists of some fictitious texts, with the intention of helping the client to intuit how the elements will be distributed throughout the website.

During the whole process we must take into account the user experience and the interface, in order to create a responsive design. Thus adapting our web design to the different devices.

Once the wireframes have been made and before making the final design, different sample designs will be made so that the client can assess which style they feel most comfortable with. In this phase, normally around 3-4 main pages of the website are presented, with the intention that the user has the possibility of seeing different types of adapted content, such as the Home page, Services, Product details, Contact, among others.

Taking into account the revisions made with the corresponding client, the wireframes of the design will be adapted, in order to be able to present a design to the client adapted as shown in the example:


In this design, adaptations of styles such as colours, typographies as well as the different contents that will be shown in the definitive website are already being made.

For the presentation of the final design, mockups and other photomontages may be used to help with a better preview of the web design.

Once each and every phase of the design has been approved, we will move on to the implementation of the design on the website, as well as the programming of the corresponding backoffice. To do this, we will begin to carry out the corresponding layout and programming.

Phase 5. Web content

In the content phase, we focus on writing texts, but always taking into account the keywords and the type of audience. The content section includes not only texts but also other types of content such as images or videos.

It is important to communicate with the client at all times, as their collaboration will be essential for the incorporation of texts on the website.  

We cannot forget the legal texts, which are indispensable for the creation of a website. This type of text includes data protection, cookies and legal regulations.

Depending on the type of company, it will also be necessary to incorporate shipping and returns policy, cancellations, reservations and more.

Phase 6. Web development

Once the design is accepted by the client, it will go to programming in order to implement and develop the established web model. In this phase, the content management system (CMS) or programming languages necessary for the implementation of the web design will be chosen.

We can find different types of programming languages such as JavaScript, SQL or PHP.

Phase 7. Testing and launch

Once the web design process is finished, it is important that we carry out different technical tests to verify the correct functioning. Among the different tests we carry out, we analyse the functioning of the forms, navigation buttons, browser search and other functions.

Another of the checks we carry out is the compatibility of browsers and devices, as it is important that our website is displayed correctly in each of them.

Before publication, the website is reviewed internally, in order to incorporate the necessary tools for its analysis and parameterisation, such as the incorporation of Google Analytics. Other SEO-focused tasks are carried out in parallel, such as the generation of the sitemap, the incorporation of keywords, the definition of meta-tags and other technical tasks for online positioning in order to fine-tune the website.

All these quality tests allow us to check and correct errors, if necessary, before launching the website. Once everything is verified, we can publish the website.