Diseño y desarrollo de sitio web para la escuela de surf JMC Surf Training
El reto
El cliente, un profesional del entrenamiento de surf, necesitaba mostrar en su sitio web sus servicios de forma clara, así como transmitir sus valores, la esencia innovadora, profesional y cercana de su método de aprendizaje.
Tras una toma de requisitos, análisis inicial y un benchmarking de la competencia, comencé el proceso de diseño visual buscando una estética minimalista y plana que reflejase el estilo desenfadado y contemporáneo que buscaba el cliente.
Para ello se utilizó un layout de aspecto descentralizado, basado en bloques reutilizables con distintas alineaciones y combinaciones de fondos, imágenes y contenidos de texto creando una estructura dinámica y fluida.
Colores
La paleta de color de la marca utiliza una gama de colores básica que aporta gran contraste, pero era necesario poder variar ligeramente el estilo en algunas páginas.
Por eso se eligió una paleta de colores secundaria para representar las páginas de producto: los distintos tipos de cursos que ofrece la empresa.
Diagrama de niveles
Una parte importante en el proyecto era que los usuarios del sitio web entendieran que deben solicitar un curso adaptado a su nivel de surfing, ya que la empresa ofrece entrenamientos específicos para diferentes niveles. Con lo cual es importante que el usuario vea claramente qué los distintos cursos corresponden a distintos niveles de surfing.
Para ello se creó un diagrama que muestra los excerpt de cada una de las páginas de los distintos cursos en bloques con diferente altura, representando el mayor nivel requerido para cada curso (los dos de la izquierda son el mismo nivel pero en versión senior y junior).
Por otro lado, en resolución mobile, donde no era posible representar este mismo diagrama horizontal, se creó una representación de los niveles aplicada al menú desplegable.
Cuadro de niveles de los cursos y su representación en el menú para resoluciones pequeñas.
Módulos específicos
Con todos los bloques de la maqueta diseñados se procedió a representarlos en un layout donde cada uno de los módulos es independiente formado un todo.
Así, por ejemplo, se personalizaron los estilos de un feed de Instagram (basado en un plugin) para mostrarlo acorde a la estética diseñada.
También fue necesario diseñar y construir en WordPress un sistema para mostrar testimonios de clientes que ya habían utilizado los servicios de la empresa, así como un sistema para publicar FAQs, preguntas y respuestas que cubren las cuestiones más habituales de los usuarios.
Cada testimonio incluye una imagen que pretende mostrar el progreso de los alumnos junto a su opinion sobre el servicio.
El sistema de reservas, basado en Gravity Forms, se muestra en cada página de producto y permite al usuario reservar una clase en la fecha deseada, respondiendo previamente a un formulario sobre su nivel de surfing, para poder garantizar que es apto para el nivel de curso que está solicitando.
También se crearon estilos personalizados para el formulario de suscripción a la newsletter, los créditos, logos de sponsors y links a redes sociales. Todo ello completamente configurable desde el panel de administración de WordPress.
Resultado
Finalmente se obtuvo un tema de WordPress desarrollado a medida con un estilo desenfadado y diferente que integra todos los módulos de Gutenberg (el nuevo editor de contenidos de WordPress) y que permite la edición de todos los contenidos del site de forma sencilla y clara.
El resultado puede verse en jmcsurftraining.com
