El documento presenta 10 ejemplos de buen diseño en home pages para convertir las debilidades de diseño en oportunidades para potenciar la marca. Describe las debilidades visuales más comunes como la mala interpretación de wireframes y la adaptación de la marca. Luego, explica conceptos de diseño de interfaz y muestra 10 ejemplos de sitios web exitosos con sugerencias como usar fondos para construir nuevos conceptos de marca o lograr jerarquías visuales a través de la tipografía.

1. Cómo
Santiago de Chile, 2009
CONVERTIR TUS DEBILIDADES DE DISEÑO
EN OPORTUNIDADES PARA POTENCIAR TU MARCA
10 EJEMPLOS DE BUEN DISEÑO EN HOME PAGES
Por Adolfo Morales S.
Consultor en Diseño Visual

2. Adolfo Morales S. / Diseñador Visual

3. Adolfo Morales S. / Diseñador Visual
Qué es el Diseño de Interfaz.

4. Adolfo Morales S. / Diseñador Visual
Qué es el Diseño de Interfaz.
Interfaz para Home Pages.

5. Adolfo Morales S. / Diseñador Visual
Qué es el Diseño de Interfaz.
Interfaz para Home Pages.
10 Ejemplos para potenciar tu marca.

8. Qué
ES EL DISEÑO DE INTERFAZ

9. Contexto digital de usuarios

10. Contexto digital de usuarios
emails
noticias
información
direcciones,
teléfonos
cuentas bancarias,
pagos, transferencias
videos
fotos

11. ¿Qué es Interfaz?
“Proceso de interacción entre un usuario y un
sistema interactivo que posibilita, a través del
uso y la representación del lenguaje visual,
una interacción amigable con un sistema
informático”.

15. Debilidades visuales

16. Debilidades visuales
Básica y mala interpretación de
wireframes.

17. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.

18. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.
Poca jerarquías visuales.

19. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.
Poca jerarquías visuales.
Mal manejo cromático.

20. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.
Poca jerarquías visuales.
Mal manejo cromático.
Mal manejo tipográfico.

21. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.
Poca jerarquías visuales.
Mal manejo cromático.
Mal manejo tipográfico.
Mal diseño de iconografía.

22. Debilidades visuales
Básica y mala interpretación de
wireframes.
Mala adaptación de la marca.
Poca jerarquías visuales.
Mal manejo cromático.
Mal manejo tipográfico.
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

23. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca.
Poca jerarquías visuales.
Mal manejo cromático.
Mal manejo tipográfico.
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

24. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales.
Mal manejo cromático.
Mal manejo tipográfico.
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

25. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales. Abuso de efectos:
Mal manejo cromático.
Mal manejo tipográfico.
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

26. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales. Abuso de efectos:
Mal manejo cromático. Degradados
Mal manejo tipográfico.
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

27. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales. Abuso de efectos:
Mal manejo cromático. Degradados
Mal manejo tipográfico. Sombras
Mal diseño de iconografía.
Mal manejo de la imagen (arte fotográfico
web).

28. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales. Abuso de efectos:
Mal manejo cromático. Degradados
Mal manejo tipográfico. Sombras
Mal diseño de iconografía. Brillos
Mal manejo de la imagen (arte fotográfico
web).

29. Debilidades visuales
Básica y mala interpretación de Abuso de pirotecnia (banners animados,
wireframes. flash con loops infinitos).
Mala adaptación de la marca. Poco uso del fondo (backgrounds).
Poca jerarquías visuales. Abuso de efectos:
Mal manejo cromático. Degradados
Mal manejo tipográfico. Sombras
Mal diseño de iconografía. Brillos
Mal manejo de la imagen (arte fotográfico Volúmenes
web).

31. LOS WIREFRAMES NO SE TRASPASAN...

32. ...SE DISEÑAN!

33. APROVECHÉMONOS DE LA MARCA...

34. ...Y DISEÑEMOS IDENTIDAD!

35. Diseño
DE INTERFAZ EN HOME PAGES

36. ¿Qué debe proyectar mi Home?

37. ¿Qué debe proyectar mi Home?
Usable.

38. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.

39. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.

40. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.
Confiable.

41. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.
Confiable.
Amistosa.

42. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.
Confiable.
Amistosa.
Segura.

43. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.
Confiable.
Amistosa.
Segura.
Y por supuesto... Sexy!

44. ¿Qué debe proyectar mi Home?
Usable.
Diferenciadora.
Reconocible.
Confiable.
Amistosa.
Segura.
Y por supuesto... Sexy!

45. 10
EJEMPLOS PARA POTENCIAR TU MARCA

46. 10
EJEMPLOS PARA POTENCIAR TU MARCA
q

47. www.atpworldtour.com
1. DISEÑA FONDOS PARA CONSTRUIR NUEVOS CONCEPTOS DE TU MARCA

48. www.apple.com
...O REAFIRMA LOS CONCEPTOS QUE YA TIENES.

49. www.firefox.com
Y SI PUEDES Y QUIERES HACERLO LÚDICO MUCHO MEJOR, LE DARÁS EMOCIÓN A TU DISEÑO

50. www.visa.com
2. ENCUENTRA NUEVAS FORMAS PARA VISUALIZAR TU INFORMACIÓN...

51. www.adidas.com
...SORPRENDIENDO SIEMPRE AL USUARIO...

52. www.adidas.com
...SORPRENDIENDO SIEMPRE AL USUARIO...

53. www.unilever.com
...Y DÁNDOLE DIFERENCIACIÓN A TU MARCA.

54. www.sweden.gov.se
3. LOGRA JERARQUÍAS VISUALES A TRAVÉS DE TIPOGRÁFIAS COMPLEMENTARIAS...

55. www.cnn.com
...O EXPLOTANDO SIMPLEMENTE EL POTENCIAL DE UNA SOLA.

56. www.rolex.com
4. EXPLORA NUEVAS FORMAS DE NAVEGACIÓN...

57. www.rolex.com
4. EXPLORA NUEVAS FORMAS DE NAVEGACIÓN...

58. www.merrell.com
...INCLUSO APOSTANDO AL CAMBIO.

59. www.ge.com
5. CUENTA HISTORIAS REALES PARA Y CON TUS USUARIOS...

60. ...ES MÁS BARATO QUE FILMAR COMERCIALES.

61. www.ikea.com
...HISTORIAS QUE PUEDES VENDER.

62. www.ikea.com
...HISTORIAS QUE PUEDES VENDER.

63. www.ikea.com
...HISTORIAS QUE PUEDES VENDER.

64. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

65. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

66. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

67. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

68. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

69. www.directv.com
6. DALE TANTA IMPORTANCIA A UNA LANDING PAGE COMO A UNA HOME.

70. www.lacoste.com
7. ASEGURA UNA DIRECCIÓN DE ARTE QUE INTEGRE A TU MARCA.

71. www.lacoste.com
7. ASEGURA UNA DIRECCIÓN DE ARTE QUE INTEGRE A TU MARCA.

72. www.lacoste.com
7. ASEGURA UNA DIRECCIÓN DE ARTE QUE INTEGRE A TU MARCA.

73. www.lacoste.com
7. ASEGURA UNA DIRECCIÓN DE ARTE QUE INTEGRE A TU MARCA.

74. www.rfdc.ac.uk
8. UNA NUEVA VUELTA A LA DISTRIBUCIÓN DE LOS ELEMENTOS DE NAVEGACIÓN...

75. www.mica.edu
...NUNCA ESTÁ DEMÁS.

76. www.bbc.com
9. PROCURA LIMPIEZA VISUAL PARA GENERAR CREDIBILIDAD EN EL USUARIO...

77. www.db.com
...CON DIAGRAMACIONES BALANCEADAS Y ELEGANTES.

78. www.db.com
...CON DIAGRAMACIONES BALANCEADAS Y ELEGANTES.

79. www.converse.com
10. HABLA EN EL IDIOMA DE TU USUARIO...

80. www.converse.com
10. HABLA EN EL IDIOMA DE TU USUARIO...

81. www.goldmansachs.com
...PARA QUE CONFÍE EN TÍ.

82. www.goldmansachs.com
...PARA QUE CONFÍE EN TÍ.

83. Uds...
...CONOCEN SUS DEBILIDADES?

84. Uds...
...CONOCEN SUS DEBILIDADES?
NOSOTROS SÍ! :)

85. Muchas
GRACIAS!
ADOLFO MORALES S.
www.amorales.cl
fito@amorales.cl