No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Adobe XD

Curso de Adobe XD

Ricardo Mendi

Ricardo Mendi

Hacer diseños responsive

8/21
Recursos

Aportes 24

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Mobile First 😮

Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un dispositivo móvil. Pantallas reducidas en comparación a los monitores que usamos normalmente con los ordenadores, y tras tener la maqueta preparada, realizar un escalado, es decir, aumentar el tamaño y adaptarlo a una pantalla de escritorio.

Gente por si se preguntan como se asocio la figura al texto (Del botón biografía)
Debes tener activado la opción de seleccionar y
Encerrar los dos elementos (texto y figura, el texto dentro de la figura, si quieres un resultado como al del profe)
Luego, clic derecho a la figura y selecciona agrupar, listo.

Diseño Responsive

  • Podemos adaptar nuestro contenidos en el apartado de layout.
  • Consejos para el diseño responsive:
    • Hay que empezar diseñando nuestros proyectos desde la interfaz más pequeña a nuestra interfaz más grande.
    • Debemos tomar en cuenta la accesibilidad;
      • Una manera de hacerlo es usar componentes más grandes o llamativos al usuario. (Componentes que se vean sin tener que hacer zoom)
      • Elegir tamaños de fuente legibles. (mínimo 15px)
    • Evitar muchas animaciones en móvil. (Enriquecen el diseño pero suelen pasar costos al tardar en cargar tu página, además no todos los navegadores soportan animaciones)

Realizando mi practica de esta unidad, una pequeña card.


Van ocho clases y ya amo XD.

XD se ve genial! … Aunque muchos lo desacreditan, creo que tiene mucho para ofrecer.

Me hubiera gustado saber como hizo para crear todo sobre el proyecto paso a paso.

* Diseño y acomodación mucho más fluido. * Puedo modificar los tamaños de mi tablero, esto no modifica el contenido de mi diseño, si debemos modificar nuestro contenido a otros tamaños hay que acomodar esta info al nuevo tamaño. * Empecemos diseñando de pequeño a grande, de menos a más, empecemos por la  versión móvil,  * Se debe tener un tamaño de fuente legible, Que no haya necesidad de ser zoom, chequear en todos los tamaños Mobile posibles, esto se debe a que de pronto en un dispositivo como Android se pueda ver bien pero en otro dispositivo por ejemplo Apple el cambio no sea favorable. * Para llegar un buen número de usuarios es importante que nuestra web o cómo va el ser responsiva, Así será accesible y fácil de navegar en todos los dispositivos. * por ejemplo todos aquellos enlaces que son fácilmente perceptibles en la versión de escritorio,  * se aconseja que los cambie por botones vistosos que sean mucho más accesibles a la hora de hacer clic en mi teléfono móvil,  * Se recomienda también que cree formularios amigables, en los que no haya necesidad de ampliar o hacer mucho zoom para entenderlo o interactuar. * Intentemos evitar al máximo las animaciones en móvil, Obviamente las animaciones suelen enriquecer nuestro diseño Pero también es muy molesto que cuando esté navegando me aparezca un pop Up y no puede haber realmente el contenido, además mi página tardará encargar si no todos los navegadores soportarán todas esas animaciones. * Empecemos a hacer nuestras versiones, y hacer la estructura de nuestro proyecto haciendo pruebas en distintos tamaños de Mobile y Web.
Las animaciones ya son soportadas por los navegadores, dejando a un lado el caso de internet explorer, sugeriria no recargar de animaciones el proyecto ya que lo vuelve molesto si en exceso y la experiencia de usuario se ve afectada.
me encantaron los tips :)
![](https://static.platzi.com/media/user_upload/image-98c5c228-826c-4b3e-a4b9-dc0e5f306ea6.jpg)![]()
Practica ✌🏼![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-02-08%20a%20la%28s%29%2011.30.07%20a.m.-0d83c522-74e6-45a8-9d43-632df49091ba.jpg)
Practica ✌🏼 ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-02-08%20a%20la%28s%29%2011.30.07%20a.m.-361e0787-60c2-4483-b330-42ec83769213.jpg)
![](https://static.platzi.com/media/user_upload/Akira%20toriyama-802f77da-8363-44f2-bdc5-a4cf39b82365.jpg)

Con lo que aprendí en esta clase hice esto