Página web Círculo de Recreo Torrelavega

Centro Social Deportivo

La tecnología avanza que es una pasada. Y si hay un lugar donde el tiempo se dispara, es en internet. Las tendencias de diseño en las webs, las estrategias de marketing online, los lenguajes de programación… todo esto cambia y evoluciona «casi» a diario.

Página web del Círculo de Recreo de Torrelavega

Estudio
del proyecto.

Normalmente, como parte del desarrollo del diseño de cualquier página web, hago un pequeño estudio de las webs de la competencia de mi cliente. NO tiene por qué ser competencia directa. Lo digo porque quizás estoy viendo una web de una empresa o entidad que está en otra Comunidad Autónoma o incluso en otro país.

Hombre, me podéis decir que internet es global y que todas las empresas que están en internet compiten por el mismo mercado. Pero no en todos los casos.

En el caso del Circulo de Recreo, cuyos socios se reducen a Torrelavega y alrededores o, como mucho, puede que sean ya socios de 3ª generación, si no más, en cuyo caso, por eso de que ser socio de esta entidad, se hereda de padres a hijos, nos podemos encontrar socios repartidos por todos los rincones de España o del mundo si me apuras.

Pero sea como fuere, el Círculo de Recreo de Torrelavega, no creó esta página web para vender servicios ni productos, sino como una un servicio extra a sus Socios. Un lugar donde poder comunicarse con ellos en tiempo real, reservar online las instalaciones deportivas y, por su puesto, mantenerles al día con todo lo que sucede en esta entidad.

Me estoy yendo por las ramas… :,(

Lo que te quiero contar en este apartado, es que me encontré con un montón de páginas web de entidades sociales del estilo de Circulo, con unos diseños en las páginas web realmente anticuados.

Me sorprendió muchísimo ver este tipo de diseños en sedes deportivas, donde la mayoría de usuarios son chavales jóvenes, o incluso niños con padres muy jóvenes. Que practican deportes de moda como el Pádel o Speening… ¿por qué mantienen una estética tan pasada?.

Seguramente lo suyo no sea hacer un diseño muy estridente. Entiendo que hay límites que no se deben exceder, pero hombre, modernizar un poco la imagen es fundamental. Hacer más amigable a nuestros tiempos, a la gente de hoy que, al fin y al cabo, son los usuarios de estas instalaciones.

adaptación a móviles de la página web del circulo de recreo de Torrelavega

El objetivo de

la nueva página web

del Casino te Torrelavega

Los objetivos de la nueva página web del Circulo de Recreo de Torrelavega, (coloquialmente llamado el Casino), estaban muy claros desde el principio. Como te comenté antes, unos párrafos más arriba, la idea principal de esta web, es dar un servicio online a los socios. Algo que facilite la comunicación entre la directiva, oficina y socios. Buscando una imagen de transparencia y dando una idea de modernización.

El área privada para Socios. La intranet. 

El primer requisito que debía tener esta página, era una intranet para que los socios pudieran acceder, con usuario y contraseña, a un área privada, donde la directiva irá subiendo la documentación que consideren de interés para los socios. Y mantener un historial de esta documentación.

La forma más sencilla de hacer este área con WordPress, es utilizando un plugin* llamado WP Customer Area. Este plugin permite crear un intranet con una serie de funcionalidades básicas, pero que cumplen perfectamente este cometido.

Con este plugin de intranet para WordPress, podemos crear webs con una sección privada con muchas posibilidades:

  • Una intranet, por ejemplo para una gestoría o asesoría, donde los clientes puedan tener acceso a su documentación incluso descargar facturas o lo que necesiten.
  • Una intranet para un colegio, donde los padres puedan ver las actividades, las notas…
  • Una cualquier tipo de empresa donde los trabajadores puedan acceder a su documentación de manera privada, contratos, nóminas, incluso informes o instrucciones de proyectos.
  • O, como en el caso del Casino de Torrelavega, un área privada donde encontrar todos los documentos importantes. Dotando de una funcionalidad extra a la web y generando confianza con los socios a través de la transparencia que da disponer libremente de toda esta documentación.
muestra de plugin de eventos para wordpress

Gestor de eventos sociales.

Otro de los requisitos principales para esta web, era un gestor de eventos. El Círculo de Recreo de Torrelavega, es un centro social donde se celebran actividades de todos tipo, deportivas, lúdicas, y sociales como fiestas, barbacoas, conciertos, etc.

Esta información, vital para los socios, decidimos añadirla en la home, para que al primer vistazo, los usuarios de la web, socios y no socios, tuviera la información a simple vista.

La idea es que los socios estuvieran informados de los eventos actuales y futuros. Pero es muy importante también, tener un historial de estos eventos como reclamo para futuros socios. Es un centro donde la actividad, sobre todo durante el verano, es frenética. Todos los fines de semana hay eventos. De todos los gustos y para todas las edades.

Para solucionar este requisito, utilicé un plugin llamado Timely All-In-one Event Calendar». No es más que un plugin para gestionar eventos con WordPress. Más abajo te dejo un video donde explico sus funcionalidades. Lo entenderás mucho mejor.

Hay muchos plugin para gestionar eventos en WordPress, pero este tiene algo que lo diferencia del resto, y es la forma tan visual que tiene de presentar los eventos. De un simple vistazo, tienes los eventos activos en formato tipo «cartel» y fácilmente puedes desplazarte por los meses e ir viendo el historial.

Otra cosa que me gusta, es que se puede asignar un color diferente por cada tipo de actividad. Por cada categoría. Esto también le da un toque de color al apartado de eventos, si haces una buena elección de colores. Utilizando los corporativos y sus complementarios o no alejándote en exceso de la gama cromática. NO es fácil que los usuarios o socios se aprendan de memoria que color pertenece a cada tipo de evento, pero sí que puede ayudar a los administradores y, como te comenté antes, le da un pequeño toque al diseño de la web.

El diseño de la nueva web

del Círculo de Recreo

Podría meter como otro requisito la adaptación a los móviles y no en el apartado de diseño. Pero es que hoy, no es un requisito que un cliente pida que la web se adapte a los diferentes dispositivos, porque esto forma parte de la esencia de lo que es el diseño web. No se puede concebir una página web que no está construida con la técnica del «Responsive web design».

Así todo, es muy normal que un cliente te lo pida como un requisito más. Ahora mismo, todas las páginas web que no se adapten a los móviles, están perdiendo posiciones en Google. Cada día que pasa, estas webs se hunden y se hunden en los resultados de las búsquedas.

Responsive web design (adaptación a móviles) Vs App (aplicación móvil).

Aquí podemos discutir muchísimo entre si es necesario o no un App para un móvil o simplemente vale con que tu web se adapte a diferentes tamaños de pantalla.

Por su puesto, a mi me parece que no siempre es necesario una App. Sobre todo porque una web responsive (osa hoy en día todas) puede cumplir a la perfección lo que a una App te puede ofrecer. Siempre depende del proyecto y de las funcionalidades que necesites.

En este caso, intenté persuadir a los directivos del Casino, para crear un gestor de reservas online para las pistas de pádel y de tenis. O para lo que ellos quisieran. Tenían pensado crear una App para este cometido, pues les parecía más cómodo para el socio ya que desde el móvil y en cualquier momento podrían hacer una reserva. Pero el caso, es que con una web responsive, también. Mientras tengas conexión a internet…

Porque al final, una App nativa, en según que circunstancias o mejor dicho, según que requisitos necesite, podría ser necesaria una conexión wifi o 4G. Pero cuando es un gestor de reservas, sí o sí necesita conectarse a internet. Un gestor de reservas, no es más que una base de datos alojada en un servidor a la que se llega a través de internet.  Bueno, digo que no es más, como si eso fuera poco. Que no se ofenda nadie.

En cualquier caso, hicieron la App a la que también se puede acceder vía web.

El diseño de la web.

Ahora sí que voy a hablar un poco de lo que es el diseño. De lo que llamamos la gráfica.

Al principio de este proyecto, cuando hice el estudio de la competencia o de página afines a esta, te hablé de lo sorprendente que me pareció el diseño tan desfasado que me encontré en la mayoría de las webs que visité.

No me sorprendió tanto, cuando al comienzo de este proyecto, los directivos encargados de comunicarse conmigo, cuando les pregunto si tienen algún referente o alguna web que hayan visto que les guste (siempre suelo comentarlo antes de empezar ningún diseño), las páginas que me pasaban como referencia… ERAN DEL TIPO que me había ido encontrando en mi estudio previo.

Me costó un montón hacerles ver, que aunque los clubs que ellos siguen, por importancia, por que sean un referente en la gestión o por las instalaciones… no tenían un diseño adecuado a su entidad. 

Por su puesto, con bocetos y trabajo, fui dando forma a esta web. Intentando no alejarme mucho de lo que puede ser un diseño un tanto clásico, pero sin perder de vista el estilo más o menos clásico que les gustaba. Hay que tener en cuenta que el Circulo de Recreo de Torrelavega, además de socios jóvenes y de gran cantidad de actividades para niños, también cuenta con un número elevado de socios mayores.

Buscar el equilibrio en un diseño, que representa a la perfección a esta horquilla tan enorme de diferentes usuario, es poco menos que imposible. Lo normal es decantarse por tipo de usuario y esperar que el otro no se ofendiera en exceso.

La verdad, es que el diseño final no es extremadamente moderno, no tiene objetos en movimiento, ni fondos con imágenes sobredimensionadas a todo lo ancho de la pantalla, excepto en algún lugar puntual.

Más bien es una web de corte bastante clásico, al que le añadí un color bastante poco discreto, más bien es un color azul piscina bastante predominante y que, por otra parte, me costó muchísimo elegir. Es sin lugar a dudas, donde más vueltas le he dado a esta diseño. A elección del color azul principal. Buscaba contra restar esta composición clásica con el color para darle un aire más joven. 

página web del Casino de Torrelavega, adaptación a móviles

La elección del color.

Como te comentaba antes, la elección del color azul fue bastante trabajada. El primer problema que me encontré, es que la imagen corporativa del Círculo de Recreo de Torrelavega tiene como color…. pues no tenía color. No tenían un color corporativo.

En los comunicados, el logotipo lo presentan siempre en negro. Y en la web antigua, era de color gris medio… O sea que, si además de una composición en las secciones bastante clásica, le añadimos como colores el negro y algunos grises, pues como que iba a modernizar el diseño de la nueva página bastante poco.

No se si has visitado el proyecto de la página web de las peluquerías Macavi, me encontré con una situación muy parecida con el tema del color. Te invito a visitarlo.

La piscina

Como te comenté antes, el Círculo de Recreo de Torrelavega, es un club social y deportivo, con unas instalaciones espectaculares repartidas dos sedes principales. La sede central en el centro de Torrelavega, junto al Ayuntamiento de esta ciudad y la sede deportiva, también llamada sede de verano, donde se concentran la mayor parte de las instalaciones deportivas.

Pero también se le llama la sede de verano, porque es donde, en esta época del año, se celebran fiestas, conciertos, barbacoas, está el restaurante, pero sobre todo es donde están las piscinas. Al rededor de ellas, gira todo el ambiente veraniego del Casino.

La principal de las piscinas, que se encuentra justo enfrente de la terraza del restaurante, es el atractivo principal de este sede social. Una piscina olímpica, de 50 m. Yo personalmente, nunca he visto una piscina tan grande. Ni tan siquiera la piscina Municipal de Torrelavega es así.

Bueno, pues como la imagen corporativa del casino no tenía colores definidos, hablé con la directiva de esta Sociedad para poner remedio a este problemilla. Porque una entidad de estas características, no puede pasar sin una identidad corporativa como es debido.

El caso, es que había que solucionar este tema antes de definir el diseño de la web. Como dato curioso, se invirtió el orden de los factores. Es decir, hice una elección de colores para la nueva página web que, posteriormente, se utilizaron para la imagen corporativa.

¿Cómo elegí los colores para la web?, pues es muy sencillo. Y supongo que te lo imaginarás ya. Después de todo el rollo que te he soltado sobre la piscina… pues eso, la piscina fue la inspiración.

Al principio de este proyecto, comenté que el Círculo de Recreo y más en el caso de la web, necesitaba un toque más moderno. Que represente a los usuarios habituales de las instalaciones. Darle un aire más juvenil o, más bien, un aire más joven. Es cierto que tiene usuarios de todas las edades, pero una imagen más cercana más cuidada y sobre todo darle un poco de luz.

Los tonos negros y grises, fuera de atraer a nuevos socios, más bien los aleja.

Así que la piscina fue una fuente inagotable de tonos veraniegos y muy asociados a la sede deportiva del casino. Ya se que los todos azules no son los más luminosos precisamente, eso es cierto, pero el azul es un color muy relajante. Con una cuidada elección de tonalidades, se pueden transmitir muchas cosas.

Hay que tener en cuenta que, por ejemplo, un color verde amarillento, que sería más luminoso y que quizás también puede representar a la sede de verano (esta tiene un montón de zonas verdes alrededor de la piscina), pero quizás se nos va a una imagen más infantil. Y tampoco quería eso.

Con una combinación de dos azules bien contrastados, conseguí dota a la web y posteriormente a la imagen corporativa, de un aire más fresco y juvenil.

  • Este color azul oscuro, que le da un toque más señorial y nos permite mantener esa esencia más tradicional que siempre tuvo. Pero no es el color negro. Eso está claro.
  • Este color azul mucho más claro. Aparte de darle un toque mucho más juvenil, me permite trabajar muy bien los contrastes entre este y el azul más oscuro. Muy válido para resalta botones, enlaces o encabezados, sobre todo si el fondo es oscuro. Si es claro utilizo el otro azul.
  • También tengo ese gris medio, que me permite un tono neutro para no saturar en exceso la página web con demasiados azules. Un gris así o incluso más oscuro para las tipografías, es un magnífico aliado para cualquier web. Aunque no sea su color corporativo.
Página web del Círculo de Recreo de Torrelavega

Como podrás observar en este proyecto, es muy recomendable renovar la página web cada cierto tiempo. Mejorar, actualizar y adaptarse a las tendencias, tanto en diseño como en estrategias de comunicación, nos va a ayudar a mejorar nuestra presencia online a nuestra presencia en internet.

¿Tienes alguna duda?, ¿quieres que te asesore?