SITIOS WEB: GUÍA PRÁCTICA PARA LOS CLUBES

Transcripción

1 SITIOS WEB: GUÍA PRÁCTICA PARA LOS CLUBES

2 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. 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 10 Botones 11 Imágenes 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.

3 Aspectos básicos Sitios web: Guía práctica para los clubes Enero de 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. 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 Diagramación de la página de inicio Diagramación de la página de contenido 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. Barra lateral: 1/3 del ancho de la página Contenido: 2/3 del ancho de la página Fondo: Gray (#BCBDC0) 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). Encabezado Pie de página

4 Estructura de la página Sitios web: Guía práctica para los clubes Enero de 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 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. 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. Redes sociales Lugar, hora y día de la reunión Anuncio sobre oradores Noticias de Rotary (RSS) Enlaces a Rotary Información sobre el club Enlaces/ botones interactivos Noticias del club/proyectos destacados Navegación interna (si corresponde) Redes sociales Calendario Subscripción al boletín Anuncios de auspiciadores Página de contenido 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. 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

5 Estructura del sitio Sitios web: Guía práctica para los clubes Enero de El contenido del sitio web puede organizarse bajo las siguientes secciones principales: Estructura del sitio Quiénes somos Qué es Rotary? Inicio Participa Noticias y novedades Conózcanos us Qué es Rotary? Participa Noticias y novedades Calendario 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. Información sobre la reunión Historia Contáctanos Comités Cumpleaños y aniversarios* Únete a líderes Intercambia ideas Toma acción Nuestra causa Proyectos y actividades Contribuye Afíliate Sé un voluntario Noticias del cub Artículos Galería de fotos Blog Noticias de Rotary (RSS) Oradores Calendario de eventos Calendario de Rotary 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. 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).

6 Logotipo Sitios web: Guía práctica para los clubes Enero de 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. Logo con el nombre del club en fondo blanco Club Rotario de La Ribera Club Rotario de Ciudad Zabala D-4999 Uruguay Logo con el nombre del club en fondo oscuro Ciberclub Rotario de Los Álamos Sur La Fundación Rotaria Ciudad Rodrigo Recomendaciones sobre espaciamiento y configuración Amplio espacio entre el logro y el nombre del club Logo con el nombre del club en el título de un sitio web Nombre del club largo en dos renglones Nombre del club c entrado verticalmente con el logo 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. 제주 파라다이스 클럽

7 Navegación principal Sitios web: Guía práctica para los clubes Enero de 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. 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

8 Tipografía Sitios web: Guía práctica para los clubes Enero de 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: Open+Sans Si no consigues Open Sans Condensed Bold usa Arial Narrow, preinstalada en la mayoría de las computadoras. Fuentes primarias OPEN SANS CONDENSED BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Página de inicio con Open Sans Condensed Bold y Georgia ARIAL NARROW ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Fuente secundaria Georgia Página de inicio con Arial Narrow y Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 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.

9 Gama cromática Sitios web: Guía práctica para los clubes Enero de 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. Colores del logo Colores del logo #17458F #F7A81B Rotary Royal Blue Rotary Gold Colores primarios #005DAA #01B4E7 Rotary Azure Rotary Sky Blue Color 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 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 secundarios #D91B5C # Cranberry Turquoise # Violet #FF7600 Orange 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 secundarios Colores neutros #58585A # #BCBDC0 #E7E7E8 # #FFFFFF Se recomiendan para secciones y elementos que no es necesario destacar mucho, como navegación, fondos y cuerpo del texto. Charcoal Pewter Smoke Silver Black White Colores neutros 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.

10 Botones Sitios web: Guía práctica para los clubes Enero de 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. Botones primarios Diagramación con botones 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. Por defecto y clic Texto: color #005DAA Fondo: color #F7A81B Hover Texto: color #0077DA Fondo: color #FBC533 Desactivado* Texto: color #005DAA Fondo: color #F7A81B 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 Se usa para acciones importantes pero no necesariamente un llamado a la acción, por ejemplo el botón Contáctanos. Por defecto y clic Texto: color #FFFFFF Fondo: color #005DAA Hover Texto: color #FFFFFF Fondo: color #0077DA Desactivado* Texto: color #FFFFFF Fondo: color #005DAA Opacidad: 50% 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. Botones terciarios 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. Por defecto y clic Texto: color #005DAA Fondo: color #FFFFFF Borde: color #005DAA Hover Texto: color #0077DA Fondo: color #E7E7E8 Borde: color #0077DA Desactivado* Texto: color #005DAA Fondo: color #F7A81B Borde: color #005DAA Opacidad: 50% * 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.

11 Imágenes Sitios web: Guía práctica para los clubes Enero de Nuestras fotos deben centrarse en las conexiones y la comunidad. Los beneficiarios deben verse en plena interacción con los rotarios o como participantes activos en una escena. Al tomar fotografías ten en cuenta estos factores: Poses naturales y espontáneas. Expresiones sinceras. Demonstraciones de liderazgo activo y gran impacto. Ejemplos de imágenes de rotarios Individual Grupos pequeños Grupos grandes Con beneficiarios 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.