Antes de comenzar, define claramente los objetivos del prototipo y los dispositivos específicos que deseas abordar. Identificar los elementos que vamos a eliminar, reducir según el tipo de dispositivo que diseñemos.
Diseño Mobile-First:
Adopta un enfoque "Mobile-First" al diseñar tu prototipo. Comienza diseñando para dispositivos móviles y luego expande la funcionalidad para tamaños de pantalla más grandes.
Reutilización de componentes:
Diseña componentes reutilizables que puedan adaptarse a diferentes resoluciones de pantalla. Esto facilita la coherencia y el mantenimiento del diseño.
Adaptabilidad de Imágenes y multimedia:
Asegúrate de que las imágenes y el contenido multimedia se adapten a diferentes resoluciones y tamaños de pantalla para evitar problemas de carga y rendimiento.
Pruebas en Dispositivos Reales:
Realiza pruebas del prototipo en dispositivos reales para evaluar su comportamiento y apariencia en situaciones del mundo real.
Enfócate en la Experiencia del Usuario (UX):
Asegúrate de que la experiencia del usuario sea consistente y efectiva en todos los dispositivos. Considera la disposición de los elementos, la navegación y la interactividad.
Optimización de interactividad:
Optimiza la interactividad del prototipo para dispositivos táctiles y de escritorio. Ajusta la sensibilidad de los gestos y las acciones de clic para cada tipo de dispositivo.
Priorización de Contenido:
Prioriza y organiza el contenido de manera que la información esencial sea accesible incluso en pantallas más pequeñas. Esto garantiza una experiencia de usuario clara y efectiva.
Iteración y Mejora Continua:
Realiza iteraciones en tu prototipo en función de la retroalimentación del usuario y de las pruebas en diferentes dispositivos. Mejora continuamente la adaptabilidad del diseño.
Documentación Detallada:
Proporciona documentación detallada sobre el diseño responsive, destacando puntos de interrupción, decisiones de diseño y componentes clave para facilitar la colaboración con desarrolladores.
Preguntas frecuentes:
¿Con qué dispositivo es conveniente empezar? ¿desktop o mobile?
Resulta más sencillo tener pocos elementos e ir agregando más a medida que van creciendo, que empezar por el diseño para pantallas grandes y luego ir quitando cosas cuando no entran. Por ello recomendamos que sea mobile first.
¿Qué hay que tener en cuenta cuando realizamos diseño responsivo?
Distancia de lectura entre usuario-dispositivo.
Affordance. Elemento de interacción (mouse) o dedo.
Tamaño de pantalla
Construir con autolayout responsive y hacer un diseño responsivo se relacionan pero no son dependientes. Es decir, puedes construir tus elementos de tu interfaz sin usar autolayout responsive ya que puedes utilizar las propiedades del componente para crear variaciones de elementos para desktop, mobile, tablet,etc.
¿Qué fuentes tipográficas y tamaños son más apropiados para diferentes tamaños de pantalla?
Asegurarse de que las fuentes sean legibles en todos los dispositivos y determinar si es necesario ajustar los tamaños de fuente para adaptarse a pantallas más pequeñas o grandes.
