MANUAL DE ESTILO GRÁFICO. Guía de uso general para maquetación web

Transcripción

1

2 TABLA DE CONTENIDOS ÍNDICE PAG 03. Introducción PAG 04. Color PAG 05. Tipografía PAG 07. Hoja de estilos en cascada (CSS) PAG 09. Iconos PAG 13. Estilos, tamaños y usos de imágenes PAG 17. Estructura web PAG 18. Cabecera PAG 25. Estructura index PAG 26. Estructura interior URL PROTOTIPO FINAL. PAG. 02

3 INTRODUCCIÓN USO DEL MANUAL EN LA WEB DE SIGMA MÓVIL S.A El 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: PAG. 03

4 COLOR COLORES PRINCIPALES DEL SITIO LOGOTIPO GAMA DE COLORES ESTILO DE COLORES SITIO WEB 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. GRIS OSCURO WEB ( HTML ) # AZUL WEB ( HTML ) #0063C4 Estos colores identifican cual es el servicio y en que parte del sitio se encuentra el usuario. Los valores hexadecimales documentados se deben utilizar para cada uno de los servicios. Además de estas especificaciones, el sitio web utiliza una gama de GRIS WEB ( HTML ) #98A1A6 AZUL WEB ( HTML ) #E54F99 AZUL OSCURO WEB ( HTML ) #0754AC y #0754AB colores dentro de la paleta de estilo. NARANJA WEB ( HTML ) #F2891F VIOLETA WEB ( HTML ) #D64A8F GRIS WEB ( HTML ) #BBBBC1 y #C8C9CC PAG. 04

5 TIPOGRÁFIA TIPOGRAFÍAS PRINCIPALES DEL SITIO 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. DOSIS PABLO IMPALLARI 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. 05

6 TIPOGRAFÍA OPEN SANS STEVE MATESSON Book 300 Grumpy wizards make toxic brew for the evil Queen Book 300 Italic Grumpy wizards make toxic brew for the evil Queen Normal 400 Grumpy wizards make toxic brew for the evil Queen Normal 400 Italic Grumpy wizards make toxic brew for the evil Queen Semi-Bold 600 Grumpy wizards make toxic brew for the evil Queen Semi-Bold 600 Italic Grumpy wizards make toxic brew for the evil Queen Bold 700 Grumpy wizards make toxic brew for the evil Queen Bold 700 Italic Grumpy wizards make toxic brew for the evil Queen Extra-Bold 800 Grumpy wizards make toxic brew for the evil Queen Extra-Bold 800 Italic Grumpy wizards make toxic brew for evil Queen PAG. 06

7 HOJA DE ESTILOS EN CASCADA ( CSS ) ESTILO DE TITULOS Y SUBTÍTULOS DOSIS PABLO IMPALLARI DOSIS es una fuente redonda de la familia sans serif. Es un tipo de letra legible para la visualización en pantalla 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) dependen de la combinación de cada sección o servicio. Para el banner principal se hace uso de las etiquetas h1 y h3. TÍTULO 1 EJEMPLO <H1> TÍTULO 2 EJEMPLO <H2> TÍTULO <H3> TÍTULO 3 EJEMPLO <H4> TÍTULO 4 EJEMPLO <H4> PAG. 07

8 HOJA DE ESTILOS EN CASCADA ( CSS ) ESTILO DE PÁRRAFOS OPEN SANS STEVE MATESSON 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 (derecha) para todos y cada uno de los parráfos es ( #58595B ). GRIS WEB ( HTML ) #58595B <PÁRRAFO 1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis elit, sed egestas diam nunc ac dui. <PÁRRAFO 2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis elit, sed egestas diam nunc ac dui. <PÁRRAFO 3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis elit, sed egestas diam nunc ac dui. <PÁRRAFO 4> 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

9 ICONOS USO DE ICONOS Y DESCRIPCIÓN Iconos de servicios para 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. MARKETING SMS MASIVO MOBILE MARKETING 62PX 62PX 62PX 53PX 53PX 53PX Solo se deben usar en el inicio del stio web (index) 28PX 28PX 28PX 33PX 33PX 33PX Se usan en cada uno de los servicios. PAG. 09

10 ICONOS CONJUNTO DE ICONOS MARKETING Los iconos secundarios de Marketing funcionan para identificar los 4 puntos mas importantes del servicio y van acompañados de un bloque de texto. Ingreso a plataforma Resultados Elaborar campaña Fecha CONJUNTO DE ICONOS MOBILE MARKETING 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 EJEMPLO DE USO Malo PAG. 10

11 ICONOS CONJUNTO DE ICONOS CABECERA 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 ). Nosotros Contáctenos Buscar CONJUNTO DE ICONOS REDES SOCIALES 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. CONJUNTO DE ICONOS CABECERA SOPORTE EN LINEA 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 Disponible No disponible EJEMPLO DE USO Twitter Facebook Youtube PAG. 11

12 ICONOS CONJUNTO DE ICONOS CUENTA USUARIO Los iconos de cuenta y usuario tienen la función de ubicar aún mas al usuario, ya sea para registrarse, ingresar o salir de la cuenta si se encuentra logueado. Su tamaño debe ser de 17 X12px Color ( #FFFFF ). CONJUNTO DE ICONOS REGISTRO DE FORMULARIO Los iconos de registro de formulario tienen la función de informar al usuario que campos del registro se encuentran correctos y cuales incorrectos. Su tamaño debe ser de 31 X 31px. Registro, Mi cuenta Ingresar, Salir Campo Correcto Campo Incorrecto EJEMPLO DE USO EJEMPLO DE USO PAG. 12

13 ESTILOS, TAMAÑOS Y USOS DE IMÁGENES BANNER 403px 310px 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

14 ESTILOS, TAMAÑOS Y USOS DE IMÁGENES NOTICIAS 107px 74px 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

15 ESTILOS, TAMAÑOS Y USOS DE IMÁGENES USO DE IMÁGENES PARA MARKETING, SMS MASIVO, MOBILE MARKETING 250px 350px 240px 240px 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

16 ESTILOS, TAMAÑOS Y USOS DE IMÁGENES USO DE IMÁGENES PARA NOSOTROS 660px 230px 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

17 ESTRUCTURA WEB DESCRIPCIÓN DE LA ESTRUCTURA VERTICALIDAD 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áginas La 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. JERARQUIA DE LA INFORMACIÓN La lógica visual se basa en la sencillez y el pragmatismo, elementos 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. PAG.17

18 CABECERA USO DE CABECERAS PERSONALIZADAS El encabezado del sitio web se compone de 12 elementos que son: Logotipo, Nosotros, contáctenos, soporte en línea, registro, ingresar, inicio, 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. ANCHO: 291 px ALTO: 87px El uso del logo de Sigma Móvil se muestra en su versión horizontal, con un tamaño fijo en todos los casos Figura 1 Usuario logueado PAG. 18

19 CABECERA CABECERA INICIO # FONDO DEGRADADO VERTICAL #9D9FA2 La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF ) PAG. 19

20 CABECERA CABECERA LOGOTIPO, REGISTRO, INGRESAR, SOPORTE EN LÍNEA, NOSOTROS Y CONTÁCTENOS 289PX 86PX Fuente OPEN SANS tamaño 13px, color ( #5b5c5c ) Soporte en línea: Color ( #5b5c5c ) tamaño 16px ONLINE: Color ( # 3ca94f ) tamaño 16px en mayúsculas PAG. 20

21 CABECERA CABECERA MARKETING #EC80B5 FONDO DEGRADADO VERTICAL #E5539B La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF ) PAG.21

22 CABECERA CABECERA SMS MASIVO #5790D0 FONDO DEGRADADO VERTICAL #246FC2 La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF ) PAG. 22

23 CABECERA CABECERA MOBILE MARKETING #F5A859 FONDO DEGRADADO VERTICAL #F28C26 La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF ) PAG. 23

24 CABECERA CABECERA REDES SOCIALES Y BUSCADOR #C4C4C7 FONDO DEGRADADO VERTICAL #B3B4B8 La fuente utilizada para sección de redes sociales y buscador es DOSIS tamaño 15px Semibold color Gris ( #5F5B5B ) PAG.24

25 ESTRUCTURA INDEX BANNERS Los avisos se componen de imágen, título, subtitulo, párrafo y enlaces. El título principal no debe exceder los 24 caracteres. El subtítulo no debe exceder los 35 caracteres El párrafo mínimo debe de ser de dos lineas y máximo 3. Número máximo de avisos 4. SERVICIOS 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 2 El párrafo debe de tener minimo 4 líneas de texto y máximo 5. NOTICIAS 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. EJEMPLO DE USO Título Color: (#4485C6) Fuente : Dosis Tamaño: 15px Párrafo: Color: (#58595B) Fuente: Open Sans Tamaño: 13px PAG.25

26 ESTRUCTURA INTERIOR MARKETING La estructura utilizada para esta sección se compone 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 ) A B A TÍTULO 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. D C B PÁRRAFO PRINCIPAL 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. E C PÁRRAFO SECUNDARIO El párrafo secundario es de color ( #58595B ) y tamaño de fuente 15.5px. D VIDEO Videotutorial de cómo funciona el servicio de marketing, los videos son llamados de youtube y las dimensiones deben ser de 440px (ancho) X 228px (alto). E SUBTÍTULO El subtítulo secundario de cada sección debe ser en mayúsculas a 1 línea o máximo a 2, color ( #85857D ) y tamaño de fuente 18px. PAG. 26

27 ESTRUCTURA INTERIOR MARKETING 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. A A TÍTULO 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. B SUBTÍTULO 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. C B C IMÁGENES Las imágenes de apoyo de los textos deben tener un ancho mínimo de 250px y un ancho máximo de 350px. PAG. 27

28 ESTRUCTURA INTERIOR MARKETING A 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. B TÍTULO PLANES 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. A B Ejemplo tabla de precios. Elemento de cabecera Color: (#FFFFF) Dosis, Minúscula Celda de cabecera Color: (#D64A8F) Celda de cabecera Color: (#6D6E76) Celda de contenido Color: (#D8DDE1) PAG. 28

29 ESTRUCTURA INTERIOR MARKETING MENÚ VERTICAL Tamaño icono: 28px x 33px Tamaño fuente: 25px, Mayúsculas Color fuente: (#D64A8F) Estado botón: Seleccionado Fondo: (#D64A8F) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Estado botón: Sin seleccionar Fondo: (#6D6E76) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: (#4489C6 ) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: #0754AB Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold PAG. 29

30 ESTRUCTURA INTERIOR SMS MASIVO La estructura utilizada para esta sección se compone 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 ) A B A 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. B 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. C TÍTULO PÁRRAFO PRINCIPAL LISTADOS MÚLTIPLES DE ELEMENTOS 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. D VIDEO Esta es otra forma de mostrar los videotutoriales del servicio, a diferencia del servicio de Marketing este se muestra en un pop up o light box. C D PAG. 30

31 ESTRUCTURA INTERIOR SMS MASIVO A 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. B TÍTULO PLANES 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. A B Ejemplo tabla de precios. Elemento de cabecera Color: (#FFFFF) Dosis, Minúscula Celda de cabecera Color: (#1A68BF) Celda de cabecera Color: (#6D6E76) Celda de contenido Color: (#D8DDE1) PAG. 31

32 ESTRUCTURA INTERIOR SMS MASIVO MENÚ VERTICAL Tamaño icono: 28px X 33px Tamaño fuente: 25px, Mayúsculas Color fuente: (#1A68BF) Estado botón: Seleccionado Fondo: (#D64A8F) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Estado botón: Sin seleccionar Fondo: (#6D6E76) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: (#4489C6) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: (#0754AB) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold PAG. 32

33 ESTRUCTURA INTERIOR MOBILE MARKETING La estructura utilizada para esta sección se compone de un menú vertical que contiene 2 botones pricipales del servicio, que son: * Nuestros servicios * Beneficios y razones El color utilizado para el servicio es ( #F2891F ) A B A 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. B TÍTULO PÁRRAFO PRINCIPAL 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. C BLOQUES DE TEXTO 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. C PAG. 33

34 ESTRUCTURA INTERIOR MOBILE MARKETING A 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. B TÍTULO PLANES 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. Ejemplo tabla de precios. Elemento de cabecera Color: (#FFFFF) Dosis, Minúscula Celda de cabecera Color: (#F2891F) Celda de contenido Color: (#D8DDE1) A B PAG. 34

35 ESTRUCTURA INTERIOR MOBILE MARKETING MENÚ VERTICAL Tamaño icono: 28px X 33px Tamaño fuente: 25px, Mayúsculas Color fuente: (#F2891F) Estado botón: Seleccionado Fondo: (#D64A8F) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Estado botón: Sin seleccionar Fondo: (#F2891F) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: (#4489C6) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold Fondo: (#0754AB) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold PAG. 35

36 ESTRUCTURA INTERIOR SECTOR ECONÓMICO Combo box de selección del sector económico. A COMBO BOX El combo box contiene 10 sectores económicos, se pueden adicionar o eliminar la cantidad que sean necesarios. Tamaño icono: 28px X 33px Tamaño fuente: 25px, Mayúsculas Color fuente: (#1A68BF) Estado botón: Seleccionado Fondo: (#1A68BF) Tamaño fuente: 14px, Mayúsculas Color fuente: (#FFFFF) Fuente: Dosis, Bold A PAG. 36

37 ESTRUCTURA INTERIOR REGISTRO INGRESAR A CUENTA PAG. 37

38 ESTRUCTURA INTERIOR CUENTA DE USUARIO INICIO CUENTA DE USUARIO COMPRAR, RECARGAR PAG. 38

39 ESTRUCTURA INTERIOR CUENTA DE USUARIO EDITAR PERFIL PAG. 39