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



RESULTADO

NULA

LEGIBILIDAD

FALTA DE

JERARQUÍAS

POCO

PROFESIONAL

2ª ETAPA EN BUSCA DEL ORDEN


APARICIÓN DE LAS PRIMERAS RETÍCULAS

ASIMILADAS POR LOS USUARIOS


ESTANDARIZACIÓN DE LA RESOLUCIÓN


USO DE ICONOGRAFÍA


CONTINÚAN LAS

LIMITACIONES

DE VELOCIDAD

CONCEPTO DE USABILIDAD

APARECE LA FIGURA DEL

DISEÑADOR/MAQUETADOR

MULTIMEDIA


3ª ETAPA INTERACTIVIDAD


AUMENTA LA VELOCIDAD

DE CONEXIÓN


MACROMEDIA LANZA FLASH



EXPLOSIÓN CREATIVA


NUEVOS SISTEMAS DE NAVEGACIÓN


¿ES ACCESIBLE NUESTRO CONTENIDO?

ACCESIBILIDAD / USABILIDAD


PERFECCIONAMIENTO DE LAS

TÉCNICAS DE MAQUETACIÓN


2007 APPLE LANZA

EL IPHONE ORIGINAL

Y TODO CAMBIA…


2008 GOOGLE

LANZA ANDROID


MOVIL PC

2%

98%

AUMENTAN LOS ACCESOS

DESDE

DISPOSITIVOS

MÓVILES


COMIENZAN A

APARECER EN

LAS ESTADÍSTICAS

DE NAVEGACIÓN

NUEVAS

RESOLUCIONES

LAS WEBSITES

NO ESTÁN

PREPARADAS


ERROR EN LA

VISUALIZACIÓN


ERROR DE USABILIDAD


ERROR EN LA

ADAPTACIÓN DE

LOS CONTENIDOS


APP SOLUCIÓN


DISEÑO DE APLICACIONES OPTIMIZADAS PARA SMARTPHONES



ALTOS COSTES + DIVERSIDAD


.MOBI

SOLUCIÓN


DESARROLLOS ALTERNATIVOS PARA MÓVILES

WWW.URL.COM

WWW.URL.MOBI


ELPAIS.COM/M ELPAIS.COM


2011 COMIENZAN A

APARECER LAS

PRIMERAS

TABLETS


MÁS

FORMATOS

APARICIÓN DE MÚLTIPLES FORMATOS

EN LAS ESTADÍSTICAS DE NAVEGACIÓN


SITUACIÓN

ACTUAL

02

MÓVIL

TABLET PC

14%

90%


MÓVIL

TABLET PC

70%

30%

2012 2015

ESTADÍSTICAS

ACCESO A INTERNET


RESPONSIVE

NUEVA SOLUCIÓN

DESIGN


¿QUÉ ES EL RESPONSIVE DESIGN?

WWW

DISEÑO ADAPTADO


¿CÓMO FUNCIONA?

@media query


@MEDIA QUERY

@media (min-width: xxx px)


¿QUÉ RESULTADOS DA?


¿QUÉ RESULTADOS DA?

http://foodsense.is/

http://foodsense.is/

COMPARATIVA


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?


USUARIO ACCESO TECNOLOGÍA TARGET DEL USUARIO COMO LOGRARLO


WIREFRAMES LA PLANIFICACIÓN


¿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

http://www.wireframe.cc/

http://www.cacoo.com/

http://www.powermockup.com/

http://www.axure.com/


PLANIFICANDO UNA

MAQUETACIÓN MULTIDISPOSITIVO


EJECUCIÓN IMPORTANCIA DE LA

PRESENTACIÓN


¿CÓMO MANTENER EL ÁREA

DE PRESENTACIÓN?

http://www.buildwindows.co

m/

ADAPTACIÓN ELÁSTICA


http://www.buildwindows.com/

http://www.buildwindows.com/

http://builtwithmomentum.c

om/

RE-ESCALADO


http://builtwithmomentum.com/

http://builtwithmomentum.com/

http://moderngreenhome.com/

ADAPTACIÓN AL ESPACIO


http://moderngreenhome.com/


http://www.luciopiunti.it/

RE-UBICACIÓN

http://www.luciopiunti.it/


http://shinydemos.com/

CAMBIO DE PRESENTACIÓN

http://shinydemos.com/


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

SIMPLIFICACIÓN

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


OPTIMIZACIÓN

DE

LA RESOLUCIÓN


http://www.stury.in/

http://www.stury.in/


http://colly.com/

http://colly.com/


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

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


DIFERENCIAS EN

LA NAVEGACIÓN INTERACCIÓN


¿CUÁNTO MIDE UN DEDO? 24X24 PX

32X32 PX


¿CÓMO OPTIMIZAR

LA NAVEGACIÓN?


http://www.regent-

college.edu/

ADAPTACIÓN

http://www.regent-college.edu/




http://www.williamcsete.com

/

RE-UBICACIÓN

http://www.williamcsete.com/

http://www.williamcsete.com/


http://www.bostonglobe.com/

AGRUPACIÓN

http://www.bostonglobe.com/


http://cabinetguerin.eu/

RE-DISEÑO DE LA NAVEGACIÓN

http://cabinetguerin.eu/


ADAPTACIÓN DE LA

INFORMACIÓN EL CONTENIDO


¿CÓMO ADAPTAR EL CONTENIDO?


FUENTE/TIPOGRAFÍA


SELECCIÓN DE LA FUENTE

Elige una fuente

diseñada

para leer en pantalla


SELECCIÓN DE LA FUENTE

No utilices más de tres tipos

de

letra en una misma página


USO DE LA TIPOGRAFÍA

No abuses de las mayúsculas:

dificultan la lectura



Emplea un tamaño de

letra adecuado mínimo 14px



Añade títulos, negritas y

destacados al texto



No justifiques el texto


USO DE IMÁGENES

FACTORES A TENER EN

CUENTA


TAMAÑO DE LA PANTALLA


100% 150% 200% 225%

MDPI NO-RETINA

HDPI RETINA XHDPI

20 PX 30 PX 40 PX 45 PX

DENSIDAD DE LA PANTALLA


REPRESENTACIÓN

IMAGEN DE A 300PX

NO-RETINA RETINA 300PX 300PX


300PX 600 PX

REPRESENTACIÓN

IMAGEN DE A 300 PX

NO-RETINA RETINA


CONVERSORES

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

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


CONTENIDOS

MULTIMEDIA FACTORES A TENER EN

CUENTA


TECNOLOGÍA

NO FLASH

SI HTML5

MP4

M4V

WEBM

OGG

OGV

SWF

FLV


CONTROL

DE LA REPRODUCCIÓN


EVITAR LA

REPRODUCCIÓN

INSTANTÁNEA

PERMITIR

EL CONTROL DE

LA REPRODUCCIÓN

TESTEO

04


PRUEBA TU WEB EN TODOS

LOS NAVEGADORES

http://browsershots.org/

http://www.browserling.com/

http://browsershots.org/

http://www.browserling.com/


http://resizemybrowser.com/

http://mattkersley.com/responsive/

http://www.responsinator.com/

http://screenqueri.es/

REVISA LA

REPRESENTACIÓN

EN MÚLTIPLES

DISPOSITIVOS

http://resizemybrowser.com/

http://mattkersley.com/responsive/

http://www.responsinator.com/

http://screenqueri.es/

INSPIRACIÓN

05


http://us.illyissimo.com/

http://us.illyissimo.com/


http://www.westerscheldetunn

el.nl/

http://www.westerscheldetunnel.nl/

http://www.westerscheldetunnel.nl/


http://www.vogue.co.uk

/

http://www.vogue.co.uk/

http://www.vogue.co.uk/


http://www.about.com

http://www.about.com/


http://traveloregon.com/

http://traveloregon.com/


MUCHÍSIMAS

GRACIAS

Mail: [email protected]

Maquetacion en los nuevos medios

Documents

Transcript of Maquetacion en los nuevos medios