SlideShare une entreprise Scribd logo
1  sur  8
Télécharger pour lire hors ligne
Responsive Design

Diseño sensible y adaptable para
     multiples plataformas


         Taller de Diseño
          AyerViernes
              @shizada
Responsive Design




         ¿Cuáles son las
      Contigencias actuales?

           Los sitios ya no sólo se ven desde
            diversas pantallas, ahora son
                 múltiples dispositivos
Responsive Design


              Multiple devices




           Asi como definimos un estándar para
                  diseñar en web (960px)
         ¿Ahora podemos definir un estándar para
              diseñar y que se adapte a todos
                      los dispositivos?
Responsive Design


          El diseño se adapta
Josh Clark http://tnw.co/uP7ncW

 7 mitos del diseño para móviles
1. Los usuarios de móviles están apresurados o son
distraídos
Los usuarios móviles no sólo usan los dispositivos cuando se están
moviendo, los usan en la cocina o en una sala de espera, etc.

2. Móvil = menos
Es un error pensar que los sitios para móvil deben tener menos opciones
que la versión web. "es como decir que una versión pocket de un libro
debe tener menos capítulos"

3. Complejidad es una mala palabra
No confundir complejidad con complicación (Facebook iOs)

4. Toques o cliks extras son terribles
Tiene que ver con la relación con Cantidad > Calidad de toques (Twitter)
Josh Clark http://tnw.co/uP7ncW

 7 mitos del diseño para móviles
  5. Tenemos que hacer una versión móvil del sitio
 Debemos centrarnos en un diseño que sirva para todas las plataformas.
 si debemos hacer un versión móvil quiere decir que el sitio web está lleno
 de cosas que sobran

 6.Móvil se trata de aplicaciones
 Centrarse sólo en las aplicaciones no es sostenible, no se puede diseñar
 una experiencia nueva en cada plataforma. "Hay que pensar que el
 contenido debe ser como el agua, toma muchas formas y se adapta a sus
 recipientes"

 7. El contenido y las API son para nerds
 Los diseñadores deben preocuparse de esto y también hacerse cargo
Responsive Design


  ¿Qué necesitamos definir?
   1. ¿La AI puede pensarse desde un principio
 para los contenidos se jerarquizen igual en todos
                 los dispositivos ?

    2. Patrones en diseño para que los sitios se
         adapten a todas sus plataformas

  3. ¿Qué decisiones en conjunto podemos tomar
     para que este diseño sea programable?
Conversemos

 Taller de Diseño
  AyerViernes
      @shizada

Contenu connexe

Tendances (9)

Jimdo Actividad 2
Jimdo Actividad 2Jimdo Actividad 2
Jimdo Actividad 2
 
Menu pres 3
Menu pres 3Menu pres 3
Menu pres 3
 
Introducción Responsive design
Introducción Responsive designIntroducción Responsive design
Introducción Responsive design
 
Prezi
PreziPrezi
Prezi
 
Actividad 2
Actividad 2Actividad 2
Actividad 2
 
UX en aplicaciones de Social Media
UX en aplicaciones de Social MediaUX en aplicaciones de Social Media
UX en aplicaciones de Social Media
 
Tema3 diseño - desarrollo
Tema3   diseño - desarrolloTema3   diseño - desarrollo
Tema3 diseño - desarrollo
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
 

En vedette (6)

Wave 5 global
Wave 5 globalWave 5 global
Wave 5 global
 
Soy Digital 2011
Soy Digital 2011Soy Digital 2011
Soy Digital 2011
 
¿Somos o no somos? Reboot, SoyDigital 2012
¿Somos o no somos? Reboot, SoyDigital 2012¿Somos o no somos? Reboot, SoyDigital 2012
¿Somos o no somos? Reboot, SoyDigital 2012
 
Taller 5 Cs de la Analítica Web
Taller 5 Cs de la Analítica WebTaller 5 Cs de la Analítica Web
Taller 5 Cs de la Analítica Web
 
SoyDigital 2012 Reboot
SoyDigital 2012 RebootSoyDigital 2012 Reboot
SoyDigital 2012 Reboot
 
Soy Digital 2012
Soy Digital 2012Soy Digital 2012
Soy Digital 2012
 

Similaire à Responsive Design - Taller de Diseño av

Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
Carlos Zapata
 

Similaire à Responsive Design - Taller de Diseño av (20)

Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs Adaptive
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
 
Que es un diseño web
Que es un diseño webQue es un diseño web
Que es un diseño web
 
Que es un diseño web
Que es un diseño webQue es un diseño web
Que es un diseño web
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivo
 
9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
 
Aplicaciones (maribel chavez distra)
Aplicaciones  (maribel chavez distra)Aplicaciones  (maribel chavez distra)
Aplicaciones (maribel chavez distra)
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
ing.software
ing.softwareing.software
ing.software
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivo
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendaciones
 
Joomla mobile
Joomla mobileJoomla mobile
Joomla mobile
 
Tipos de apps
Tipos de appsTipos de apps
Tipos de apps
 
Responsive, móvil o app: ¿Por dónde empezar?l
Responsive, móvil o app: ¿Por dónde empezar?lResponsive, móvil o app: ¿Por dónde empezar?l
Responsive, móvil o app: ¿Por dónde empezar?l
 

Plus de AyerViernes

Eyetracking Medios De Comunicacion
Eyetracking Medios De ComunicacionEyetracking Medios De Comunicacion
Eyetracking Medios De Comunicacion
AyerViernes
 

Plus de AyerViernes (17)

Oportunidades del Diseño UX en Latinoamérica
Oportunidades del Diseño UX en LatinoaméricaOportunidades del Diseño UX en Latinoamérica
Oportunidades del Diseño UX en Latinoamérica
 
AyerViernes U - Taller de Diseño Front End
AyerViernes U - Taller de Diseño Front EndAyerViernes U - Taller de Diseño Front End
AyerViernes U - Taller de Diseño Front End
 
Presentación Entel. Reboot, SoyDigital 2012
Presentación Entel. Reboot, SoyDigital 2012Presentación Entel. Reboot, SoyDigital 2012
Presentación Entel. Reboot, SoyDigital 2012
 
Diseño de servicios
Diseño de serviciosDiseño de servicios
Diseño de servicios
 
Análisis y tendencias para 2011
Análisis y tendencias para 2011Análisis y tendencias para 2011
Análisis y tendencias para 2011
 
Eres lo que haces. No lo que dices
Eres lo que haces. No lo que dicesEres lo que haces. No lo que dices
Eres lo que haces. No lo que dices
 
Investigar el comportamiento de consumo en Internet
Investigar el comportamiento de consumo en InternetInvestigar el comportamiento de consumo en Internet
Investigar el comportamiento de consumo en Internet
 
SoyDigital 2011
SoyDigital 2011SoyDigital 2011
SoyDigital 2011
 
El minuto de confianza
El minuto de confianza El minuto de confianza
El minuto de confianza
 
Clerk, Hotel management
Clerk, Hotel managementClerk, Hotel management
Clerk, Hotel management
 
I'm digital2010
I'm digital2010I'm digital2010
I'm digital2010
 
Experiencia de Consumo en Medios Digitales
Experiencia de Consumo en Medios DigitalesExperiencia de Consumo en Medios Digitales
Experiencia de Consumo en Medios Digitales
 
Soy Digital 2010, Reporte de Experiencia de Consumo en Chile
Soy Digital 2010, Reporte de Experiencia de Consumo en ChileSoy Digital 2010, Reporte de Experiencia de Consumo en Chile
Soy Digital 2010, Reporte de Experiencia de Consumo en Chile
 
Eyetracking publicidad y contenidos
Eyetracking publicidad y contenidosEyetracking publicidad y contenidos
Eyetracking publicidad y contenidos
 
Eyetracking, Fija tu Estrategia
Eyetracking, Fija tu EstrategiaEyetracking, Fija tu Estrategia
Eyetracking, Fija tu Estrategia
 
Eyetracking Medios De Comunicacion
Eyetracking Medios De ComunicacionEyetracking Medios De Comunicacion
Eyetracking Medios De Comunicacion
 
Consumidor Digital Retail 2008
Consumidor Digital Retail 2008Consumidor Digital Retail 2008
Consumidor Digital Retail 2008
 

Dernier

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 

Dernier (20)

Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 

Responsive Design - Taller de Diseño av

  • 1. Responsive Design Diseño sensible y adaptable para multiples plataformas Taller de Diseño AyerViernes @shizada
  • 2. Responsive Design ¿Cuáles son las Contigencias actuales? Los sitios ya no sólo se ven desde diversas pantallas, ahora son múltiples dispositivos
  • 3. Responsive Design Multiple devices Asi como definimos un estándar para diseñar en web (960px) ¿Ahora podemos definir un estándar para diseñar y que se adapte a todos los dispositivos?
  • 4. Responsive Design El diseño se adapta
  • 5. Josh Clark http://tnw.co/uP7ncW 7 mitos del diseño para móviles 1. Los usuarios de móviles están apresurados o son distraídos Los usuarios móviles no sólo usan los dispositivos cuando se están moviendo, los usan en la cocina o en una sala de espera, etc. 2. Móvil = menos Es un error pensar que los sitios para móvil deben tener menos opciones que la versión web. "es como decir que una versión pocket de un libro debe tener menos capítulos" 3. Complejidad es una mala palabra No confundir complejidad con complicación (Facebook iOs) 4. Toques o cliks extras son terribles Tiene que ver con la relación con Cantidad > Calidad de toques (Twitter)
  • 6. Josh Clark http://tnw.co/uP7ncW 7 mitos del diseño para móviles 5. Tenemos que hacer una versión móvil del sitio Debemos centrarnos en un diseño que sirva para todas las plataformas. si debemos hacer un versión móvil quiere decir que el sitio web está lleno de cosas que sobran 6.Móvil se trata de aplicaciones Centrarse sólo en las aplicaciones no es sostenible, no se puede diseñar una experiencia nueva en cada plataforma. "Hay que pensar que el contenido debe ser como el agua, toma muchas formas y se adapta a sus recipientes" 7. El contenido y las API son para nerds Los diseñadores deben preocuparse de esto y también hacerse cargo
  • 7. Responsive Design ¿Qué necesitamos definir? 1. ¿La AI puede pensarse desde un principio para los contenidos se jerarquizen igual en todos los dispositivos ? 2. Patrones en diseño para que los sitios se adapten a todas sus plataformas 3. ¿Qué decisiones en conjunto podemos tomar para que este diseño sea programable?
  • 8. Conversemos Taller de Diseño AyerViernes @shizada