maquetacion en los nuevos medios

MAQUETACIÓN

EN LOS NUEVOS MEDIOS

BLAS HERNÁNDEZ PERIS

ANTECEDENTES

01

1ª ETAPA LOS INICIOS

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

1993 - 1995

GRANDES

LIMITACIONES

DE VELOCIDAD

SIN

EXPERIENCIA

PREVIA

FALTA DE

CULTURA

GRÁFICA

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

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

RESULTADO

NULA

LEGIBILIDAD

FALTA DE

JERARQUÍAS

POCO

PROFESIONAL

2ª ETAPA EN BUSCA DEL ORDEN

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

APARICIÓN DE LAS PRIMERAS RETÍCULAS

ASIMILADAS POR LOS USUARIOS

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

ESTANDARIZACIÓN DE LA RESOLUCIÓN

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

USO DE ICONOGRAFÍA

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

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

3ª ETAPA INTERACTIVIDAD

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

AUMENTA LA VELOCIDAD

DE CONEXIÓN

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

MACROMEDIA LANZA FLASH

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

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

EXPLOSIÓN CREATIVA

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

NUEVOS SISTEMAS DE NAVEGACIÓN

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

¿ES ACCESIBLE NUESTRO CONTENIDO?

ACCESIBILIDAD / USABILIDAD

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

PERFECCIONAMIENTO DE LAS

TÉCNICAS DE MAQUETACIÓN

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

2007 APPLE LANZA

EL IPHONE ORIGINAL

Y TODO CAMBIA…

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

2008 GOOGLE

LANZA ANDROID

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

MOVIL PC

2%

98%

AUMENTAN LOS ACCESOS

DESDE

DISPOSITIVOS

MÓVILES

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

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

ERROR EN LA

VISUALIZACIÓN

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

ERROR DE USABILIDAD

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

ERROR EN LA

ADAPTACIÓN DE

LOS CONTENIDOS

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

APP SOLUCIÓN

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

DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES

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

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

ALTOS COSTES + DIVERSIDAD

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

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

.MOBI

SOLUCIÓN

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

DESARROLLOS ALTERNATIVOS PARA MÓVILES

WWW.URL.COM

WWW.URL.MOBI

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

ELPAIS.COM/M ELPAIS.COM

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

2011 COMIENZAN A

APARECER LAS

PRIMERAS

TABLETS

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

MÁS

FORMATOS

APARICIÓN DE MÚLTIPLES FORMATOS

EN LAS ESTADÍSTICAS DE NAVEGACIÓN

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

SITUACIÓN

ACTUAL

02

MÓVIL

TABLET PC

14%

90%

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

MÓVIL

TABLET PC

70%

30%

2012 2015

ESTADÍSTICAS

ACCESO A INTERNET

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

RESPONSIVE

NUEVA SOLUCIÓN

DESIGN

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

¿QUÉ ES EL RESPONSIVE DESIGN?

WWW

DISEÑO ADAPTADO

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

¿CÓMO FUNCIONA?

@media query

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

@MEDIA QUERY

@media (min-width: xxx px)

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

¿QUÉ RESULTADOS DA?

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

¿QUÉ RESULTADOS DA?

http://foodsense.is/

COMPARATIVA

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

Contenidos

a medida

Altos coste

de

producción

Versión por

sistema

operativo

Contenidos

a medida

Altos coste

de producción

y

mantenimiento

Versión por

dispositivo

(resolución)

Contenidos

adaptados

bajos costes

de

producción

Adaptación a

dispositivos

APP WEB MOBILE RESPONSIVE

PLANIFICACIÓN

Y EJECUCIÓN

03

¿QUÉ DEBEMOS TENER

EN CUENTA?

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

USUARIO ACCESO TECNOLOGÍA TARGET DEL USUARIO COMO LOGRARLO

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

WIREFRAMES LA PLANIFICACIÓN

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

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

¿CÓMO PODEMOS REALIZAR UN WIRE FRAME?

Procedimiento

manual

Lapiz y papel Cartulinas Posits

Herramientas de

Edición

Photoshop Illustrator Freehand Power point

Aplicaciones para

Wireframes

www.wireframe.cc www.cacoo.com www.powermockup.com www.axure.com

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

PLANIFICANDO UNA

MAQUETACIÓN MULTIDISPOSITIVO

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

EJECUCIÓN IMPORTANCIA DE LA

PRESENTACIÓN

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

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

¿CÓMO MANTENER EL ÁREA

DE PRESENTACIÓN?

http://www.buildwindows.co

m/

ADAPTACIÓN ELÁSTICA

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

http://builtwithmomentum.c

om/

RE-ESCALADO

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

http://moderngreenhome.com/

ADAPTACIÓN AL ESPACIO

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

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

http://www.luciopiunti.it/

RE-UBICACIÓN

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

http://shinydemos.com/

CAMBIO DE PRESENTACIÓN

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

http://www.it.eku.edu/

SIMPLIFICACIÓN

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

OPTIMIZACIÓN

DE

LA RESOLUCIÓN

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

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

http://www.stury.in/

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

http://colly.com/

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

http://www.stoppress.co.nz/

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

DIFERENCIAS EN

LA NAVEGACIÓN INTERACCIÓN

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

¿CUÁNTO MIDE UN DEDO? 24X24 PX

32X32 PX

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

¿CÓMO OPTIMIZAR

LA NAVEGACIÓN?

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

http://www.regent-

college.edu/

ADAPTACIÓN

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

http://www.williamcsete.com

/

RE-UBICACIÓN

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

http://www.bostonglobe.com/

AGRUPACIÓN

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

http://cabinetguerin.eu/

RE-DISEÑO DE LA NAVEGACIÓN

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

ADAPTACIÓN DE LA

INFORMACIÓN EL CONTENIDO

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

¿CÓMO ADAPTAR EL CONTENIDO?

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

FUENTE/TIPOGRAFÍA

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

SELECCIÓN DE LA FUENTE

Elige una fuente

diseñada

para leer en pantalla

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

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

USO DE LA TIPOGRAFÍA

No abuses de las mayúsculas:

dificultan la lectura

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

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

USO DE LA TIPOGRAFÍA

Añade títulos, negritas y

destacados al texto

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

USO DE LA TIPOGRAFÍA

No justifiques el texto

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

USO DE IMÁGENES

FACTORES A TENER EN

CUENTA

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

TAMAÑO DE LA PANTALLA

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

TAMAÑO DE LA PANTALLA

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

100% 150% 200% 225%

MDPI NO-RETINA

HDPI RETINA XHDPI

20 PX 30 PX 40 PX 45 PX

DENSIDAD DE LA PANTALLA

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

REPRESENTACIÓN

IMAGEN DE A 300PX

NO-RETINA RETINA 300PX 300PX

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

300PX 600 PX

REPRESENTACIÓN

IMAGEN DE A 300 PX

NO-RETINA RETINA

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

CONVERSORES

http://teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html

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

CONTENIDOS

MULTIMEDIA FACTORES A TENER EN

CUENTA

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

TECNOLOGÍA

NO FLASH

SI HTML5

MP4

M4V

WEBM

OGG

OGV

SWF

FLV

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

CONTROL

DE LA REPRODUCCIÓN

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

EVITAR LA

REPRODUCCIÓN

INSTANTÁNEA

PERMITIR

EL CONTROL DE

LA REPRODUCCIÓN

TESTEO

04

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

PRUEBA TU WEB EN TODOS

LOS NAVEGADORES

http://browsershots.org/

http://www.browserling.com/

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

http://resizemybrowser.com/

http://mattkersley.com/responsive/

http://www.responsinator.com/

http://screenqueri.es/

REVISA LA

REPRESENTACIÓN

EN MÚLTIPLES

DISPOSITIVOS

INSPIRACIÓN

05

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

http://us.illyissimo.com/

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

http://www.westerscheldetunn

el.nl/

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

http://www.vogue.co.uk

/

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

http://www.about.com

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

http://traveloregon.com/

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

MUCHÍSIMAS

GRACIAS

Mail: blas@masmedios.com