Filosofia e princípios de concepção do site¶
Quisemos conceber um site ao mesmo tempo moderno, alegre, acessível e fácil de usar, coerente com a identidade da nossa tradição. Somos uma tradição de budismo moderno e o nosso caminho é um caminho alegre. O design do site deve, portanto, transmitir essa identidade logo no primeiro olhar: não se trata apenas de apresentar informações, mas de fazer sentir a atmosfera dos nossos centros e dar vontade de conhecê-los.
O site também foi pensado para atender com eficiência às necessidades de dois tipos de visitantes: as pessoas que descobrem o centro pela primeira vez e as que já o frequentam regularmente. Para um novo visitante, o site deve permitir entender rapidamente quem somos, o que oferecemos, para quem são as nossas atividades e que atmosfera ele pode encontrar no centro. Para um frequentador, que já conhece o centro e vem buscar uma informação precisa, ao contrário, ele deve permitir chegar de forma rápida e simples ao que precisa: um horário, um evento, uma aula, o horário semanal, as informações práticas etc.
Toda a concepção do site se apoia, portanto, neste equilíbrio: apresentar e dar vontade aos novos visitantes e, ao mesmo tempo, permitir aos frequentadores encontrar rapidamente a informação que procuram.
Para ver de uma só vez como a página inicial é construída, aqui está um exemplo de página inteira com base no centro de Brighton. Cada seção é detalhada mais abaixo.
Ver toda a página inicial de uma só vez
Uma identidade visual moderna e alegre¶
O laranja foi escolhido como cor principal do site. É uma cor associada à sabedoria e à nossa tradição, mas também permite criar uma identidade visual calorosa e dinâmica.
O tom escolhido é profundo o bastante para garantir um bom contraste com o branco, o que contribui para uma boa legibilidade e para respeitar o máximo possível os princípios de acessibilidade da web. É um meio-termo entre acessibilidade e estética.
Em torno dessa cor principal, definimos uma paleta composta também de azuis, roxos e verdes.
Essa paleta forma uma base comum, deixando ao mesmo tempo certa liberdade aos centros. Um centro como o de Brighton, por exemplo, escolheu o azul como cor principal para se diferenciar de outro centro que já usava o laranja. O essencial é ficar dentro da paleta definida, para manter uma coerência visual com o conjunto dos sites que usam este sistema.
Onde agir
As cores do site explica o princípio da paleta; a tela Cores e a tarefa Mudar as cores do site mostram como configurá-la.
Uma interface simples e fácil de reconhecer¶
O cabeçalho do site foi concebido de propósito de forma muito sóbria. O logotipo do centro aparece no canto superior esquerdo, em branco sobre fundo laranja. No canto superior direito, o botão do menu fica sempre no mesmo lugar.
Escolhemos acompanhar o tradicional ícone “hambúrguer” da palavra “Menu”. Essa escolha deixa mais clara a função do botão e contribui para tornar a navegação mais acessível a todos os públicos.
O menu mantém o mesmo princípio e o mesmo lugar, tanto no computador quanto no celular. Assim, o visitante encontra sempre as mesmas referências, seja qual for o aparelho usado. Essa continuidade torna o uso do site mais homogêneo, simples e intuitivo.
Onde agir
O menu do site explica como o menu é construído; a tela Menu do site e a tarefa Editar o menu mostram como modificá-lo.
Imagens pensadas para funcionar em todo lugar¶
Para facilitar o layout e garantir uma apresentação homogênea em todo o site, escolhemos também padronizar o formato das imagens principais.
O formato das imagens: 1050 × 400 pixels
As imagens usadas no topo da página inicial, das páginas de conteúdo, das páginas de eventos e em diferentes espaços do site são preparadas no formato 1050 × 400 pixels.
Esse formato panorâmico permite valorizar bem a imagem, deixando aparecer rapidamente as primeiras informações que estão logo abaixo.
Essa escolha é especialmente interessante tanto no celular quanto no computador: a imagem continua visível e atraente sem ocupar a tela inteira, o que permite ao visitante chegar rapidamente ao conteúdo.
O uso de um formato fixo também simplifica muito a criação gráfica. Em vez de lidar com imagens exibidas em largura total ou em tela cheia, com restrições de enquadramento diferentes conforme os aparelhos, basta preparar bem a imagem uma única vez.
Depois de enquadrada, ela pode ser usada com segurança nos diferentes lugares do site: imagens principais, próximos eventos, miniaturas e posts do blog. Isso permite obter uma apresentação coerente e, ao mesmo tempo, torna a gestão do dia a dia do site muito mais simples, sem exigir conhecimentos avançados de design gráfico.
A imagem de início: criar uma primeira impressão positiva¶
A imagem no topo da página inicial tem um papel especial. Ela se destina antes de tudo às pessoas que descobrem o site pela primeira vez.
Seu objetivo, portanto, não é apenas ilustrar o centro. Ela deve provocar uma primeira impressão positiva e imediata:
“Olha, parece legal aqui!”
Essa impressão deve ser criada ao mesmo tempo pelo design e pela mensagem transmitida pela imagem. A escolha do visual, do texto e da composição deve dar uma ideia da atmosfera do centro antes mesmo de o visitante começar a consultar as diferentes atividades oferecidas.
Esse primeiro chamariz é também a ocasião de mostrar o que caracteriza a nossa abordagem. Somos uma tradição de budismo moderna e alegre, e os nossos centros podem transmitir essa dimensão logo no primeiro olhar. O humor, a leveza e mensagens vivas têm, portanto, todo o seu lugar nesses visuais.
O objetivo é mostrar uma realidade que os visitantes podem encontrar nos nossos centros: lugares acolhedores, vivos, calorosos e acessíveis. Uma pessoa que ainda não conhece a nossa tradição deve poder pensar na hora:
“Talvez seja um lugar para mim.”
Para facilitar a criação desses visuais, foi desenvolvido um módulo específico que permite compor de forma muito simples uma imagem de início com uma imagem, um texto e um ou mais ícones. O módulo também permite ajustar a apresentação e ver diretamente o resultado no celular.
É possível criar várias imagens de início, que depois poderão ser exibidas de forma aleatória. Assim, uma pessoa que volta ao site pode descobrir um chamariz diferente, o que dá uma impressão de novidade e permite dar vida à página inicial.
Pode ser interessante, por exemplo, criar umas dez imagens ao longo de alguns meses ou de um ano, conforme o tempo que o centro queira dedicar a essa animação. Esse trabalho, portanto, não é apenas decorativo: esse primeiro chamariz é uma das primeiras ocasiões de criar um vínculo com uma pessoa que descobre o centro.
Ver uma imagem antes de publicá-la
O site escolhe ao acaso entre as imagens de início publicadas; uma imagem em rascunho nunca é mostrada aos visitantes. Para avaliar uma nova imagem em condições reais antes de publicá-la, use o botão Ver na página inicial da tela de edição: só você vê então a página inicial com essa imagem.
Onde agir
A tela Imagem de início mostra como compor uma imagem.
Uma página inicial que orienta naturalmente os visitantes¶
Depois desse primeiro chamariz, um título apresenta de forma muito simples as atividades oferecidas pelo centro e lembra que elas estão abertas a todos.
Logo abaixo, uma área de escolha permite ao visitante se orientar rapidamente para os principais conteúdos da página inicial. Ela pode oferecer, por exemplo, entradas para as aulas de meditação, os eventos do fim de semana, as modalidades de assinatura e, em quarto lugar, o acesso à agenda do centro.
Essa última entrada é especialmente importante, porque o calendário costuma estar entre as informações procuradas primeiro pelas pessoas que já conhecem o centro ou simplesmente querem saber o que acontece lá.
Quando o visitante seleciona um desses elementos, ele é levado diretamente à parte correspondente da página inicial. Ali encontra uma apresentação curta da atividade e, depois, pode acessar a página dedicada a ela para obter mais informações.
Essa organização permite, portanto, descobrir as atividades do centro sem ter de passar sempre por um menu. A página inicial se torna um verdadeiro percurso de descoberta: cada um pode ir direto ao que lhe interessa ou simplesmente rolar a página e descobrir aos poucos o conjunto das propostas.
Uma página inicial pensada também para o SEO¶
Essa organização também tem um interesse importante para o posicionamento nos buscadores (SEO).
A página inicial contém conteúdos dedicados às diferentes atividades do centro, com os termos e expressões que correspondem às pesquisas que os internautas podem fazer. Cada apresentação pode depois levar a uma página mais completa dedicada à atividade em questão.
Assim, a página inicial se torna um ponto de partida para os outros conteúdos do site e cria uma rede de links internos coerente.
A mesma estrutura atende, portanto, a vários objetivos: torna a navegação mais intuitiva para os visitantes, enriquece a página inicial com conteúdos úteis e facilita a descoberta das outras páginas do site pelos buscadores.
Mostrar de imediato a vida do centro¶
Logo depois da área de escolha, uma seção apresenta os eventos previstos para os próximos dias. Assim, o visitante pode saber na hora o que acontece hoje e nos dias seguintes, sem precisar abrir a agenda.
O restante da página permite depois descobrir naturalmente outras informações sobre o centro, simplesmente rolando a tela (as modalidades de assinatura mensal, por exemplo).
Onde agir
Essa seção é um bloco “Próximos eventos”: veja a tela Blocos “Próximos eventos” e a tarefa Mostrar os próximos eventos em uma página.
Destacar os professores¶
Um carrossel também permite apresentar os professores e mostrar de imediato os rostos das pessoas que transmitem os ensinamentos.
Na página inicial, a ordem de exibição é de propósito aleatória. A cada visita, os professores podem aparecer em uma ordem diferente, o que torna a apresentação mais dinâmica e permite destacar regularmente professores diferentes.
A página dedicada aos professores adota uma organização diferente. O professor residente é apresentado em primeiro lugar e com uma foto maior. Os outros professores são depois apresentados na ordem escolhida pelo EPC.
Onde agir
Na página dos professores, a ordem é a da lista de professores na administração: veja a tela Professores.
Dar uma visão imediata do horário¶
Mais abaixo na página inicial, o horário semanal das aulas de meditação permite ver de relance a organização das aulas ao longo da semana.
Ele permite distinguir os diferentes momentos do dia, como as aulas da manhã, da hora do almoço e da noite. Assim, o visitante entende muito rapidamente quando acontecem as diferentes sessões.
Se necessário, um segundo calendário também permite apresentar as aulas organizadas nas filiais.
Essa apresentação dá uma visão bem concreta da vida do centro e permite encontrar rapidamente um horário que combine com a disponibilidade de cada um.
Onde agir
A tela Horário semanal e a tarefa Atualizar o horário semanal.
O rodapé: informar e conectar os sites¶
O rodapé, presente em todas as páginas do site, não é apenas uma área técnica. Ele também pode servir de espaço de informação, de fidelização e de conexão em rede.
As avaliações do Google estão integradas ali, para apresentar uma seleção de comentários realmente deixados pelos visitantes. Essa presença traz uma dimensão humana ao site e permite mostrar diretamente as experiências compartilhadas pelas pessoas que frequentam o centro.
Essa área também oferece um botão que permite aos visitantes deixar eles mesmos uma avaliação.
O rodapé pode, além disso, dar acesso à inscrição na newsletter e oferecer recursos complementares, como e-books gratuitos ou podcasts.
Por fim, esse espaço é um lugar especialmente interessante para criar links para os outros centros Kadampa do país. O ideal seria que os diferentes sites adotassem a mesma lógica e remetessem uns aos outros.
Isso criaria uma verdadeira rede entre os sites, útil tanto para os visitantes que querem conhecer outro centro quanto para a estrutura global da rede. Um link para o centro nacional também pode fazer parte dessa lógica.
Onde agir
O rodapé é um modelo de layout: veja a tela Modelos. Para ocultar ou destacar uma avaliação do Google: veja a tela Avaliações do Google.
Uma concepção que une estética, simplicidade e eficiência¶
O conjunto dessas escolhas responde, afinal, a uma mesma lógica: criar um site que seja agradável de ver, simples de usar e representativo da identidade dos centros, sendo ao mesmo tempo fácil de fazer evoluir e de administrar.
O visitante deve poder entender de imediato onde está, o que é oferecido, quando acontecem as atividades e como ir mais longe. Ele pode escolher consultar diretamente uma informação precisa ou simplesmente se deixar guiar rolando a página.
Paralelamente, a estrutura do site permite desenvolver um conteúdo rico, criar links coerentes entre as diferentes páginas e entre os diferentes sites, e reforçar progressivamente o posicionamento nos buscadores.
O design não está, portanto, separado da usabilidade, do conteúdo ou do SEO: todos esses elementos foram pensados em conjunto para criar a experiência de um site ao mesmo tempo moderno, alegre, acessível, fluido e eficiente.