| Guía de Estilos |

FILLY GUÍA DE ESTILOS

Tabla de Contenidos

Introducción Estructurando Elementos de la Marca Guía de Diseño

03 Sobre esta Guía de Estilos 04 Arquitectura de la 06 Logo 07 Paleta de Color

Información 08 Tipografía
05 Tono de 09 Íconos
Comunicación 10 Layout
11 Botones
12 Text Inputs
13 Header
INTRODUCCIÓN

2
 FILLY GUÍA DE ESTILOS
About

En el siguiente documento encontrará la

guía de estilos propuesta para la landing
page de la empresa Filly. La cual abarcará
tanto elementos gráficos como de
estructura (layout) de la página web. Así
mismo se deja constancia en estas guías de
la línea gráfica con la que se trabajo el
prototipo de la misma, la cual podrá ser
usada en el futuro, en caso se requiera,
para cualquier otro elemento digital de la
empresa. Además esta propuesta se basará
en el estilo, colores y tono que ya utilizaba
la empresa para no representar un cambio
tan brusco o poco conocido por sus
usuarios. Por lo que las mejoras
presentadas se podrán tomar en cuenta
INTRODUCCIÓN

para ser implementadas en futuros

proyectos o en la web actual.

3
 FILLY GUÍA DE ESTILOS
Arquitectura de la Información

En el siguiente gráfico se muestra cómo es que vamos a organizar la información que va a contener nuestra propuesta de
re-diseño de la landing page de Filly.

Home

Certificaciones y
Header Servicios Membresías Beneficios Opiniones Clientes Contáctanos Footer
Premios

Información de
NavBar Recojo Standar Aligerar la carga laboral Comentario 1 Premio 1 Sé parte del Team Filly
Contacto

Botón “Trabaja con Nosotros”

Hero Title Almacenamiento Filly Optimizar de costos Formulario de Datos de (CTA)
Comentario 2 Premio 2
operativos Cliente

Descripción
Nombre y Apellidos Logo Filly
del Servicio Empaquetado Lite Digitalización y control Comentario 3 Premio 3

Botón “Cómo Funciona”

ESTRUCTURANDO

Número de Celular
(Call To Action) Redes Sociales
Última Milla Rapidez y efectividad Comentario 4 Premio 4

E-mail
Botón de Chat

Mensaje
Preguntas Frecuentes
(FAQ)

Botón Enviar
Chat On-line Personal de
la Empresa

Página Sección Sub-sección Sub- sub sección

4
 FILLY GUÍA DE ESTILOS
Tono de Comunicación

¿Cómo sería Filly si fuera una persona?

Filly es como ese tipo de amigo que siempre que

Tono de Comunicación de Filly estás en alguno apuro o tienes algún problema, él
está ahí para ayudarte. Es alguien con quien puedes
Filly es una empresa de fulfillment que se caracteriza contar sea cual sea la situación, pues no te falla.
por mostrar un tono cercano, directo y amigable con
sus usuarios, características muy valoradas en el
rubro pues deben demostrar confianza y
profesionalismo, especialmente con los nuevos
clientes.
ESTRUCTURANDO

Es el tipo de persona que siempre está involucrado

en varias cosas, pero como sea hace tiempo en su
apretada agenda, para lograr encontrarse y verse
aunque sea un ratito.

5
 FILLY GUÍA DE ESTILOS
Logo

Logo

El logotipo de Filly consta de dos colores: el negro y el amarillo. La primera letra del mismo tiene forma de un rayo en la
parte final, así como una sombra amarilla que mantiene la misma forma y además es parte de la cruz de la F (es decir la
línea que la atraviesa). Un uso aceptado del logo es el de solo la letra F con el rayo detrás en el caso de los favicons o de la
foto de perfil de las redes sociales.
ELEMENTOS DE LA MARCA

6
 FILLY GUÍA DE ESTILOS
Paleta de Color

Colores Primarios
Se empleará para íconos, botones, títulos,
#E6B519 #121212 subtítulos, datos específicos únicos y
relevantes. Además en textos “call-to-action”
y como color de fondo de la landing.

Colores Secundarios
Se empleará para textos secundarios dentro
#FFFFFF #999999 de párrafos así como para algunos titulares,
ya que generarán contraste con el fondo
negro.

Colores Terciarios

Para elementos terciarios como detalles en

GUIA DE DISEÑO

#F9D55F #F2F2F2 los fondos o para elementos pequeños que

acompañan las secciones de la landing page.

#DBB23F #646464

7
 FILLY GUÍA DE ESTILOS
Tipografía

Fuente que vamos a utilizar:

La TypeFont que vamos a utilizar va ser Poppins, la cual es una tipografía baste simple, san-serif y que cuenta con distintas
variantes para poder ser utilizadas de acuerdo a la jerarquía de los textos. Además, Filly utiliza este tipo de fuente
minimalista para facilitar la lectura y darle un toque mucho más estético.

Poppins

Poppins Light H1 / Poppins Bold Call to action / Poppins Semibold

Poppins Regular H2 / Poppins Semibold Footer Text / Poppins Medium

Poppins Semibold H3 / Poppins Medium Input Form / Poppins Regular

Poppins Bold Text / Poppins Regular Input Selected / Poppins Semibold

GUIA DE DISEÑO

Aa
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the
industry’s standard dummy text ever since the 1500s,
when an unknown printen took a gallery of type and scrambled it to make
a type specimen book. It has survided not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. Poppins

8
 LINKEDIN GUÍA DE ESTILOS
Íconos

Íconografía:

Se propone el uso de íconos de tipo lineal ya que la plataforma en su mayoría tendrá un estilo minimalista, de esta manera,
se pretenden que éstos sean el foco de atención y ayuden al usuario a tener una mejor comprensión de los elementos de
la web.

Sección Servicios Recojo Almacenamiento Empaquetado Última Milla

Ventana de Chat Enviar Adjuntar Bubble Chat

GUIA DE DISEÑO

Aligerar la Optimizar de Digitalización Rapidez

Sección Beneficios carga laboral costos operativos y control y eficiencia

Cuadro Contáctanos Teléfono E-mail Dirección

9
 FILLY GUÍA DE ESTILOS
Layout

Barra de Navegación

A continuación mostraremos una serie de

Header

layouts que hemos realizado como parte

Comentarios de Clientes

de la estructura de nuestra información y Hero Title

cómo es que planeamos distribuir los

Comentario 1 Comentario 2 Comentario 3

distintos elementos que conformarán la Button ChatBot

landing page de Filly.

Nuestros Servicios

Blog

Servicio 1

Página principal: Servicio 2 Titulo del Blog Post Titulo del Blog Post Titulo del Blog Post

Leer más > Leer más > Leer más >

Como parte de nuestra Servicio 3

propuesta, se decidió realizar la

landing apge, utilizando el patrón Servicio 4
¿Quieres ser parte del Team Filly? Button

Hero, pues de esa manera

lograremos una presentación
GUIA DE DISEÑO

rápida, breve y concisa de

Membresías

quiénes somos y de nuestro Footer

producto.
Membresía 1 Membresía 2 Membresía 3

La imagen fue dividida en dos

parte para poder mostrar con
mucha mayor claridad cada uno
de los elementos que la Beneficios

conforman.

Beneficio 1 Beneficio 2 Beneficio 3 Beneficio 4

10
 FILLY GUÍA DE ESTILOS
Botones

Botones:

Para el caso de los botones, se propone utilizar el color amarillo principal y carácterísticos de Filly. Además que tendrá dos
versiones, donde el primario será contained y el secundario outlined. A continuación se muestran sus dos versiones así
como sus diversos esrados:

Primario

Enabled Hovered Focused Pressed Dragged Disabled

Secundario

Enabled Hovered Focused Pressed Dragged Disabled

GUIA DE DISEÑO

Malas Prácticas:

Ejemplo 1 Ejemplo 2 Ejemplo 3 de Botón con Texto Ejemplo 4 Ejemplo 5

Poco contraste entre Esquinas demasiado Textos demasiado largos y que no se Utilizar colores fuera de Utilizar un estilo
texto y fondo del botón redondeadas respeten los espaciados a los lados la paleta establecida tipográfico diferente

11
 FILLY GUÍA DE ESTILOS
Text Inputs

Text Inputs:

Nuestros inputs de textos se utilizarán principalmente para llenar los datos personales de los nuevos clientes en la ficha de
Contáctanos, por lo que a continuación se detallan sus versiones así como sus estados:

Inicial Activo Completo

Label Lorem ipsu Lorem ipsum

Error
GUIA DE DISEÑO

Lorem ipsum

*necesario

12
 FILLY GUÍA DE ESTILOS
Header

Header:

A continuación se muestran los elementos que conforman el header de nuestra página. Siendo (de izquierda a derecha) el
logo de la marca Filly, las secciones de la landing (inicio, servicios, membresías, beneficios, clientes y contáctenos), así como
Iniciar Sesión para ingresar a nuestro Dashboard interno.

Desktop

Filly Servicios Membresías Beneficios Clientes Contáctanos Iniciar Sesión

Mobile Tablet
GUIA DE DISEÑO

Tanto la versión Mobile como Tablet, mostrarán el menú con las opciones principales dentro del ícono de Menú
Hamburgesa, fácilitando así la visualIzación de todos los elementos. Además que al darle tap al mismo, éste cambiará por
una X por si el usuario desea cerrar el mismo y que éste vuelva a contraerse a su versión inicial.

13