sitios web: guía práctica para los clubes

SITIOS WEB:
GUÍA PRÁCTICA
PARA LOS CLUBES
Introducción
Sitios web: Guía práctica para los clubes
Por más de un siglo, Rotary ha congregado a líderes
comprometidos que han puesto sus competencias
profesionales al servicio de la comunidad.
El sitio web es uno de los medios más populares que los
clubes usan para difundir información sobre Rotary y las
obras de bien que realizan entre el público general.
Como parte de la iniciativa para el fortalecimiento de
nuestra marca, pedimos a los clubes que actualicen sus sitios
web a fin de que reflejen la nueva voz e identidad visual de
Rotary. La presente guía contiene pautas básicas que
facilitarán la actualización de sus páginas de manera rápida
y sencilla.
Las pautas incluyen sugerencias para organizar el sitio,
exhibir el logotipo y el nombre del club, seleccionar los
colores y fuentes tipográficas y otros aspectos relacionados
con el diseño de páginas web. Usted podrá adaptar estas
recomendaciones según sea más conveniente para su club.
Para más detalles, consulte la Pautas para la voz y la
identidad visual de Rotary, disponibles en el Brand Center en
Rotary.org/es.
Contenido:
3 Aspectos básicos
4 Estructura de la página
5 Estructura del sitio
6 Logotipo
7 Navegación principal
8 Tipografía
9 Gama cromática
10Botones
11Imágenes
Aspectos básicos
En esta sección encontrarás
recomendaciones para la disposición
y el diseño de los tres componentes
esenciales de una página web:
encabezado, cuerpo y pie de página.
Sitios web: Guía práctica para los clubes
Diagramación de la página de inicio
Diagramación de la página de contenido
Encabezado
Debe figurar el logotipo y el nombre
del club, alineados a la izquierda.
Debajo del encabezado se encuentra
la barra de navegación principal.
Los campos de búsqueda e ingreso
podrían estar en la esquina superior
derecha.
Cuerpo
Para facilitar la navegación, la barra
lateral izquierda debe abarcar un 1/3
del ancho de la página, mientras que
la sección del contenido principal
debe ocupar 2/3 del ancho de la
página. Para que la lectura sea más
legible, recomendamos usar un fondo
blanco.
Si va a utilizar un fondo de color
alrededor de la sección del contenido,
sugerimos el gris medio (#BCBDC0)
para que haya contraste.
Pie de página
Aquí podría incluirse la navegación
de todo el sitio, copyright, política de
privacidad, etcétera. Recomendamos
usar como fondo gris claro (#E7E7E8).
Barra lateral:
1/3 del ancho de la página
Encabezado
Contenido:
2/3 del ancho de la página
Enero de 2015
Fondo:
Gray (#BCBDC0)
Pie de página
3
Estructura de la página
Su sitio web es el espacio perfecto
para dar a conocer el club y difundir
noticias, información y fotografías.
Página de inicio Página de contenido
La página de inicio es el “portal” del
sitio web, por lo que debe comunicar
a los que la visitan por primera vez y
al público general la labor de su club
y las razones para que se unan a su
causa.
Redes
sociales
La página de inicio se presta, además,
para publicar datos importantes,
como el día, la hora, y el local de las
reuniones; novedades, fotografías,
próximos invitados e información
sobre la afiliación. Sugerimos
mantener información específica para
los socios en las páginas de nivel
secundario.
En la columna izquierda podrá
colocarse información general y
anuncios así como noticias sobre
Rotary International y enlaces a la
página de la organización.
En el modelo de la página de
contenido se muestra la diagramación
que se sugiere para contenido de
nivel secundario. Hemos destacado
bloques de contenido, que son
espacios relacionados ya sea con un
encabezamiento, texto o enlaces.
Sirven para organizar información de
manera lógica y directa.
Lugar, hora y día
de la reunión
Anuncio sobre
oradores
Sitios web: Guía práctica para los clubes
Enero de 2015
Página de contenido
Información
sobre el club
Navegación
interna (si
corresponde)
Redes sociales
Calendario
Enlaces/
botones
interactivos
Subscripción al
boletín
Noticias del
club/proyectos
destacados
Anuncios de
auspiciadores
Página de
contenido
Noticias de
Rotary (RSS)
Enlaces a
Rotary
4
Fotos o galerías
de imágenes
Otras secciones en la columna izquierda:
• Funcionarios y directores del club
• Noticias de Rotary (RSS)
• Oradores
• Enlaces a Rotary
Estructura del sitio
El contenido del sitio web puede
organizarse bajo las siguientes
secciones principales:
Sitios web: Guía práctica para los clubes
Enero de 2015
Estructura del sitio
• Quiénes somos
Inicio
• ¿Qué es Rotary?
• Participa
• Noticias y novedades
• Calendario
En el mapa a la derecha figura la
estructura del contenido que se
recomienda dentro de las secciones,
incluidas etiquetas para las
subsecciones.
El mapa del sitio es como un punto
de partida. Pueda que no se necesiten
todas las secciones o subsecciones.
Quizás sean necesarias otras
secciones para publicar contenido
exclusivo del club.
En la sección “¿Qué es Rotary?” se
describiría la labor de Rotary como
organización internacional. Nos
referimos a nuestra labor en términos
específicos: “Únete a líderes”,
“Intercambia ideas”, “Toma acción”.
Dichos conceptos pueden figurar en
una página o más detalladamente en
páginas distintas.
Conózcanos us
¿Qué es Rotary?
Participa
Noticias y novedades
Calendario
Información sobre la
reunión
Únete a líderes
Nuestra causa
Noticias del cub
Oradores
Historia
Intercambia ideas
Proyectos y actividades
Artículos
Calendario de eventos
Contáctanos
Toma acción
Contribuye
Galería de fotos
Calendario de Rotary
Comités
Afíliate
Blog
Cumpleaños y aniversarios*
Sé un voluntario
Noticias de Rotary (RSS)
Descargas*
Directorio*
Funcionarios y directores
del club
Los elementos en bastardillas son etiquetas del menú que podrían seleccionar los clubes.
Los elementos con un * son secciones privadas (solo para socios).
5
Logotipo
El encabezado del sitio debe incluir el
logo de Rotary con el nombre del club.
En estos ejemplos ofrecemos nuestras
recomendaciones de formato,
alineamiento y espaciamiento entre el
logo y el nombre del club.
Sugerimos el uso del color blanco
(#17458F), pero también puedes
elegir (#FFFFFF) con fondo azul royal
Para el nombre y los datos del club se
debe utilizar Open Sans Condensed
Bold, o Arial Narrow (más detalles
sobre fuentes tipográficas en la
página 8). Aunque el tamaño varía
según la extensión del texto, estos
ejemplos indican las proporciones
recomendadas.
Para nombres de club más largos,
además del distrito o información
adicional, recomendamos dividir
el texto en varios renglones y si el
nombre del club es muy largo habrá
que reducir el texto en proporción con
el logo.
Sitios web: Guía práctica para los clubes
Logo con el nombre del club en fondo blanco
Club Rotario de
La Ribera
Ciberclub Rotario de
Los Álamos Sur
Club Rotario de
Ciudad Zabala
D-4999 Uruguay
Logo con el nombre del club en fondo oscuro
La Fundación Rotaria
Ciudad Rodrigo
제주 파라다이스 클럽
6
Recomendaciones sobre espaciamiento y configuración
Amplio espacio entre el logro
y el nombre del club
Nombre del club largo
en dos renglones
Nombre del club c entrado verticalmente
con el logo
Logo con el nombre del club en el título de un sitio web
Club Rotario de Martha
Piura/Tumbes
Para más detalles sobre el uso del
logo, consulta las Pautas para la
voz y la imagen visual de Rotary.
Enero de 2015
Navegación principal
La navegación debe reflejar la
estructura de sitio web (página 5), y
servir de guía a los usuarios por las
distintas secciones.
Sitios web: Guía práctica para los clubes
Enero de 2015
Navegación principal
Sugerimos incluir un conjunto de
enlaces estándar en la barra principal
de navegación, por ejemplo “Quiénes
somos”, “Participa”, y “¿Qué es
Rotary?”
Para la navegación principal
recomendamos usar las fuentes Open
Sans Condensed Bold, o Arial Narrow,
todo en mayúsculas y en negro. Para
fondos recomendamos el gris claro
(#E7E7E8).
Para el estado hover (pasar cursor
sobre el enlace), sugerimos texto
blanco sobre fondo azul (#005DAA).
Si los elementos en la barra de
navegación contienen subcategorías,
recomendamos un menú desplegable.
Menú desplegable
Inactivo
Hover
Selección
7
Tipografía
Para medios digitales, recomendamos
una combinación de fuentes primarias y
secundarias de tamaños variados, para
jerarquizar y facilitar la lectura
Fuentes primarias
Las fuentes primarias se emplean para
títulos y navegación principal y otras
áreas de enfoque primario.
Como fuente primaria recomendamos
Open Sans Condensed Bold. Se puede
descargar gratuitamente de Google
en: www.google.com/fonts/specimen/
Open+Sans
Si no consigues Open Sans Condensed
Bold usa Arial Narrow, preinstalada en la
mayoría de las computadoras.
Los títulos primarios se pueden
componer en mayúsculas para mayor
énfasis. Para subtítulos combina
mayúsculas y minúsculas.
Fuente secundaria
Recomendamos Georgia, para el cuerpo
u otros textos extensos y también
contenido secundario como llamadas o
pies de foto.
Para más detalles sobre fuentes
tipográficas consulta las Pautas
para la voz y la imagen visual de
Rotary.
Sitios web: Guía práctica para los clubes
Fuentes primarias
OPEN SANS
CONDENSED BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Enero de 2015
8
Fuente secundaria
ARIAL NARROW
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Página de inicio con Open Sans Condensed Bold y Georgia
Página de inicio con Arial Narrow y Georgia
Gama cromática
La gama cromática de Rotary ayuda
a jerarquizar y resaltar ciertas áreas
del sitio. Esta gama se compone de
los colores del logo y los grupos:
primarios, secundarios y neutros.
Sitios web: Guía práctica para los clubes
Colores del logo
Colores primarios
#17458F
#F7A81B
#005DAA
#01B4E7
Rotary Royal Blue
Rotary Gold
Rotary Azure
Rotary Sky Blue
Enero de 2015
Color del logo
Colores del logo
Recomendamos un uso muy limitado
de estos colores fuera del logo
propiamente dicho. Por ejemplo:
emplea los colores del logo para un
botón especial de llamado a la acción.
Colores primarios
Se recomienda el Rotary Azure para
los títulos, menús desplegables y otras
secciones principales del sitio. Se
puede usar Rotary Sky Blue junto con
Rotary Azure para las secciones que
deben resaltarse más.
Colores primarios
Colores secundarios
#D91B5C
#009999
#872175
#FF7600
Cranberry
Turquoise
Violet
Orange
Colores secundarios
Colores secundarios
Recomendamos estos colores para
destacar elementos como alertas y
gráficas del sitio por contraste con los
colores primarios pero no en lugar de
los mismos.
Colores neutros
Colores neutros
#58585A
#919295
#BCBDC0
#E7E7E8
#000000
#FFFFFF
Charcoal
Pewter
Smoke
Silver
Black
White
Se recomiendan para secciones
y elementos que no es necesario
destacar mucho, como navegación,
fondos y cuerpo del texto.
Los botones están ligados a diversas
funciones o acciones que debe
realizar el usuario, como contribuir,
contactar, buscar, enviar, registrarse,
mientras que los enlaces llevan al
contenido correspondiente.
Colores neutros
9
Botones
Los botones están ligados a diversas
funciones o acciones que debe
realizar el usuario, como contribuir,
contactar, buscar, enviar, registrarse,
mientras que los enlaces llevan al
contenido correspondiente.
Recomendamos tres estilos de
botones según el tipo de acción para
el que se usarán. Puedes usar el
estilo y color que mejor que mejor se
adapten a tu sitio.
Sitios web: Guía práctica para los clubes
Botones primarios
Por defecto y clic
Texto: color #005DAA
Fondo: color #F7A81B
Opacidad: 100%
Diagramación con botones
Hover
Texto: color #0077DA
Fondo: color #FBC533
Opacidad: 100%
Desactivado*
Texto: color #005DAA
Fondo: color #F7A81B
Opacidad: 50%
Hover
Texto: color #FFFFFF
Fondo: color #0077DA
Opacidad: 100%
Desactivado*
Texto: color #FFFFFF
Fondo: color #005DAA
Opacidad: 50%
Hover
Texto: color #0077DA
Fondo: color #E7E7E8
Borde: color #0077DA
Opacidad: 100%
Desactivado*
Texto: color #005DAA
Fondo: color #F7A81B
Borde: color #005DAA
Opacidad: 50%
Primarios
Este estilo de botones debe reservarse
para las acciones más importantes
de la página, por ejemplo, para
contribuir, registrarse como miembro
o voluntario.
Botones secundarios
Secundarios
Por defecto y clic
Texto: color #FFFFFF
Fondo: color #005DAA
Opacidad: 100%
Se usa para acciones importantes
pero no necesariamente un llamado
a la acción, por ejemplo el botón
“Contáctanos”.
Terciarios
Se utiliza cuando el usuario debe
decidir entre dos acciones o para una
acción más utilitaria, por ejemplo la
función Buscar o Cancelar.
Para el texto del botón se debe usar
Sans Condensed Bold o Arial Narrow,
todo en mayúsculas. Para mejor
legibilidad, dejar suficiente espacio
entre el texto y el borde.
Botones terciarios
Por defecto y clic
Texto: color #005DAA
Fondo: color #FFFFFF
Borde: color #005DAA
Opacidad: 100%
Enero de 2015
* Estado desactivado: botón que no se activa hasta terminar la tarea, por ejemplo cuando se rellena un
formulario de inscripción o se ingresan los datos de pago para una contribución.
10
Imágenes
Sitios web: Guía práctica para los clubes
Nuestras fotos deben centrarse en las
conexiones y la comunidad.
Ejemplos de imágenes de rotarios
Los beneficiarios deben verse en plena
interacción con los rotarios o como
participantes activos en una escena.
Individual
Grupos pequeños
Enero de 2015
Grupos grandes
11
Con beneficiarios
Al tomar fotografías ten en cuenta estos
factores:
• Poses naturales y espontáneas.
• Expresiones sinceras.
• Demonstraciones de liderazgo activo y
gran impacto.
• Momentos especiales de
compañerismo, amistad y celebración.
Instantáneas
Lugares
Metafóricas/conceptuales
No utilices
Para más detalles, consulta las
Pautas para la voz y la imagen
visual de Rotary.
Imágenes con mala iluminación.
Escenas con poses forzadas o
estereotipadas.
Imágenes en las que los retratados no
muestran mayor interés en su actividad o
miran en dirección opuesta a la cámara.
Imágenes con elementos desproporcionados o
de baja resolución.