If you are considering creating or updating your website, this article is for you.

I want to share with you the methodology I follow at Breu, my graphic design studio, to create websites. I hope this will help you to realize all the thinks you have to consider and understand better how the process is.

1: Defining goals and prioritizing

The first thing we do is to define the purpose of the website. In some cases this is very obvious, but sometimes we have several goals. When this happens, we need to know how to rank our priorities.

We also analyze our users, their goals, needs, tastes and expectations.

We usually take this moment to define technical requirements, like if the site will be static or dynamic, the content management system, etc…

2: Structuring content and functionalities

The next step is to make a list of all web content and group it by categories, as if we did an inventory. Once we have it done, we put it in order through a scheme or diagram. This process has the name of Information Architecture (IA)

3: Studying the usability and interaction

Once we have a clear structure, we can focus on the User Experience (UX). We define the items that will appear on each screen and the navigation systems. In order to do it, we create some schemas called wireframes. This is like display all the screens of the site without design, just working on the structure.

This wireframes will help us to test the usability of the web, creating a prototype to interact with, clicking on buttons and menus, to ensure that the structure and navigation are intuitive.

This stage is very important for us, because we are defining the basis of our website

4: Design the website and testing

Once we have defined a solid structure, we can start designing the User Interface (UI).

We follow the company design guidelines in order to get a website that looks consistent with their brand identity.

First, we design some representative screens, and once the client accepts this first approach, we design the rest of the site and its version adapted to mobile devices.We usually finish this phase with a new prototype, to be able to interact and test with the final design, or a video that shows the design and interaction between screens.

5: Development and testing

At this point, we turn to programing the web. Depending on each situation, we use some resources or others to fit each client or project needs.

On one side there is the part of the backend, which makes the web server and database log and get the information that the site will consume. On the other side, the frontend, which is responsible of displaying this information in a visual way, following the guidelines defined during creation of the user interface.

We test our websites with modern browsers and devices, unless the client ask us specifically to make it compatible with others who have already become outdated.

6: Formation and maintenance services

Once the site is online, we explain to our customers how to manage it independently. In some cases we make some video tutorial explaining how the content manager works. This gives them autonomy in modifying texts, images or create new pages without relying on anyone.

At my digital agency Breu, we also offer different maintenance services according to their needs and propose future phases where they can make improvements and new features.

I hope this article has helped to better understand the process of designing a website. If you have any questions, I will be happy to answer below in the comments section.