El estudio de desarrollo y diseño web Code Barcelona, junto con el estudio de diseño gráfico Jordi Ensenyat Disseny han sido los encargados de crear y diseñar la página web para Álvaro Vargas y su nuevo proyecto de nutrición Yo se nutrirme.

El proyecto de diseño web

Álvaro Vargas es un reputado nutricionista con mucha presencia en las redes sociales. Con el proyecto personal Yo sé nutrirme quería compartir sus conocimientos con sus seguidores. Yo sé nutrirme es una página web dedicada a informar sobre unos cursos presenciales que Álvaro va a dar en Barcelona y Madrid sobre esta temática.

Una vez analizados todos los puntos interesantes para crear este proyecto era el momento para crear una página web que respondiera a las necesidades de Álvaro Vargas.

El resultado es una página web con un diseño web muy creativo y fresco que además hace que el usuario tenga una inmejorable experiencia de navegación.

Animaciones Css3 y Jquery

Las animaciones son de capital importancia y es que para dar dinamismo y potenciar el atractivo visual se han cuidado hasta el último detalle. Para realizarlas, se ha creado un efecto de forma que no muestran todos los frames por segundo para simular bajos FPS y así ofrecer un toque especial.

El primer vistazo, los platos ya están en la mesa

Al finalizar la carga de la página web, nos aparece la cara ilustrada de Álvaro Vargas junto con los platos ya bien servidos en la mesa. El resultado es el de una página de inicio muy estética, con tal de atrapar al usuario a través de un bonito diseño web e invitarle a seguir navegando por el site.

En esta sección nos encontramos con varios detalles. Las expresiones de la cara van cambiando de forma aleatoria, el hover de los platos nos ofrece una descripción que nos la comenta el mismo Álvaro Vargas en forma de ilustración y a través de un globo. Además, si nos fijamos, los ojos de Álvaro siguen el cursor del mouse en cada hover a los platos mediante nuestro cursor.

Para realizar el efecto de las cejas, boca y ojos cambiantes, se han creado diferentes imágenes exportadas en PNG, con tal de guardar la transparencia y así poder superponerlas encima de la cara ilustrada de Álvaro.

Mediante un timing en javascript el cual devuelve valores aleatorios, se hace el cambio de cada una de las imágenes, dando como resultado una gran variedad de combinaciones.

Seguimos con el carrousel de platos

En la siguiente sección, nos encontramos con un carrousel de platos, los cuales giran sobre su mismo eje de forma dinámica al hacer hover. Éste simple efecto ha sido creado mediante CSS3 y Jquery. Gracias a los vistosos platos, creados por Álvaro Vargas, se consiguió un bonito colorido.

FAQ y sus sutiles animaciones

Lejos de la típica pregunta-respuesta en un formato de texto plano, para la sección de faq, se utilizó un background formado por diferentes elementos nutricionales.

La sección se dotó de sutiles animaciones, que si bien en un primer vistazo pueden pasar desapercibidas, podremos ver si nos paramos a mirar con más detalle. Los elementos del background desaparecen conforme hacemos hover encima de ellos y los ojos de la cara de Álvaro Vargas, otra vez animada, esta vez, nos siguen con el cursor, allá donde lo movamos.

Menú 3D

Para el diseño del menú se ha optado, por un menú vertical en forma de bullets colocado en el lateral derecho de la página web. Al hacer hover nos despliega un dinámico menú que simula un efecto 3D, dónde, mediante jquery y css3, trae al frente el titular del apartado sobre el cual nos encontramos.

Paleta de colores

La paleta de colores también es un punto muy importante en el aspecto gráfico de cualquier diseño web. Por ello, se han escogido colores muy llamativos y jugando con el contraste entre ellos. De esta forma el usuario tendrá una experiencia de lo más dinámica mientras va navegando por la página web.

Combinando los bloques de información con saltos cromáticos se buscaba que la experiencia de usuario fuera sumamente agradable.

Pasarela de pago

Finalmente la página web incorpora una pasarela de pago. Se escogió la plataforma STRIPE, por su versatilidad y seguridad que ofrecía en el tratamiento de datos confidenciales. Una vez procesado el pago, los datos quedan almacenados en una Base de Datos y posteriormente enviamos al usuario un correo con los datos del curso. Como es de esperar, Álvaro tiene la posibilidad de ir monitorizando el progreso de inscripciones para los cursos presenciales que hace.

Puesto que se buscaba una imagen moderna para el conjunto del diseño web, el formulario ha sido maquetado de una forma que no se aprecie el rudimentario formulario que nos ofrece html por defecto, creando incluso unos selects y checkbox que son invisibles al usuario, pero que mediante capas para el aspecto visual y con la ayuda de javascript, conseguimos el traspaso de la información a los inputs no visibles de forma dinámica.

Backend y autogestión

El website ha sido montado con un backoffice hecho en WordPress. El trabajo de theming, como se puede apreciar por el detallado diseño web, ha sido creado todo a medida y sin uso de plantillas por parte del equipo de desarrollo web de Code Barcelona. De esta forma, Álvaro Vargas, puede crear y gestionar los cursos de la página web, sin depender del estudio.

Ver en vivo

Puedes ver en vivo el proyecto de diseño web siguiendo el siguiente link:

Link a la web.

Code Barcelona

Code Barcelona es un estudio de diseño web en Barcelona. El  área de actuación mayoritaria reside en clientes y empresas ubicadas en España, aunque también, tiene el honor de haber trabajado para clientes de alrededor del mundo.

El resultado es la creación de proyectos sólidos, creativos y con un significado muy elevado, teniendo especial cuidado por los detalles de cada proyecto de diseño gráfico y diseño web que emprenden.