La mayoría de las páginas web de clubes tienen la información correcta y el diseño equivocado. Los horarios de entrenamiento están, pero tres pantallas más abajo, debajo de la historia del club. Las cuotas de socio están, en el cuarto párrafo de la página "Quiénes somos". El correo de contacto está en el pie de página, en gris, a 12 píxeles.
Nadie se propone armar una página así. Pasa porque la página se escribe de arriba abajo, como una carta, y después se le van agregando cosas al final. Esta guía trata de la otra forma de armar una página: decide para qué sirve, pon eso en la columna principal y coloca en una barra lateral, al lado, todo lo que un visitante podría querer a continuación. Cubre los bloques de construcción, los diseños que funcionan para las páginas que tiene todo club y los errores que hacen una página más difícil de usar.
Los ejemplos usan el editor de páginas de ClubHelix, que tiene cuarenta y cinco tipos de sección y barras laterales de hasta ocho secciones por lado, pero el razonamiento sirve en cualquier plataforma.
Las dos columnas y para qué sirve cada una
Una página de club con barra lateral hace dos trabajos en paralelo.
La columna principal cuenta la historia de la página. En una página de socios, es lo que incluye ser socio y cómo asociarse. En una página de entrenamientos, es para quién son las sesiones y qué llevar. Quien lea solo la columna principal debería irse sabiendo lo que la página prometía.
La barra lateral responde "¿y ahora qué?" Es para lo que un visitante de esa página probablemente quiera justo después, o en lugar de eso: los próximos tres eventos, el correo para hacer una consulta, un botón para asociarse, el estado de las canchas de hoy, enlaces a las páginas relacionadas. El contenido de la barra lateral es breve, fácil de recorrer con la vista y útil por sí solo.
Una buena prueba: si borraras la barra lateral, ¿la página seguiría teniendo sentido? Debería. Si borraras la columna principal, ¿la barra lateral seguiría siendo útil? Debería serlo, un poco. Cuando una sección de la barra lateral solo tiene sentido después de leer la columna principal, pertenece a la columna principal.
En el celular, la barra lateral pasa debajo del contenido principal, así que el orden se mantiene: primero la historia de la página, después los siguientes pasos.
Los bloques de construcción
La mayoría de las páginas de club se arman con la misma docena de secciones, más o menos. Saber para qué sirve cada una te ahorra muchas páginas que son un muro de texto.
Para contar la historia (columna principal):
- Texto para lo que de verdad necesita párrafos. Que sean pocos y cortos, con títulos.
- Imagen y texto para el momento "esto es lo que somos": una foto al lado de un título, unas pocas líneas y un botón.
- Tarjetas para tres o cuatro opciones paralelas, como formas de participar o categorías por edad.
- Línea de tiempo para la historia del club. Una línea de tiempo de cinco hitos se lee; seis párrafos de historia, no.
- Cifras para los números destacados: socios, equipos, el año de fundación del club.
- Cita para las palabras de un socio. Una frase real de una madre o un padre hace más que un párrafo de "somos un club acogedor".
- Preguntas frecuentes para las preguntas que la gente realmente hace, con respuestas que se abren y se cierran.
Para la información práctica (cualquiera de las dos columnas):
- Horarios de entrenamiento como tabla, o como lista agrupada por día cuando va en una barra lateral.
- Precios de membresía, que se completan solos a partir de tus tipos de socio, cada uno con su botón para asociarse.
- Programas, Equipos y Productos de la tienda, que muestran lo que ya gestionas en otra parte y enlazan a cada elemento.
- Roles, que muestra los roles de la comisión directiva y de voluntariado con quién ocupa cada uno, y puede indicar qué roles están vacantes.
- Datos de contacto, Redes sociales y Enlaces rápidos.
- Eventos, Noticias, Sedes y Patrocinadores, que se actualizan solos a medida que publicas.
- Próximas clases, Pases y bonos de sesiones, Días de evaluación y Niveles de evaluación, que se leen de tus programas y de tu escala de niveles, para que un horario de clase o el precio de un pase nunca se escriba dos veces.
- Partidos y resultados y Competencias, a partir de tus propias competencias, cada uno con un enlace a la página de la competencia.
- Reservar una instalación, Formularios, Donar y Rifas, para lo que un visitante puede hacer en ese momento: reservar una cancha, completar un formulario, donar o comprar un boleto.
- Últimas galerías, Boletines, Crónicas de partidos y Clubes miembro, que muestran lo que ya publicaste.
Para mensajes del momento:
- Aviso, en tono informativo, de buena noticia, de advertencia o urgente, para "esta semana el entrenamiento cambia de día".
- Estado de las canchas, que muestra si están habilitadas, suspendidas por lluvia o cerradas mientras el aviso está vigente, y desaparece cuando vence.
- Llamada a la acción, un titular con uno o dos botones, para cada "asóciate" y "ven a probar".
Las secciones que se completan solas con datos del resto de la plataforma son las que evitan que una página quede desactualizada. Un párrafo de cuotas escrito en febrero está mal en julio; una sección de precios de membresía está bien porque lee los precios que realmente cobras.
Qué se gana un lugar en la barra lateral
Una barra lateral es angosta, unos 280 píxeles en una laptop. Eso define qué funciona ahí. Las buenas secciones de barra lateral son breves y tienen una acción clara:
- Próximos eventos, entre tres y cinco, en una lista compacta.
- Datos de contacto, con el correo y el teléfono como enlaces que se pueden tocar.
- Enlaces rápidos a las páginas que un visitante de esta página suele querer a continuación.
- Horarios de entrenamiento, agrupados por día.
- Estado de las canchas, en cualquier club que suspenda actividades por lluvia.
- Una llamada a la acción para asociarse, inscribirse o venir a probar.
- Redes sociales y Patrocinadores.
- Próximas clases, Partidos y resultados o Días de evaluación, una lista corta de lo que viene.
- Donar o Rifas, una sola campaña con su botón.
Lo que rara vez funciona en una barra lateral: textos largos, una galería de fotos completa, un formulario de más de tres o cuatro campos y cualquier cosa que el visitante tenga que leer antes de que la columna principal tenga sentido.
Ocho secciones por lado es un límite, no una meta. Tres o cuatro secciones bien elegidas son mejores que ocho que empujan las útiles fuera de la primera pantalla.
Diseños página por página que funcionan
Son puntos de partida. Adáptalos a tu club y deja fuera todo lo que no puedas llenar con información real.
Página de inicio
- Columna principal: una imagen de portada arriba, una bienvenida con imagen y texto, una franja de cifras, las últimas noticias y una llamada a la acción para asociarse.
- Barra lateral derecha: estado de las canchas, próximos eventos, enlaces rápidos (Asociarse, Entrenamientos, Contacto), patrocinadores.
Una portada en la parte superior de la página ocupa todo el ancho, y la barra lateral empieza debajo, así que no tienes que elegir entre una imagen destacada y una barra lateral.
Para que una sección de la columna principal resalte, dale un estilo de sección en lugar de agregar otra sección: uno destacado para la portada de apertura, o una franja con el color de tu marca para la invitación a asociarse.
Página de socios o de "Asóciate"
- Columna principal: un párrafo breve sobre lo que incluye ser socio, los precios con sus botones para asociarse y unas preguntas frecuentes (¿Puedo probar antes de asociarme? ¿Hay descuento familiar? ¿Qué cubre la cuota?).
- Barra lateral derecha: datos de contacto de la persona encargada del registro de socios, horarios de entrenamiento, una cita de un socio.
Página de entrenamientos
- Columna principal: para quién es cada sesión, qué llevar y una tabla de horarios de entrenamiento.
- Barra lateral derecha: un aviso para cualquier cambio de esta semana, sedes con indicaciones para llegar, estado de las canchas y una llamada a la acción para venir a probar.
Página "Quiénes somos" y de la comisión directiva
- Columna principal: imagen y texto sobre el club, una línea de tiempo con su historia y una sección de roles con la comisión directiva.
- Barra lateral derecha: datos de contacto, enlaces rápidos a tu estatuto y tus políticas, redes sociales.
Marca Mostrar roles vacantes en la sección de roles y enlázala a tu página de voluntariado. Una página de la comisión directiva que dice "Tesorería: vacante, ¿te interesa?" recluta voluntarios todas las semanas sin que nadie escriba una publicación.
Página de contacto
- Columna principal: un formulario de contacto breve y tus sedes.
- Barra lateral derecha: datos de contacto, redes sociales y unas preguntas frecuentes con las tres consultas que más llegan por correo.
Errores de diseño frecuentes
Todo en una sola columna larga. Doce secciones apiladas una debajo de otra son una página que nadie termina de leer. Pasa los elementos prácticos e independientes a una barra lateral y la columna principal se acorta a la mitad.
Una barra lateral que repite el menú. Si tu barra lateral son solo enlaces a las mismas páginas que tu menú, está usando el espacio más valioso de la página para no decir nada nuevo. Enlaza a las páginas que un visitante de esta página necesita a continuación.
Información que queda desactualizada. Cuotas escritas a mano, partidos escritos a mano, "próximo evento: 14 de marzo". Donde una sección pueda leer los datos reales (precios, programas, eventos, equipos, estado de las canchas), úsala.
Detalles inventados. Nunca llenes una sección con teléfonos de relleno o citas inventadas para que la página parezca completa. En ClubHelix, una sección vacía simplemente no aparece en la página publicada, así que dejarla fuera no cuesta nada.
Ninguna forma de actuar. Toda página debería terminar en algo para hacer: asociarse, venir, ponerse en contacto, ofrecerse como voluntario. Si una página no tiene ningún botón, agrega una llamada a la acción.
Secciones que se repiten y secciones que no ve todo el mundo
Algunas secciones van en muchas páginas: una franja de patrocinadores, una llamada a la acción de "ven a probar", un enlace a tu código de conducta. Créalas una sola vez en lugar de hacerlo en cada página. Una sección guardada es una copia que puedes adaptar en cada lugar donde la colocas. Una sección sincronizada es igual en todas partes, así que una sola edición actualiza todas las páginas que la usan. Los organismos rectores pueden pedir a los clubes que dependen de ellos que coloquen una sección sincronizada, como un aviso de protección de la infancia o una franja de patrocinadores nacionales: cada club la coloca en sus propias páginas, y el organismo rector solo ve cuántos clubes lo hicieron.
Para el contenido que debe rodear a las páginas integradas y no estar en una página que armaste tú, usa las zonas compartidas: secciones antes o después de cada noticia, evento, equipo y programa, una franja sobre el pie de página en todas las páginas y una barra lateral compartida junto a cada noticia, evento, equipo y programa individual. Una página que armaste tú conserva su propia configuración de barra lateral, así que la barra lateral compartida nunca la reemplaza.
Una sección también puede mostrarse solo a los socios, o solo a los visitantes que no iniciaron sesión, lo que sirve para una franja de "Asóciate" que los socios no necesitan. El contenido solo para socios nunca se envía a nadie más, pero una sección sincronizada siempre es pública, así que no pongas material privado en una. Limitar una sección a celulares o a computadoras de escritorio es una decisión de diseño, no un ajuste de privacidad. Nuestra guía sobre contenido solo para socios explica qué conviene poner detrás de un inicio de sesión.
Cómo armarlo sin un desarrollador web
En ClubHelix armas todo esto sobre la propia página: haz clic en una sección para editarla, arrástrala a la barra lateral o de vuelta, y ve la vista previa antes de publicar. Una página admite hasta cuarenta secciones, y el contador de arriba te avisa cuando te acercas al límite. La página del editor de páginas sobre lienzo muestra el editor con más detalle, y nuestra guía para crear la página web de un club deportivo cubre el sitio completo: qué páginas crear, dominios y costos.
Si prefieres describir la página en lugar de armarla, el asistente integrado puede redactar un diseño de este estilo para que lo revises antes de que se publique nada. Cuando quieras probarlo, crea el sitio de tu club.
Preguntas frecuentes
¿Todas las páginas de la web de un club deberían tener barra lateral?
No. Las páginas de contenido como Inicio, Socios, Entrenamientos, Quiénes somos y Contacto suelen ganar con una. Una página que es un único formulario, una galería de fotos completa o un documento largo funciona mejor en una sola columna, para que el contenido tenga todo el ancho.
¿Barra lateral izquierda o derecha?
Derecha, para la mayoría de los clubes. Los visitantes leen primero la columna principal, y una barra lateral a la derecha la deja donde empieza la mirada. Usa las dos barras laterales solo en páginas anchas con mucha información secundaria realmente útil, como un centro de información para el día de partido.
¿Cuántas secciones debería tener una página de la web de un club?
Las que la página necesite y ninguna más. La mayoría de las buenas páginas de club tienen entre cinco y diez secciones en total. ClubHelix admite hasta cuarenta, lo que da espacio para páginas de consulta largas, pero una página que llega a tantas suele ser, en realidad, dos páginas.
¿Qué pasa con la barra lateral en un celular?
Pasa debajo del contenido principal, en el mismo orden. Por eso la columna principal tiene que tener sentido por sí sola: en un celular es todo lo que el visitante ve antes de desplazarse.
¿Una sección de la barra lateral puede quedar desactualizada?
Solo si contiene información escrita a mano. Las secciones que leen tus datos, como eventos, precios de membresía, programas, equipos, estado de las canchas, próximas clases y partidos, se mantienen al día a medida que actualizas el resto de tu panel de administración. Revisa las secciones escritas a mano, como los horarios de entrenamiento y los datos de contacto, al comienzo de cada temporada.
