Filosofía y principios de diseño del sitio¶
Hemos querido diseñar un sitio a la vez moderno, alegre, accesible y fácil de usar, en coherencia con la identidad de nuestra tradición. Somos una tradición de budismo moderno y nuestro camino es un camino alegre. El diseño del sitio debe, por tanto, transmitir esta identidad desde la primera mirada: no se trata simplemente de presentar información, sino de hacer sentir el ambiente de nuestros centros y de dar ganas de descubrirlos.
El sitio también se ha pensado para responder con eficacia a las necesidades de dos tipos de visitantes: las personas que descubren el centro por primera vez y las que ya lo frecuentan con regularidad. Para un visitante nuevo, el sitio debe permitir entender rápidamente quiénes somos, qué ofrecemos, a quién se dirigen nuestras actividades y qué ambiente puede encontrar en el centro. Para una persona habitual, que ya conoce el centro y viene a buscar una información concreta, debe en cambio permitir acceder de forma rápida y sencilla a lo que necesita: un horario, un evento, una clase, el horario semanal, la información práctica, etc.
Todo el diseño del sitio se basa, por tanto, en este equilibrio: hacer descubrir y dar ganas a los visitantes nuevos, permitiendo al mismo tiempo a los visitantes habituales encontrar rápidamente la información que buscan.
Para ver de un vistazo cómo está construida la página de inicio, aquí tienes un ejemplo de página completa basado en el centro de Brighton. Cada sección se detalla más abajo.
Ver toda la página de inicio de un vistazo
Una identidad visual moderna y alegre¶
Se ha elegido el naranja como color principal del sitio. Es un color asociado a la sabiduría y a nuestra tradición, pero también permite crear una identidad visual cálida y dinámica.
El tono elegido es lo bastante profundo para garantizar un buen contraste con el blanco, lo que contribuye a una buena legibilidad y a respetar lo mejor posible los principios de accesibilidad web. Es un equilibrio entre accesibilidad y estética.
En torno a este color principal, hemos definido una paleta compuesta también de azules, violetas y verdes.
Esta paleta constituye un marco común, sin dejar de ofrecer cierta libertad a los centros. Un centro como Brighton, por ejemplo, eligió el azul como color principal para diferenciarse de otro centro que ya usaba el naranja. Lo esencial es mantenerse dentro de la paleta definida, para conservar una coherencia visual con todos los sitios que usan este sistema.
Dónde actuar
Los colores del sitio explica el principio de la paleta; la pantalla Colores y la tarea Cambiar los colores del sitio muestran cómo ajustarla.
Una interfaz sencilla e inmediatamente reconocible¶
La cabecera del sitio se ha diseñado de forma deliberadamente muy sobria. El logotipo del centro aparece arriba a la izquierda, en blanco sobre fondo naranja. Arriba a la derecha, el botón del menú está siempre en el mismo sitio.
Hemos decidido acompañar el tradicional pictograma «hamburguesa» con la palabra «Menú». Esta elección refuerza la comprensión de la función del botón y contribuye a que la navegación sea más accesible para todos los públicos.
El menú conserva el mismo principio y el mismo lugar, tanto en la computadora como en el móvil. El visitante encuentra así siempre las mismas referencias, sea cual sea el dispositivo que use. Esta continuidad hace que el uso del sitio sea más homogéneo, sencillo e intuitivo.
Dónde actuar
El menú del sitio explica cómo está construido el menú; la pantalla Menú del sitio y la tarea Modificar el menú muestran cómo modificarlo.
Imágenes pensadas para funcionar en todas partes¶
Para facilitar la maquetación y garantizar una presentación homogénea en todo el sitio, también hemos decidido unificar el formato de las imágenes principales.
El formato de las imágenes: 1050 × 400 píxeles
Las imágenes que se usan en la parte superior de la página de inicio, de las páginas de contenido, de las páginas de eventos y en distintos espacios del sitio se preparan en el formato 1050 × 400 píxeles.
Este formato panorámico permite destacar suficientemente la imagen, dejando ver enseguida la primera información que hay debajo.
Esta elección resulta especialmente interesante tanto en el móvil como en la computadora: la imagen sigue siendo visible y atractiva sin ocupar toda la pantalla, lo que permite al visitante acceder rápidamente al contenido.
Usar un formato fijo también simplifica considerablemente la creación gráfica. En lugar de tener que gestionar imágenes a todo lo ancho o a pantalla completa, con exigencias de encuadre distintas según el dispositivo, basta con preparar bien la imagen una sola vez.
Una vez encuadrada, puede usarse con total fiabilidad en los distintos lugares del sitio: imágenes principales, próximos eventos, miniaturas y entradas del blog. Así se obtiene una presentación coherente y la gestión diaria del sitio resulta mucho más sencilla, sin necesidad de conocimientos avanzados de diseño gráfico.
La imagen de inicio: crear una primera impresión positiva¶
La imagen situada en lo más alto de la página de inicio desempeña un papel especial. Se dirige ante todo a las personas que descubren el sitio por primera vez.
Su objetivo no es, por tanto, simplemente ilustrar el centro. Debe provocar una primera impresión positiva e inmediata:
«¡Ah, qué buen ambiente se respira aquí!»
Esta impresión debe crearse a la vez con el diseño y con el mensaje que transmite la imagen. La elección de la imagen, del texto y de la composición debe dar una idea del ambiente del centro incluso antes de que el visitante empiece a consultar las distintas actividades que se ofrecen.
Este primer gancho es también la ocasión de mostrar lo que caracteriza nuestro enfoque. Somos una tradición de budismo moderna y alegre, y nuestros centros pueden transmitir esta dimensión desde la primera mirada. El humor, la ligereza y los mensajes vivos tienen, por tanto, todo su lugar en estas imágenes.
El objetivo es mostrar una realidad que los visitantes pueden encontrar en nuestros centros: lugares acogedores, vivos, cálidos y accesibles. Una persona que todavía no conoce nuestra tradición debe poder pensar enseguida:
«Quizá este sea un lugar para mí.»
Para facilitar la creación de estas imágenes, se ha desarrollado un módulo específico que permite componer de forma muy sencilla una imagen de inicio con una imagen, un texto y uno o varios iconos. El módulo también permite ajustar la presentación y ver directamente el resultado en el móvil.
Se pueden crear varias imágenes de inicio, que luego se mostrarán de forma aleatoria. Así, una persona que vuelve al sitio puede descubrir un gancho distinto, lo que da una impresión de novedad y mantiene viva la página de inicio.
Puede ser interesante, por ejemplo, crear una decena de imágenes a lo largo de unos meses o de un año, según el tiempo que el centro quiera dedicar a esta animación. Este trabajo no es, por tanto, simplemente decorativo: este primer gancho es una de las primeras ocasiones de crear un vínculo con una persona que descubre el centro.
Ver una imagen antes de publicarla
El sitio elige al azar entre las imágenes de inicio publicadas; una imagen en borrador nunca se muestra a los visitantes. Para juzgar una imagen nueva en condiciones reales antes de publicarla, usa el botón Ver en la página de inicio de la pantalla de edición: solo tú ves entonces la página de inicio con esa imagen.
Dónde actuar
La pantalla Imagen de inicio muestra cómo componer una imagen.
Una página de inicio que orienta con naturalidad a los visitantes¶
Después de este primer gancho, un título presenta de forma muy sencilla las actividades que ofrece el centro y recuerda que están abiertas a todo el mundo.
Justo debajo, una zona de selección permite al visitante orientarse rápidamente hacia los principales contenidos de la página de inicio. Puede ofrecer, por ejemplo, entradas hacia las clases de meditación, los eventos del fin de semana, las fórmulas de suscripción y, en cuarta posición, el acceso a la agenda del centro.
Esta última entrada es especialmente importante, porque el calendario suele formar parte de la información que buscan en primer lugar las personas que ya conocen el centro o que simplemente quieren saber lo que ocurre en él.
Cuando el visitante selecciona uno de estos elementos, se le dirige directamente a la parte correspondiente de la página de inicio. Descubre entonces una breve presentación de la actividad y puede acceder a la página que le está dedicada para obtener más información.
Esta organización permite, por tanto, descubrir las actividades del centro sin tener que pasar siempre por un menú. La página de inicio se convierte en un verdadero recorrido de descubrimiento: cada uno puede ir directamente a lo que le interesa o, simplemente, desplazarse por la página y descubrir poco a poco todas las propuestas.
Una página de inicio pensada también para el posicionamiento¶
Esta organización tiene también un interés importante para el posicionamiento en buscadores.
La página de inicio contiene contenidos dedicados a las distintas actividades del centro, con los términos y expresiones que corresponden a las búsquedas que pueden hacer los internautas. Cada presentación puede luego remitir a una página más completa dedicada a la actividad en cuestión.
La página de inicio se convierte así en un punto de partida hacia los demás contenidos del sitio y crea un enlazado interno coherente.
La misma estructura responde, por tanto, a varios objetivos: hace la navegación más intuitiva para los visitantes, enriquece la página de inicio con contenidos útiles y facilita que los buscadores descubran las demás páginas del sitio.
Mostrar enseguida la vida del centro¶
Justo después de la zona de selección, una sección presenta los eventos previstos para los próximos días. Así, el visitante puede saber enseguida lo que ocurre hoy y en los días siguientes, sin necesidad de abrir la agenda.
El resto de la página permite después descubrir con naturalidad otra información sobre el centro, simplemente desplazándose por la pantalla (las fórmulas de suscripción mensual, por ejemplo).
Dónde actuar
Esta sección es un bloque «Próximos eventos»: consulta la pantalla Bloques «Próximos eventos» y la tarea Mostrar los próximos eventos en una página.
Poner a los maestros en primer plano¶
Un carrusel permite también presentar a los maestros y mostrar enseguida los rostros de las personas que transmiten las enseñanzas.
En la página de inicio, el orden de presentación es deliberadamente aleatorio. En cada visita, los maestros pueden aparecer en un orden distinto, lo que hace la presentación más dinámica y permite destacar con regularidad a maestros diferentes.
La página dedicada a los maestros sigue una organización distinta. El maestro residente se presenta en primer lugar y con una foto más grande. Los demás maestros se presentan después en el orden elegido por el EPC.
Dónde actuar
En la página de los maestros, el orden es el de la lista de maestros en la administración: consulta la pantalla Maestros.
Dar una visión inmediata del horario¶
Más abajo en la página de inicio, el horario semanal de las clases de meditación permite ver de un vistazo la organización de las clases a lo largo de la semana.
Permite distinguir los distintos momentos del día, en particular las clases de la mañana, del mediodía y de la tarde. Así, el visitante puede entender muy rápidamente cuándo tienen lugar las distintas sesiones.
Si hace falta, un segundo calendario permite también presentar las clases organizadas en las sedes anexas.
Esta presentación da una visión muy concreta de la vida del centro y permite encontrar rápidamente un horario que encaje con la propia disponibilidad.
Dónde actuar
La pantalla Horario semanal y la tarea Actualizar el horario semanal.
El pie de página: informar y conectar los sitios¶
El pie de página, presente en todas las páginas del sitio, no es simplemente una zona técnica. También puede servir como espacio de información, fidelización y trabajo en red.
Las reseñas de Google se integran en él para presentar una selección de comentarios dejados realmente por los visitantes. Esta presencia aporta una dimensión humana al sitio y permite mostrar directamente las experiencias que comparten las personas que frecuentan el centro.
Esta zona ofrece también un botón para que los visitantes puedan dejar ellos mismos una reseña.
El pie de página puede además dar acceso a la suscripción a la newsletter y ofrecer recursos complementarios, como libros electrónicos gratuitos o pódcasts.
Por último, este espacio es un lugar especialmente interesante para crear enlaces hacia los demás centros kadampa del país. Lo ideal sería que los distintos sitios siguieran la misma lógica y se remitieran mutuamente a los demás centros.
Esto crearía una verdadera red de enlaces entre los sitios, útil tanto para los visitantes que quieren descubrir otro centro como para la estructura global de la red. Un enlace al centro nacional también puede integrarse en esta lógica.
Dónde actuar
El pie de página es una plantilla de diseño: consulta la pantalla Diseño. Para ocultar o destacar una reseña de Google: consulta la pantalla Reseñas de Google.
Un diseño que une estética, sencillez y eficacia¶
Todas estas decisiones responden, en definitiva, a una misma lógica: crear un sitio que sea agradable de mirar, sencillo de usar y representativo de la identidad de los centros, y que a la vez sea fácil de hacer evolucionar y de administrar.
El visitante debe poder entender enseguida dónde está, qué se ofrece, cuándo tienen lugar las actividades y cómo ir más allá. Puede elegir consultar directamente una información concreta o, simplemente, dejarse guiar desplazándose por la página.
Al mismo tiempo, la estructura del sitio permite desarrollar un contenido rico, crear enlaces coherentes entre las distintas páginas y entre los distintos sitios, y reforzar poco a poco el posicionamiento en buscadores.
El diseño no está, por tanto, separado de la ergonomía, del contenido ni del posicionamiento: todos estos elementos se han pensado juntos para crear la experiencia de un sitio a la vez moderno, alegre, accesible, fluido y eficaz.