Cualquier sistema de cuadrícula de CSS receptivo utiliza valores de porcentaje de puntos decimales largos para el ancho de las columnas (por ejemplo, "16,66666667%"). No entiendo cómo diseñar la cuadrícula en Photoshop, porque los elementos de la interfaz serán más largos o más cortos de lo que la cuadrícula CSS espera que sean, lo que genera ciertos problemas con todo el diseño (los elementos pueden cambiar de posición porque de redondeo de números), al final no se ve igual en un navegador.
Para ilustrarlo mejor, tomemos los valores de Bootstrap: el ancho de columna para el contenedor más grande es ~97px. Entonces, ¿cómo debo diseñar la cuadrícula en un editor de gráficos? ¿Debería redondearlo a 97 o 98, o tal vez debería olvidarme de estos valores precisos y diseñar no para los números exactos de píxeles, sino para la cantidad de columnas, lo que sea? ¿la anchura?
Quiero decir, simplemente no puedo superar el hecho de que no se verá igual, los rellenos serían diferentes de cómo los dibujé (a veces incluso diferentes entre sí en caso de que un elemento tome el 100% de una columna [o dos] ancho, por ejemplo, un botón con algo de texto puede tener un relleno izquierdo de 30 y un relleno derecho de 32; se nota y no está bien), los anchos serían diferentes, los canalones serían diferentes y pronto. No entiendo cómo puedes crear una interfaz funcional y hermosa con esta inconsistencia y falta de precisión.
¿Puedes compartir tu experiencia? ¿Cómo lo haces? ¿Me equivoco en algo? ¿Tal vez hay algo bueno que pueda leer sobre el diseño de sistemas de cuadrícula fluidos/responsables? Muchas gracias.
Simplemente no puedo superar el hecho de que no se verá igual
Tienes que superarlo. :)
La conclusión es que no puede crear fácilmente maquetas de IU en herramientas estáticas como PhotoShop y esperar que se adapten adecuadamente a los diseños receptivos.
La mejor manera de lidiar con esto es diseñar en los navegadores. Esto no funciona para todos, por supuesto, ya que no todos quieren escribir código de interfaz de usuario. Como tal, la segunda mejor manera es trabajar con el desarrollador de la interfaz de usuario en paralelo.
Sugiero este flujo en esas situaciones:
Lo que mencionas es precisamente por qué el diseño receptivo es tan difícil. Ya no tienes un lienzo para empezar. Comenzar un diseño ya no es lo mismo que "abrir Photoshop". Primero hay que trabajar en la cabeza. ¿Cómo desea que se vea el diseño en diferentes dispositivos y cómo debería cambiar cuando el tamaño de la pantalla cambia solo un poco (es decir, entre diferentes tipos de teléfonos)?
Puede quejarse de que es casi imposible diseñar para todos los diferentes tipos de teléfonos al mismo tiempo, pero la realidad es cómo se verá el sitio. En otras palabras, si se apega a algún tipo de denominador común y solo diseña para eso, su sitio aún se verá en diferentes dispositivos. Tendrá que ceder el control de al menos algunas partes del diseño. Este solía ser el tamaño del margen izquierdo y derecho en los viejos días de ancho fijo, pero las cosas ya no son tan simples.
He aquí algunos consejos que vienen a la mente:
user56reinstatemonica8