Manual de estilo - Sitio Web by Anelisa Castillo

IND ICE

Introducción

Capítulo I

Capítulo II

Perﬁl Institucional

Proyecto Realizado

Historia Misión Visión

08 08 08

Problemática Solución Concepto

Capítulo III

Capítulo IV

Sitio Web

Interactividad

Mapa de Navegación Formato Retícula Márgenes Tipografía Color Imágenes y Fotografías Elementos Gráficos

12 13 14 17 18 19 33 39

10 10 10

Botones Animación Software

46 52 58

Conclusión

Introducción El presente manual de estilo fue diseñado y organizado con la finalidad de explicar detalladamente cada uno de los pasos a seguir para la realización y ejecución fiel del Sitio Web sobre la Fundación Planeta Tierra. Los puntos estipulados a continuación abarcan el diseño en su totalidad, de modo que se pueda mantener la línea gráfica del proyecto en todo momento. Es importante resaltar que en este manual sólo se encuentran los lineamientos para reproducir fielmente el Sitio Web. En el caso de la identidad de la Fundación, se siguieron las pautas estipuladas originalmente por el manual corporativo de la Fundación. Para la realización de cualquier cambio o actualización dentro del Sitio, es necesaria la consulta de esta guía, debido a que se encuentra explicado y detallado desde cero el proceso para la realización del mismo. Es por ello, que de ser necesaria la creación del Sitio Web desde el principio, es recomendable no saltarse ninguno de los puntos.

Manual de Estilo

Perfil Institucional Historia Misiรณn Visiรณn

Manual de Estilo

1. Historia La Fundación Planeta Tierra inicia en el año 2008, gracias a la inquietud de un grupo de personas en la que se encontraban varios jóvenes, preocupados por la devastación que sufre en la actualidad nuestro planeta. Desde entonces, quedaron establecidas las metas y el sistema de trabajo para lograr los objetivos propuestos. La Fundación Planeta Tierra es una organización sin fines de lucro, que tiene personalidad jurídica y sus objetivos son de interés colectivo. Con la participación de todos los integrantes se estableció que el trabajo se enfocaría en los niños y adolescentes, pues ellos son los herederos de lo bueno y lo malo del mundo. Así se concretó el objetivo principal de la fundación: crear conciencia.

2. Misión La Fundación Planeta Tierra tiene objetivos específicos enfocados en la creación de conciencia en niños y adolescentes. La misión es crear conciencia sobre el deterioro que sufre el planeta, tomando en cuenta que son los niños y jóvenes adolescentes quienes van a heredarlo. De aquí que el eslogan de la fundación sea: «Crear conciencia sin producir estrés».

3. Visión La visión de la fundación es avanzar en la toma de conciencia en niños y adolescentes para que sean ellos los que influyan en los adultos, lleven el mensaje y lo propaguen.

Manual de Estilo

Proyecto Realizado Problemรกtica Soluciรณn Concepto

1. Problemática La Fundación Planeta Tierra es una organización sin fines de lucro, dedicada a la realización de charlas principalmente enfocadas en la generación de conciencia en los niños y adolescentes, resaltando las consecuencias positivas y negativas que tienen nuestros actos sobre el planeta. Esta Fundación no cuenta con muchos recursos financieros, por lo que necesitaba una forma de enviar su mensaje, así como darse a conocer a la mayor cantidad de personas posible, a través de un medio que resultara económico y eficaz para la misma.

2. Solución Tomando en cuenta los beneficios de los medios digitales, así como los bajos costos de mantenimiento, se propuso la creación de un Sitio Web, en donde se mostrará toda la información referente a la Fundación, de modo que los usuarios puedan conocer más sobre ellos como organización de una forma dinámica.

3. Concepto El concepto gráfico manejado se basa en la utilización de formas curvas, así como de texturas que se encuentran en el ambiente, de modo que el usuario se vea inmediatamente identificado con la temática ambiental al momento de ingresar al Sitio Web, y mientras navega por este. Para cada una de las secciones fue aplicada una textura y un color distintos, permitiendo al usuario diferenciar fácilmente entre cada una de ellas.

Manual de Estilo

Sitio Web Mapa de Navegación Formato Retícula Márgenes Tipografía Color Imágenes y Fotografías Elementos Gráficos

Manual de Estilo

1. Mapa de Navegación El Sitio Web de la Fundación Planeta Tierra posee un mapa de navegación mixto. De primera mano se presenta una navegación jerárquica, la cual permite el acceso desde el menú principal a las distintas secciones del sitio. Seguidamente se utilizo una navegación en estrella, la cual lleva al usuario a acceder a cada una de las secciones, para poder ingresar después a cada uno de los submenú correspondientes a las distinas secciones del sitio. Historia Misión y Visión

Leyenda:

Fundación

Menu Principal

Objetivos y Funciones Reciclaje en Colegios

Secciones

Proyectos

Sub-menú

Labor Social Act. Corporativas

Consejos

Huerto Escolar Proteger el Ambiente

Inicio Galería

Campaña de Reciclaje Reciclaje en Colegios

Enlaces

Labor Social Act. Corporativas

Contacto

Enlaces Alianzas

Manual de Estilo

1200px

2. Formato

700px

El formato empleado es de 1200px de ancho por 700px de alto. Esto le permitirรก al usuario una correcta visualizaciรณn del Sitio independientemente del monitor en donde lo visualice.

Manual de Estilo

3. Retícula Para la realización del Sitio Web, fueron empleadas dos retículas, una formal y una modular, de modo que se tuvieran mayores posibilidades de diagramación.

3.1 Retícula Formal

77,5px 93,4px

La retícula formal está compuesta por doce columnas y seis filas, con un medianil de 15px, de modo que todos los elementos tengan suficiente aire al momento de diagramarlos dentro del sitio.

15px

Manual de Estilo

3.2 Retícula Modular Está compuesta por 53 modulos, los cuales tienen un ancho de 27,5px, y provienen de un círculo cuyo diámetro es de 2520px. Fue utilizada para la diagramación de todos los menús que se encuentran en el sitio, así como para la sección de Galería.

27,5px

700px

El alto de la curva es de 1080px, para que en caso de que el sitio se visualice en un monitor de mayor tamaño, estos elementos no se corten. Sin embargo, el tamaño estándar es de 700px.

1080px

Manual de Estilo

2520px 720px

La curva utilizada para el módulo de la retícula proviene de un círculo cuyo diámetro corresponde a 2520px. Los 1080px de altura de la misma, se tomaron a partir de los 720px del alto del círculo.

Manual de Estilo

4. Mรกrgenes El mรกrgen superior corresponde a 50px, el derecho y el izquierdo a 150px, y el inferior a 90px. Todos fueron planteados de modo que los elementos del sitio no se corten y tengan buena visibilidad independientemente de la pantalla.

50px

150px

90px

150px

Manual de Estilo

5. Tipografía En cuanto a la elección tipográfica para el Sitio Web, se decidió utilizar dos fuentes que se complementaran con el diseño y la temática de la Fundación, y a la vez generaran contraste entre si, de forma que el usuario pueda diferenciar entre los distintos tipos de información que se presentan. La fuente Amaranth, diseñada por Gesine Todt, la cual es una fuente web que posee una morfología con un diseño cursivo amistoso y un ligero contraste con curvas distintivas, resulto ideal para la composición de todos los títulos y subtítulos, debido a que le da un toque humanista al sitio. Por otro lado, está la fuente Lato, esta es una tipografía Sans Serif para web, diseñada por Łukasz Dziedzic. Sus detalles semiredondeados de las letras transmiten una sensación cálida, mientras que su estructura sólida proporciona estabilidad y seriedad; fue utilizada para los textos corridos, ya que con sus trazos mas geométricos, puede ser leída fácilmente.

Manual de Estilo

Lato Regular

Amaranth Regular

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890¿?¡!()/&%$#=”+-´’{}.:;,

ABCDEFGHIJKLMNÑOPQRSTUV W X YZ abcdefghijklmnñopqrstuvwxyz 1234567890¿?¡!()/&%$#=”+-´’{}.:;,

Lato Light

Amaranth Bold

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890¿?¡!()/&%$#=”+-´’{}.:;,

Lato Bold

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890¿?¡!()/&%$#=”+-´’{}.:;, Lato Italic

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890¿?¡!()/&%$#=”+-´’{}.:;,

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.1 Inicio Para los textos del menú principal, se empleó la tipografía Amaranth en su versión Bold, con un puntaje de 28pts, un track de 5 y una alineación a la derecha. Estos títulos sólo se muestran al momento en que el usuario hace «Rollover» por cada uno de los botones de las secciones.

En el caso del lema de la fundación, también fue utilizada la tipografía Amaranth, en su versión Regular, a 33pts. Por último, para el texto introductorio, se utilizó la fuente Lato, en su versión Light, a 19pts, con una alineación a la izquierda.

Menú Principal: 1. Amaranth 2. Bold 3. 28pts. 4. n/t 5. 5 6. Alta 7. Blanco 8. A la derecha

Lema: 1. Amaranth 2. Regular 3. 33pts. 4. n/t 5. n/t 6. Alta y baja 7. Blanco 8. A la derecha

Texto Corrido: 1. Lato 2. Light 3. 19pts. 4. 25 5. 0 6. Alta y baja 7. Blanco 8. A la izquierda

a b

c 20

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.2 Menú Interno Para el menú interno fue utilizada la fuente tipográfica Amaranth en altas con su versión Bold, a 18pt con un tracking de 10. Estos se encuentran alineados a la derecha, y son visibles únicamente cuando el usuario hace «Rollover» sobre cada uno de los diferentes botones, utilizados para diferenciar las secciones del sitio.

Manual de Estilo

a a

1. Amaranth 2. Bold 3. 18pts 4. n/t 5. 10 6. Alta 7. Blanco 8. A la derecha

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Orientación 9. Alineación

5.3 Sub-menú Por medio del menú principal o el menú interno, el usuario puede acceder a los sub-menú de cada una de las secciones del Sitio Web. Para el titulo de la sección fue utilizada la fuente tipográfica Amaranth, en su versión Bold, a 34pt de puntaje, con un tracking de 30 y una orientación vertical, adaptada a la curva del contenedor, alineado a la mitad con la segunda sección del sub-menú. Para las sub-secciones del sub-menú, fue utilizada la tipografía Amaranth, en su versión Bold a 24pt, con un track de 20, alineado a la derecha.

a a

Título de Sección: 1. Amaranth 2. Bold 3. 34pts. 4. n/t 5. 30 6. Alta 7. Blanco 8. Vertical 9. A la derecha

Sub-menú: 1. Amaranth 2. Bold 3. 24pts. 4. n/t 5. 20 6. Alta y baja 7. Blanco y Gris* 8. Horizontal 9. A la derecha

*Todos los textos del sub-menú en su estado de «Reposo» se presentan en color blanco, pero al momento de que el usuario haga «Rollover» o este botón se encuentre en estado «Activo», se mostrarán de color gris. R:70% G:70% B:70%

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.4 Título del Texto Corrido Se utilizó la tipografía Amaranth en su versión Bold, y se encuentra alineado a la derecha con respecto a la primera columna del texto corrido. Este posee un puntaje de 19pt, con 0 de track, y un interlineado de 120%.

Historia Actividades de reciclaje en los colegios ¿Cómo construir un huerto escolar? Programas de Labor Social Enlaces de interes

1. Amaranth 2. Bold 3. 19pts 4. 120% 5. 0 6. Alta y baja 7. * 8. A la derecha

*El color del título siempre será el mismo que el color de la sección en la que se encuentra. R: 13%

G: 107%

B: 200%

R: 84%

G: 179%

B: 0%

R: 255% G: 165%

B: 0%

R: 209% G: 84%

B: 0%

R: 125%

B: 22%

G: 26%

R: 136% G: 133%

B: 0%

Contacto

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.5 Texto Corrido Se utilizó la tipografía Lato en su versión Regular, con un ancho de 3 columnas. Posee un puntaje de 13pt, con 0 de track, y un interlineado de 130%. Se encuentra alineado a la izquierda en bandera.

Texto Corrido: 1. Lato 2. Regular 3. 13pts 4. 130% 5. 0 6. Alta y baja 7. Negro 8. A la izquierda

Numeración: 1. Lato 2. Black 3. 13pts 4. 130% 5. 0 6. n/a 7. * 8. A la izquierda

La Fundación Planeta Tierra inicia en el año 2008, gracias a la inquietud de un grupo de personas en la que se encontraban varios jóvenes, preocupados por la devastación que sufre nuestro planeta. • Crear conciencia en niños y adolescentes acerca de la protección de la capa de ozono. b

1) Crear campañas que apoyen y refuerzen la reforestación.

*En el caso de los bullets y la numeración, estos siempre adaptarán el color de la sección en la que se encuentran.

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.6 Cita Para la cita se empleó la tipografía Lato en su versión Italic, con un puntaje de 17pts y una alineación a la derecha. El autor de la misma se encuentra en su versión Regular y con un puntaje de 11pts, también alineado a la derecha.

Cita: 1. Lato 2. Italic 3.17pts. 4. 120% 5. 0 6. Alta y baja 7. * 8. A la derecha

Autor: 1. Lato 2. Regular 3.13pts. 4. 120% 5. 0 6. Alta y baja 7. * 8. A la derecha

«La suprema realidad de nuestro tiempo es la vulnerabilidad de nuestro planeta» John F. Kennedy

«Si supiera que el mundo se acaba mañana, yo hoy todavía plantaría un árbol» Martin Luther King

Manual de Estilo

*El color de ambos fue extraído con la herramienta de «Gotero», de la textura perteneciente a la sección.

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.7 Pie de Página Éste se encuentra conformado por un ancho de seis columnas, a la derecha del sitio web, y se realizó con la tipografía Lato en su versión Regular, con un puntaje de 9,5pts y una alineación a la izquierda.

a a

1. Lato 2. Regular 3. 9,5 pts. 4. n/t 5. 5 6. Alta y baja 7. R: 89% G: 90% B: 92% 8. A la izquierda

Manual de Estilo

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

5.8 Otros

Pie de Foto: 1. Lato 2. Regular 3. 12pts. 4. 130% 5. 0 6. Alta y baja 7. Negro 8. A la derecha

Contador de Galería 1. Lato 2. Bold 3. 11pts. 4. n/t. 5. 0 6. n/a 7. R: 235% G: 102% R: 255% G: 130% R: 255% G: 175% 8. A la derecha

Miembros de la Imprenta Caracas print y la Fundación Planeta Tierra luego del intercambio.

1-4 1-4 1-4 B: 0% B: 0% B: 80%

Subtítulos de Enlaces y Alianzas: 1. Amaranth 2. Bold 3. 16pts. 4. n/t. 5. 0 6. Alta y baja 7. R:125% G:26% B:22% 8. A la izquierda

Links de los Link: www.tierraviva.org Enlaces y Alianzas: 1. Lato Link: www.tierraviva.org 2. Regular y Bold* 3. 13pts 4. 130% 5. 0 6. Alta y baja 7. R: 125% G: 26% B: 22% 8. A la izquierda

Fundación Tierra Viva

*El link se presenta en la versión Regular de la tipografía cuando esta en estado de «Resposo», y cuando esta en estado «Rollover» cambia a su versión en Bold.

Manual de Estilo

e e

Subtítulos de Contacto: 1. Amaranth 2. Bold 3. 14pts. 4. n/t. 5. 0 6. Alta y baja 7. Negro 8. A la izquierda

Dirección 1ra Transversal de Bello Monte, Quinta Santa Ana Caracas - Venezuela

Teléfono (+58) 0212 624 6668

Leyenda: 1. Fuente 2. Versión 3. Puntaje 4. Interlineado 5. Track 6. Caja 7. Color 8. Alineación

Nombre Formulario: 1. Amaranth 2. Bold Correo electrónico 3. 16pts. 4. n/t. 5. 0 6. Alta y baja 7. R: 136% G: 133% B: 0% 8. A la izquierda

Manual de Estilo

6. Color Fueron utilizados seis colores principales, los cuales guardan una estrecha relación con la textura correspondiente a la sección a la que pertenecen. Para la creación de cada uno de los espacios del sub-menú, se trabajo la luminosidad de cada color. Azul: Es utilizado para la sección de la Fundación, dado que la textura asignada para este enlace es la del cielo. El color azul además refleja tranquilidad, paz y lealtad, representando la seguridad que requiere la información institucional de la Fundación.

Verde: Se encuentra en la sección de Proyectos, en donde la textura utilizada es la de una hoja. El verde es el color predominante para representar el medio ambiente, dando a entender que los proyectos ofrecidos por la fundación están dirigidos a esa área en particular. Amarillo: Corresponde a la sección de Descarga, la cual posee la textura referente al tronco de un árbol. Este enlace está destinado para que el usuario pueda leer contenido referente a tareas ecológicas para niños. Por este motivo, el amarillo, el cual es un color que representa optimismo, es ideal para esta sección. Naranja: Utilizado en la sección de Galería con una textura de tierra, este color transmite calidez y diversión, emociones que el público del sitio web presentará al momento de ver las imágenes llenas de jovialidad y entretenimiento pertenecientes a los distintos proyectos que realiza la fundación. Manual de Estilo

R: 13% G: 107% B: 200% R: 48% G: 119% B: 235% R: 83% G: 144% B: 255% R: 118% G: 179% B: 255% R: 84% G: 179% B: 0% R: 105% G: 199% B: 0% R: 133% G: 214% B: 46% R: 136% G: 232% B: 87% R: 255% G: 165% B: 0% R: 255% G: 184% B: 20% R: 255% G: 204% B: 30% R: 255% G: 212% B: 92% R: 209% G: 84% B: 0% R: 235% G: 102% B: 0% R: 255% G: 130% B: 0% R: 255% G: 175% B: 80% 29

Violeta: Es el color de la eternidad y la humildad, se encuentra en conjunto con una textura de piedras. Es por ello que sirve para relacionar todos los Enlaces, las instituciones de interés y alianzas que posee la fundación, haciendo énfasis en la hermandad que existe entre los distintos entes. Turquesa: El color turquesa simboliza la tranquilidad; por lo cual, invita al usuario a navegar por esta sección, que precisamente se encarga de proveer los datos de Contacto de la institución. La misma esta relacionada con una textura de agua.

Gris: El color gris fue utilizado en distintos tonos, dependiendo de su utilidad, como un color complementario neutral para el resto del sitio. El tono más claro fue utilizado como fondo para todas las secciones del Sitio Web, mientras que sus tonalidades mas oscuras se destinaron ya sea para el Footer o para los botones. Negro: El color negro es base en el diseño general del sitio, utilizado principalmente para todos los textos corridos del contenido de las secciones.

R: 125% G: 26% B: 122% R: 161% G: 59% B: 158% R: 199% G: 117% B: 184%

R: 0% G: 136% B: 133%

R: 88% G: 89% B: 91% R: 70% G: 70% B: 70% R: 152% G: 154% B: 157% R: 220% G: 220% B: 220% R: 0% G: 0% B: 0%

Manual de Estilo

6.1 Uso del color en el contenido del Sitio Web

Manual de Estilo

Color verde aplicado para el fondo de la franja del sub-menú.

Tonos de verde aplicados para crear las distintas secciones del sub-menú.

Color verde principal, aplicado en el título del texto corrido.

El color de la cita fue extraido directamente de la textura de la sección.

Las flechas de la Galería adaptarán el tono de naranja de la subsección que este activa.

Al igual que las flechas, la numeración de las fotos tambien adaptará el color de la subsección en la que se encuentre el usuario. Manual de Estilo

7. Imágenes y Fotografías En cuanto a las imágenes del sitio, estas fueron descargadas de internet, y posteriormente ajustadas en cuanto a resolución y tamaño en Adobe Photoshop, adpatadas a RGB con 72 d.p.i. La temática de las mismas son texturas que se encuentran en el medio ambiente, orientadas a generar conciencia en el usuario sobre la temática ambiental del sitio web. Posteriormente, fueron trabajadas con Adobe Illustrator, en donde se les aplicó una máscara de recorte para que adoptaran la forma curva correspondiente al diseño planteado para el sitio. Todas las imágenes de texturas se encuentran en plano detalle, con excepción de la del cielo y cielo nocturno, que son planos generales. En el caso de las fotografías de la Galería, estas fueron dadas por la fundación, y posteriormente ajustadas en cuanto a resolución, tamaño y valores en Adobe Photoshop, tambíen a RGB con 72 d.p.i., para su correcta visualización dentro del sitio.

Manual de Estilo

7.1 Texturas

Cielo Nocturno:

Corteza de Ă rbol:

Plano General

Plano Detalle

Cielo:

Tierra:

Plano General

Plano Detalle

Hoja:

Agua:

Plano Detalle

Manual de Estilo

Original Fueron trabajadas con Adobe Photoshop, ajustandoles el tono y saturaciĂłn de modo que generaran mayor armonĂa al momento de encontrarse en conjunto con los colores de cada secciĂłn.

Editada

Manual de Estilo

Las texturas y los fondos fueron recortados siguiendo la retícula modular del sitio, con el fin de generar el menú principal y el menú interno. En el caso de la textura de la sección que se encuentra activa, se le aplicó una máscara de recorte encima, por lo que no fue recortada directamente.

Manual de Estilo

7.2 Fotografías de la Galería

Original

Las fotografías de la sección de Galería fueron dadas por la Fundación, y convertidas igualmente a RGB con 72 d.p.i. Fueron ajustadas en cuanto a niveles y reducidas en tamaño en Adobe Photoshop, y posteriormente recortadas con la retícula curva para adaptarlas al diseño del sitio.

Editada

Manual de Estilo

Para las miniaturas, se realizaron cortes a ambos lados de la imagen, procurando que siguiera la curvatura de la retícula. En el caso de la fotografía que se encuentra «Activa», se recorto unicamente del lado izquierdo, de modo que no generara una contraforma fuerte con respecto a las miniaturas de la misma.

Manual de Estilo

8. Elementos Gráficos A continuación se presentarán los elementos gráficos que componen el Sitio Web, y que a su vez forman parte importante del concepto planteado.

8.1 Sub-menú

247,5px

119px

291px

La franja del sub-menú cambiará de color según la sección en la que se encuentre, al igual que las divisiones de la misma. Ésta se encuentra presente en todo el Sitio Web, debido a que con sus formas curvas busca generar un ambiente mas orgánico, orientado a la temática de la fundación.

3px 132px

39px

El elemento gráfico principal en el sitio web es una curva que sangra tanto arriba como abajo, compuesta por dos partes, una donde se muestra la textura de la sección en la que se encuentra el usuario, conformada por 5 módulos , y otra que se utiliza para formar el sub-menú de la sección, conformada por 9 módulos.

Para calcular el alto de las subsecciones del sub-menú, se dividió en tres partes iguales el alto de uno de las secciones del menú interno, específicamente el que se encuentra de tercero, para darle suficiente espacio arriba al título de la sección.

Manual de Estilo

8.2 Menú Interno

82px

119px

50px

150,6px

50px

3px

El menú interno se realizó a partir de la retícula modular, con un ancho de 3 módulos. Se dejo un margen de 50px tanto arriba como abajo, de modo que ninguno de los elementos se pierda. Esta altura fue dividida en 5 partes iguales, dejando un espacio de 2,8px entre cada uno, generando así cada una de las secciones del sitio.

Manual de Estilo

8.3 Menú Principal

Manual de Estilo

343,4px

276px

714,9px

116,7px

Para la creación del home, se planteó la utilización de un ancho de 10 módulos, provenientes de la retícula modular, creando así el menú principal. Estos elementos sangran tanto arriba como abajo, y se dividieron en 6 partes iguales horizontales, de forma que se generen los campos para cada una de las secciones.

8.4 Flecha de Galería Los contenedores de las flechas de la galería se construyeron tomando como base el ancho de 3 módulos de la retícula modular. La flecha como tal se construyó con una línea de 0,5pt y un borde redondeado de 3pt, de color blanco, centrada con respecto al contenedor. 10px

26px

117px

20,9px

26px

10px

109,4px

20,9px

Manual de Estilo

8.5 Contenedor de la Identidad Este se encuentra en la esquina superior derecha de la pĂĄgina con respecto a la retĂcula formal, y posee un ancho de una columna y media. Es de color blanco con una opacidad de 80% en los enlaces internos, y en el Inicio se encuentra con una opacidad de 30% para su mejor visualizaciĂłn.

31,8px

90,5px

132px

Manual de Estilo

8.6 Pie de Página El pie de página posee un ancho de 6 columnas, y se encuentra ubicado a 80px del borde inferior, alineado a la derecha de la página. Esta compuesto por 3 líneas, una horizontal y dos verticales, y tiene como grosor 0,75pts. Se le aplicó la característica de «Linea Discontinua» de 2pt en el programa de Adobe Illustrator.

112,3px

112,3px 20px 3px

317,7px

Manual de Estilo

Interactividad Botones Animaciรณn Software

1. Botones Para los botones fueron utilizados varios estilos, dependiendo de la jerarquía que posea el mismo. Se emplearon animaciones y movimientos similares de modo que se siguiera una línea dentro de todos los botones que posee el Sitio Web, de forma que dependiendo de la jerarquía que posea el mismo, presenta mayor o menor interactividad.

1.1 Menú Principal En el caso del menú principal, se tiene de primera mano una animación que al terminar de reproducirse forma los botones de este menú. En el estado de «Reposo» se presentan sólamente las texturas, pero al momento del usuario hacer «Rollover» sobre cada uno de ellos, se muestra el nombre de la sección sobre una franja negra con opacidad de 70%. Para los estados de «Botón Pulsado» y «Activo», se mantuvo la misma gráfica del estado de «Rollover».

FUNDACIÓN

El alto de la franja negra corresponde a la tercera parte del alto total de una sección.

Manual de Estilo

Estado: Reposo

Estado: Rollover Ratรณn Pulsado Activo

Manual de Estilo

1.2 Menú Interno

PROYECTOS

Para el menú interno, se dejaron 50px tanto superior como inferior, de manera que los elementos no se corten. Esta altura fue dividida en cinco partes iguales, generando los campos para cada una de las secciones del sitio. En su estado de «Reposo» se presenta como una curva con un ancho de 3 módulos, y únicamente se muestra la textura. Al momento de hacer «Rollover» se muestra una pequeña animación en donde la textura se extiende y sangra por el lado izquierdo de la página. Seguidamente, empleando el mismo movimiento, aparece una franja negra con 70% de opacidad en la parte superior de la sección, en donde se muestra el nombre de la misma. El alto de esta franja corresponde a la quinta parte de la altura total de una sección. Para los estados de «Ratón Pulsado» y «Activo», el boton se mantiene igual que en su estado de «Rollover»».

Estado: Reposo

Estado: Rollover Ratón Pulsado Activo

Manual de Estilo

1.3 Sub-menú El sub-menú se encuentra presente en cinco de las seis secciones que componen el Sitio Web. Al poseer una jerarquía menor, no se le aplicó ninguna animación. En el estado de «Reposo» se muestra la tipografía en blanco, pero al hacer «Rollover» o estar la sub-sección en el estado «Activo», esta se mostrará de color gris, dandole a entender al usuario en donde se encuentra dentro del sitio. Para la altura del sub-menú se tomó como base el alto de la tercera sección del menú interno, y se dividio en tres campos iguales horizontalmente, de modo que se generen los campos para la información.

Estado: Reposo

Estado: Rollover Ratón Pulsado Activo

Manual de Estilo

1.4 Identidad En el caso de la Identidad, esta se encuentra dentro de un contenedor en la esquina superior derecha del sitio. De forma que el usuario tuviera una forma de regresar al Inicio en cualquier momento, se le realizo una intervención con un pequeño movimiento de desplazamiento vertical al hacer «Rollover» sobre el contenedor, aumentado su altura con 15px más, de modo que el usuario pueda saber que se trata de un botón. Este botón funciona únicamente para la Identidad que se encuentra en los enlaces internos del sitio, ya que está vinculado con la página de Inicio.

Estado: Reposo

Estado: Rollover Ratón Pulsado Activo

Manual de Estilo

1.5 Otros

Identidades de Enlaces y ALianzas

Estado: Reposo

Miniatura de Galería

Estado: Rollover Ratón Pulsado Activo

Estado: Reposo

Estado: Rollover Ratón Pulsado Activo

Flecha de Galería

Formulario Contacto

Enviar Estado: Reposo

Estado: Rollover Ratón Pulsado Activo

Manual de Estilo

Estado: Reposo

Enviar Estado: Rollover Ratón Pulsado Activo

2. Animación En total fueron realizadas 3 animaciónes para el Sitio Web, permitiéndole una mayor interactividad.

2.1 Inicio En el caso del Inicio, se realizó una animación en Adobe Edge Animate, en donde se presenta principalmente un cambio de opacidad así como un movimiento vertical ascendente, conformados por las 6 franjas de cada una de las secciones. Seguido a esto, se utilizo una máscara con la textura del cielo nocturno, con una curva correspondiente al diseño planteado, de manera que se forme así una hilera con cada una de las secciones. Al resto de los elementos de la página (encabezado, pie de página, lema de la fundación y texto introductorio) se les aplicó un movimiento ya sea ascendente o descendente, dependiendo de su posición, y un cambio de opacidad. Estas animaciones solo se muestran una vez ya se ha armado la hilera de las secciones, y en conjunto todo se reproduce al momento de entrar en el Sitio Web. Posee un tamaño de 1400px de ancho por 700px de alto, y una duración de 4 segundos en total. 52

Animación de las franjas de textura

Animación de la cubierta del cielo nocturno

Animación del texto del lema de la Fundación Manual de Estilo

1 00:01:00 seg De entrada se van mostrando las franjas de las texturas con una opacidad que va de 0% a 100% en 00:00:50 seg.

2 00:02:00 seg Todas las texturas poseen un movimiento ascendente que dura 00:03:50 seg en completarse, hasta detenerse en cierto punto de la textura, para formar posteriormente el menĂş.

Manual de Estilo

3 00:03:00 seg Para el segundo 00:03:00, ya todas las franjas de las texturas han terminado de reproducirse en el escenario.

4 00:03:50 seg En el segundo 00:03:50, la mĂĄscara del cielo nocturno ya se encuentra en su posiciĂłn final, dejando el espacio para el menĂş principal.

Manual de Estilo

5 00:03:60 seg En el segundo 00:03:60, ya han comenzado a aparecer los demรกs elementos del Inicio, como lo son la Identidad y el lema, con una opacidad que va de 0% a 100% en 00:00:25 segundos.

6 00:04:00 seg Para el segundo 00:04:00, ya todos los elementos han terminado de reproducirse dentro de la animaciรณn, formando en su totalidad la pรกgina de Inicio.

Manual de Estilo

2.2 Secciones Para los enlaces internos del Sitio Web, se realizó una animación de paneo de derecha a izquierda, a las texturas de cada una de las secciones, la cual posee una duración de un minuto, hasta detenerse en un punto especifico dentro de la misma. Ésta comienza a reproducirse inmediatamente al momento de entrar en la sección. Posee un tamaño de 654px de ancho por 1080px de alto. Dependiendo del monitor, el usuario podra ver más, o menos de la curva que la conforma.

Animación de paneo de la textura. 56

Manual de Estilo

1 00:30:00 seg La imagen de la textura se encuentra en parte cubierta por los elementos que tiene encima, los cuales le dan la forma curva perteneciente al diseĂąo. La misma va recorriendo horizontalmente una distancia de 1000px en total.

2 01:00:00 seg Al cumplir el minuto, la animaciĂłn ya se ha terminado de reproducir, y la textura se encuentra en su posiciĂłn final.

Manual de Estilo

3. Software Para la realización base del diseño, fue utilizado Adobe Illustrator, es aquí donde se genera el concepto principal y se desarrolla todo lo relacionado con diagramación y vectores. Posteriormente fue exportado el contenido para ser animado en Adobe Edge Animate, o bien para su montaje final en Adobe Muse. En cuanto al retoque de imágenes, se empleó Adobe Photoshop para un mejor acabado y visualización de las mismas.

Manual de Estilo

Conclusión Se puede concluir que el manual de estilo es fundamental para los procesos de reproducción de un material gráfico, donde con cada uno de los procedimientos e indicaciones se pueda obtener una reproducción exacta y tangible con excelentes resultados, y cumplir con cada uno de los objetivos planteados para el Sitio Web, además, de ser útil como instrumento de formación educativa.

Manual de Estilo