SlideShare una empresa de Scribd logo
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

Más contenido relacionado

La actualidad más candente

Jimdo Actividad 2
Jimdo Actividad 2Jimdo Actividad 2
Jimdo Actividad 2
Yessica Moreno
 
Menu pres 3
Menu pres 3Menu pres 3
Menu pres 3
ara06144162
 
Introducción Responsive design
Introducción Responsive designIntroducción Responsive design
Introducción Responsive design
Eduard Zora
 
Prezi
PreziPrezi
Actividad 2
Actividad 2Actividad 2
Actividad 2
Yessica Moreno
 
UX en aplicaciones de Social Media
UX en aplicaciones de Social MediaUX en aplicaciones de Social Media
UX en aplicaciones de Social Media
Juan David Saab
 
Tema3 diseño - desarrollo
Tema3   diseño - desarrolloTema3   diseño - desarrollo
Tema3 diseño - desarrollo
Amparo Cervantes A.
 
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
 

La actualidad más candente (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
 

Similar a Responsive Design

Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs Adaptive
Viviana Trujillo
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
Plain 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óviles
Juan 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 Merida
Luis 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 responsivo
Zerozeroestudio
 
9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus
Ramiro Estigarribia Canese
 
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
Jano Garcia
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensibleCarlos Zapata
 
Aplicaciones (maribel chavez distra)
Aplicaciones  (maribel chavez distra)Aplicaciones  (maribel chavez distra)
Aplicaciones (maribel chavez distra)
marychavezdiestra
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
Antonio Rodriguez Suarez
 
ing.software
ing.softwareing.software
ing.software
Enrique Reyes
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
G2K 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 responsivo
davidstiven14
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Alexander Acurio
 
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
Xavi Cardet
 
Joomla mobile
Joomla mobileJoomla mobile
Joomla mobile
joomladaycolombia
 
Tipos de apps
Tipos de appsTipos de apps
Tipos de apps
Diego Becerra
 
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
Multiplica
 

Similar a Responsive Design (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
 

Más de Dámaris Sepúlveda Troncoso

El rol del diseño en las políticas públicas - Health 2.0
El rol del diseño en las políticas públicas - Health 2.0El rol del diseño en las políticas públicas - Health 2.0
El rol del diseño en las políticas públicas - Health 2.0
Dámaris Sepúlveda Troncoso
 
El rol del diseño en las políticas públicas - WIAD16 Mendoza
El rol del diseño en las políticas públicas - WIAD16 MendozaEl rol del diseño en las políticas públicas - WIAD16 Mendoza
El rol del diseño en las políticas públicas - WIAD16 Mendoza
Dámaris Sepúlveda Troncoso
 
Diseño de Servicios: La Experiencia del paciente en la Salud Pública
Diseño de Servicios: La Experiencia del paciente en la Salud PúblicaDiseño de Servicios: La Experiencia del paciente en la Salud Pública
Diseño de Servicios: La Experiencia del paciente en la Salud Pública
Dámaris Sepúlveda Troncoso
 
SNS, Servicio Nacional de Salud
SNS, Servicio Nacional de SaludSNS, Servicio Nacional de Salud
SNS, Servicio Nacional de Salud
Dámaris Sepúlveda Troncoso
 
Diseño de Experiencia del Paciente en salud pública II
Diseño de Experiencia del Paciente en salud pública IIDiseño de Experiencia del Paciente en salud pública II
Diseño de Experiencia del Paciente en salud pública II
Dámaris Sepúlveda Troncoso
 
Diseño de Experiencia del Paciente en salud pública I
Diseño de Experiencia del Paciente en salud pública IDiseño de Experiencia del Paciente en salud pública I
Diseño de Experiencia del Paciente en salud pública I
Dámaris Sepúlveda Troncoso
 
Guia de Junio
Guia de JunioGuia de Junio

Más de Dámaris Sepúlveda Troncoso (7)

El rol del diseño en las políticas públicas - Health 2.0
El rol del diseño en las políticas públicas - Health 2.0El rol del diseño en las políticas públicas - Health 2.0
El rol del diseño en las políticas públicas - Health 2.0
 
El rol del diseño en las políticas públicas - WIAD16 Mendoza
El rol del diseño en las políticas públicas - WIAD16 MendozaEl rol del diseño en las políticas públicas - WIAD16 Mendoza
El rol del diseño en las políticas públicas - WIAD16 Mendoza
 
Diseño de Servicios: La Experiencia del paciente en la Salud Pública
Diseño de Servicios: La Experiencia del paciente en la Salud PúblicaDiseño de Servicios: La Experiencia del paciente en la Salud Pública
Diseño de Servicios: La Experiencia del paciente en la Salud Pública
 
SNS, Servicio Nacional de Salud
SNS, Servicio Nacional de SaludSNS, Servicio Nacional de Salud
SNS, Servicio Nacional de Salud
 
Diseño de Experiencia del Paciente en salud pública II
Diseño de Experiencia del Paciente en salud pública IIDiseño de Experiencia del Paciente en salud pública II
Diseño de Experiencia del Paciente en salud pública II
 
Diseño de Experiencia del Paciente en salud pública I
Diseño de Experiencia del Paciente en salud pública IDiseño de Experiencia del Paciente en salud pública I
Diseño de Experiencia del Paciente en salud pública I
 
Guia de Junio
Guia de JunioGuia de Junio
Guia de Junio
 

Último

TRABAJO FINAL DEL CURSO(terminado).pptx.
TRABAJO FINAL DEL CURSO(terminado).pptx.TRABAJO FINAL DEL CURSO(terminado).pptx.
TRABAJO FINAL DEL CURSO(terminado).pptx.
ManuelSuclupe
 
1ROEMOCIONES TEMA sobre las 6 emociones basicas.pptx
1ROEMOCIONES TEMA sobre  las 6 emociones basicas.pptx1ROEMOCIONES TEMA sobre  las 6 emociones basicas.pptx
1ROEMOCIONES TEMA sobre las 6 emociones basicas.pptx
MARTHALAURAZEGARRA
 
Aproximaciones a la Pedrera de A.Gaudi .pdf
Aproximaciones a la Pedrera de A.Gaudi .pdfAproximaciones a la Pedrera de A.Gaudi .pdf
Aproximaciones a la Pedrera de A.Gaudi .pdf
jose manuel lopez-mateos moreno
 
Aproximacion a la simbologia de Carl Jung.pdf
Aproximacion a la simbologia de Carl Jung.pdfAproximacion a la simbologia de Carl Jung.pdf
Aproximacion a la simbologia de Carl Jung.pdf
jose manuel lopez-mateos moreno
 
Manejo de la ira. Abordaje de la terapia cognitivo conductual
Manejo de la ira. Abordaje de la terapia cognitivo conductualManejo de la ira. Abordaje de la terapia cognitivo conductual
Manejo de la ira. Abordaje de la terapia cognitivo conductual
efrenrdzdocente22
 
Proyecto Nacion y todos ls conceptos que hay
Proyecto Nacion y todos ls conceptos que hayProyecto Nacion y todos ls conceptos que hay
Proyecto Nacion y todos ls conceptos que hay
LeslyMichelleSeguraI
 
Explicando el eneagrama una herramienta de autodescubrimiento
Explicando el eneagrama una herramienta de autodescubrimientoExplicando el eneagrama una herramienta de autodescubrimiento
Explicando el eneagrama una herramienta de autodescubrimiento
JessEspinoza18
 
psicoterapia-breve-con-nios-y-adolescentes.pdf
psicoterapia-breve-con-nios-y-adolescentes.pdfpsicoterapia-breve-con-nios-y-adolescentes.pdf
psicoterapia-breve-con-nios-y-adolescentes.pdf
monicamirandacarrasco
 
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptxGRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
JUANABELLIMALLICAHUA
 
Corrientes psicológicas en educación social
Corrientes psicológicas en educación socialCorrientes psicológicas en educación social
Corrientes psicológicas en educación social
SofiaGuadalupeTorres2
 
Comunidades virtuales de aprendizaje 2 lll
Comunidades virtuales de aprendizaje 2 lllComunidades virtuales de aprendizaje 2 lll
Comunidades virtuales de aprendizaje 2 lll
eduardourbano812
 
Exposición sobre PHRASAL VERBS.pdf en inglés y español
Exposición sobre PHRASAL VERBS.pdf en inglés y españolExposición sobre PHRASAL VERBS.pdf en inglés y español
Exposición sobre PHRASAL VERBS.pdf en inglés y español
KarenHortua2
 
grupo 1 proyecto proyecto servicio comunitario
grupo 1 proyecto proyecto servicio comunitariogrupo 1 proyecto proyecto servicio comunitario
grupo 1 proyecto proyecto servicio comunitario
rheymondrondon
 

Último (13)

TRABAJO FINAL DEL CURSO(terminado).pptx.
TRABAJO FINAL DEL CURSO(terminado).pptx.TRABAJO FINAL DEL CURSO(terminado).pptx.
TRABAJO FINAL DEL CURSO(terminado).pptx.
 
1ROEMOCIONES TEMA sobre las 6 emociones basicas.pptx
1ROEMOCIONES TEMA sobre  las 6 emociones basicas.pptx1ROEMOCIONES TEMA sobre  las 6 emociones basicas.pptx
1ROEMOCIONES TEMA sobre las 6 emociones basicas.pptx
 
Aproximaciones a la Pedrera de A.Gaudi .pdf
Aproximaciones a la Pedrera de A.Gaudi .pdfAproximaciones a la Pedrera de A.Gaudi .pdf
Aproximaciones a la Pedrera de A.Gaudi .pdf
 
Aproximacion a la simbologia de Carl Jung.pdf
Aproximacion a la simbologia de Carl Jung.pdfAproximacion a la simbologia de Carl Jung.pdf
Aproximacion a la simbologia de Carl Jung.pdf
 
Manejo de la ira. Abordaje de la terapia cognitivo conductual
Manejo de la ira. Abordaje de la terapia cognitivo conductualManejo de la ira. Abordaje de la terapia cognitivo conductual
Manejo de la ira. Abordaje de la terapia cognitivo conductual
 
Proyecto Nacion y todos ls conceptos que hay
Proyecto Nacion y todos ls conceptos que hayProyecto Nacion y todos ls conceptos que hay
Proyecto Nacion y todos ls conceptos que hay
 
Explicando el eneagrama una herramienta de autodescubrimiento
Explicando el eneagrama una herramienta de autodescubrimientoExplicando el eneagrama una herramienta de autodescubrimiento
Explicando el eneagrama una herramienta de autodescubrimiento
 
psicoterapia-breve-con-nios-y-adolescentes.pdf
psicoterapia-breve-con-nios-y-adolescentes.pdfpsicoterapia-breve-con-nios-y-adolescentes.pdf
psicoterapia-breve-con-nios-y-adolescentes.pdf
 
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptxGRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
GRUPO N°6 - OBRAS - FERNANDO ISAAC BELAUNDE TERRY (2 PERIODOS).pptx
 
Corrientes psicológicas en educación social
Corrientes psicológicas en educación socialCorrientes psicológicas en educación social
Corrientes psicológicas en educación social
 
Comunidades virtuales de aprendizaje 2 lll
Comunidades virtuales de aprendizaje 2 lllComunidades virtuales de aprendizaje 2 lll
Comunidades virtuales de aprendizaje 2 lll
 
Exposición sobre PHRASAL VERBS.pdf en inglés y español
Exposición sobre PHRASAL VERBS.pdf en inglés y españolExposición sobre PHRASAL VERBS.pdf en inglés y español
Exposición sobre PHRASAL VERBS.pdf en inglés y español
 
grupo 1 proyecto proyecto servicio comunitario
grupo 1 proyecto proyecto servicio comunitariogrupo 1 proyecto proyecto servicio comunitario
grupo 1 proyecto proyecto servicio comunitario
 

Responsive Design

  • 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