La propuesta presenta dos looks and feels para la interfaz gráfica de CMR Beneficios basados en el estilo "Flat design". La Propuesta 1 conserva la esencia original usando colores planos, mientras que la Propuesta 2 tiene un fondo totalmente plano y varía la presentación de los íconos. Ambas propuestas se aplican a las versiones desktop y mobile.
2. Pensando en ofrecer una interfaz gráfica adecuada a las necesidades
actuales, se ha elegido como referente la tendencia “Flat design” o
“Diseño plano”, que aporta a que la comunicación sea efectiva y fun-
cional empleando paletas de colores vivos , tipografías sin serifa (ju-
gando con sus variaciones y tamaños), iconos (siluetas) que sean
comprensibles y botones sencillos; sin hacer uso de sombras, degra-
dados y viselados.
Referentes
3. Propuesta
La propuesta gráfica se fundamenta en el uso de colores planos, de-
jando de lado degradados, sombras y biselados. Se respetó la dia-
gramación y concepto original.
Los colores se eligieron teniendo en cuenta la imagen corporativa de
Tiendas Falabella y Homecenter.
A continuación, se mostarán los cambios en los elementos que más
influyen en el diseño.
COLORES
#0071b9 #005d9c #7ac143 #64a137 #56575a #4a4c4e #f7fafc
Propuesta
4. Propuesta
Se presentarán dos tipos de botones para las versiones desktop y
mobile del sitio
BOTONES
Propuesta
Versión Desktop
Beneficios
Restaurantes Restaurantes
Falabella Homecenter
Salud y Belleza Salud y Belleza
Viajes Falabella Viajes Falabella
Otros Otros
Beneficios
Propuesta 1: Conserva la escencia de la interfaz origi-
nal, lo que lo hace diferente, es que el uso colores planos
para dar volumen.
Restaurantes Restaurantes
Salud y BellezaSalud y Belleza Salud y BellezaSalud y Belleza
Viajes FalabellaViajes Falabella
Otros Otros
Beneficios
HomecenterFalabella
Beneficios
Propuesta 2: Conserva algunos elementos de la interfaz
original, los íconos varían en su presentación y de fondo
solo se usa un color, diferencia de la anterior propuesta.
Restaurantes Restaurantes
Salud y BellezaSalud y Belleza Salud y BellezaSalud y Belleza
Viajes FalabellaViajes Falabella
Otros Otros
Beneficios
HomecenterFalabella
Beneficios
5. PropuestaPropuesta
Versión Mobile
Propuesta 2: Conserva algunos elementos de la interfaz
original, los íconos varían en su presentación y de fondo
solo se usa un color, diferencia de la anterior propuesta.
Falabella Homecenter
Restaurantes Restaurantes
Salud y Belleza Salud y Belleza
Beneficios Beneficios
Viajes Falabella Viajes Falabella
Otros Otros
Beneficios
Salud y BellezaSalud y Belleza
Viajes Falabella
OtrosOtros
RestaurantesRestaurantes
Falabella
BeneficiosBeneficios
Otros
Viajes Falabella
Salud y Belleza
Restaurantes
Homecenter
Propuesta 1: Conserva la escencia de la interfaz origi-
nal, lo que lo hace diferente, es que el uso colores planos
para dar volumen.
6. PropuestaPropuesta
Propuesta 1: Se consigue manejar el volumen se logra con el uso de colores planos.
Propuesta 2: Tiene un fondo totalmente plano, a diferencia de la propuesta anterior.
Ver catálogo
Ver Catálogo Ver másVer Catálogo
Ver catálogo Ver más
También se proponen dos estilos gráficos para los botones “ver más”
y “ver catálogo”
7. PropuestaPropuesta
Para la cajas (contenedor principal, header, footer y promociones) se
propone lo siguiente:
CAJAS
Contenedor, header y footer: se mantiene el aspecto orginal, haciendo uso de colores planos en vez de
sombras.
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
8. PropuestaPropuesta
Promociones: se mantiene el aspecto orginal, haciendo uso de bordes en las caja en lugar de sombras.
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
Ver másVer más
9. PropuestaAplicación
Se mostrarán a continuación como se integran cada elemento en las
propuestas .
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Restaurantes Salud y BellezaSalud y Belleza Viajes Falabella OtrosHomecenterFalabella Beneficios
REGÍSTRATE
PROPUESTA 1 Versión Desktop
10. PropuestaAplicación
PROPUESTA 1 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Restaurantes Salud y BellezaSalud y Belleza Viajes Falabella OtrosHomecenterFalabella Beneficios
REGÍSTRATE
Ver CatálogoVer Catálogo
11. PropuestaAplicación
PROPUESTA 1 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Restaurantes Salud y BellezaSalud y Belleza Viajes Falabella OtrosHomecenterFalabella Beneficios
REGÍSTRATE
Ver másVer más
12. PropuestaAplicación
PROPUESTA 1 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Restaurantes Salud y BellezaSalud y Belleza Viajes Falabella OtrosHomecenterFalabella Beneficios
REGÍSTRATE
Ver Catálogo Ver Catálogo Ver Catálogo
13. PropuestaAplicación
PROPUESTA 1 Versión Mobile
REGÍSTRATE
2013 Banco Falabella S.A. Todos los derechos reservados.
Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
2013 Banco Falabella
Bogotá: (1) 587 8000
REGÍSTRATE
2013 Banco Falabella S.A. Todos los derechos reservados.
Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Falabella
Homecenter
RestaurantesRestaurantes
Salud y BellezaSalud y Belleza
Viajes Falabella
OtrosOtros
BeneficiosBeneficios
14. PropuestaAplicación
PROPUESTA 2 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
REGÍSTRATE
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
15. PropuestaAplicación
PROPUESTA 2 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
REGÍSTRATE
Ver catálogoVer catálogo
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
16. Propuesta 1: Conserva la escencia de la interfaz origi-
nal, lo cual se puede detallar en: iconografía, tipografía y
estado de los botones. En cuanto a volumen, se usan
colores planos.
PropuestaAplicación
PROPUESTA 2 Versión Desktop
REGÍSTRATE
Ver másVer más
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
17. PropuestaAplicación
PROPUESTA 2 Versión Desktop
2013 Banco Falabella S.A. Todos los derechos reservados. Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
REGÍSTRATE
RestaurantesFalabella Homecenter Salud y Belleza Viajes Falabella OtrosBeneficios
Ver más
Ver catálogo Ver catálogo Ver catálogo
18. PropuestaAplicación
PROPUESTA 2 Versión Mobile
REGÍSTRATE
2013 Banco Falabella S.A. Todos los derechos reservados.
Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67
Falabella
Homecenter
Restaurantes
Salud y Belleza
Beneficios
Viajes Falabella
Otros
REGÍSTRATE
2013 Banco Falabella S.A. Todos los derechos reservados.
Bogotá: (1) 587 8000 • Línea Nacional: 01 900 331 22 67