GUIA DE ESTILO DEL PROYECTO Prosystem

[pic 1][pic 2]

[pic 3]

GUIA DE ESTILO DEL PROYECTO

Prosystem

[pic 4][pic 5]

Índice

Introducción....................................................................................................... 3

Estructura de la interfaz.................................................................................... 4

Colores ............................................................................................................... 6

Tipografía ........................................................................................................... 8

Iconografía ......................................................................................................... 9

Imágenes .......................................................................................................... 10

Introducción

Esta guía de estilo principalmente va dirigida a todos los usuarios, que busquen un claro y breve ejemplo para que les pueda servir de apoyo, y puedan ver los puntos más relevantes de la guía de estilo.

La Guía de estilo del sitio web “Prosystem” tiene como objetivo establecer un marco de intervención controlado en su interfaz.

Porque la necesidad de una Guía de estilo, como su definición lo dice es un documento que contiene patrones básicos relacionados con el aspecto de una interfaz de nuevas pantallas en un entorno especifico.

El presente documento se divide en 5 partes fundamentales para la guía de estilo, las cuales son:

Estructura de la interfaz

En este apartado se muestra como está estructurada la aplicación web “Prosystem”, con el fin de visualizar cada parte que compone la interfaz de esta misma. La aplicación web es responsiva, por lo cual se puede adaptar a distintos tamaños de diferentes dispositivos.

Colores

En este apartado se muestran los colores que se utilizan en la aplicación web, que parten desde los colores primaros a los secundarios. Cada uno de los colores tiene una representación gráfica con su respectivo código RGB y el nombre de cada color.

Tipografía

Se muestran los diferentes estilos o tipos de letras que se emplearon para la realización del diseño de la interfaz.

Iconografía

Se muestra el conjunto de imágenes relacionadas con la aplicación web, es decir los iconos que representan un apartado en la aplicación, cuya finalidad es facilitar el uso de esta misma.

Imágenes

Se describe cada una de las imágenes como el tamaño, su ubicación en la interfaz y una breve descripción.

Estructura de interfaz

[pic 6]

COLORES

[pic 7]

[pic 8]

El color #FF7600 se usa: Para   los botones.

El color #EEEEEE se usa:  En la barra superior donde se encuentra el teléfono y el correo electrónico

El color #FFFFFF se usa:  Como color de fondo, es el background este es uno de los colores principales.

El color #333333 se usa: Como fondo en algunos iconos.

El color #8996ª0 se usa:  De fondo del pie de página.

 .

Tipografía

Para el sitio “Prosystem” se utiliza exclusivamente el tipo de letra 'Open Sans', Arial, Helvetice Neue, sans-serif;para formatear los textos. Todos los tipos de letra se encuentran instalados por defecto en la mayoría de ordenadores y dispositivos.

[pic 9] [pic 10]

[pic 11][pic 12]

ICONOGRAFIA

...