You are on page 1of 39

MANUAL DE ESTILO GRÁFICO

Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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. http://www.elealdesigns.com/web_test2/index.html

PAG. 02 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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:


http://www.elealdesigns.com/web_test2/index.html

PAG. 03 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
COLOR

COLORES PRINCIPALES DEL SITIO


LOGOTIPO GAMA DE COLORES ESTILO DE COLORES SITIO WEB
Los colores corporativos de Sigma La paleta de colores (derecha)
Móvil son usados en cada una de proporciona a cada servicio la
las páginas de servicios del sitio oportunidad de tener una identidad
web. visual única.
Ha sido específicamente diseñada
para ser amistosa.
GRIS OSCURO Estos colores identifican cual es el
WEB ( HTML ) servicio y en que parte del sitio se
#646568 encuentra el usuario.
Los valores hexadecimales docu-
mentados se deben utilizar para
AZUL cada uno de los servicios. GRIS AZUL
WEB ( HTML ) Además de estas especificaciones, WEB ( HTML ) WEB ( HTML )
#0063C4 el sitio web utiliza una gama de #98A1A6 #E54F99
colores dentro de la paleta de
estilo.
AZUL OSCURO
WEB ( HTML ) NARANJA VIOLETA
#0754AC y #0754AB WEB ( HTML ) WEB ( HTML )
#F2891F #D64A8F

GRIS
WEB ( HTML )
#BBBBC1 y #C8C9CC

PAG. 04 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Semi-Bold 600


Grumpy wizards make toxic brew for the evil Grumpy wizards make toxic brew for the
Queen and Jack. evil Queen and Jack.
Book 300 Bold 700
Grumpy wizards make toxic brew for the evil Grumpy wizards make toxic brew for the
Queen and Jack. evil Queen and Jack.
Normal 400 Extra-Bold 800
Grumpy wizards make toxic brew for the Grumpy wizards make toxic brew for
evil Queen and Jack. the evil Queen and Jack.
Medium 500
Grumpy wizards make toxic brew for the
evil Queen and Jack.

PAG. 05 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
TIPOGRAFÍA

OPEN SANS STEVE MATESSON

Book 300 Semi-Bold 600 Italic


Grumpy wizards make toxic brew for Grumpy wizards make toxic brew for
the evil Queen the evil Queen
Book 300 Italic Bold 700
Grumpy wizards make toxic brew for Grumpy wizards make toxic brew
the evil Queen for the evil Queen
Normal 400 Bold 700 Italic
Grumpy wizards make toxic brew Grumpy wizards make toxic brew
for the evil Queen for the evil Queen
Normal 400 Italic Extra-Bold 800
Grumpy wizards make toxic brew for Grumpy wizards make toxic
the evil Queen brew for the evil Queen
Semi-Bold 600 Extra-Bold 800 Italic
Grumpy wizards make toxic brew Grumpy wizards make toxic brew
for the evil Queen for evil Queen

PAG. 06 Guía de uso general para maquetación web


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

ESTILO DE TITULOS Y SUBTÍTULOS

DOSIS PABLO IMPALLARI


DOSIS es una fuente redonda de la
TÍTULO 1 EJEMPLO <H1>
TÍTULO 2 EJEMPLO <H2>
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.
TÍTULO <H3>
Para el “banner” principal se hace
uso de las etiquetas h1 y h3. TÍTULO 3 EJEMPLO <H4>
TÍTULO 4 EJEMPLO <H4>

PAG. 07 Guía de uso general para maquetación web


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

<PÁRRAFO 1>
ESTILO DE PÁRRAFOS
Lorem ipsum dolor sit amet, consectetur adipi-
OPEN SANS STEVE MATESSON scing elit. Nunc venenatis, lectus at facilisis luctus,
Se usan 4 estilos de parráfos en el
sitio web de sigma móvil, cada uno libero ligula sagittis elit, sed egestas diam nunc ac
tiene una función que más adelante
se podrá visualizar. dui.
OPEN SANS es una fuente humanista
sans serif. Es un tipo de letra legible <PÁRRAFO 2>
para la visualización en pantalla y el Lorem ipsum dolor sit amet, consectetur adipiscing elit.
uso en Internet.
OPEN SANS es la fuente estándar Nunc venenatis, lectus at facilisis luctus, libero ligula
que se utiliza en el sitio web de sigma
móvil y sus colores de estilo (dere- sagittis elit, sed egestas diam nunc ac dui.
cha) para todos y cada uno de los
parráfos es ( #58595B ). <PÁRRAFO 3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc venenatis, lectus at facilisis luctus, libero ligula sagittis
GRIS
WEB ( HTML ) elit, sed egestas diam nunc ac dui.
#58595B
<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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ICONOS

USO DE ICONOS Y DESCRIPCIÓN


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.

EMAIL 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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ICONOS

CONJUNTO DE ICONOS EMAIL MARKETING CONJUNTO DE ICONOS MOBILE MARKETING


Los iconos secundarios de Email Marketing funcio- Mobile Marketing se compone de 3 iconos que funcionan
nan para identificar los 4 puntos mas importantes para evaluar la sastisfacción del cliente frente a un servicio
del servicio y van acompañados de un bloque de determinado.
texto. Se hace uso de 3 estados de animo “mood” que son:
bueno, aceptable y malo.
Ingreso a plataforma Su tamaño debe ser de 51 X 60px
Color, Verde ( #78a00b ), Azul ( #0b68d0 ), Rojo ( #cf4151 )
Resultados

Bueno
Elaborar campaña

Aceptable
Fecha

EJEMPLO DE USO Malo

PAG. 10 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ICONOS

CONJUNTO DE ICONOS CABECERA CONJUNTO DE ICONOS CABECERA SOPORTE EN LINEA


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

Buscar
Disponible

CONJUNTO DE ICONOS REDES SOCIALES No disponible


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

Twitter

Facebook

Youtube

PAG. 11 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ICONOS

CONJUNTO DE ICONOS CUENTA USUARIO CONJUNTO DE ICONOS REGISTRO DE FORMULARIO


Los iconos de cuenta y usuario tienen la función de Los iconos de registro de formulario tienen la fun-
ubicar aún mas al usuario, ya sea para registrarse, in- ción de informar al usuario que campos del registro
gresar o salir de la cuenta si se encuentra “logueado”. se encuentran correctos y cuales incorrectos.
Su tamaño debe ser de 17 X12px Color ( #FFFFF ). Su tamaño debe ser de 31 X 31px.

Registro, Mi cuenta Campo Correcto

Ingresar, Salir Campo Incorrecto

EJEMPLO DE USO EJEMPLO DE USO

PAG. 12 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


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

USO DE IMÁGENES PARA


EMAIL 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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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, 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.

PAG.17 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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, 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.

ANCHO: 291 px
ALTO: 87px
El uso del logo de Sigma Móvil se mues- Figura 1
tra en su versión horizontal, con un Usuario logueado
tamaño fijo en todos los casos

PAG. 18 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
CABECERA

CABECERA INICIO

#767779

FONDO DEGRADADO VERTICAL

#9D9FA2

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

PAG. 19 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
CABECERA

CABECERA EMAIL 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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INDEX

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.
BANNERS
Los avisos se componen de imágen, título, subti- EJEMPLO DE USO
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. Título
Número máximo de avisos 4. Color: (#4485C6)
Fuente : Dosis
SERVICIOS Tamaño: 15px
El sitio se compone de 3 servicios y cada uno tiene
un título junto con su icono, subtítulo , parráfo y Párrafo:
enlace. Color: (#58595B)
Los subtítulos deben ser mínimo 1 línea de texto y Fuente: Open Sans
máximo 2
Tamaño: 13px
El párrafo debe de tener minimo 4 líneas de texto
y máximo 5.

PAG.25 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

EMAIL MARKETING
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
A
* Beneficios y razones
* Precios B
El color utilizado para el servicio es ( #D64A8F )

A TÍTULO
D C
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.

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

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 Email 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ús-
culas a 1 línea o máximo a 2, color ( #85857D ) y tamaño de
fuente 18px.

PAG. 26 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

EMAIL 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
C B
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 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 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

EMAIL MARKETING

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. A
B PLANES
Los planes que se ofrecen se deben manejar en tablas y se B
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.


Celda de cabecera
Elemento de cabecera
Color: (#6D6E76)
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#D64A8F)
Celda de contenido
Color: (#D8DDE1)

PAG. 28 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

EMAIL 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 ) Fondo: #0754AB


Tamaño fuente: 14px, Mayúsculas Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF) Color fuente: (#FFFFF)
Fuente: Dosis, Bold Fuente: Dosis, Bold

PAG. 29 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

SMS MASIVO
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
A
* Beneficios y razones
* Precios B
El color utilizado para el servicio es ( #1A68BF )
C
A TÍTULO
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. D

B PÁRRAFO PRINCIPAL
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 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 Email Marketing este se muestra en
un “pop up” o “light box”.

PAG. 30 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

SMS MASIVO

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. A
B PLANES
Los planes que se ofrecen se deben presentar en tablas y B
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.


Celda de cabecera
Elemento de cabecera
Color: (#6D6E76)
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#1A68BF)
Celda de contenido
Color: (#D8DDE1)

PAG. 31 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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) Fondo: (#0754AB)


Tamaño fuente: 14px, Mayúsculas Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF) Color fuente: (#FFFFF)
Fuente: Dosis, Bold Fuente: Dosis, Bold

PAG. 32 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

MOBILE MARKETING
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
A
* Beneficios y razones
El color utilizado para el servicio es ( #F2891F ) B

A TÍTULO
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 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 C
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.

PAG. 33 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

MOBILE MARKETING

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.
A
B PLANES
Los planes que se ofrecen se deben presentar en tablas y se B
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)

PAG. 34 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
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) Fondo: (#0754AB)


Tamaño fuente: 14px, Mayúsculas Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF) Color fuente: (#FFFFF)
Fuente: Dosis, Bold Fuente: Dosis, Bold

PAG. 35 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

SECTOR ECONÓMICO
“Combo box” de selección del sector económico.

Tamaño icono: 28px X 33px


A “COMBO BOX” Tamaño fuente: 25px, Mayúsculas
El “combo box” contiene 10 sectores económicos, se Color fuente: (#1A68BF)
pueden adicionar o eliminar la cantidad que sean necesa-
rios.

Estado botón: Seleccionado


Fondo: (#1A68BF)
Tamaño fuente: 14px, Mayúsculas
Color fuente: (#FFFFF)
Fuente: Dosis, Bold

PAG. 36 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

REGISTRO INGRESAR A CUENTA

PAG. 37 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

CUENTA DE USUARIO INICIO CUENTA DE USUARIO COMPRAR, RECARGAR

PAG. 38 Guía de uso general para maquetación web


MANUAL DE ESTILO GRÁFICO
ESTRUCTURA INTERIOR

CUENTA DE USUARIO EDITAR PERFIL

PAG. 39 Guía de uso general para maquetación web

You might also like