presentacion-pagina-web

Con motivo de celebrar más de una década de servicio a la comunidad e inspirados por su gran proyección social, en Staff Creativa nos dimos a la tarea de crear una nueva página web para la Asociación Bolaroja. Este trabajo buscó renovar la página web, pero manteniendo los conceptos originales en la medida de lo posible.

Sobre Bolaroja

Para llegar a la descripción que ofrece la página web actual, hay que pasar debajo de las sonrisas de un par de payasos que observan divertidos mientras uno lee de qué se trata todo esto. Bolaroja es, en esencia, eso: la celebración del descubrimiento y, por supuesto, también las risas, los juegos y la transformación del mundo a través del humor.

presentación-pagina-web-4

Este proyecto que comenzó en 2001 de la mano de su actual directora, Wendy Ramos, viene llevando a cabo una destacada labor social en el Perú. Y es que su propuesta de explorar el papel del payaso fuera del ambiente escénico ha repercutido en la forma en que los peruanos vemos a estos curiosos personajes de nariz roja y de lo que son capaces de hacer.

Sobre el diseño

Para los que siguen el trabajo de esta asociación o tengan interés en el diseño de páginas web, vamos a analizar algunos aspectos del cambio. Resulta muy interesante desde un punto de vista estético y funcional ver la transición, con las implicancias que esta tiene a nivel de experiencia del usuario y optimización en buscadores.

Como dijimos, buscábamos que la nueva página web tuviera un enfoque distinto, más abierto y dinámico. Sin embargo, notamos que la antigua web tenía algunos aspectos particulares que tenían gran identificación con el concepto de Bolaroja. Ante esto, quisimos tomar aquello que nos pareció muy bueno para que formara parte de la identidad del nuevo espacio.

¿Cómo generar un nuevo entorno que no rompa con los conceptos originales? ¿Qué cambiamos del diseño original? ¿Todos estos cambios se pueden distinguir claramente? Viéndolo en retrospectiva, ¿podemos decir que la migración fue exitosa? Pues bien, empecemos a comparar:

Cambio de plataforma

La antigua página fue construida originalmente en la plataforma Blogger, un servicio de Google para crear bitácoras personales, mejor conocidas como blogs. Allí es posible crear blogs, haciendo uso de herramientas de diseño y edición gratuitas que, incluso, ofrecen algunas configuraciones predeterminadas llamadas plantillas.

Por el contrario, la nueva página es una construcción original, no limitada por modelos predefinidos, que cuenta con un dominio propio (lo que actualmente añade prestigio a una marca) y que ha sido trabajada desde el código para ofrecer una interfaz amigable con los usuarios, visualmente atractiva y con múltiples añadidos que las plataformas como Blogger no pueden ofrecer.

presentación-pagina-web-3

Diagramación

Dado que el diseño de la página web antigua respondía a los estilos predeterminados de Blogger, eran muy pocas las modificaciones sustanciales que se podían hacer en cuanto a la disposición de las barras, botones y otros gadgets. Es más, la decoración estática era una regla casi obligada y el acceso al contenido nuevo pasaba por hacer innumerables clics en las fechas de publicación, sin contar con lo engorroso que resulta esto para los usuarios de dispositivos móviles.

En la nueva página web, la diagramación cambia totalmente. Un menú en la parte superior divide las secciones de información que están dispuestas en línea horizontal junto con las cuentas de Facebook y Twitter. Además, en la parte inferior hay cuadros interactivos y un formulario para suscribirse al boletín. Optimizando el espacio que queda, en medio se muestran imágenes dinámicas que son, al mismo tiempo, ilustrativas e informativas.

Diseño web responsive

Sobre este aspecto hay que hacer un paréntesis pues la diferencia es increíble. La antigua web no fue pensada para ser vista en smartphones y otros dispositivos móviles por lo que si bien al momento de hacer la prueba, en ciertas pantallas la navegación no era tan pesada, se nota la diferencia entre una y otra.

No obstante, este es un problema bastante común. La mayoría de páginas web creadas antes de la explosión de la tecnología de dispositivos móviles no tienen diseños amigables con pantallas pequeñas. De hecho, la regla es que cuando son abiertas en estos equipos casi siempre son un desastre pues todo se sale de lugar y la mayoría de usuarios abandonan el sitio bastante frustrados.

presentación-pagina-web-1

En cambio, el nuevo sitio web fue pensado desde el inicio para responder a principios de diseño responsive. Luego de leer el artículo lo invitamos a que la revise el sitio desde su teléfono y note cómo la distribución del espacio es armoniosa y, mejor aún, la navegación se vuelve intuitiva con la adición de menús desplegables que no interrumpen la lectura.

Otro detalle importante con respecto al diseño responsive es que hace más fácil el acceso a los otros canales de comunicación de la empresa como el correo electrónico y otras redes sociales. Si bien esto no se siente cuando el usuario navega en una computadora, sí influye en el que entra a través de su teléfono pues incrementa el número de operaciones que hay que realizar.

Colores

En la página web antigua, los colores predominantes eran el blanco y el celeste, el rojo era un color minoritario y que se reservaba para resaltar las letras o imágenes con forma esférica. Y aunque ya hemos dicho que el formato mismo de la plataforma limitaba mucho la creatividad, los colores funcionaban de maravilla y creaban un ambiente fresco y divertido para los visitantes.

Quizás un logro del diseño web nuevo es que consigue preservar esa suerte de ambiente que generaba la combinación de colores del modelo antiguo. El blanco y celeste siguen muy presentes en todas las páginas, pero este último le cede su protagonismo al rojo y se trabaja aún más en resaltar las formas esféricas. En ambos casos, las tonalidades son suaves.

Secciones

En la página web original podemos identificar la página de inicio en donde se observan todas las entradas recientes, pegadas una encima de la otra y una barrera lateral derecha en donde se accede al perfil del creador, el archivo del blog, los seguidores y un pequeño espacio dedicado a uno de los patrocinadores. En todos ellos, el texto está sobreexpuesto y el único desplegable es la sección de archivo en donde se buscan las entradas del blog por año y nombre. Entrando desde otros dispositivos, el esquema es más o menos el mismo, lo que resta un poco a la calidad de la navegación.

En cambio, en la web nueva los contenidos están bien delimitados de la siguiente manera:

Nosotros/Escuela/Proyectos/Montajes/Bola Corporativa/Galería/Contacto/FAQS

presentación-pagina-web-2

Esto no solo hace más eficiente el acceso a la información sino que separa de forma conveniente estas secciones de otras que buscan incidir en el índice de conversión y que están en la parte inferior con los títulos de “Talleres”, “Quiero ser Clown” y “Proyectos”. Y también se agrega en la parte final un añadido para el logo de los patrocinadores.

Conclusiones

Para quien visite ambas páginas y lea este análisis, le quedarán claras, al menos, dos cosas:

  1. Muchos de los “aspectos creativos” de la página web original se han trasladado a la nueva página, en donde ciertas características han podido mejorarse de forma sustancial (distribución del espacio, mejor acceso, etc.)
  2. El nuevo diseño responde a una orientación diferente de la marca, pues el blog inicial servía como medio informativo, pero su capacidad para capitalizar conversiones o establecer perfiles de clientes era muy baja. En ese sentido, se logró un avance importante con la nueva página web.
  3. Detalles como la plataforma o el diseño web responsive no solo constituyen con mejoras a nivel visual sino que aportan mucho en otros aspectos como la experiencia del usuario en el sitio y la promoción de canales e incluso la exposición de patrocinios.

bola-roja-staff-creativa_1024

Esta experiencia nos deja no solo la satisfacción de haber contribuido con una organización muy importante y querida en la sociedad, sino que hemos podido poner a prueba nuestras capacidades para diseñar un concepto nuevo que al mismo tiempo sea heredero del original.

Recuerda que si quieres un trabajo similar para lanzar una nueva marca o rediseñar tu imagen digital, en Staff Creativa estamos prestos a ayudarte y a brindarte el mejor servicio que podamos ofrecerte. ¡Contáctanos!

The following two tabs change content below.
fiorisantamaria1@gmail.com'
Fiori es CEO de Staff Creativa, Agencia de Diseño Web y Marketing Online
fiorisantamaria1@gmail.com'

Latest posts by Fiori Santa Maria (see all)

Deja una respuesta