TDG1332A(1)

Vista previa del material en texto

MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
TABLA DE CONTENIDOS
PAG. 02
Í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. 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.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: 
 http://www.elealdesigns.com/web_test2/index.html
INTRODUCCIÓN
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
PAG. 04
COLORES PRINCIPALES DEL SITIO
COLOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
LOGOTIPO GAMA DE COLORES ESTILO DE COLORES SITIO WEB
GRIS OSCURO
WEB ( HTML )
#646568
GRIS
WEB ( HTML )
#98A1A6
NARANJA
WEB ( HTML )
#F2891F
AZUL
WEB ( HTML )
#E54F99
VIOLETA
WEB ( HTML )
#D64A8F
AZUL OSCURO
WEB ( HTML )
#0754AC y #0754AB
AZUL
WEB ( HTML )
#0063C4
GRIS
WEB ( 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 de
colores dentro de la paleta de 
estilo.
PAG. 05 
TIPOGRAFÍAS PRINCIPALES DEL SITIO
TIPOGRÁFIA
MANUAL 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ÍA
MANUAL 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 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. 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
GRIS
WEB ( HTML )
#58595B
PAG. 09
ICONOS
MANUAL 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
ICONOS
MANUAL 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
ICONOS
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
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 informaral usuario que dispone de 
soporte en línea via chat, el cual tiene dos estados: 
Disponible y No Disponible 
EJEMPLO DE USO
PAG. 12
ICONOS
MANUAL 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ÁGENES
MANUAL 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ÁGENES
MANUAL 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ÁGENES
MANUAL 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ÁGENES
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
NOSOTROS
660px
230px
PAG.17
ESTRUCTURA WEB
MANUAL 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á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.
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 px
ALTO: 87px
El 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 1
Usuario logueado
PAG. 18
USO DE CABECERAS PERSONALIZADAS
CABECERA
MANUAL 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
CABECERA
MANUAL 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
CABECERA
MANUAL 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 16px
ONLINE: 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
CABECERA
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CABECERA EMAIL MARKETING
FONDO DEGRADADO VERTICAL
PAG. 22
CABECERA
MANUAL 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
CABECERA
MANUAL 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
CABECERA
MANUAL 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 INDEX
MANUAL 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 caracteres
El 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 2
El 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ítulo
Color: (#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 INTERIOR
MANUAL 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 INTERIOR
MANUAL 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 INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
El títuloprincipal 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
B
B
Elemento de cabecera
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#D64A8F)
Celda de cabecera
Color: (#6D6E76)
Celda de contenido
Color: (#D8DDE1)
EMAIL MARKETING MENÚ VERTICAL
PAG. 29
ESTRUCTURA INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
Estado botón: Seleccionado
Fondo: (#D64A8F) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
Tamaño icono: 28px x 33px
Tamaño fuente: 25px, Mayúsculas
Color fuente: (#D64A8F)
Estado botón: Sin seleccionar
Fondo: (#6D6E76) 
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 
Fondo: (#4489C6 ) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
PAG. 30
ESTRUCTURA INTERIOR
MANUAL 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 INTERIOR
MANUAL 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
B
B
Elemento de cabecera
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#1A68BF)
Celda de cabecera
Color: (#6D6E76)
Celda de contenido
Color: (#D8DDE1)
SMS MASIVO MENÚ VERTICAL
PAG. 32
ESTRUCTURA INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
Estado botón: Seleccionado
Fondo: (#D64A8F) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
Tamaño icono: 28px X 33px
Tamaño fuente: 25px, Mayúsculas
Color fuente: (#1A68BF)
Estado botón: Sin seleccionar
Fondo: (#6D6E76) 
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 
Fondo: (#4489C6) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
PAG. 33
ESTRUCTURA INTERIOR
MANUAL 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 razones
El 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 INTERIOR
MANUAL 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
B
B
Elemento de cabecera
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#F2891F) 
Celda de contenido
Color: (#D8DDE1)
MOBILE MARKETING
MOBILE MARKETING MENÚ VERTICAL
PAG. 35
ESTRUCTURA INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
Estado botón: Seleccionado
Fondo: (#D64A8F) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
Tamaño icono: 28px X 33px
Tamaño fuente: 25px, Mayúsculas
Color fuente: (#F2891F)
Estado botón: Sin seleccionar
Fondo: (#F2891F) 
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 
Fondo: (#4489C6) 
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold 
PAG. 36
ESTRUCTURA INTERIOR
MANUAL 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
A
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 
PAG. 37
ESTRUCTURA INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
REGISTRO INGRESAR A CUENTA
PAG. 38
ESTRUCTURA INTERIOR
MANUAL 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 INTERIOR
MANUAL DE ESTILO GRÁFICO
Guía de uso general para maquetación web
CUENTA DE USUARIO EDITAR PERFIL