Estoy tratando de diseñar un sitio web receptivo en Photoshop. Pero la pregunta es ¿debo diseñar diferentes PSD para todos estos dispositivos? (Escritorio, Tableta, Móvil)
En caso afirmativo, ¿qué tamaño de página debo elegir en Photoshop para todos estos dispositivos?
Es una buena idea hacer un ejemplo de diseño de cómo debería verse la página en los dispositivos de destino. Pero como hay demasiados tamaños de pantalla, no es práctico hacer un diseño separado para todos ellos.
Como desarrollador web, sugeriría hacer la versión receptiva de los diseños solo para la página de inicio, para los siguientes tamaños de pantalla:
Escritorio: (alrededor de 992 px, o según su diseño)
Tabletas: (768 px)
Móvil: (480 px)
Tenga en cuenta que los tamaños de pantalla recomendados anteriormente están a la par con un popular marco de desarrollo de front-end receptivo, Twitter Bootstrap 3.
Al contrario de la memoria popular de diseñar "móvil primero", recomendaría diseñar solo para escritorio usando una cuadrícula de 12 columnas; luego, permitir que los desarrolladores construyan todos los estados móviles utilizando un marco CSS receptivo estándar como Bootstrap. Hay una serie de aspectos positivos en eso, como aprendimos en nuestro propio proceso de desarrollo web:
Por otro lado, si prepara un diseño de escritorio receptivo, mantiene las horas creativas bajo control.
Si deja el reposicionamiento de dispositivos móviles y tabletas a discreción de los desarrolladores y sigue las mejores prácticas en la fase de diseño de escritorio, tiene la garantía de que el desarrollo tomará la ruta más eficiente para usar el marco y sus módulos. Ahorro de tiempo, ahorro de costos, todos felices. Sin duda, habrá una revisión interna entre los diseñadores y desarrolladores y un ajuste menor de los estados de respuesta antes de mostrar el sitio al cliente, pero no es nada comparado con el dolor de diseñar todos los estados de respuesta para todas las plantillas y luego tratar de codificarlos con píxeles. fidelidad perfecta para el rendimiento entre navegadores y plataformas.
http://184.72.251.109/oss/dev/WP_core/master/grid-system/ muestra cómo se comporta el sistema de cuadrícula sensible en diferentes resoluciones, y siempre que el diseño del escritorio siga la cuadrícula de 12 columnas, eso es lo que debe esperar en la tableta y el teléfono diseños Hay un enlace de archivo PSD en la parte superior de la página para descargar la plantilla de cuadrícula de escritorio.
Espero que esto ayude.
Estoy de acuerdo con Max Tokman y agregaría que, como codificador y diseñador de mi empresa, caí en la trampa de crear un diseño móvil que era muy difícil de replicar en el código.
Dicho esto, también debe tener en cuenta quién será el público objetivo. Si este es un sitio que se usará principalmente en un teléfono, entonces se debe prestar atención a ese diseño más que a otros. La mayoría de los sitios no se utilizarán por igual en todas las plataformas a pesar de las esperanzas de los propietarios cuyos conceptos está tratando de dar vida. Siempre hay excepciones a esa regla, por supuesto.
Tiendo a crear primero la versión de escritorio, luego decido qué elementos serán importantes para el diseño móvil. Una imagen de héroe gigante, por ejemplo, se puede dejar fuera de la versión para teléfono.
Hay una nueva forma (hace unos días) para que hagas esto. Estaba actualizando Photoshop y puede que le agrade saber que ahora puede crear varias tablas de arte en un documento de Photoshop. Esto le permitirá tener los 3 diseños en un solo archivo. Aquí está el video de cómo funciona esta nueva función: https://helpx.adobe.com/photoshop/how-to/design-with-artboards.html
Si está buscando una forma más fácil de administrar diseños receptivos y tiene una suscripción a Adobe CC, Adobe tiene un producto llamado Edge Reflow que facilita mucho el diseño para varias resoluciones. Aquí hay un video de adobe al respecto. Pero esencialmente puedes importar tus PSD y manipularlos para que cambien en diferentes resoluciones.
Edge Reflow puede exportar su trabajo como un sitio web en funcionamiento. Es una buena demostración y los desarrolladores pueden entrar allí, ver cómo funciona todo y extraer lo que necesitan directamente de él.
Al usar esto, no tiene que preocuparse por administrar múltiples PSD o qué tamaños tiene exactamente configurados en Photoshop.
Diseñe solo el diseño móvil. Luego trabaje con los desarrolladores para redistribuir las cosas según sea necesario para otras vistas.
La razón por la que los dispositivos móviles son lo primero es que lo obliga a priorizar el contenido y la funcionalidad según las necesidades. Le brinda un diseño aerodinámico que, en la mayoría de los casos, también es perfecto para el escritorio, aunque quizás con un diseño diferente.
La razón para trabajar con los desarrolladores para diseñar las diferentes vistas en el código es que el código dictará qué se puede mover a dónde y cómo. La mayoría de las veces, cuando obtengo varios archivos PSD para cada ventana gráfica, en realidad termino con 3 diseños que en realidad requieren 3 bases de código diferentes, en lugar de una base de código que pueda acomodar el reflujo. A veces, esto se puede 'arreglar' con una gran cantidad de JavaScript y reorganización de DOM, pero eso, como puede imaginar, genera otros problemas importantes.
PieBie