Les fases d'un disseny web

Quan entra un projecte de disseny web és important que es dugui a terme una metodologia i uns passos, per a poder arribar als objectius establerts.

T’expliquem a continuació quins passos duem a terme en els projectes de la nostra agència de disseny web.

Fase 1: Briefing

Per a començar bé el procés de disseny d'una web, és indispensable la comunicació que hi ha entre el client i l'agència. La informació que pugui facilitar-nos el client serà crucial per a poder fixar les bases del projecte i les dades més rellevants per al disseny web.

Que és el Briefing

El Briefing o brief és un document en el qual s'estableixen les bases del projecte i la informació bàsica per a dissenyar la web.

Aquest document ha de ser exhaustiu i detallat, incloent no sols els objectius i la descripció del negoci, sinó també qualsevol expectativa específica del client respecte a l'estil visual i funcionalitat de la web. 

En el document s'ha d'incloure informació com:

• Objectius principals
• Informació i Descripció del negoci.
• Missió, Visió i Valors de l'empresa.
• Idioma i àmbit geogràfic.
• Mercat i Competidors.
• Domini o possibles suggeriments de noms.
• Terminis de lliurament.
• Observacions i limitacions.

En la fase de briefing, és crucial identificar clarament el tipus de client al qual es dirigeix el lloc web, ja que aquest factor influirà decisivament en tots els elements del disseny i contingut, així com en l'estructura de la pròpia web. Comprendre a fons el perfil del client ens ajuda a personalitzar l'estratègia i assegurar que el disseny web no sols sigui atractiu sinó també funcional per al públic objectiu.

A més, és important que es fixi també quina tipologia de pàgina web desitja el nostre client. La tipologia de web influirà en la resta de les fases, que comentarem a continuació.

Podem trobar diferents tipologies de webs com:

• Web Corporativa
• Catàlegs en línia
• Botiga Online o E-Commerce
• Blogs temàtics
• Fòrums
• Webs Institucionals

Exemple de briefing

Per a poder ensenyar d'una forma més intuïtiva i senzilla una de les fases més importants de la creació d'una web, crearem un briefing fictici sobre un possible client. Aquest client fictici és una botiga de barri que vol arribar a més clients online. Aquesta botiga es dedica a la venda de roba de dona.

1. Informació General del Client

Nom del Client: Boutique Luz de Lluna
Tipus de Negoci: Botiga de roba per a dona
Ubicació: Barcelona, Espanya
Objectiu del Lloc web: Expandir la clientela local a un mercat més ampli a través de vendes online. A més de donar-se a conèixer a un públic més ampli de poblacions del voltant de la seva botiga.

2. Objectius del Projecte

Augmentar Visibilitat: Millorar la presència online per a atreure clients fora de la localitat.
Incrementar Vendes: Establir un canal de venda online eficaç i segur.
Fidelització de Clients: Crear una plataforma que permeti mantenir i augmentar la lleialtat dels clients existents.

3. Descripció del Negoci

Missió: Oferir productes de moda per a dones de qualitat, destacant per un tracte personalitzat i atenció detallada, sempre adaptada a les noves tendències.
Visió: Ser una referència local i online en moda femenina, coneguda per la seva qualitat i estil únic.
Valors: Compromís amb la qualitat, atenció personalitzada, i respecte per la diversitat de cossos i estils.

4. Informació de Mercat

Audiència Objectiu: Dones de 25 a 45 anys, interessades en moda i tendències, amb un ingrés mig-alt. Ja que parlem d'uns productes de preu mitjà, identificats per la seva gran qualitat.
Competidors: Botigues locals de moda femenina, grans cadenes amb presència en línia, i plataformes de comerç electrònic de moda.
Diferenciadors Clau: Atenció personalitzada, col·leccions exclusives, i un enfocament en la moda sostenible.

5. Requeriments Específics

Idiomes: Espanyol, amb possibilitat d'afegir anglès en el futur.
Tipologia de Pàgina Web: Comerç electrònic amb blog incorporat per a tips de moda i tendències.
Estil Visual i To: Modern i sofisticat, utilitzant una paleta de colors neutres amb tocs de colors vibrants. El to del contingut ha de ser amigable, professional i motivador.

6. Detalls Tècnics

Plataforma de Comerç electrònic: Preferència per sistemes com Shopify o WooCommerce per la seva facilitat d'ús i gestió.
Funcionalitats essencials: Carret de compra, gestió d'inventari, filtres de cerca, blog integrat, i sistema de pagaments segurs.
SEO i Màrqueting Digital: Estratègies per a millorar el SEo local i internacional, i campanyes en xarxes socials i Google Ads.

7. Terminis i Observacions

Data d'Inici del Projecte: 1 de maig de 2023
Data de Llançament: 1 d'agost de 2023
Observacions: Necessitat d'integrar eines d'anàlisi web per a monitorar el comportament de l'usuari i ajustar estratègies.

Una vegada finalitzat el que seria la part del briefing amb el client, passarem llavors a analitzar detalladament tota la informació que tenim sobre el projecte. Caldrà tenir en compte tot el material gràfic que tingui el client, sobretot en cas que la marca ja existeixi o pugui tenir una web anteriorment.

Fase 2: Anàlisi de la informació

En la fase d'anàlisi, l'objectiu principal és aprofundir en les dades recopilades durant el briefing per a desenvolupar una estratègia de disseny web que no sols compleixi amb les expectatives del client, sinó que també es destaqui en el mercat competitiu.

Per això, una vegada comptem amb tota la informació necessària per part del client, passarem a la fase d'anàlisi més exhaustiva. En aquesta fase, tindrem en compte tots els punts anteriors esmentats per a l'elaboració de l'estratègia a seguir.

Per a poder elaborar un correcte disseny web serà necessari que es tinguin en compte les estratègies realitzades pels competidors i dins del propi sector.

Estudiem als competidors directes i indirectes per a identificar les seves fortaleses i febleses. Això inclou revisar les seves pàgines web, les funcionalitats integrades, l'estètica i disseny, així com les estratègies de màrqueting que tenen implementades.

Si el client ja comptava amb una pàgina web anterior, revisem la seva situació per a identificar àrees de millora. Això inclou el realitzar una anàlisi de trànsit, taxes de conversió, i altres paràmetres que ens puguin ajudar a conèixer el comportament de l'usuari.

Fase 3: Planificació

Una vegada tinguem analitzada la informació i fixats els objectius que desitgem complir, passarem a la fase de Planificació.

En la Planificació establim els passos per a arribar als objectius i les diferents tasques a realitzar. És indispensable que es tingui clar a quin departament correspon cadascuna de les tasques i l'adequada coordinació de tots per a complir aquests objectius.

És important que definim el mapa del lloc web perquè puguem treballar bé el disseny web i continguts que tindrà aquesta web. Aquest mapa ens ajudarà a definir l'estructura de la web, organitzant les pàgines i les categories de manera lògica i intuïtiva per a facilitar la navegació de l'usuari. Així com la definició dels menús de navegació de la pàgina web.

Un altre dels factors importants per a tenir en compte serà el tipus de web que desitja el nostre client i la tecnologia que utilitzarem, però sempre amb un disseny fet a mida. Al seu torn, planifiquem les característiques interactives del lloc, com a formularis, elements interactius o eines personalitzades, que milloren l'experiència de l'usuari.

Per tant, durant aquesta fase de planificació, ens centrarem en l'assignació i coordinació de les tasques amb la finalitat de poder definir els rols de responsabilitat a cadascun dels departaments, així com establir un calendari de lliuraments.

Per a poder passar a la següent fase, serà necessari reunir-nos amb el client i avaluar els passos a seguir i material necessari. És fonamental que puguem treballar el disseny web a partir del material que ens ha proporcionat el client, com a imatges, textos i més.

Fase 4: Disseny i prototip

Durant l'etapa de disseny, establirem tota la imatge de marca del client, així com els colors, tipografies, iconografia i estils. També es realitzarà la creació del logo, seguint l'estil fixat anteriorment, sempre que el client el necessiti.

Per a iniciar el procés de disseny, és important que sempre creem abans els wireframes, per a poder fixar l'estructura i disposició dels elements en la web.

A continuació, presentem un exemple del que podria ser un wireframe d'un possible client que desitja crear una web.


En aquest cas, l'exemple consta d'alguns textos ficticis, amb la intenció de poder ajudar el client a intuir com es distribuiran els elements al llarg de la pàgina web.

Durant tot el procés hem de tenir molt en compte l'experiència d'usuari i la interfície, per a poder crear un disseny responsive. Adaptant així el nostre disseny web als diferents dispositius.

Una vegada realitzats els wireframes i abans de fer el disseny definitiu, es faran diferents dissenys de mostra perquè el client pugui valorar quin és l'estil amb el qual se sent més còmode. En aquesta fase, normalment se solen presentar al voltant d'unes 3-4 pàgines principals de la web, amb la intenció que l'usuari tingui la possibilitat de veure diferents tipus de continguts adaptats, com per exemple la pàgina d'Inici, Serveis, Fitxa de producte, Contacte, entre altres.

Tenint en compte les revisions que es facin amb el corresponent client, s'aniran adaptant els wireframes del disseny, per a així poder plantejar un disseny al client adaptat com vam mostrar en l'exemple:

En aquest disseny, ja es realitzen adaptacions d'estils com colors, tipografies així com els diferents continguts que es mostraran a la web definitiva.

Per a la presentació del disseny definitiu, es podran utilitzar mockups i altres fotomuntatges que ajudin a una millor previsualització del disseny web.

Una vegada aprovades totes i cadascuna les fases del disseny, es passarà a la implementació d'aquest a la web, així com la programació del backoffice corresponent. Per a això, es començarà a realitzar la maquetació i programació corresponent.

Fase 5: Continguts web

A la fase de continguts, ens centrem en la redacció de textos, però sempre tenint en compte les paraules clau i el tipus de públic. En la secció de continguts, no sols engloba els textos sinó també un altre tipus de continguts com el cas de les imatges o vídeos.

És important tenir comunicació amb el client en tot moment, ja que serà indispensable la seva col·laboració per a la incorporació de textos en la web.

No podem oblidar-nos dels textos legals, que són indispensables per a la creació d'una web. Aquest tipus de textos, inclouen la protecció de dades, cookies i normativa legal.

Depenent del tipus d'empresa també serà necessària la incorporació de política d'enviaments i devolucions, cancel·lacions, reserves i més.

Fase 6: Desenvolupament web

Una vegada s'accepta el disseny per part del client, aquest passarà a programació per a poder implantar i desenvolupar el model de web establert. En aquesta fase es triarà el sistema de gestió de continguts (CMS) o els llenguatges de programació necessaris per a la implementació del disseny web.

Podem trobar diferents tipus de llenguatges de programació com Java Script, SQL o PHP.

Fase 7: Proves i llançament

Una vegada finalitzat el procés de disseny web, és important que realitzem diferents proves tècniques que verifiquin el correcte funcionament. Entre els diferents testatges que realitzem, analitzem que funcionin els formularis, botons de navegació, cerca del navegador i altres funcions.

Una altra de les verificacions que realitzem és la compatibilitat dels navegadors i dispositius, ja que és important que la nostra web es visualitzi correctament en cadascun d'ells.

Abans de la publicació, es revisa internament la pàgina, per a poder incorporar les eines necessàries per a la seva anàlisi i parametrització, com és el cas de la incorporació de Google Analytics. Es realitzen paral·lelament altres tasques enfocades a SEO com és el cas de la generació del sitemap, incorporació de paraules clau, definició de les metaetiquetes i altres tasques tècniques del posicionament en línia per a la posada a punt de la web.

Tots aquests test de qualitat ens permeten revisar i corregir errors, si és necessari, abans del llançament de la web. Una vegada està tot verificat, podem publicar la pàgina web.