The role of the web designer in the creation or redesign of your website
Today, webdesign is at the heart of all website creation or redesign projects. Indeed, from the general design to the reflection on the user experience, web design represents a full-fledged step in the construction of a website. The web designer’s work thus consists in thinking about the structuring and the aesthetics of a website with the aim of making the Internet user stay on the site and that he carries out an action (purchase, making contact, making appointments etc.). But concretely, what is the role of the web designer responsible for the creation or redesign of your website? What are the main stages of his work? Let’s find out together in this article.
The brief: a crucial first step
The role of the web designer starts at the beginning of the project. He receives a brief from the client that includes all the key elements of the project. Whether it’s the creation of your website or its redesign, the brief allows us to better understand your needs and objectives. In particular, it contains the message as well as the values you wish to convey through your website. This step also allows the web designer to transmit the graphic charter to be respected.
For example, we have internally redesigned the websites of our entities Habefast and LakeProd. For these achievements, the objectives and expectations of the redesign of these websites were transmitted to the web design team. Indeed, the Habefast website is more based on informative content where the LakeProd website seeks to highlight the studio’s audiovisual productions. It is therefore crucial to understand the expectations and objectives of the company in order to create a well-adapted website.
Realize the tree structure
Once your expectations have been assimilated, the web designer begins the structuring of your website. It is first of all necessary to realize the tree structure. In our agency, this step is carried out in collaboration with the project managers. The tree structure of your site corresponds to the structure of this one, its framework. One of the basic principles of UX design is to build the site in such a way that the Internet user does not make more than 3 clicks before reaching the information he is looking for. The future pages of your website are therefore classified with the objective of respecting this rule, and thus optimize the user experience. The main information, which must be easily accessible, is thus given greater prominence.
It is then possible to create a site map of the website. A site map is a sketch showing the site tree and the links between the different pages of your website. As part of the redesign of our Habefast and Lakeprod sites, a site map has been created. The objective was to have a global vision of the construction of the sites, and thus to communicate it more easily te web deveo thlopers, who are in charge of the online development of the site.
Once the tree structure is validated, it is generally not modified anymore, so the foundations of the project are solid.
An even more concrete stage: the beginning of the sketches of the new site
Once these first steps are completed, the web designer enters an even more concrete stage: the beginning of the sketches of the new site. This is also where UX design comes in. This step – the aim of which is to design the website in such a way as to provide the best possible user experience – makes it possible to create what is known as a wireframe. A wireframe is a mock-up of the site in a blank, without the final text and multimedia content. It uses the structure of a web page and the layout of the elements on the page in order to optimize the user experience: minimizing the number of clicks, easy access to information, easy understanding of the user interface, etc. It also corresponds to web design trends and the way current web users navigate.
This step allows the web designer to project himself in several eventualities and thus select the best options in accordance with the client’s objectives.
The creation of the website design on software and the collaboration with the web developer
Then comes the stage of creation on software. The most common software used are Photoshop, Sketch or Figma.
These software allow to realize concretely the sketches of the previous step. Based on a defined web grid, the web designer arranges the elements of the user interface as previously defined. This step also allows to choose the typography and the color code used (or to use those imposed by the client’s graphic charter) as well as to define the animations present on the future website. The web designer creates several mock-ups, then presents them to the web developer in order to ensure their feasibility. The collaboration between web designer and web developer at this stage is therefore very important. In particular, the web developer can contribute to decisions about the animation of the elements or CTA (Call to Action) – how does a CTA react when it is clicked? How do the illustrative photos on the website appear? The web developer will be able to decide on the feasibility of these animations.
For example, this has made it possible to create the sketches of the previous stage for clients such as Kauri, or for in-house projects such as the Habefast and Lakeprod sites. But it also allowed to decide, on the Kauri site, that the elements (photos and texts) appear as the user moves forward on the web page. This makes the site dynamic. If we take the example of Lakeprod, the stage of creation on software allowed to create animated triangles around the images of illustrations.
Once the web designer’s mock-ups are validated by the client, they are transmitted to the web developer who will then be able to start the development of the site online.
Final step: verification of the mock-ups
Once the site is built by the web developers, the last step consists in the verification of the site. Indeed, it is important for the web designer to make sure that his sketches have been well understood and developed, that there has been no confusion, misunderstanding or forgetfulness. Thus, the final rendering of the website will be in perfect agreement with what was previously agreed with the client.