Bien, tengo esta pregunta que me ha estado molestando durante bastante tiempo, intentaré explicarla en detalle.
Estoy diseñando un sitio web de marketing regular, y primero hice la versión de escritorio usando la cuadrícula de arranque estándar (12 columnas, canales de 30 px). No hago código (sé que debería hacerlo).
Ahora, cuando se me pidió que hiciera las versiones para tabletas y dispositivos móviles, me vino a la mente esta gran pregunta. ¿Cómo se comporta esta cuadrícula en particular a resoluciones más pequeñas? Tendría sentido que en el iPad, que es pequeño pero sigue teniendo una buena resolución, se mantenga el estándar de 12 columnas y 30 píxeles de medianera. Esto haría que el sitio web simplemente se adaptara y cambiara el tamaño de algunos contenedores y aún funcionaría.
Mi problema es con el móvil. Cuando llegamos al punto de interrupción, ¿permanece igual el mismo número de columnas y el mismo tamaño de medianil? Porque con canalones de 30px, las columnas se vuelven más pequeñas o del mismo tamaño que el canalón. ¿O debería simplemente hacer un punto de interrupción y borrar 8 columnas y solo dejar 4?
¿Cómo debería verse la cuadrícula en un archivo PSD destinado a dispositivos móviles? O al menos, ¿cuál es el mejor enfoque?
Gracias
Se comporta de la forma en que le dices que se comporte. En otras palabras, estos marcos le brindan una cuadrícula con la que trabajar... pero tiene que trabajar con ella. Tiene que decidir qué puntos de interrupción usar y qué sucederá con cada punto de interrupción. Lo que cambia de tamaño, lo que se vuelve más angosto, lo que se ajusta a una nueva fila, lo que se oculta, lo que se muestra, etc., etc.
Idealmente, haga esto CON el desarrollador, en lugar de crear archivos PSD separados.
Lo que he leído en el sitio de Foundation 6 es que la cuadrícula con canaletas puede escalar. En Sketch 3.5 (la mejor aplicación sobre Photoshop para diseño receptivo), cuando selecciono "web receptiva" para mis mesas de trabajo, la cuadrícula que genera automáticamente se escala para que las canaletas se vuelvan más estrechas en los dos puntos de ruptura móviles.
Por ejemplo, a 768 px, la cuadrícula de Sketch permanece en 12 columnas con un canalón de 10 px. Y con un corte móvil de 320 px, la canaleta se escala a 4 px. Es bueno saberlo porque ese será su margen mínimo izquierdo y derecho para su UNA columna en la ventana gráfica de 320px.
La idea básica es que en un teléfono, las columnas colapsan para que solo tenga una columna.
Si tienes esto en el escritorio:
[ column1 ] [ column2 ] [ column3 ]
… entonces en un teléfono deberías ver esto:
[ column1 ]
[ column2 ]
[ column3 ]
Todo esto se hace con HTML+CSS básico.
Es posible que desee ver Skeleton , que es un diseño de respuesta gratuito, listo para usar HTML + CSS, que me ha funcionado muy bien. La cuadrícula y los puntos de interrupción ya están definidos. Puede o no querer usarlo, pero al menos es realmente educativo. Es posible que ni siquiera necesites descargarlo. Simplemente cambie el tamaño de la ventana del navegador en el sitio web de Skeleton y verá que las columnas colapsan. Pero la plantilla en sí es un gran recurso para los diseñadores porque puede convertir un PSD en un sitio web receptivo con muy poco trabajo.
No hago código (sé que debería hacerlo).
No soy una de esas personas que piensa que todo el mundo debería codificar, pero la cosa es que HTML+CSS no es realmente codificar. No hay lógica, ni variables, ni condiciones, ni bucles. HTML+CSS se ve muy difícil cuando lo miras por primera vez, pero una vez que aprendes un poco sobre él, te das cuenta de que una etiqueta HTML es equivalente a un objeto en el lienzo de Photoshop (por ejemplo, un texto envuelto en una etiqueta ap es solo un texto objeto) y una regla CSS es equivalente a las propiedades que aplica a ese objeto con los paneles de Photoshop (por ejemplo, establecer un ancho y alto, agregar una sombra paralela). HTML+CSS. Ya hablas el idioma de los objetos y las propiedades y las medidas de píxeles, solo necesitas aprender un vocabulario alternativo.
Este es un gran libro que ha ayudado a muchos diseñadores que conozco. Está escrito específicamente para personas que no están entusiasmadas con el código. Tiene un tono muy ligero y cubre solo lo básico.
Este es mi flujo de trabajo, lo que encontré más fácil con el tiempo:
Al diseñar PSD para un diseño receptivo, generalmente también usa HTML y CSS (más JS), por lo tanto, en realidad no necesita diseñar en Photoshop el sitio web para tabletas/móviles, solo debe tener en cuenta que lo necesita para cambiar el diseño cuando se detectan pantallas más pequeñas.
Por lo tanto, debe tener un buen conocimiento de Media Queries , un ejemplo básico es:
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
*Lo que hace es detectar el ancho de tu pantalla, y si la pantalla tiene un ancho mínimo de 480px, cambia el color de fondo: Ejemplo
Sabiendo esto, puede apuntar al ancho de la pantalla de una tableta y escribir el CSS deseado que afectará su diseño y también, escribir otra regla para el ancho de la pantalla de un teléfono con otro CSS como:
body{ background-color: black; }
@media screen and (max-width: 480px){ body {background-color: red;} }
@media screen and (max-width: 300px){ body {background-color: green;} }
Traducción:
El color de fondo del cuerpo es negro . Si el ancho de la pantalla es igual o inferior a 480 px , cambie el color de fondo a rojo , pero si el ancho de la pantalla es igual o inferior a 300 px , cambie el color de fondo a verde .
Espero que esto ayude.
EDITAR: Jaja, acabo de ver que se hizo esta pregunta hace 10 meses. :)) De todos modos, espero que esto ayude a alguien.
Zach Saucier