Guia para Websites de Clubes

O website do seu clube é o veículo ideal para transmitir informações e divulgar nosso trabalho não apenas aos rotarianos, mas também ao público externo.

Por isso, estamos pedindo que utilizem nossa nova identidade visual em seus websites com o objetivo de fortalecer ainda mais a nossa marca.

Neste guia você encontra recomendações para estruturar seu website, usar nosso logo junto com o nome do clube, selecionar cores e fontes, e muito mais. Fica a seu critério decidir o que funciona para seu site e como utilizar nossas sugestões para o seu clube.

Apesar de nossas diretrizes serem voltadas a websites de clubes, elas podem ser adaptadas para sites de distritos, zonas, regiões, entre outros.

Conteúdo

 3 Inspiração

 4 Aspectosfundamentais

 5 Organizaçãodapágina

 6 Estruturadosite

 7 Logo

 8 Navegação

 9 Tipografia

10 Cores

11 Botões

12 Imagens

Introdução Guia para Websites de Clubes

Guia para Websites de Clubes Setembro de 2016 3Inspiração

Ao criar um site para seu clube, busque inspiração em Rotary.org. Nós atualizamos o website para dar destaque ao impacto, alcance e relevância da nossa organização em todo o mundo. Com essa revitalização, queremos divulgar os pontos fortes da marca Rotary: pessoas de iniciativa que trabalham juntas para fazer a diferença.

Veja a seguir algumas maneiras fáceisdeincluirelementossemelhantes no design do seu website:

Divulgue seu trabalho: use imagens e vídeos que mostrem rotarianos trabalhando juntos e se divertindo enquanto causam mudanças positivas na comunidade.

Preze pela simplicidade: as pessoas geralmente apenas dão uma olhada geral em webistes. Para garantir que as mensagens mais importantes sejam vistas, estruture as informações de forma clara e produza textos fáceisdeentender.

Incluaumchamadoàação:incentive os visitantes do site a fazerem doações, participarem detrabalhovoluntáriooumesmo expressarem interesse em entrar para o clube com a inclusão de botões ou chamados clarosàação.

Meu Rotary (sem fazer o login) Notícias e destaques

Guia para Websites de Clubes Setembro de 2016 4

Barra lateral:1/3 da página

Conteúdo principal:2/3 da página

Barra lateral:1/3 da página

Conteúdo principal:2/3 da página

Aspectos fundamentais

Veja aqui nossas recomendações quanto ao posicionamento e design dos principais elementos dapágina:cabeçalho,conteúdoe rodapé.

CabeçalhoO cabeçalho deve englobar o nosso logo e o nome do clube do ladoesquerdodapágina.

Abaixoficaabarradenavegaçãoprincipal(consulteapágina8paramaisdetalhes).Aferramenta de busca e o link paraologinpodemficarnapartesuperior,àdireita.

ConteúdoParaqueanavegaçãosejafácil,abarralateral(àesquerdaouàdireita)deveocupar1/3dapágina.Oespaçorestante(2/3)deve exibir o conteúdo principal. Sugerimos um fundo branco para facilitar a visualização.

RodapéO rodapé pode conter os elementos de navegação, assim como informações sobre direitos autorais, política de privacidade, etc.

Exemplo de layout — homepage

Exemplo de cabeçalho Exemplo de rodapé

Exemplo de layout — conteúdo

Guia para Websites de Clubes Setembro de 2016 5Organização da página

Seu website é o local ideal para apresentar o clube e divulgar notícias, histórias e fotos.

A homepage é a “porta de entrada” do site e deve transmitir claramente aos novos visitantes e ao público em geral o que o clube faz e porque as pessoas devem se envolver com ele.

Você também pode dar destaque àsinformaçõesmaisimportantesna homepage, como dias, locais ehoráriosdasreuniões,históriase fotos recentes, próximos palestrantes e o processo para seassociar.Nãoérecomendávelcolocar informações detalhadas voltadas para associados na homepage.

A barra lateral é um local útil para informações e avisos gerais, assim como links e notícias sobre o Rotary.

Nosso exemplo de conteúdo mostraumlayoutparapáginasmaisespecíficas,queficamemcamadas inferiores do site. Nós destacamos grupos de conteúdo ao lado, alguns com título, texto oulinks.Elessãoumaformaobjetiva e lógica de organizar as informações no seu site.

Opções alternativas para a barra lateral:

•Executivosediretoresdoclube•RotaryNews(RSS)• Palestrantes•LinksdoRotary

Links de redes sociais

Apresentação do clube

Links/botões para interagir com os visitantes

Navegação local (se for o caso)

Conteúdo da página

Links de redes sociais

Mini calendário

Assinatura de boletim

AnunciantesNotícias e/ou projetos de destaque do clube

Foto ou galeria de fotos

Palestrantes de reuniões

Local, horário e dia das reuniões

Rotary News (RSS)

Links do Rotary

Exemplo de homepage Exemplo de conteúdo

Guia para Websites de Clubes Setembro de 2016 6Estrutura do site

O conteúdo do site pode ser estruturado com base nas seções abaixo:

• Nosso clube

• Conheça o Rotary

•Envolva-se

• Notícias e atualidades

•Calendário

O mapa do site ao lado mostra uma sugestão para estrutura do conteúdo de cada seção.

Use este modelo como ponto departida.Talvezvocênãoprecise de todas estas seções e subseções, ou tenha que adicionar outras opções mais específicasaoseuclube.

A seção “Conheça o Rotary” é ideal para falar sobre o aspecto global da nossa organização. Você pode incluir um panorama sobre o Rotary, as causas pelas quais trabalhamos e informações sobreaFundaçãoRotária.Estestópicos podem ser mencionados namesmapáginaouabordadosde forma mais aprofundada separadamente.

Home

Notícias e atualidades Calendário

Notícias do clube Palestrantes

Artigos Eventos

Galeria de fotos CalendáriodoRotary

Conheça o Rotary

Blog

RotaryNews(RSS)

Nosso clube

Downloads*

Diretório*

Executivosediretores do clube

Local,diaehoráriodasreuniões

História

Contato

Comissões

Aniversários*

Envolva-se

Causaespecífica

Projetos

Doe

Associe-se

Torne-sevoluntário

Itenscom*indicamáreasprotegidasporsenha(apenasparaassociados).

Exemplo de estrutura do site

Panorama

Nossas causas

FundaçãoRotária

Guia para Websites de Clubes Setembro de 2016 7

Para mais informações, consulte nosso Guia de Identidade Visual, disponível no Brand Center.

O cabeçalho do site deve mostrar o logo do Rotary ao lado do nome do clube. Nossos exemplos mostram recomendações de formato, alinhamento e espaçamento entre os dois elementos.

Sugerimos um fundo branco com textoemazulreal(#0C3C7C),mas você também pode optar pelo formato reverso, com o textoembranco(#FFFFFF)eofundo azul.

A fonte usada para o nome e as informações do clube deve ser a Open Sans Bold (consulteapágina9paramaisdetalhes).Otamanhopodevariardependendo do volume de texto, mas estes exemplos mostram as proporções recomendadas.

No caso de nomes compridos de clubes e informações adicionais, como nº do distrito, divida o texto em duas ou mais linhas. Se o nome for muito grande, talvezsejanecessáriodiminuiro tamanho do texto em relação ao logo.

Estesexemplosdecabeçalhodevem ser usados somente no seu website. Para mais detalhes sobre o assunto, consulte o Guia deIdentidadeVisualcompletoqueestádisponívelnoBrandCenter.

Cabeçalho

Nomes compridos em duas linhas

O nome do clube deve estar justificado no lado esquerdo e alinhado ao logo

Amplo espaço entre o logo e o nome do clubeClub de

Curitiba

Club de São Paulo D4610 Brasil

E-club do 4420

Exemplo de logo com o nome do clube em fundo branco

Exemplo de logo com o nome do clube em fundo azul

Recomendações de espaçamento e alinhamento

Exemplo de logo com nome de clube em cabeçalho de website

Club de São José do Rio Preto Novas Gerações

Club de Vila Nova de Gaia

Club de Belo Horizonte

Guia para Websites de Clubes Setembro de 2016 8Navegação principal

A barra de navegação se baseia naestruturavistanapágina6eguiaosusuáriosàsváriaspartesdo site.

Sugerimos o uso de links padronizados em uma barra de navegação, como no exemplo ao lado(Nossoclube,Envolva-se,ConheçaoRotary,etc).

Para a barra de navegação, recomendamos a fonte Open Sans Bold em cinza escuro (#5E717D),comofundoemcinzaclaro.(#F8F9FA).

MenusQuando as abas da barra de navegação contiverem subcategorias, recomendamos um menu que se expanda parafazercomqueousuárioencontre facilmente as informações do site.

Exemplo da barra de navegação principal

Exemplo de menu

Guia para Websites de Clubes Setembro de 2016 9Tipografia

Exemplo de página com a Open Sans

Open Sans LightOpen Sans RegularOpen Sans BoldOpen Sans ItalicABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Recomendamos a fonte Open Sans, que pode ser usada em váriospesosetamanhosparacriar uma hierarquia e aumentar a legibilidade.

Para o título principal, sugerimos a OpenSansLight.

Jáparatítulossecundários,navegação principal e outras áreasqueexigemmaiorênfase,recomendamos a Open Sans Bold.

Paraáreasdebastantetexto,comoocorpodapágina,useaOpenSansRegular.

Para baixar a Open Sans gratuitamente, acesse: www.google.com/fonts/specimen /Open+Sans

h1 Headlineh2 Headlineh3 HeadlineH3 HEADLINE ALTERNATIVE h4 Headline

Body text

Pesos da Open Sans

Exemplo de hierarquia

Guia para Websites de Clubes Setembro de 2016 10Cores

Cores primárias

Sky Blue #019FCB

Royal Blue #0C3C7C

Cores secundárias

Cranberry #C10042

Violet #872175

Turquoise #018D8DAzure #0050A2

Cores de ação

Cranberry #C10042

Cranberry #C10042

Sky Blue # 019FCB

Sky Blue #019FCB

Cores neutras

Light Gray #F8F9FA

Dark Gray #5E717D

Steel Blue #263B4C

Gold #F7A81B

Nossa paleta de cores ajuda a estabelecer a hierarquia dos elementos visuais e a chamar aatençãoparacertasáreasdosite.Elaéformadaporcoresprimárias,secundárias,deaçãoe neutras.

Para criar um contraste mais forte na tela e atender aos padrões de acessibilidade doWCAG2.0,oscódigoshexadecimais são levemente diferentes dos contidos no Guia deIdentidadeVisualdoRotary.

Cores primáriasAs principais cores do Rotary podem ser usadas em todo o site paradefinirotomgeral.

Cores secundáriasAscoressecundáriaspodemser usadas para dar ênfase, diferenciar o conteúdo e fazer com queelementosrepetidosfiquemmais atraentes em termos visuais.

Cores de açãoEstascoressãousadasparachamaraatençãodousuáriodo site para ações e elementos importantes.

Cranberryéacorprimáriaindicada para botões. Sky Blue é acorsecundáriaparabotõeseindicada para links no texto.

Cores neutrasCores neutras claras e escuras são usadas para separar conteúdo e criar contraste entre diferentes elementos.

Guia para Websites de Clubes Setembro de 2016 11Botões

Os botões são usados quando oobjetivoélevarousuárioaumaaçãoespecífica(doar,entrar em contato, fazer uma busca)–diferentedoslinks,que simplesmente levam a conteúdos relacionados.

Recomendamos dois estilos de botões, cada um para um determinado tipo de ação. No entanto, você pode escolher os estilos e cores que melhor se encaixam ao seu site.

Estilo primárioReservado para as principais açõesdapágina,como“façaumadoação”,“sejavoluntário”,etc.

Estilo secundárioUsado para ações importantes, mas não as principais, por exemplo, “fale conosco”.

Use Open Sans Bold para o texto dosbotões(emmaiúsculo).Paracontribuiràvisibilidade,oespaçoentre o texto e as bordas do botão deve ser amplo.

Estilo primário Exemplo de layout com botão

Estilo secundário

* Desativado: quando não é possível clicar um botão até que uma certa tarefa seja concluída, por exemplo ao fornecer informações para uma inscrição ou doação.

AtivadoCor do texto: #FFFFFFCor do fundo: #C10042

MAKE A DONATION

AtivadoCor do texto: #FFFFFFCor do fundo: #019FCB

MAKE A DONATION

Mouse sobre o botãoCor do texto: #019FCBCor do fundo: #FFFFFFBorda de 1px: #019FCB

MAKE A DONATION MAKE A DONATION

Desativado*Cor do texto: #FFFFFFCor do fundo: #BCBDC0

Mouse sobre o botãoCor do texto: #FFFFFFCor do fundo: #C10042

CONTACT US

AtivadoCor do texto: #C10042Cor do fundo: #FFFFFFBorda de 1 px: #C10042

CONTACT US CONTACT US

Desativado*Cor do texto: #BCBDC0Cor do fundo: #FFFFFFBorda de 1px: #BCBDC0

Mouse sobre o botãoCor do texto: #FFFFFFCor do fundo: #019FCB

CONTACT US

AtivadoCor do texto: #019FCBCor do fundo: #FFFFFFBorda de 1 px: #019FCB

CONTACT US CONTACT US

Desativado*Cor do texto: #BCBDC0Cor do fundo: #FFFFFFBorda de 1px: #BCBDC0

Mouse sobre o botãoCor do texto: #C10042Cor do fundo: #FFFFFFBorda de 1px: #C10042

MAKE A DONATION

Desativado*Cor do texto: #FFFFFFCor do fundo: #BCBDC0

MAKE A DONATION

Guia para Websites de Clubes Setembro de 2016 12

Para mais informações, consulte nosso Guia de Identidade Visual.

Imagens

Um rotariano Grupos pequenos Grupos grandes

Escolheroestiloeocontextocorretos de suas fotos é muito importante. De modo geral, recomendamos imagens que passem a ideia de conexões e comunidade.

Quandomostrarbeneficiáriosdeprojetos do seu clube, use fotos nas quais eles estejam interagindo ativamente com rotarianos.

Ao fotografar ou escolher fotos, busque:

• Poses naturais e espontâneas

•Expressõessinceras

• Demonstrações de liderança atuante e impacto

•Momentosespeciaisdecompanheirismo, amizade e celebração.

Quando fotografar rotarianos ou beneficiários,nãoseesqueçadeobter deles permissão para usar suas imagens no seu website.

Pessoas

Exemplo de imagens de rotarianos

Locais Meta Metafóricas/Conceituais

Combeneficiários

O que não fazer

Não use imagens escuras, com pouca iluminação.

Não use poses forçadas ou imagens que transmitam estereótipos.

Não use imagens de pessoas que pareçam desengajadas ou que não estejam olhando para a câmera.

Não distorça as proporções ou use imagens de baixa resolução.