Piense en términos de plantillas

Lo más probable es que no tenga 90 páginas totalmente únicas (si las tiene, probablemente tenga otro problema entre manos). Para la mayoría de las aplicaciones (o sitios), tiene un puñado de plantillas que son capaces de configurar los elementos centrales del interfaz.

Empezar con las vistas

Ha puesto mucho trabajo en la creación de estas 90 vistas, por lo que probablemente conozca las plantillas bastante bien. Regrese e identifique las 6 a 12 vistas clave que responden a las preocupaciones críticas sobre la estructura de la interfaz de usuario (ese parece ser el punto óptimo en mi experiencia). Está buscando los que pueden actuar como estándares de interfaz de usuario para todo lo demás.

Luego evalúe los dispositivos

Hay muchos dispositivos por ahí, pero no son tan diferentes . Dado que salió por la puerta con iOS7 y un iPhone 5, supongo que esa es la mayor parte de su público objetivo. Eso debería diseñar su estrategia de iOS con bastante claridad. ¿De verdad vas a ver muchos usuarios en iPhone 3s? Improbable. Puede indicar qué hace el espacio de pantalla reducido en un par de vistas clave y dejarlo así.

Ahora debe preguntarse si creará una máscara de interfaz de usuario de Android totalmente nativa. ¿Tu diseño actual se ve muy iOS? Si es así, es posible que desee agregar un poco de Material Design, tener en cuenta el práctico botón de retroceso persistente y diseñar esas pantallas clave nuevamente. No 90, solo el puñado que identificó en el último paso.

Finalmente, debes considerar las tabletas y el temido phablet (¡estúpido Galaxy Note!). ¿Vas a acomodarlos también? Como mínimo, es una buena idea hacer un par de vistas para tableta. Si es un caso de gran uso, haga todas sus páginas de plantilla principales para cada sistema operativo.

Verificación de la realidad de gestión

Ahora, regresa a The Management y muéstrales todo este increíble trabajo.

"Miren, muchachos. He pensado en todo".

Señala que ha resuelto todo para el dispositivo de destino principal. Además, ha retrocedido y abordado todos los demás contextos de dispositivos principales. A partir de esta base, los ingenieros pueden desarrollar el MVP y probarlo en todo lo que hay bajo el sol. Serás ágil de ahora en adelante y abordarás desafíos específicos a medida que surjan. Está todo bien, he pensado en todo.

Referencia futura

Usa croquis. Serás más feliz.

Como habrás notado, es demasiado difícil considerar la creación de diseños para todos los dispositivos y resoluciones, particularmente en Photoshop. Lo que quizás desee hacer es evaluar los dispositivos más comunes que se utilizarán con las aplicaciones que está diseñando.

O permita la flexibilidad en sus diseños. Los dispositivos Android usan dpi, por lo que dependiendo de los usuarios objetivo, puede diseñar para bajo (ldpi), medio (mdpi), alto (hdpi), xhdpi, xxhdpi ... etc. iOS usa un sistema basado en puntos de manera similar a darte 1x, 2x y 3x. Por lo tanto, si tiene cuidado, posiblemente podría salirse con la suya diseñando para densidades de píxeles de pantalla de solo 4/5. Con eso en mente, en cuanto al software, tal vez usar Illustrator o Sketch en el futuro ayudaría.

Finalmente, en cuanto a su problema actual, también puede ser bueno crear un prototipo que pueda escalar razonablemente bien. Pixate, Invision, Marvel, Framer hacen un gran trabajo al cumplir con los diferentes requisitos de creación de prototipos.

Esto depende un poco de para qué son estas imágenes, pero si son para revisión del cliente, este método debería funcionar bien y acelerar las cosas.

1. Importe (coloque) cada PSD de Photoshop en Indesign y conserve las capas.
2. Cree "Diseños alternativos" para cada nueva especificación/dispositivo.

Esto requerirá algunos ajustes (si el diseño líquido funciona bien, eso es una ventaja), pero el flujo de trabajo debería ser mucho más rápido que una revisión de Photoshop.

Hay algunas desventajas, pero cualquier buen desarrollador debería poder trabajar con esto, especialmente con el conjunto de maestros sólidos que ya ha creado.

T

Está utilizando Photoshop, así que supongo que probablemente esté suscrito a Adobe Creative Cloud y, por lo tanto, tenga acceso a Edge Reflow CC . Edge Reflow se creó para diseñadores de sitios web adaptativos/responsivos, y es básicamente una herramienta para cambiar el tamaño de las maquetas web de Photoshop. Cada diseño necesitará un poco de trabajo en Edge Reflow, pero una vez allí, debería poder alcanzar todos los tamaños de dispositivos, ¡usando solo un psd!

Recomiendo usar la relación de aspecto (serach wiki), ajustar las maquetas a una relación inicial y generar todas las maquetas a partir de una lista de relaciones de aspecto como la relación de aspecto de Apple IOS , y para la radio de aspecto de Android, use tamaños reales "me gusta" como: 2: * "pequeño", 4:* "normal", 7:* "grande", 10:* "extragrande" (recomendación de relación de escala 3:4:6:8:12:16)