SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Introducción Responsive design
Introducción Responsive designIntroducción Responsive design
Introducción Responsive designEduard Zora
 
UX en aplicaciones de Social Media
UX en aplicaciones de Social MediaUX en aplicaciones de Social Media
UX en aplicaciones de Social MediaJuan David Saab
 
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 AdanAvelar
 

Was ist angesagt? (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
 

Andere mochten auch

¿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 2012AyerViernes
 
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 WebWatt
 
SoyDigital 2012 Reboot
SoyDigital 2012 RebootSoyDigital 2012 Reboot
SoyDigital 2012 RebootAyerViernes
 

Andere mochten auch (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
 

Ähnlich wie Responsive Design - Taller de Diseño av

QUÉ ES EL DISEÑO RESPONSIVO.docx
QUÉ ES EL DISEÑO RESPONSIVO.docxQUÉ ES EL DISEÑO RESPONSIVO.docx
QUÉ ES EL DISEÑO RESPONSIVO.docxAnglicaQuirinoGmez
 
Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptiveViviana Trujillo
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaPlain Concepts
 
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óvilesJuan Paulo Madriaza
 
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 MeridaLuis Felipe Perez
 
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 responsivoZerozeroestudio
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensibleCarlos Zapata
 
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 @janogarciaJano Garcia
 
Aplicaciones (maribel chavez distra)
Aplicaciones  (maribel chavez distra)Aplicaciones  (maribel chavez distra)
Aplicaciones (maribel chavez distra)marychavezdiestra
 
Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
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 responsivodavidstiven14
 
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 recomendacionesXavi Cardet
 

Ähnlich wie Responsive Design - Taller de Diseño av (20)

QUÉ ES EL DISEÑO RESPONSIVO.docx
QUÉ ES EL DISEÑO RESPONSIVO.docxQUÉ ES EL DISEÑO RESPONSIVO.docx
QUÉ ES EL DISEÑO RESPONSIVO.docx
 
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
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
 
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
 
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
 

Mehr von AyerViernes

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éricaAyerViernes
 
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 EndAyerViernes
 
Presentación Entel. Reboot, SoyDigital 2012
Presentación Entel. Reboot, SoyDigital 2012Presentación Entel. Reboot, SoyDigital 2012
Presentación Entel. Reboot, SoyDigital 2012AyerViernes
 
Diseño de servicios
Diseño de serviciosDiseño de servicios
Diseño de serviciosAyerViernes
 
Análisis y tendencias para 2011
Análisis y tendencias para 2011Análisis y tendencias para 2011
Análisis y tendencias para 2011AyerViernes
 
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 dicesAyerViernes
 
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 InternetAyerViernes
 
El minuto de confianza
El minuto de confianza El minuto de confianza
El minuto de confianza AyerViernes
 
Clerk, Hotel management
Clerk, Hotel managementClerk, Hotel management
Clerk, Hotel managementAyerViernes
 
Experiencia de Consumo en Medios Digitales
Experiencia de Consumo en Medios DigitalesExperiencia de Consumo en Medios Digitales
Experiencia de Consumo en Medios DigitalesAyerViernes
 
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 ChileAyerViernes
 
Eyetracking publicidad y contenidos
Eyetracking publicidad y contenidosEyetracking publicidad y contenidos
Eyetracking publicidad y contenidosAyerViernes
 
Eyetracking, Fija tu Estrategia
Eyetracking, Fija tu EstrategiaEyetracking, Fija tu Estrategia
Eyetracking, Fija tu EstrategiaAyerViernes
 
Eyetracking Medios De Comunicacion
Eyetracking Medios De ComunicacionEyetracking Medios De Comunicacion
Eyetracking Medios De ComunicacionAyerViernes
 
Consumidor Digital Retail 2008
Consumidor Digital Retail 2008Consumidor Digital Retail 2008
Consumidor Digital Retail 2008AyerViernes
 

Mehr von 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
 

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