El documento describe la evolución de la maquetación en los nuevos medios a través de tres etapas: 1) Los inicios (1993-1995) con grandes limitaciones que dieron como resultado diseños poco legibles y profesionales. 2) En busca del orden (1995-2007) con la aparición de retículas y estándares que mejoraron la usabilidad. 3) La interactividad (2007-presente) con el aumento de la velocidad, la explosión creativa y la necesidad de hacer los contenidos accesibles y adaptados a múltiples dispositivos

1. MAQUETACIÓN
EN LOS NUEVOS MEDIOS
BLAS HERNÁNDEZ PERIS

2. 01
ANTECEDENTES

3. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
1ª ETAPA
LOS INICIOS

4. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
1993 - 1995
GRANDES SIN FALTA DE
LIMITACIONES EXPERIENCIA CULTURA
DE VELOCIDAD PREVIA GRÁFICA

5. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
RESULTADO
NULA
LEGIBILIDAD
FALTA DE
JERARQUÍAS
POCO
PROFESIONAL

6. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
2ª ETAPA
EN BUSCA DEL ORDEN

7. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
APARICIÓN DE LAS PRIMERAS RETÍCULAS
ASIMILADAS POR LOS USUARIOS

8. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ESTANDARIZACIÓN DE LA RESOLUCIÓN

9. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE ICONOGRAFÍA

10. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
CONTINÚAN LAS
LIMITACIONES
DE VELOCIDAD
CONCEPTO DE USABILIDAD
APARECE LA FIGURA DEL
DISEÑADOR/MAQUETADOR
MULTIMEDIA

11. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
3ª ETAPA
INTERACTIVIDAD

12. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
AUMENTA LA VELOCIDAD
DE CONEXIÓN

13. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
MACROMEDIA LANZA FLASH

14. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
EXPLOSIÓN CREATIVA

15. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
NUEVOS SISTEMAS DE NAVEGACIÓN

16. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿ES ACCESIBLE NUESTRO CONTENIDO?

17. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ACCESIBILIDAD / USABILIDAD

18. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
PERFECCIONAMIENTO DE LAS
TÉCNICAS DE MAQUETACIÓN

19. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
2007
APPLE LANZA
EL IPHONE ORIGINAL
Y TODO CAMBIA…

20. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
2008
GOOGLE
LANZA ANDROID

21. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
98%
AUMENTAN
LOS ACCESOS
DESDE
DISPOSITIVOS
MÓVILES
2%
MOVIL PC

22. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
COMIENZAN A
APARECER EN
LAS ESTADÍSTICAS
DE NAVEGACIÓN
NUEVAS
RESOLUCIONES
LAS WEBSITES
NO ESTÁN
PREPARADAS

23. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ERROR
EN LA
VISUALIZACIÓN

24. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ERROR
DE USABILIDAD

25. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ERROR
EN LA
ADAPTACIÓN DE
LOS CONTENIDOS

26. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
SOLUCIÓN
APP

27. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES

28. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ALTOS COSTES + DIVERSIDAD

29. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS

30. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
SOLUCIÓN
.MOBI

31. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
DESARROLLOS ALTERNATIVOS PARA MÓVILES
WWW.URL.COM
WWW.URL.MOBI

32. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ELPAIS.COM ELPAIS.COM/M

33. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
2011
COMIENZAN A
APARECER LAS
PRIMERAS
TABLETS

34. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
MÁS
FORMATOS

35. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
APARICIÓN DE MÚLTIPLES FORMATOS
EN LAS ESTADÍSTICAS DE NAVEGACIÓN

36. 02
SITUACIÓN
ACTUAL

37. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ESTADÍSTICAS
ACCESO A INTERNET
90%
2012 70%
2015
30%
14%
MÓVIL PC MÓVIL PC
TABLET TABLET

38. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
NUEVA SOLUCIÓN
RESPONSIVE
DESIGN

39. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿QUÉ ES EL RESPONSIVE DESIGN?
WWW
DISEÑO ADAPTADO

40. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿CÓMO FUNCIONA?
@media query

41. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
@MEDIA QUERY
@media (min-width: xxx px)

42. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿QUÉ RESULTADOS DA?

43. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿QUÉ RESULTADOS DA?
http://foodsense.is/

44. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
COMPARATIVA
APP WEB MOBILE RESPONSIVE
Contenidos Contenidos Contenidos
a medida a medida adaptados
Altos coste Altos coste bajos costes
de de producción de
producción y producción
mantenimiento
Versión por Versión por Adaptación a
sistema dispositivo dispositivos
operativo (resolución)

45. 03
PLANIFICACIÓN
Y EJECUCIÓN

46. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿QUÉ DEBEMOS TENER
EN CUENTA?
USUARIO ACCESO TECNOLOGÍA
TARGET DEL USUARIO COMO LOGRARLO

47. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
WIREFRAMES
LA PLANIFICACIÓN

48. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS

49. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿CÓMO PODEMOS REALIZAR UN WIRE FRAME?
Procedimiento Herramientas de Aplicaciones para
manual Edición Wireframes
Photoshop www.wireframe.cc
Lapiz y papel
Illustrator www.cacoo.com
Cartulinas
Freehand www.powermockup.com
Posits
Power point www.axure.com

50. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
PLANIFICANDO UNA
MAQUETACIÓN MULTIDISPOSITIVO

51. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
EJECUCIÓN
IMPORTANCIA DE LA
PRESENTACIÓN

52. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS

53. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿CÓMO MANTENER EL ÁREA
DE PRESENTACIÓN?

54. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ADAPTACIÓN ELÁSTICA
http://www.buildwindows.co
m/

55. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
RE-ESCALADO
http://builtwithmomentum.c
om/

56. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ADAPTACIÓN AL ESPACIO
http://moderngreenhome.com/

57. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
RE-UBICACIÓN
http://www.luciopiunti.it/

58. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
CAMBIO DE PRESENTACIÓN
http://shinydemos.com/

59. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
SIMPLIFICACIÓN
http://www.it.eku.edu/

60. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
OPTIMIZACIÓN
DE
LA RESOLUCIÓN

61. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS

62. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://www.stury.in/

63. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://colly.com/

64. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://www.stoppress.co.nz/

65. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
DIFERENCIAS EN
LA NAVEGACIÓN
INTERACCIÓN

66. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
24X24 PX
¿CUÁNTO MIDE UN DEDO?
32X32 PX

67. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿CÓMO OPTIMIZAR
LA NAVEGACIÓN?

68. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ADAPTACIÓN
http://www.regent-
college.edu/

69. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
RE-UBICACIÓN
http://www.williamcsete.com
/

70. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
AGRUPACIÓN
http://www.bostonglobe.com/

71. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
RE-DISEÑO DE LA NAVEGACIÓN
http://cabinetguerin.eu/

72. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
ADAPTACIÓN DE LA
INFORMACIÓN
EL CONTENIDO

73. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
¿CÓMO ADAPTAR EL CONTENIDO?

74. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
FUENTE/TIPOGRAFÍA

75. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
SELECCIÓN DE LA FUENTE
Elige una fuente
diseñada
para leer en pantalla

76. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
SELECCIÓN DE LA FUENTE
No utilices más de tres tipos
de
letra en una misma página

77. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE LA TIPOGRAFÍA
No abuses de las mayúsculas:
dificultan la lectura

78. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE LA TIPOGRAFÍA
Emplea un tamaño de
letra adecuado mínimo 14px

79. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE LA TIPOGRAFÍA
Añade títulos, negritas y
destacados al texto

80. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE LA TIPOGRAFÍA
No justifiques el texto

81. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
USO DE IMÁGENES
FACTORES A TENER EN
CUENTA

82. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
TAMAÑO DE LA PANTALLA

83. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
TAMAÑO DE LA PANTALLA

84. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
DENSIDAD DE LA PANTALLA
100% 150% 200% 225%
MDPI HDPI RETINA XHDPI
NO-RETINA
20 PX 30 PX 40 PX 45 PX

85. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
REPRESENTACIÓN
IMAGEN DE A 300PX
NO-RETINA 300PX RETINA 300PX

86. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
REPRESENTACIÓN
IMAGEN DE A 300 PX
NO-RETINA 300PX RETINA 600 PX

87. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
CONVERSORES
http://teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html

88. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
CONTENIDOS
MULTIMEDIA
FACTORES A TENER EN
CUENTA

89. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
TECNOLOGÍA
SI HTML5 NO FLASH
MP4 SWF
M4V FLV
WEBM
OGG
OGV

90. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
CONTROL
DE LA REPRODUCCIÓN

91. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
EVITAR LA PERMITIR
REPRODUCCIÓN EL CONTROL DE
INSTANTÁNEA LA REPRODUCCIÓN

92. 04
TESTEO

93. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
PRUEBA TU WEB EN TODOS
LOS NAVEGADORES
http://browsershots.org/ http://www.browserling.com/

94. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
REVISA LA
REPRESENTACIÓN
EN MÚLTIPLES
DISPOSITIVOS
http://screenqueri.es/ http://resizemybrowser.com/
http://mattkersley.com/responsive/ http://www.responsinator.com/

95. 05
INSPIRACIÓN

96. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://us.illyissimo.com/

97. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://www.westerscheldetunn
el.nl/

98. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://www.vogue.co.uk
/

99. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://www.about.com

100. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
http://traveloregon.com/

101. Maquetación en los nuevos medios
BLAS HERNÁNDEZ PERIS
MUCHÍSIMAS
GRACIAS
Mail: blas@masmedios.com