MANUAL DE ESTILO GRÁFICO

MANUAL DE ESTILO GRÁFICOGuía de uso general para maquetación web

TABLA DE CONTENIDOS

PAG. 02

ÍNDICEPAG 03. Introducción PAG 04. Color PAG 05. TipografíaPAG 07. Hoja de estilos en cascada (CSS)PAG 09. IconosPAG 13. Estilos, tamaños y usos de imágenesPAG 17. Estructura webPAG 18. CabeceraPAG 25. Estructura indexPAG 26. Estructura interiorURL PROTOTIPO FINAL. http://www.elealdesigns.com/web_test2/index.html

MANUAL DE ESTILO GRÁFICO

Guía de uso general para maquetación web

PAG. 03

USO DEL MANUAL EN LA WEB DE SIGMA MÓVIL S.AEl objetivo del manual de estilos es el de ayudar a estructurar los contenidos y el diseño del sito web Sigma Móvil S.A, homogeneizando estilos y estructuras para facilitar el desarrollo de nuevas páginas y actualizaciones posteriores. Unificar los criterios que deben regir el diseño y la diagramación de todas las páginas del sitio web, en donde las pautas de diseño ( fundamentos de diseño web ) son indispensables para ordenar el contenido de cada página y preservar la continuidad visual.

Este manual suministra estándares de maquetación para facilitar la labor del desarrollador a la hora de generar nuevos contenidos o modificar los existentes.

Para ver el prototipo final del sitio web visita: http://www.elealdesigns.com/web_test2/index.html

INTRODUCCIÓNMANUAL DE ESTILO GRÁFICO


PAG. 04

COLORES PRINCIPALES DEL SITIO

COLORMANUAL DE ESTILO GRÁFICO


LOGOTIPO GAMA DE COLORES ESTILO DE COLORES SITIO WEB

GRIS OSCUROWEB ( HTML )#646568

GRISWEB ( HTML )#98A1A6

NARANJAWEB ( HTML )#F2891F

AZULWEB ( HTML )#E54F99

VIOLETAWEB ( HTML )#D64A8F

AZUL OSCUROWEB ( HTML )#0754AC y #0754AB

AZULWEB ( HTML )#0063C4

GRISWEB ( HTML )#BBBBC1 y #C8C9CC

Los colores corporativos de Sigma Móvil son usados en cada una de las páginas de servicios del sitio web.

La paleta de colores (derecha) proporciona a cada servicio la oportunidad de tener una identidad visual única.Ha sido específicamente diseñada para ser amistosa. Estos colores identifican cual es el servicio y en que parte del sitio se encuentra el usuario.Los valores hexadecimales docu-mentados se deben utilizar para cada uno de los servicios.Además de estas especificaciones, el sitio web utiliza una gama decolores dentro de la paleta de estilo.

PAG. 05

TIPOGRAFÍAS PRINCIPALES DEL SITIO

TIPOGRÁFIAMANUAL DE ESTILO GRÁFICO

DOSIS PABLO IMPALLARI


El sitio web de Sigma Móvil S.A, hace uso de dos fuentes tipográficas las cuales se deben usar para títulos, párrafos y demas partes del sitio como son botones y “banners” publicitarios.

Light 200

Grumpy wizards make toxic brew for the evil Queen and Jack.Book 300

Grumpy wizards make toxic brew for the evil Queen and Jack.Normal 400

Grumpy wizards make toxic brew for the evil Queen and Jack.Medium 500

Grumpy wizards make toxic brew for the evil Queen and Jack.

Semi-Bold 600

Grumpy wizards make toxic brew for the evil Queen and Jack.Bold 700

Grumpy wizards make toxic brew for the evil Queen and Jack.Extra-Bold 800

Grumpy wizards make toxic brew for the evil Queen and Jack.

PAG. 06

TIPOGRAFÍAMANUAL DE ESTILO GRÁFICO

OPEN SANS STEVE MATESSON


Book 300

Grumpy wizards make toxic brew for the evil QueenBook 300 Italic

Grumpy wizards make toxic brew for the evil QueenNormal 400

Grumpy wizards make toxic brew for the evil QueenNormal 400 Italic

Grumpy wizards make toxic brew for the evil QueenSemi-Bold 600

Grumpy wizards make toxic brew for the evil Queen

Semi-Bold 600 Italic

Grumpy wizards make toxic brew for the evil QueenBold 700

Grumpy wizards make toxic brew for the evil QueenBold 700 Italic Grumpy wizards make toxic brew for the evil QueenExtra-Bold 800

Grumpy wizards make toxic brew for the evil QueenExtra-Bold 800 Italic

Grumpy wizards make toxic brew for evil Queen

PAG. 07

HOJA DE ESTILOS EN CASCADA ( CSS )MANUAL DE ESTILO GRÁFICO

TÍTULO 1 EJEMPLO <H1>TÍTULO 2 EJEMPLO <H2>

TÍTULO 3 EJEMPLO <H4>

TÍTULO <H3>

TÍTULO 4 EJEMPLO <H4>


ESTILO DE TITULOS Y SUBTÍTULOS

DOSIS es una fuente redonda de la familia sans serif. Es un tipo de letra legible para la visualización en pan-talla y el uso en Internet en general.DOSIS es la fuente estándar que se utiliza en el sitio web de sigma móvil y sus colores de estilo (derecha) de-penden de la combinación de cada sección o servicio.Para el “banner” principal se hace uso de las etiquetas h1 y h3.

DOSIS PABLO IMPALLARI

Lorem ipsum dolor sit amet, consectetur adipi-scing elit. Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis elit, sed egestas diam nunc ac dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis elit, sed egestas diam nunc ac dui.



PAG. 08

HOJA DE ESTILOS EN CASCADA ( CSS )MANUAL DE ESTILO GRÁFICO


ESTILO DE PÁRRAFOS<PÁRRAFO 1>

<PÁRRAFO 2>

<PÁRRAFO 3>

<PÁRRAFO 4>

Se usan 4 estilos de parráfos en el sitio web de sigma móvil, cada uno tiene una función que más adelante se podrá visualizar.OPEN SANS es una fuente humanista sans serif. Es un tipo de letra legible para la visualización en pantalla y el uso en Internet.OPEN SANS es la fuente estándar que se utiliza en el sitio web de sigma móvil y sus colores de estilo (dere-cha) para todos y cada uno de los parráfos es ( #58595B ).

OPEN SANS STEVE MATESSON

GRISWEB ( HTML )#58595B

PAG. 09

ICONOSMANUAL DE ESTILO GRÁFICO


USO DE ICONOS Y DESCRIPCIÓN

53PX 53PX 53PX

33PX 33PX 33PX

62PX 62PX 62PX

28PX 28PX 28PX

Iconos de servicios para EMAIL MARKETING, SMS MASIVO Y MOBILE MARKETING.Se manejan dos tamaños, uno para el inicio del sitio ( index ) y otro para la página interna de cada servicio.

Solo se deben usar en el inicio del stio web (index)

Se usan en cada uno de los servicios.

EMAIL MARKETING SMS MASIVO MOBILE MARKETING

PAG. 10



Ingreso a plataforma

Elaborar campaña

Resultados

Fecha

CONJUNTO DE ICONOS EMAIL MARKETING

EJEMPLO DE USO

Los iconos secundarios de Email Marketing funcio-nan para identificar los 4 puntos mas importantes del servicio y van acompañados de un bloque de texto.

Mobile Marketing se compone de 3 iconos que funcionan para evaluar la sastisfacción del cliente frente a un servicio determinado.Se hace uso de 3 estados de animo “mood” que son: bueno, aceptable y malo. Su tamaño debe ser de 51 X 60px Color, Verde ( #78a00b ), Azul ( #0b68d0 ), Rojo ( #cf4151 )

Bueno

Aceptable

Malo

CONJUNTO DE ICONOS MOBILE MARKETING

PAG. 11



Nosotros

Disponible

Twitter

Facebook

Youtube

No disponible

Contáctenos

Buscar

CONJUNTO DE ICONOS CABECERA CONJUNTO DE ICONOS CABECERA SOPORTE EN LINEA

CONJUNTO DE ICONOS REDES SOCIALES

Los iconos siguientes son de uso estándar y se deben utilizar siempre en todas las paginas del sitio. Su tamaño debe ser de 17 X 12px Color ( #57585A ).

Los iconos de redes sociales son de uso libre y pueden ser reemplazados por estilos diferentes pero siempre deben mantener un tamaño de 28 X 28px.

Los iconos de cabecera son de uso estándar y se deben utilizar siempre en todas las paginas del sitio.Su tamaño debe ser de 17 X 12px Color ( #57585A ).Su función es informar al usuario que dispone de soporte en línea via chat, el cual tiene dos estados: Disponible y No Disponible

EJEMPLO DE USO

PAG. 12



Registro, Mi cuenta Campo Correcto

Ingresar, Salir Campo Incorrecto

CONJUNTO DE ICONOS CUENTA USUARIO CONJUNTO DE ICONOS REGISTRO DE FORMULARIO

Los iconos de cuenta y usuario tienen la función de ubicar aún mas al usuario, ya sea para registrarse, in-gresar o salir de la cuenta si se encuentra “logueado”. Su tamaño debe ser de 17 X12px Color ( #FFFFF ).

Los iconos de registro de formulario tienen la fun-ción de informar al usuario que campos del registro se encuentran correctos y cuales incorrectos.Su tamaño debe ser de 31 X 31px.

EJEMPLO DE USO EJEMPLO DE USO

Las imágenes del banner deben tener un tamaño mínimo de 403px de ancho por 310px de alto, y un tamaño máximo de 460px de ancho por 330px de alto.Todas las imágenes del “banner” deben estas alineadas a la derecha.

PAG. 13

BANNER

ESTILOS, TAMAÑOS Y USOS DE IMÁGENESMANUAL DE ESTILO GRÁFICO


403px

310px

La imágen de noticias debe tener un tamaño fijo de 107px de ancho por 74px de alto. y un tamaño máximo de 460px de ancho por 330px de alto.

PAG. 14

NOTICIAS



107px

74px

350px250px

240px240px

Las imágenes de apoyo de los textos deben tener un ancho mínimo de 250px y un ancho máximo de 350px, y pueden estar alineadas a la izquierda o a la derecha.

PAG. 15

USO DE IMÁGENES PARA



EMAIL MARKETING, SMS MASIVO, MOBILE MARKETING

El uso de imágenes para la seccion de “Nosotros” deben tener un ancho fijo de 660px de ancho por 235px de alto

PAG. 16

USO DE IMÁGENES PARA



NOSOTROS

660px

230px

PAG.17

ESTRUCTURA WEBMANUAL DE ESTILO GRÁFICO


DESCRIPCIÓN DE LA ESTRUCTURA

La disposición de la estructura del sitio web es vertical, muestra la informacón por secciones según su relevancia informativa lo cual ayuda a facilitar la navegación entre las diferentes páginasLa disposición vertical de los contenidos de la web generan una estructura entendible, tanto para el usuario normal como para el usuario con impedimentos visuales.La navegación esta pensada para que los usuarios en todo momento sepan en que parte del sitio web se encuentran.

La lógica visual se basa en la sencillez y el pragmatismo, elemen-tos que aún juntos no rivalizan entre sí y que con una mínima energía gráfica nos indican las opciones más apropiadas que tenemos.

VERTICALIDAD

JERARQUIA DE LA INFORMACIÓN

ANCHO: 291 pxALTO: 87pxEl uso del logo de Sigma Móvil se mues-tra en su versión horizontal, con un tamaño fijo en todos los casos

Figura 1Usuario logueado

PAG. 18

USO DE CABECERAS PERSONALIZADAS

CABECERAMANUAL DE ESTILO GRÁFICO


El encabezado del sitio web se compone de 12 elementos que son: Logotipo, Nosotros, contáctenos, soporte en línea, registro, ingresar, inicio, email marketing, sms masivo, mobile marketing, redes sociales y el buscador de información.

En el encabezado se encuentra un elemento adicional que se ve cuando el usuario ha ingresado a su cuenta, ver figura 1.

#767779

#9D9FA2

PAG. 19



CABECERA INICIO

La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )

FONDO DEGRADADO VERTICAL

289PX

86PX

PAG. 20



CABECERA LOGOTIPO, REGISTRO, INGRESAR, SOPORTE EN LÍNEA, NOSOTROS Y CONTÁCTENOS

Fuente OPEN SANS tamaño 13px, color ( #5b5c5c )

Soporte en línea: Color ( #5b5c5c ) tamaño 16pxONLINE: Color ( # 3ca94f ) tamaño 16px en mayúsculas

#EC80B5

#E5539B


PAG.21



CABECERA EMAIL MARKETING


PAG. 22



CABECERA SMS MASIVO


#5790D0

#246FC2


PAG. 23



CABECERA MOBILE MARKETING


#F5A859

#F28C26


PAG.24



CABECERA REDES SOCIALES Y BUSCADOR

La fuente utilizada para sección de redes sociales y buscador es DOSIS tamaño 15px Semibold color Gris ( #5F5B5B )

#C4C4C7

#B3B4B8


PAG.25

ESTRUCTURA INDEXMANUAL DE ESTILO GRÁFICO


Los avisos se componen de imágen, título, subti-tulo, párrafo y enlaces.El título principal no debe exceder los 24 carac-teres.El subtítulo no debe exceder los 35 caracteresEl párrafo mínimo debe de ser de dos lineas y máximo 3.Número máximo de avisos 4.

El sitio se compone de 3 servicios y cada uno tiene un título junto con su icono, subtítulo , parráfo y enlace.Los subtítulos deben ser mínimo 1 línea de texto y máximo 2El párrafo debe de tener minimo 4 líneas de texto y máximo 5.

Las noticias se presentan de manera vertical, el título debe ser de máximo 2 líneas con enlace y el párrafo no exceder las 3 líneas de texto.

TítuloColor: (#4485C6)Fuente : Dosis

Tamaño: 15px

Párrafo: Color: (#58595B)Fuente: Open Sans

Tamaño: 13px

BANNERS

SERVICIOS

NOTICIAS

EJEMPLO DE USO

PAG. 26

ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO


La estructura utilizada para esta sección se com-pone de un menú vertical que contiene 3 botones pricipales del servicio, que son:* Nuestros servicios* Beneficios y razones* Precios El color utilizado para el servicio es ( #D64A8F )

El título principal de cada sección debe ser en mayúsculas a una línea o no exceder los 36 caracteres, color ( #85857D ) y tamaño de fuente 42px.

El párrafo principal de cada sección debe ser de mínimo 2 lineas y maximo 3, color ( #58595B ) y tamaño de fuente 19px.

El párrafo secundario es de color ( #58595B ) y tamaño de fuente 15.5px.

Videotutorial de cómo funciona el servicio de Email marketing, los videos son llamados de youtube y las dimensiones deben ser de 440px (ancho) X 228px (alto).

El subtítulo secundario de cada sección debe ser en mayús-culas a 1 línea o máximo a 2, color ( #85857D ) y tamaño de fuente 18px.

EMAIL MARKETING

TÍTULO

PÁRRAFO PRINCIPAL

PÁRRAFO SECUNDARIO

VIDEO

SUBTÍTULO

A

A

B

C

D

E

B

C

E

D

PAG. 27



La información se puede acompañar con una imágen. Su distribución varía en cuanto a que el texto se encuentre hacia la derecha o izquierda, respetando la verticalidad de la estructura.

El título principal de cada sección debe ser en mayúsculas a 1 línea o no exceder los 36 caracteres, color ( #85857D ) y tamaño de fuente 42px.

Las imágenes de apoyo de los textos deben tener un ancho mínimo de 250px y un ancho máximo de 350px.

El subtítulo de cada sección debe ser en mayúsculas a 1 línea o maximo 2, color ( #85857D ) y tamaño de fuente 18px.

EMAIL MARKETING

TÍTULO

IMÁGENES

SUBTÍTULO

A

A

B

C

C B

PAG. 28




Los planes que se ofrecen se deben manejar en tablas y se componen de títulos del plan, suscriptores, precio, limite de envío y enlace de registro si el usuario es nuevo y desea adquirir el servicio.

Ejemplo tabla de precios.

EMAIL MARKETING

TÍTULO

PLANES

A

A

BB

Elemento de cabeceraColor: (#FFFFF)Dosis, Minúscula

Celda de cabeceraColor: (#D64A8F)

Celda de cabeceraColor: (#6D6E76)

Celda de contenidoColor: (#D8DDE1)

EMAIL MARKETING MENÚ VERTICAL

PAG. 29



Estado botón: SeleccionadoFondo: (#D64A8F) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Tamaño icono: 28px x 33pxTamaño fuente: 25px, MayúsculasColor fuente: (#D64A8F)

Estado botón: Sin seleccionarFondo: (#6D6E76) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: #0754AB Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: (#4489C6 ) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

PAG. 30



La estructura utilizada para esta sección se com-pone de un menú vertical que contiene 3 botones pricipales del servicio, que son:* Nuestros servicios* Beneficios y razones* Precios El color utilizado para el servicio es ( #1A68BF )

El título principal de cada sección debe ser en mayúsculas a una línea o no debe exceder los 36 caracteres, color ( #85857D ) y tamaño de fuente 42px.

El párrafo principal de cada sección debe ser de mínimo 2 lineas y máximo 3, color ( #58595B ) y tamaño de fuente 19px.

Los listados de elementos son herramientas muy útiles para la navegación web. Estos listados pueden servir para organizar elementos.Todas las listas dentro del sitio se deben manejar con un tamaño de letra de 14,5px y el icono o “bullet” debe ser de un tamaño de 15px de alto por 17px de ancho.

Esta es otra forma de mostrar los videotutoriales del servicio, a diferencia del servicio de Email Marketing este se muestra en un “pop up” o “light box”.

SMS MASIVO

TÍTULO

PÁRRAFO PRINCIPAL

LISTADOS MÚLTIPLES DE ELEMENTOS

VIDEO

A

A

B

C

D

B

C

D

PAG. 31




Los planes que se ofrecen se deben presentar en tablas y se componen de títulos del plan, suscriptores, precio, límite de envío y enlace de registro si el usuario es nuevo y desea adquirir el servicio.


SMS MASIVO

TÍTULO

PLANES

A

A

BB


Celda de cabeceraColor: (#1A68BF)

Celda de cabeceraColor: (#6D6E76)


SMS MASIVO MENÚ VERTICAL

PAG. 32




Tamaño icono: 28px X 33pxTamaño fuente: 25px, MayúsculasColor fuente: (#1A68BF)

Estado botón: Sin seleccionarFondo: (#6D6E76) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: (#0754AB) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: (#4489C6) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

PAG. 33



La estructura utilizada para esta sección se com-pone de un menú vertical que contiene 2 botones pricipales del servicio, que son:* Nuestros servicios* Beneficios y razonesEl color utilizado para el servicio es ( #F2891F )

El título principal de cada sección debe ser en mayúsculas a 1 línea y no exceder los 36 caracteres, color ( #85857D ) y tamaño de fuente 42px.

El párrafo principal de cada sección debe ser de mínimo 2 líneas y máximo 3, color ( #58595B ) y tamaño de fuente 19px.

Esta es otra forma de diagramar los bloques de texto con imágen principal, que mide 190px de ancho por 117px de alto, título 19px, mínimo una linea de texto máximo 2.Los Párrafos deben de ser de maximo 10 líneas de texto.Se debe usar un máximo de 3 columnas y se aplica a todos los servicios.

MOBILE MARKETING

TÍTULO

PÁRRAFO PRINCIPAL

BLOQUES DE TEXTO

A

A

B

C

B

C

PAG. 34




Los planes que se ofrecen se deben presentar en tablas y se componen de títulos del plan, precio, marcas, vencimiento y enlace de registro si el usuario es nuevo y desea adquirir el servicio.


TÍTULO

PLANES

A

A

BB


Celda de cabeceraColor: (#F2891F)


MOBILE MARKETING

MOBILE MARKETING MENÚ VERTICAL

PAG. 35




Tamaño icono: 28px X 33pxTamaño fuente: 25px, MayúsculasColor fuente: (#F2891F)

Estado botón: Sin seleccionarFondo: (#F2891F) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: (#0754AB) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

Fondo: (#4489C6) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

PAG. 36



“Combo box” de selección del sector económico.

El “combo box” contiene 10 sectores económicos, se pueden adicionar o eliminar la cantidad que sean necesa-rios.

SECTOR ECONÓMICO

“COMBO BOX”

A

ATamaño icono: 28px X 33pxTamaño fuente: 25px, MayúsculasColor fuente: (#1A68BF)

Estado botón: SeleccionadoFondo: (#1A68BF) Tamaño fuente: 14px, MayúsculasColor fuente: (#FFFFF)Fuente: Dosis, Bold

PAG. 37



REGISTRO INGRESAR A CUENTA

PAG. 38



CUENTA DE USUARIO INICIO CUENTA DE USUARIO COMPRAR, RECARGAR

PAG. 39



CUENTA DE USUARIO EDITAR PERFIL

MANUAL DE ESTILO GRÁFICO

Documents

Transcript of MANUAL DE ESTILO GRÁFICO