93 792 27 62
  • Contacta
  • Llamar ahora Enviar whatsapp
    Publicado el 14/04/17

    Diseño web para Álvaro Vargas



    testviews 48

    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

    1. La paleta de colores.
    2. Distribución de la información.
    3. Animaciones.
    4. Menú.
    5. Transmitir la visión y la misión de Álvaro.
    6. La pasarela de pago
    7. Personal gifts para Álvaro

    diseño web inicio

    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.

    diseño web barcelona 2

    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!

    diseño web apartado faq

    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.

    diseño del menú web

    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.

    diseño del menú 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.

    diseño pasarela de pago

    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.

    diseño de portadas para instagram

    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

    Suscríbete y mantente inspirado
    El autor: Daniel Edho
    Project Manager
    Daniel Edho es un fotógrafo, diseñador gráfico y en proceso de
    programador web, ubicado en el Maresme, Barcelona.
    Collector-Survival-Nomad-Bitter-Gamberro-Traveller- Ruralfighter - Hobo - Homie
    www.edhofotografia.com

    ¿Quieres empezar un proyecto?
    Trabaja con nosotros
    Mantente inspirado con nuestra newsletter
    Mejores cursos de diseño gráfico 2019 2020
    leer más
    Hemos ganado la plata en International Design Awards
    leer más
    Tus datos Si no rellenas tus datos,
    comentarás de forma anónima
    Publicar e inscribirme a la newsletter
    Publicar y no inscribirme a la newsletter
    Recordar datos para comentar rápidamente
    Cuéntame las últimas novedades

    Blog & Proyectos

    Un espacio para todo aquel interesado en diseño web,
    diseño gráfico y marketing online.
    ¿Tienes alguna duda?

    Preguntas frecuentes

    ¿Por qué lo hacéis todo a medida y no utilizáis plantillas?

    Respuesta rápida: Como creativos hacemos todo el diseño web a medida para ofrecer un valor creativo y un diseño único. Como desarrolladores web esto nos deja libres de limitaciones y conseguimos un mejor rendimiento.

    Respuesta elaborada:

    Nuestra filosofía de trabajo ha sido desde siempre, la creación a medida de los proyectos de diseño web que desarrollamos. Esto implica que tanto el diseño como el desarrollo estén hechos a medida. Como diseñadores y como creativos, pensamos que no debería ser de otra forma, por lo que rechazamos de forma rotunda el uso de plantillas en el desarrollo de páginas web. Normalmente utilizamos WordPress como gestor de contenidos, para que el cliente pueda subir sus contenidos a través de un sencillo panel de administración al que tiene acceso mediante usuario y contraseña.

    Gracias a que WordPress es una famosa plataforma para la creación web, muchos estudios se aprovechan del poco conocimiento por parte de sus clientes y crean websites utilizando plantillas prefabricadas que pueden ser adquiridas a bajo coste, únicamente modificando los textos, imágenes, colores, y poco más. En nuestro caso, cada página web que creamos lo hacemos desarrollando nuestra propia plantilla a medida para el proyecto concreto y empezando todo desarrollo con un documento totalmente en blanco, escribiendo cada línea de código.

    Esto nos permite:

    1. Ser totalmente libres y crear todas las funcionalidades que queremos, incluso llevando el proyecto un paso más allá en caso de tener que crear funcionalidades no soportadas por las plantillas. No hay literalmente nada que se nos pueda resistir.
    2. Entregar un trabajo de diseño y desarrollo web totalmente original y con personalidad, adaptado a la imagen de tu marca.
    3. Conseguir un mayor rendimiento, ya que todas las funcionalidades están creadas a medida, sin necesidad de «atiborrar» el la página web de plugins creados por terceros que a menudo pueden dar problemas de incompatibilidades, si no es ahora, en un futuro.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Qué sucede si no me gusta la propuesta de diseño presentada?

    Respuesta rápida: Si la propuesta de diseño web presentada no es la que esperas, presentaremos nuevas propuestas de diseño hasta que quedes 100% satisfecho.

    Respuesta elaborada:

    Normalmente solemos acertar a la primera en el momento de presentar una propuesta de diseño web. Evidentemente siempre hay modificaciones que hacer y que nuestros clientes nos solicitan. Estas modificaciones las hacemos y resolvemos con celeridad. Sin embargo, en los casos en los que la propuesta de diseño web presentada no se ajusta a la línea de que esperaba el cliente, presentamos nuevas propuestas con el objetivo de que quedes 100% contento con el resultado final.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    He tenido malas experiencias con otros estudios de diseño, ¿cómo puedo estar seguro de vosotros?

    Respuesta rápida: Nuestra cantidad y calidad en los proyectos de diseño y desarrollo web que hemos llevado a cabo a lo largo de los años nos avalan. Puedes consultar nuestro porfolio de proyectos haciendo click aquí. También puedes consultar los premios que hemos recibido por nuestros proyectos.

    Respuesta elaborada:

    No es poco frecuente que en el momento de aceptar un presupuesto nuestros potenciales clientes se muestren preocupados y nos cuenten historias anteriores que han tenido con otros estudios de diseño y desarrollo web. Desde que los han dejado a medias en el desarrollo web, hasta que el desarrollador contratado ha desaparecido sin dar señales de vida dejando un proyecto sin terminar.

    Llevamos años diseñando y desarrollando páginas web para clientes de todo el mundo. Si nos has pedido presupuesto, imaginamos que esto se debe a que ya has consultado los proyectos que tenemos publicados en nuestra página web. Sin embargo, si aún no lo has hecho, te animamos a que le eches un vistazo con ojo crítico haciendo click aquí y seas tu mismo quien determine si somos o no somos dignos de tu confianza.

    Además de disponer de un inmenso portfolio de proyectos realizados, también podemos añadir a la ecuación el hecho de que hemos sido premiados en numerosas ocasiones por nuestros trabajos de diseño. Haz click aquí para ver los premios y menciones por nuestros trabajos y proyectos de diseño web y gráfico desarrollados.

     

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿El presupuesto es cerrado o vais a cargar importes extra durante el desarrollo del proyecto?

    Respuesta rápida: El presupuesto es cerrado, siempre que nos ciñamos a lo presupuestado y que el cliente no pida funcionalidades nuevas, además hay que tener en cuenta que: *hosting y dominio, *textos, *traducciones y *fotografías las ofrece el cliente. En caso de necesidad, podemos ofrecer nosotros mismos los puntos anteriores y en todo caso figuraría como punto en los detalles del presupuesto. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    Respuesta elaborada:

    Los presupuestos de desarrollo y diseño web que ofrecemos son siempre cerrados, y únicamente serían ampliables (bajo previa aceptación), en el caso de que el cliente nos pidiera una funcionalidad nueva a medio desarrollo, entendiendo como funcionalidad nueva, cambios o añadidos mayores en el funcionamiento de la página web.

    El cliente ofrecerá el *hosting y dominio, los *textos del website, las *traducciones y las *fotografías.

    *El hosting y dominio en caso de no ofrecerlo el cliente, podemos contratarlo con nuestro proveedor habitual, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    *Los textos del website en caso de no ofrecerlo el cliente, podemos ofrecer nuestro servicio de redacción, y teniendo en cuenta que el coste correrá a cargo del cliente.

    *Las fotografías necesarias para crear el sitio web, en caso de no ofrecerlas el cliente, las compraremos en nuestro banco de imagen habitual, resultando en un coste de 15€ por fotografía, y teniendo en cuenta que el coste correrá a cargo del cliente. Nosotros mismos te haremos la propuesta de fotografías que consideremos que van más en línea con el proyecto. Tu nos tendrás que dar el visto bueno antes de hacer cualquier compra, la cual la asumiremos nosotros y la repercutiremos en la factura del final de proyecto.

    *Las traducciones en caso de no ofrecerlas el cliente, podemos mandarlas a hacer a nuestro proveedor habitual, ofreciendo un precio cerrado según el número de palabras a traducir, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía no tiene ningún tipo de coste.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿De principio a fin, qué pasos tiene un proyecto y cual es vuestro método de trabajo?

    Respuesta rápida: Presentaremos las propuestas de diseño web, haremos las modificaciones que nos pidas, Desarrollaremos la página web en nuestro servidor, al cual tendrás acceso para ver el progreso, pondremos el sitio web en vivo. Nuestro trabajo está garantizado, así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.

    Respuesta elaborada:

    Fase 1 (Diseño):

    1. Programaremos una reunión o llamada para sentar las bases de tu proyecto y definir todos los puntos a tener en cuenta.
    2. Empezaremos a trabajar en tu proyecto y te presentaremos las primeras propuestas de diseño.
    3. Nos indicarás posibles cambios y modificaciones, los cuales resolveremos con celeridad.
    4. Una vez resueltos los cambios y modificaciones, te presentaremos las versiones finales para poder pasar a la siguiente fase.

    Fase 2 (Desarrollo):

    1. Empezaremos a programar tu página web en nuestro servidor de desarrollo y te iremos mostrando cómo va evolucionando.
    2. Una vez terminada, tu mismo nos podrás indicar posibles cambios y modificaciones menores (generalmente los cambios mayores, suelen darse en la fase de diseño).
    3. Haremos los testeos y comprobaciones previas al colgado de la página web.

    Fase 3 (Puesta en vivo):

    1. Pondremos el sitio web en vivo.
    2. Una vez terminado el proyecto, nuestro trabajo está garantizado así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Dispondré de algún manual o documentación para poder subir y editar el contenido del sitio? ¿Ofrecéis alguna formación?

    Respuesta rápida: Dispondrás de un manual y además te ofreceremos una formación de forma gratuita.

    Respuesta elaborada:

    Al finalizar el proyecto te entregaremos un manual de uso para que puedas gestionar los contenidos que hayamos definido de los cuales necesitas poder gestionar, tales como proyectos, productos, artículos, etc.

    Además te ofreceremos una sesión de formación de forma gratuita para enseñarte a utilizar el gestor de contenidos.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla
    contacta ahora - 93 792 27 62 - info@codewebbarcelona.com
    Pedir presupuesto
    Me gusta perooo... ¿Te contactamos para
    asesorarte sin compromiso?
    Da un paso al frente. Indícanos tu teléfono o email y te contactamos
    para ayudarte a sentar las bases de tu proyecto.
    ¡Perfecto, pronto nos pondremos en contacto contigo!