Professional Documents
Culture Documents
Í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
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.
GRIS
WEB ( HTML )
#BBBBC1 y #C8C9CC
<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.
Bueno
Elaborar campaña
Aceptable
Fecha
Buscar
Disponible
Youtube
BANNER
403px
310px
NOTICIAS
107px
74px
240px 240px
660px
230px
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.
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
CABECERA INICIO
#767779
#9D9FA2
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
289PX
86PX
#EC80B5
#E5539B
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
#5790D0
#246FC2
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
#F5A859
FONDO DEGRADADO VERTICAL
#F28C26
La fuente utilizada para el menú de navegación es DOSIS tamaño 15px Semibold color blanco ( #FFF )
#C4C4C7
#B3B4B8
La fuente utilizada para sección de redes sociales y buscador es DOSIS tamaño 15px Semibold color Gris ( #5F5B5B )
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.
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.
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.
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.
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.
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”.
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.
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.
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.
Elemento de cabecera
Color: (#FFFFF)
Dosis, Minúscula
Celda de cabecera
Color: (#F2891F)
Celda de contenido
Color: (#D8DDE1)
SECTOR ECONÓMICO
“Combo box” de selección del sector económico.