Cómo empezó todo
La escuela de turismo «Peshehodnik» es uno de esos proyectos en los que la propia temática sugiere cómo debe ser el sitio.
Montañas, senderos del bosque, tiendas de campaña, mochilas, fotos de excursiones. Quería transmitir ese ambiente y, al mismo tiempo, crear una página cómoda en la que un futuro alumno pudiera entender fácilmente el programa de formación.
La idea de un sitio nuevo surgió cuando Karina Grigorieva, mi compañera y alumna de «Peshehodnik», propuso a la directora de la escuela, Yulia Bychkova, ayudar con la promoción.
La escuela ya tenía un sitio, peshehodnik.ru. Se había creado hacía muchos años, así que decidí desarrollar una segunda versión: moderna, con una nueva estructura y un nuevo diseño.
La plataforma se eligió enseguida: Tilda. Allí había que montar el sitio y después seguir completándolo y mejorándolo.
Las primeras maquetas y, casi de inmediato, un concepto acertado
Me gusta que la solución visual nazca de la propia temática del proyecto. Para una escuela de turismo, los colores de la naturaleza se imponían por sí solos.
Los principales fueron el azul y el verde: los tonos del cielo, del bosque y de los paisajes de montaña. Para la composición elegí un estilo de cartel sencillo: titulares grandes, fotografías expresivas, formas claras y un mínimo de adornos innecesarios.
Las primeras maquetas se hicieron en Claude Design. Allí también empecé a formar el sistema de diseño, para definir de antemano el aspecto de los elementos habituales y el comportamiento de la página en distintas pantallas.
Y entonces ocurrió algo agradable: desde las primeras iteraciones el concepto resultó justo como lo imaginaba.
Normalmente, en la etapa de diseño hay varias revisiones importantes. Aquí pude pasar a los detalles casi de inmediato. Afiné espacios, tamaños de los elementos y composiciones de pantallas concretas, pero mantuve la dirección general.
Esto resultó especialmente útil más tarde, cuando el sitio empezó a llenarse rápidamente de bloques nuevos.
Monté en Tilda. Y la landing empieza a crecer
Tras aprobar el concepto, rehice las maquetas y monté el sitio en Tilda.
Al principio planeaba una landing page normal. Pero cuanto más me adentraba en los materiales de la escuela, más claro estaba que no se podía contar todo en unas pocas pantallas.
«Peshehodnik» tiene un amplio programa de formación, una historia interesante, instructores cualificados, diplomas y premios, opiniones de los egresados, fotos de excursiones y muchas preguntas que se hacen los principiantes.
Quería encontrar un lugar adecuado para cada uno de estos materiales.
Así, la landing se convirtió poco a poco en una gran página única con decenas de elementos de contenido y visuales.
Era especialmente importante mantener el ritmo: alternar bloques de texto con fotografías, tarjetas y galerías sin sobrecargar al visitante de información.
El sistema de diseño vino muy bien aquí. En lugar de inventar el diseño desde cero cada vez, pude usar los recursos ya elegidos y adaptarlos a nuevas tareas.
Cómo organicé el programa de formación
Una de las secciones principales está dedicada a la propia formación.
La escuela imparte clases en línea, entrenamientos sobre el terreno y excursiones de aprendizaje. Hay un curso de primeros auxilios y una evaluación final.
Quería que el programa se leyera con facilidad. Una persona que piensa por primera vez en la preparación para el senderismo debe ver qué aprenderá y qué clases le esperan.
Por eso dividí la información en bloques comprensibles y pusimos el acento en el contenido de cada área.
Durante los ajustes surgió un matiz interesante. La numeración de las partes del programa daba la impresión de que primero había que completar una etapa por entero, luego la segunda y así sucesivamente. En la práctica, algunas clases se imparten en paralelo.
Quité los números y precisé las formulaciones. Un cambio pequeño, pero ahora la página describe con más exactitud el proceso de aprendizaje real.
Un carrusel con dieciséis reconocimientos
La escuela ha acumulado bastantes diplomas y premios. Para ellos se reservó la sección «Nuestros logros».
Al principio el bloque tenía una sola foto, y después lo amplié a un carrusel de 16 imágenes con pies de foto.
Quería mantener el equilibrio: los diplomas deben ser lo bastante grandes para poder leerlos, pero la galería no debe ocupar demasiado espacio.
Elegí los tamaños y el diseño de las tarjetas, acordé los pies de foto e integré el carrusel en el diseño existente.
El resultado es un bloque visual independiente que muestra los logros de la escuela y hace la página más variada.
El formulario de inscripción: importan hasta los detalles
Para la inscripción al curso desarrollé un cuestionario de varios pasos que se abre sobre la página en una ventana modal.
En él, el futuro alumno puede indicar sus datos de contacto y hablar de su experiencia en excursiones.
El diseño del formulario sigue el estilo general del sitio: los mismos colores, tipografías y principios de diseño.
Pero lo más interesante, como suele pasar, se descubrió al probarlo.
En una de las preguntas había la opción «Otro», que permitía escribir una respuesta propia. Sin embargo, el formulario pasaba automáticamente al paso siguiente justo después de elegir una opción. El visitante sencillamente no tenía tiempo de escribir nada.
Desactivé el avance automático. Ahora la persona decide cuándo continuar.
También preví el consentimiento obligatorio para el tratamiento de datos personales, con un enlace al documento correspondiente.
Esos detalles rara vez se ven en las capturas. Pero son los que determinan lo cómodo que resulta usar el sitio terminado.
Tarjetas, botones y versión móvil
Cuando las secciones principales estuvieron listas, empezó el trabajo en los detalles.
Por ejemplo, las tarjetas de precios parecían cuidadas a primera vista, pero, por la distinta cantidad de texto, los botones quedaban a alturas diferentes. Hubo que cambiar la composición: colocar la información principal arriba y alinear los botones por el borde inferior.
Después comprobé el bloque en cinco tamaños de pantalla: 1440, 1100, 800, 560 y 375 píxeles.
Aparte, me ocupé de los botones de todo el sitio. Algunos enlaces eran incorrectos, y el diseño de ciertos elementos variaba en tamaño y grosor de la letra.
Tomé como modelo el botón de la cabecera y unificamos el estilo de los demás.
Revisé los enlaces, los espacios, la disposición de los elementos y el comportamiento de la página en dispositivos móviles.
En una landing grande este trabajo exige mucha atención. Cuando una sola página tiene muchos bloques distintos, es importante que todos se vean coherentes.
Y luego empezaron los ajustes. Muchos ajustes
Una vez montado el sitio, el trabajo continuó junto con la directora de la escuela, Yulia Bychkova.
Yulia estudiaba la página con atención, precisaba el contenido y proponía cambios y materiales nuevos. A veces las observaciones se referían al texto, otras veces al diseño, los botones, la estructura o detalles concretos del programa.
En una ocasión envió una grabación de pantalla de casi 23 minutos con comentarios de voz.
En estas grabaciones la persona suele razonar mientras mira: propone algo, luego lo matiza, cambia de opinión, recuerda otro detalle. Revisar todo eso a mano sin dejarse nada puede ser difícil.
Usé la transcripción automática y herramientas de análisis de vídeo. Salió una lista de 21 puntos con marcas de tiempo. Los puntos dudosos se apartaron para aclararlos.
Tras la aprobación, los cambios se hicieron directamente en Tilda. Para parte de las tareas usé Claude Code y Codex conectados al proyecto mediante MCP.
En este proceso la rapidez resulta especialmente útil: se puede entregar una lista larga de ajustes y trabajarla paso a paso. Si más tarde el cliente cambia de decisión, corregir pasa a ser una etapa normal del trabajo.
Por supuesto, tras los cambios automáticos lo reviso todo. A veces hay que corregir un espacio, el diseño o el comportamiento de un elemento. Pero trabajar con una gran cantidad de aclaraciones se ha vuelto mucho más tranquilo y rápido.
Lo que sigue haciéndose a mano
En el trabajo con «Peshehodnik», como en otros proyectos, los gráficos siguen llevando mucho tiempo.
Preparar una imagen, lograr la composición adecuada, elegir el color, corregir detalles y optimizar el archivo suele ser más fácil con las herramientas gráficas habituales.
Por eso uso Figma, ChatGPT y Photoshop según la tarea. Parte de los conceptos se crea con ayuda de la IA, parte se perfecciona a mano, y las imágenes terminadas se optimizan y se colocan en el sitio.
En cambio, el trabajo con textos, formato, adaptabilidad y numerosos ajustes pequeños se ha acelerado notablemente.
Para mí lo importante es el resultado: que el sitio se vea cuidado, funcione bien y corresponda al concepto elegido.
El resultado
El nuevo sitio de «Peshehodnik» funciona ahora en la dirección shkola-peshehodnik.ru.
El resultado es una landing grande con una paleta natural, fotografías expresivas, un programa detallado, información sobre los instructores, una galería de reconocimientos, opiniones y un formulario de inscripción.
Es especialmente satisfactorio que el diseño casi no hubo que cambiarlo respecto a las primeras maquetas. Desarrollé de forma coherente el concepto aprobado, y hasta los bloques nuevos encajaron de manera natural en la página.
A Yulia Bychkova le gustó el sitio. Sigue participando en su contenido y yo pulo los detalles pendientes.
El proyecto tiene una gran continuación
Ahora se ultiman los últimos ajustes antes de iniciar la campaña publicitaria. Los resultados de la publicidad contextual y del posicionamiento SEO podré valorarlos más adelante y tengo previsto contarlos en un caso aparte.
El propio sitio también seguirá creciendo.
La escuela tiene muchas fotos, vídeos e historias de excursiones. Los planes incluyen artículos, informes, instrucciones, materiales útiles para senderistas principiantes y una enciclopedia propia.
Quizá con el tiempo la gran landing se convierta en un sitio completo de varias páginas.
Hay además otra idea: una Telegram Mini App para la escuela. Aún hay que pensar qué funciones serán realmente útiles para los alumnos, los egresados y los participantes de las excursiones.
Mientras tanto, «Peshehodnik» es un buen ejemplo de cómo un concepto visual acertado puede convertirse en un sitio grande y vivo en Tilda, fácil de desarrollar junto con el cliente.
Un sitio en Tilda para los objetivos de su proyecto
Si necesita un sitio con un diseño bien pensado, bloques no estándar y la posibilidad de hacer mejoras con regularidad, puedo desarrollarlo en Tilda y acompañarlo a medida que el proyecto evolucione.