Tengo serios problemas para entender un aspecto del diseño receptivo. Entiendo casi todos los conceptos básicos, pero una cosa que me preocupa es configurar cuadrículas correctas en Photoshop para varios puntos de ruptura. Por lo que puedo deducir, un diseño receptivo reducirá su cuadrícula a medida que disminuya el ancho del dispositivo. Esto significa que no se trata solo de eliminar algunas columnas y su cuadrícula vuelve a estar en proporción.
Por el momento, lo único que se me ocurre para duplicar una cuadrícula receptiva es reducir la escala del documento en Photoshop y eso mantendrá las relaciones entre las columnas, los espacios intermedios y los márgenes. He mirado cómo lo hacen otras personas y nadie parece hacerlo de esta manera. Estaba buscando en YouTube y encontré a este tipo : parece que solo usa la misma cuadrícula pero en partes más pequeñas en lugar de cambiar el tamaño de la cuadrícula por completo para que coincida con el punto de ruptura. ¿Alguien puede arrojar algo de luz sobre esto?
La verdad es que pocos usan Photoshop para simular sitios completos. En mi experiencia, no es así como se hace el diseño web moderno.
Wireframing se ha convertido mucho más en un punto de partida para el diseño de lo que era hace 5 años. Los días en los que pasaba horas creando la maqueta perfecta en Photoshop y luego recreando todo de nuevo en HTML han quedado atrás. Más Photoshop (y otros) se utilizan como herramienta de apoyo para desarrollar estructuras alámbricas, mediante la creación y exportación de hojas de sprites o imágenes para uso de fondo CSS, en lugar de puntos de partida para el diseño. Esta es también la razón por la que arquitecturas como Bootstrap de Twitter se han vuelto más prominentes.
La teoría detrás del diseño receptivo es que a medida que la pantalla se estrecha, la estructura de la página web se modifica para adaptarse mejor a la estrecha interfaz. Simplemente no puede lograr esta capacidad dinámica dentro de Photoshop. La única forma de adaptarse a la reducción en cualquier aplicación de edición de ráster es usar solo una parte de cualquier cuadrícula en lugar de cambiar el tamaño de una cuadrícula.
La forma en que el caballero en el enlace de su video mueve las cosas hacia el lado izquierdo de la cuadrícula es realmente cómo necesita usar Photoshop si va a configurar páginas enteras. Debe pensar en que todo se presenta en el ancho de pantalla máximo y luego simplemente mover , no cambiar el tamaño, los elementos para un ancho más pequeño. El diseño receptivo generalmente no escala nada, simplemente mueve elementos. En realidad, solo las imágenes (como fotografías) se redimensionan dinámicamente en un diseño receptivo, el texto, los botones, los íconos, etc. rara vez se redimensionan.
"Responsive Design" es un término de moda para crear más ingresos para los diseñadores que apestan en diseño pero les encanta hablar sobre reglas.
EDITAR: PARA AQUELLOS QUE NO PUEDEN SEGUIR LO OBVIO: las posturas de diseño receptivo existen un conjunto de reglas sorprendentes capaces de determinar cómo un diseño debe responder correctamente a cualquier variación de tamaño de pantalla frente a densidad de píxeles. Esto simplemente no es posible, práctico o incluso remotamente divertido de hacer. Es más rápido diseñar diseños personalizados y diseños para cada tamaño de pantalla y proporción de densidad de píxeles en los que desea enfocarse, e impulsarlos para cada uno. Y obtendrás un mejor resultado visual.
--- Si hay un truco en esto, es darle vueltas al plazo lo suficiente con sus clientes para que consideren que es algo costoso cubrir su tiempo. Por supuesto, lo contrario es cierto. Los diseñadores que generalmente lanzan esto pretenden que de alguna manera pueden diseñar automáticamente una vez para cada dispositivo y su salsa secreta adaptará "responsivamente" su diseño y diseño a todas las resoluciones y variaciones de densidad/tamaño de pantalla.
--- Nada mas lejos de la verdad. Es hora de enfrentar los hechos sobre el "diseño receptivo"... que es una jerga que presagia representar algo imposible o inverosímilmente limitante como posible y una buena idea, cuando no lo es.
--- Hay una tonelada de trabajo involucrado en hacer que un sitio o una aplicación funcionen bien en todas las variaciones posibles, e implica muchos compromisos.
El diseño y desarrollo "Cumple con los estándares" fue la última de estas modas, antes de esta.
Piensa en lo que es... como profundamente. Responsive Design es un intento de hacer que cualquier diseño e idea de diseño funcionen en diferentes dispositivos de resolución, pantallas, ventanas de navegador y similares. Es imposible tener en cuenta todas las posibles variaciones y todas las diferentes fragmentaciones de dispositivos, navegadores y pantallas.
Por lo tanto, debe retroceder aún más y considerar el contenido, los usuarios y sus expectativas y el proveedor del contenido y sus ambiciones.
Ahora... ¿qué dispositivos, pantallas y ventanas de navegador quieres que puedan ver este contenido y de qué manera?
Las cuadrículas pueden ser una guía para sus ideas iniciales, pero debido a su naturaleza rígida, no van a resolver el problema por completo, solo le brindan un conjunto de "restricciones" dentro de las cuales probar diferentes contenedores mutables para el contenido.
La razón por la que los diseños y diseños muy simples son populares es porque se necesita mucho menos trabajo para mutarlos en todos los diversos espacios y lugares en los que se verán... lo que significa que aún es mucho trabajo manual descubrir cómo desea que el contenido estructurado, dispuesto y en capas.
Así que comience con todos los tamaños de pantalla, tipos de navegador y sus posibles tamaños de ventana lógicos y tamaños de pantalla de su aplicación (o lo que sea) y, básicamente, construya a pedido. Es muy divertido.
por cierto, los márgenes esperados, medianeras, divisores de columnas, etc. varían de un dispositivo a otro, de una pantalla a otra, de un sistema operativo a otro... así que depende de usted cómo hacerlo. No hay realmente ninguna regla.
Lo que sugiere ese video es que hay un LPI común (más o menos) (líneas por pulgada, puede usar cualquier métrica que desee aquí) para la experiencia, por lo que solo es cuestión de descubrir una similitud con el tamaño de la pantalla. Este " SORT OF " funciona, pero es posible que también desee considerar que un teléfono se sostiene mucho más cerca de los ojos, y ahora tienen niveles locos de resolución ... etc.
Entonces, no es divertido en absoluto, de verdad.
Probablemente lo más importante a considerar es mantener una consistencia visual en todos los dispositivos, pantallas y navegadores y pensar en ello como una tonelada de trabajo.
Confundido