Post on 16-Dec-2014
description
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.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://traveloregon.com/
Maquetación en los nuevos medios BLAS HERNÁNDEZ PERIS
MUCHÍSIMAS
GRACIAS
Mail: blas@masmedios.com