Responsive Resize

Clase 19 de 32 • Curso de Adobe XD 2019

Jhon Alexander Romero Gonzaga

student•

Las medidas estandar para hacer un diseño responsive son: Portatil estandar: 1024px Tablet: 768px Celular Landscape (Horizontal): 480px Celular Portrait (Vertical): 320px
Esas son las medidas que utilizamos bastante al hacer una página web que sea responsive, pueden utilizar como guia para los que no saben aun:
Primero en cualquier página web le dan click derecho y luego donde dice inspeccionar (Ctr + Shift + i):

Luego damos click donde estan los cuadro de la imagen (justamente donde esta mi puntero de mouse):

Y listo, tenemos las medidas estandar en los cuadraditos donde estan mi puntero:

Espero les ayude un poco a manejarse con medidas.
Un último tip es activar los media query para obsevar los cambios que hara el diseño de la página y poder tener algun diseño adicional (esto es opcional pero nunca esta de más saberlo):

Matias Cariboni

student•

Un comentario genial, como pequeña aportación extra comentar que ctrl+shift+m alterna entre el modo de diseño reactivo (en firefox, en chrome no sé) y el normal.

Christopher Sanchez

student•

Como tienes platzi oscuro :c

Joe Domat

student•

Yo le cambie un poco el diseno al primer producto (Similar a un blog masonry)

Fredy Alonso Hernández

student•

Para los que tengan el Adobe XD en español la opción se llama DISEÑO > Redimensionado interactivo

Carlos Andres Ramírez Irene

student•

¿Qué recomendaciones me podrían dar con los colores?

Juan Fernando López Hernández

student•

Esta super genial

Cristian Alfaro Silva

student•

Estimado, Tengo un problema al usar responsive resize cuando tengo una imágen de background. se escala. Además me gustaría saber: ¿ Qué recomiendas si estoy haciendo una app, trabajar diseñando para un dispositivo con resolución baja o alta, desde XD? Saludos

Roger Carlos Ariel Alba

student•

Una super herramienta, espero pronto XD logre hacer que el menu se convierta en un buger menu, eso sería incrible!

Luis Angel Rojas Estevez

student•

Aquí encontraran todos los tamaños de distintos dispositivos

Andrea Paola Parra Martínez

student•

¿En qué resolución debo hacer mis prototipos para celular? ¿se debe hacer un prototipo por cada tamaño de dispositivo? 😦 :´(

Luis Angel Rojas Estevez

student•

Hola, no necesariamente, en mi caso solamente tomo tres resoluciones 360×640 (movil), 720×1280 (Tableta) y 1440×900 (computador), pero siempre necesitaras hacer pequeños cambios que no entren en esas resoluciones, te recomiendo el Curso de Responsive Desing aquí en Platzi, para que tengas una idea para el desarrollo de la misma en todos los dispositivos.

Y una imagen de ejemplo: ![](

Juan Esteban Deossa Pertuz

student•

Adobe XD nos ofrece una herramienta especial para hacer nuestros diseños adaptables a todo tipo de pantallas, al momento de crear un grupo podremos especificar como este se va a modificar a medida que el tamaño del artboard se ve afectado.

Alain Kevin Rojas Quiroga

student•

Luego de agrupar las formas y aplicar responsive size, la forma interna no se re ajusta a medida que altero la dimension de la forma mayor tal y como aparece en el video, ¿me ayudan?

Enrique López

student•

Hola. Es porque tienes que establecer los "constrains" para que se adapten según tu quieras.

Puedes dejarlo para que su ancho sea fijo o se adapte, o su posición se "pegue" a una de las 4 esquinas de tu pantalla.

Cesar Payro

student•

hay alguna forma en XD de desaparecer los menus y dejar la 'hamburguesa' cuando esta en el tamano mas pequeno? o hay que hacer otro mockup para demostrar esa funcionalidad (y talvez el menu flotante que se abriria en ese mockup tambien?)

Carlos Jimenez

student•

En prototipado se puede hacer una autoanimación y solo tendrías que hacer el menú, no todo el artboard. Veremos un ejemplo más adelante en el curso. Pero te sugiero hacer el estado de la vista completo, va a ser muy útil cuando quieras exportar especificaciones para desarrollo y para comunicarlo con el equipo

Sebastian Marin

student•

Esta herramienta nos evitará muchos dolores de cabeza.

Domínguez Daniel Garbiel

student•

Jesus Manuel Hernandez Diaz

student•

Guaooo, Excelente, no pense que se podia llegar a hacer esto...

Moises Gregorio Briceño Ramirez

student•

![](

Platzi Team

student•

¿Cómo hago para que ciertas opciones que tengo en el header pasen a otro lugar cuando el dispositivo ya es muy pequeño y las opciones no caben en el header?

Roger Carlos Ariel Alba

student•

Hola

Sí te refieres a un dispositivo móvil puede que te convenga usar mascaras.

Aquí puedes ver los Live de Bahance y ver como usarlas.

Platzi Team

student•

¿Es posible tener una interfaz responsive para todos los dispositivos? o ¿solo aplicaría para las referencias más populares?

Roger Carlos Ariel Alba

student•

Hola,

idealmente para los más populares o las medidas estándar, el equipo de desarrollo puede trabajar "firts mobile" y todo funciona bien.

Cristian Alfaro Silva

student•

Roger Carlos Ariel Alba

student•

Hola!

No entiendo bien el primer problema. ¿no quieres que se escale?

Ahora con el siguiente, sugiero siempre trabajes como si fueras a usar dispositivos de alta resolución.

Eso entre otras ventajas te permitirá facilitarle mucho la vida a la gente que hacer código.

David Fernando Aguirre Rodriguez

student•

Yo estoy usando el modelo Mobile First es una filosofía que perfecciona el proceso de diseño de cualquier sitio web, buscando mejorar el diseño web adaptable. Esta nueva forma de diseñar, surge de los dispositivos móviles y de cualquier pantalla de tamaño menor, en la que se parte de una escala en aumento hasta adaptar el diseño a pantallas de gran tamaño.

Aspectos a tener en cuenta en el diseño Mobile First Teniendo en cuenta esta manera de enfocar el diseño, las dimensiones y capacidades de un móvil y la información que debemos incluir, podemos pasar al desarrollo de una página web.

Lo primero que se debe hacer es aclarar el contenido básico y separarlo del contenido sobrante o prescindible. Al hacer esto, nos quedará un listado de los elementos esenciales que debe contener nuestra página; home, página interior, carrito de compra, buscador… Estos elementos deben decidirse en función de las necesidades de los futuros usuarios.

Puede darse el caso de que ciertos elementos no se logren incluir a la vez en pantalla como el logotipo, el navegador y el buscador, por ejemplo. Si el espacio realmente es ínfimo, siempre puede darse la opción de habilitar un botón con categorías para las opciones que no se puedan incluir en la pantalla.

Escala de pantallas: el modelo Mobile First

Juan David Rodriguez Erazo

student•

Como podría hacer para que por ejemplo una card (que creamos anteriormente), se redimenciones al hacer responsive?

Tania Ramírez

student•

Es importante tener todo correctamente agrupado. Redimensionalo a ver qué resulta

Erik Elyager

student•

Es algo de mucha prueba y error, re-dimensiona y ve cómo se ajustan tus elementos, activa el responsive resize de forma manual para aquellos elementos que no se ajusten bien y prueba de nuevo.

Cristian Ramos

student•

super responsive !

Daniel Felipe

student•

Cada vez me gusta más Xd

Responsive Resize

Conocer la importancia de utilizar una herramienta especializada en el diseño de interfaces

Actualización de curso

Qué es AdobeXD y por qué usar AdobeXD

Instalación

Crear y configurar un nuevo proyecto

Creación de un documento

Interfaz y navegación

Atajos de teclado

Artboards

Grids y layouts

Utilizar las herramientas de Diseño

Formas

Alinear y combinar formas

Diseñar icono

Textos y tipografía

Imágenes y máscaras

Pluma

Optimizar el trabajo con herramientas avanzadas

Repeat grid tool

Cargar contenido en repeat grid tool

Componentes

Panel de assets

Responsive Resize

UI Kits

Diseñar una app

Wireframes del proyecto:sección cartelera

Wireframes del proyecto: menú inferior

Mockups del proyecto

Definiendo la paleta de color para el mockup del proyecto

Teoría del color para el diseño de interfaces

Agregar contenido al mockup del proyecto

Crear prototipos interactivos

Prototipado

Animaciones automáticas con Adobe XD

Animaciones avanzadas

Aplicar las mejores prácticas y herramientas para exportar los proyectos

Exportado

Compartir

Conclusiones