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
Guía de uso general para maquetación web
PAG. 04
COLORES PRINCIPALES DEL SITIO
COLORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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>
Guía de uso general para maquetación web
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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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
ICONOSMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ICONOSMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
Nosotros
Disponible
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
ICONOSMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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
ESTILOS, TAMAÑOS Y USOS DE IMÁGENESMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTILOS, TAMAÑOS Y USOS DE IMÁGENESMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTILOS, TAMAÑOS Y USOS DE IMÁGENESMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
NOSOTROS
660px
230px
PAG.17
ESTRUCTURA WEBMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
PAG.21
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CABECERA EMAIL MARKETING
FONDO DEGRADADO VERTICAL
PAG. 22
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CABECERA SMS MASIVO
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
#5790D0
#246FC2
FONDO DEGRADADO VERTICAL
PAG. 23
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CABECERA MOBILE MARKETING
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
#F5A859
#F28C26
FONDO DEGRADADO VERTICAL
PAG.24
CABECERAMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
FONDO DEGRADADO VERTICAL
PAG.25
ESTRUCTURA INDEXMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
Guía de uso general para maquetación web
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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.
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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.
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.
Ejemplo tabla de precios.
SMS MASIVO
TÍTULO
PLANES
A
A
BB
Elemento de cabeceraColor: (#FFFFF)Dosis, Minúscula
Celda de cabeceraColor: (#1A68BF)
Celda de cabeceraColor: (#6D6E76)
Celda de contenidoColor: (#D8DDE1)
SMS MASIVO MENÚ VERTICAL
PAG. 32
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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: (#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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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.
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.
TÍTULO
PLANES
A
A
BB
Elemento de cabeceraColor: (#FFFFF)Dosis, Minúscula
Celda de cabeceraColor: (#F2891F)
Celda de contenidoColor: (#D8DDE1)
MOBILE MARKETING
MOBILE MARKETING MENÚ VERTICAL
PAG. 35
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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: (#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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
“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
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
REGISTRO INGRESAR A CUENTA
PAG. 38
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CUENTA DE USUARIO INICIO CUENTA DE USUARIO COMPRAR, RECARGAR
PAG. 39
ESTRUCTURA INTERIORMANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CUENTA DE USUARIO EDITAR PERFIL