Disseny web per a l’Álvaro Vargas

Aquest article el dediquem a un nou projecte web que hem desenvolupat durant el mes de març: un projecte de disseny web i desenvolupament web per a Álvaro Vargas.

Amb un enfoc narratiu, us expliquem tot el procés de disseny i desenvolupament d’aquesta pàgina web de nova creació.

Fa unes setmanes, Álvaro Vargas es va posar en contacte amb nosaltres. Inicialment, ens va demanar informació per dissenyar un llibre de receptes que properament veurà la llum.

Qui és Álvaro Vargas?

Álvaro Vargas és un nutricionista molt actiu que, dia rere dia, genera contingut sobre nutrició i salut a les xarxes socials. Coneix perfectament els mitjans i sap com funcionen, per això dona molta importància a les xarxes i sap treure’n el màxim profit per donar-se a conèixer.

Té presència a Facebook, Instagram, publica podcasts i disposa d’un canal de YouTube. En tots aquests canals, crea contingut de qualitat per a persones interessades en la nutrició i la salut. Comparteix regularment imatges dels plats que cuina, fa receptes a YouTube i escriu articles al seu blog personal. A més, ha publicat un parell de llibres sobre la mateixa temàtica.

Ara, fent un pas més en la seva trajectòria, Álvaro ha tingut la gran idea de compartir tots aquests coneixements de manera presencial. Per començar, impartirà un parell de cursos a Barcelona i Madrid.

Després d’acordar el disseny interior del llibre de receptes, vam continuar parlant dels seus projectes i ens va encarregar una feina fantàstica.

Per donar suport a la seva iniciativa d’organitzar cursos presencials, volia una pàgina web on la gent pogués inscriure’s als cursos.

Ens posem en marxa!

Amb aquest encàrrec, vam començar a treballar a l’estudi. Després de diverses converses per conèixer tots els detalls del projecte, teníem clar quin era l’estil que buscava l’Álvaro: fresc, intuïtiu, directe i que reflectís la seva personalitat i objectius professionals.

Així doncs, vam començar a treballar en la proposta gràfica que li presentaríem a l’Álvaro.

Ha estat un dels projectes més frescos en què hem treballat últimament: una proposta innovadora, sense límits ni restriccions de disseny, ja que l’Álvaro és una persona molt oberta i va confiar des del primer moment en el nostre criteri professional. Vam cuidar cada detall i el resultat ens va encantar. És cert que, al principi, vam dubtar si l’Álvaro tindria prou valentia per deixar-se portar, però ens va sorprendre molt positivament, captant a la primera l’enfocament que volíem donar a la seva pàgina web.

Per al disseny gràfic de la pàgina web, vam analitzar les seves xarxes socials, els seus llibres i el seu blog per captar a la perfecció quin tipus de disseny encaixava millor amb la seva personalitat.

Els aspectes tècnics que més hem valorat d’aquest projecte són les animacions de la pàgina web, l’elecció dels colors i la distribució de la informació.

Quins objectius havíem d’assolir?

L’objectiu era crear una pàgina web d’estil onepage, dinàmica, intuïtiva, directa i molt visual.

L’usuari havia de poder consultar la web ràpidament i trobar tota la informació necessària per saber si li interessa el curs i com inscriure’s.

El termini era ajustat, ja que l’Álvaro volia tenir la web llesta a principis d’abril.

Per aconseguir-ho, a l’estudi vam treballar de manera molt eficient els següents punts:

La paleta de colors.
La distribució de la informació.
Les animacions.
El menú.
Transmetre la visió i la missió de l’Álvaro.
La passarel·la de pagament.
Personal gifts per a l’Álvaro.

1. Sobre la paleta de colors

Els colors escollits són una combinació d’alt contrast que aporta al disseny un estímul visual molt potent, ideal per a una pàgina web onepage. Això fa que l’usuari entri a la web i no pugui apartar la mirada de la pantalla fins arribar al final, absorbint tota la informació gairebé sense adonar-se’n.

2. Sobre la distribució de la informació

També hem cuidat molt la distribució de la informació perquè, igual que amb els colors, la mirada vagi saltant de mòdul en mòdul, mantenint l’interès i evitant l’avorriment o les ganes de marxar.

3. Les animacions

El disseny de la pàgina web incorpora diversos efectes que capten l’atenció de l’usuari i aporten el dinamisme necessari per assolir els objectius.

Per exemple, a l’apartat de “Preguntes Freqüents”, hem creat unes animacions divertides: els ulls de l’Álvaro segueixen constantment el moviment del cursor, i, a més, quan passem per sobre d’algun dels aliments del fons, aquest desapareix com per art de màgia… o de programació!

4. El menú

La pàgina web disposa d’un menú molt original, de navegació horitzontal, que permet desplaçar-se fàcilment per qualsevol apartat. A més, el menú incorpora una transició suau que simula profunditat i fa que l’experiència d’ús sigui molt agradable.

5. Transmetre la visió i la missió d’Álvaro Vargas

Amb tots aquests elements i el contingut que ens va facilitar l’Álvaro, la seva missió i visió quedaven perfectament reflectides.

Un cop aprovat el disseny gràfic de la pàgina web i amb el vistiplau de l’Álvaro, ens vam posar a programar la web.

6. La passarel·la de pagament

En tractar-se d’una pàgina web amb passarel·la de pagament, era fonamental garantir la seguretat perquè tot funcionés correctament. Vam realitzar totes les proves necessàries i vam explicar a l’Álvaro el funcionament de la passarel·la sense cap problema.

En poques setmanes ja teníem la pàgina web maquetada i programada. Tot estava a punt per al llançament, i així ho vam fer.

7. Personal gifts per al client 😉

Com a detall, vam preparar a l’Álvaro unes portades perquè pogués compartir a Instagram i Facebook els enllaços dels seus cursos i treure’n el màxim rendiment.