Este post la vamos a dedicar a un nuevo proyecto web que hemos hecho durante el mes de marzo, un proyecto de diseño web y desarrollo web para Álvaro Vargas.
En una estructura muy storytelling os voy a contar todo el proceso de diseño y desarrollo de esta página web de nueva creación.
Hace unas semanas se puso en contacto con nosotros Álvaro Vargas, en principio nos pidió información para hacer el diseño de un libro de recetas que en un futuro va a salir a la luz.
¿Quién es Álvaro Vargas?
Álvaro Vargas es un nutricionista muy activo, diariamente crea contenido sobre nutrición y salud que cuelga en las redes sociales. Conocedor de los medios y de como funcionan, le da una importancia muy grande a las redes sociales y le sabe sacar el partido necesario para darse a conocer.
Tiene cuenta en facebook, instagram, cuelga podcasts y tiene un canal de youtube, en todos ellos es un gran creador de contenido de calidad para los interesados en la nutrición y la salud. Cuelga periódicamente imágenes de los platos que cocina, hace recetas en youtube y publica entradas de blog en su página web personal. Además de eso tiene un par de libros editados de la misma temática.
Ahora, Álvaro, dando un paso más en su carrera profesional, ha tenido la genial idea de compartir todos esos conocimientos con el público de forma presencial, así pues, para empezar, va a dar un par de cursos en Barcelona y Madrid.
Después de quedar de acuerdo en hacer el diseño interior del libro de recetas seguimos hablando de sus proyectos y nos encargo un trabajo genial.
Para apoyar su idea emprendedora de hacer cursos presenciales quería un página web donde la gente pudiera apuntarse a los cursos.
¡Manos a la obra!
Con ese encargo nos pusimos a trabajar en el estudio. Después de mantener las conversaciones necesarias para conocer los detalles del proyecto ya teníamos clara cual era la línea de estilo que Álvaro tenia, algo fresco, intuitivo, directo y que reflejara los aspectos de su personalidad y sus intenciones profesionales.
Así pues nos pusimos a trabajar en la propuesta gráfica que íbamos a ofrecerle a Álvaro.
Ha sido uno de los trabajos más frescos en los que hemos trabajado en los últimos tiempos, un proyecto de vanguardia, sin ataduras ni restricciones de diseño, ya que Álvaro es una persona muy abierta y que confió desde un inicio en nuestro criterio como profesionales. Cuidamos los detalles y el resultado nos encanto. Sí es cierto que en un primer momento tuvimos dudas de que Álvaro tuviera la valentía necesaria para dejarse llevar por nosotros, pero nos sorprendió de forma positiva entendiendo perfectamente y a la primera el enfoque que queríamos darle a su página web.
Para el diseño gráfico de la página web hicimos una prospección de las redes sociales que manejaba, de sus libros y de su blog para poder captar a la perfección que tipo de diseño era el que más encajaría con su persona.
Así pues los aspectos técnicos que más valoramos de este proyecto son las animaciones de la página web, la elección de colores y la distribución de la información.
¿Qué objetivos teníamos que cumplir?
Los objetivo eran hacer una página web al estilo onepage, dinámica, intuitiva, directa y muy dinámica.
El usuario debe poder ver la página web en poco tiempo y tener toda la información necesaria para saber si le interesa el curso y como apuntarse.
El timing era corto ya que Álvaro Vargas quería tener la página web terminada a principio del mes de abril.
Para ello en el estudio trabajamos los siguientes puntos de forma muy eficaz
- La paleta de colores.
- Distribución de la información.
- Animaciones.
- Menú.
- Transmitir la visión y la misión de Álvaro.
- La pasarela de pago
- Personal gifts para Álvaro
1. Sobre la paleta de colores
Los colores elegidos son un mezcla de alto contraste que dota al diseño de un desenfrenado estimulo visual, cosa que le va perfecto al estilo de la página web onepage, con ello conseguimos que el usuario entre a la web y no sea capaz de retirar la mirada de la pantalla hasta llegar al final de la página web, el usuario termina con toda la información sin darse cuenta.
2. Sobre la distribución de la información
A su vez se a cuidado mucho la distribución de la información para que, al igual que pasa con los colores, la vista vaya dando saltos de módulo a módulo y no tenga tiempo de aburrirse ni ganas de dejar la visita.
3. Las animaciones
El diseño de la página web contiene varios efectos que atraen la atención del usuario y le dan un dinamismo muy interesante y necesario para los objetivos.
Por ejemplo, en el apartado de «Preguntas Frecuentes», hemos creado unas divertidas animaciones: los ojos de Álvaro, están constantemente siguiendo a dónde se dirige nuestro cursor, mientras que al mismo momento, cuando pasamos por encima de uno de los alimentos que tenemos en el fondo, éste por arte de magia… o programación, ¡desaparece!
4. El menú
La página web tiene un menú muy original, de posicionamiento horizontal que nos puede desplazar en cualquier momento por los apartados de la página web. Además el menú tiene una perfecta transición, simulando profundidad, que lo hace muy agradable al uso.
5. Transmitir la visión y la misión de Álvaro Vargas
Con los puntos anteriores y el contenido que el propio Álvaro nos facilito quedaba muy clara la misión y la visión de Álvaro Vargas.
Una vez aprobado el diseño gráfico de la página web y tuvimos el ok de Álvaro nos pusimos manos a la obra y empezamos con la programación de la página web.
6. La pasarela de pago
Al tratarse de una página web con pasarela de pago era muy importante tener la seguridad adecuada para que nadie hiciera de las suyas. Hicimos todos los test necesarios de funcionamiento y le explicamos al propio Álvaro el funcionamiento de la pasarela de pago sin ningún problema.
En unas pocas semanas ya teníamos la página web maquetada y programada. Todo estaba listo para su puesta en órbita y así lo hicimos.
7. Personal gifts para el cliente 😉
Como detalle le preparamos a Álvaro las portadas para que pudiera compartir en instagram y facebook los enlaces de sus cursos y así sacarles el máximo de partido al trabajo.
Nos consta que ya desde un principio Álvaro tuvo interesados en apuntarse y personas que no lo dudaron ni un momento en reservar su asiento en sus cursos.
El equipo de JordiEnsenyatDisseny y CodeWebBarcelona le desea la mejor de las suertes en su nuevo proyecto y esperamos que llene el auditorio hasta los topes.
Reconocimientos
Por el momento ya hemos aparecido en distintas páginas web dedicadas a mostrar trabajos sobre diseño web inspiradores, como:
http://www.csswinner.com/details/yo-s-nutrirme/11414
http://www.designnominees.com/sites/yo-s-nutrirme
https://onepagelove.com/yo-se-nutrirme
http://www.bestcss.in/user/detail/Yosenutrirme-5193
El proyecto en vivo
Si tenéis más curiosidad sobre este proyecto y quereis verlo en directo solo teneis que seguir el enlace a su página web www.yosenutrirme.com
