Los fundamentos del diseño web para grillas receptivas

Entonces, nunca ha diseñado utilizando un diseño de cuadrícula, pero desea comenzar a hacerlo. ¡Excelente! Una cuadrícula es el mejor amigo de los diseñadores y una estructura que sirve como marco en el que siempre puede apoyarse.

Como dijiste, ya tienes la escala y la idea detrás de las cuadrículas. Pero un diseño de cuadrícula es mucho más y diría que vale la pena aprenderlo.

Hace unos años, no sabía cómo beneficiar un diseño de cuadrícula en mis diseños (impresos o web), pero luego me topé con las enseñanzas de un gran diseñador gráfico, el Sr. John McWade . Es un tipo detrás de la revista Before&After. Con sus cursos en línea, McWade me enseñó mucho sobre el diseño y los beneficios de usar una cuadrícula y realmente me ayudó a convertirme en un mejor diseñador. Según su pregunta, creo que también podría beneficiarse de aprender de él. Puedes consultar ese curso sobre Lynda aquí . Debe iniciar sesión y Lynda.com es un servicio pago, pero ofrecen una prueba gratuita de 30 días si la necesita.

Luego viene su pregunta específica sobre canaletas según su ilustración. Debe consultar la documentación de Bootstrap sobre su sistema de cuadrícula . En su práctica, usan relleno horizontal para crear canaletas entre columnas individuales, por lo que en realidad ni siquiera se ven las canaletas allí y, por lo tanto, se cuidan de alguna manera. Además, si desea tener más espacio para respirar entre algunas de sus columnas, puede hacerlo fácilmente con la clase compensada. Puede encontrar muchos recursos excelentes para obtener más información sobre el sistema de cuadrícula de 12 columnas para Bootstrap u otros marcos similares en Internet.

Debe concentrarse en comprender cómo usar un diseño de cuadrícula y los beneficios que ofrece. Después de todo, es solo una cuadrícula. Si lo desea o lo necesita, puede continuar y reproducir su diseño, llegar a un canalón si lo desea. Por supuesto, esto no es necesariamente lo más inteligente si desea mantener un diseño limpio y ordenado, pero ¿por qué no habría casos en los que su diseño se beneficie?

Además, Threehouse imparte un excelente curso en línea sobre cómo comenzar a usar Bootstrap y también ofrecen una prueba gratuita si desea comenzar primero. Aquí os dejo un enlace al gran curso de Guil Hernández .

No sé cuánto de su problema depende de Sketch, ¿sale a html? Sin embargo, conozco los conceptos básicos del diseño web receptivo.

La hoja de estilo creativo (CSS) está vinculada desde su página web HTML. La hoja de estilo contiene Consultas de medios que verifican qué tamaño de pantalla tiene el usuario y ofrece estilos para ese tamaño.

Se ven así:

Pantalla solo @media y (ancho mínimo: 600 px) { /* Para tabletas: / {Estilos que definen las columnas y el espaciado y todo lo que desee para el tamaño de la tableta} } Pantalla solo @media y (ancho mínimo: 768 px) { / Para escritorio: */ {Estilos que definen las columnas y el espaciado y todo lo que quieras para el tamaño del escritorio} }

Hay varios tamaños más: teléfono, tableta horizontal y vertical, computadora portátil y de escritorio, pantalla grande, etc. Todos están definidos por dimensiones de píxeles. Cuando un determinado dispositivo abre una página web, obtiene esos estilos que funcionan en su tamaño de pantalla.

¡Esa es la capacidad de respuesta!

Básicamente, puede diseñar diseños para cada tamaño de pantalla y colocar cada uno en la consulta de medios para ese tamaño de pantalla. Pueden ser estilos, proporciones, colores, diseño, etc. completamente diferentes.

Por lo general, las personas usan el mismo formato presentado de manera diferente en una pantalla diferente. Por ejemplo, donde tienen 12 columnas en una computadora de escritorio, tendrán 3 columnas en una tableta y 1 columna en un teléfono. El contenido de las columnas restantes se desplaza debajo de la fila superior para que se desplace hacia abajo para verlos.

Programar toda la capacidad de respuesta es bastante complicado para un principiante, pero existen consultas de medios predefinidas en plataformas web como Bootstrap, que es gratuita.

Si tiene el CSS de arranque vinculado a su página web, puede usar su código predefinido para configurar sus columnas en diferentes tamaños de pantalla. Usan un esquema de 12 columnas como máximo, por lo que después de comenzar una fila, puede comenzar una columna con la clase "col-md-12", lo que significa que habrá 12 columnas en pantallas medianas y las desplazará automáticamente hacia abajo en pantallas más pequeñas. Una columna puede tener múltiples clases si desea ser específico, puede clasificar una col-lg-12 col-md-3 hidden-sm, lo que significa 12 columnas en una pantalla grande, 6 columnas en una pantalla mediana y ocultarla en pantallas pequeñas.

El medianil, o el espacio entre columnas, también se puede definir de la misma manera, dentro de una consulta de medios para pantallas grandes, haga una regla similar a padding-right: 20px. y en la consulta de medios para pantallas pequeñas, haga que el relleno sea menor.

Creo que Bootstrap ofrece el mismo espacio entre columnas en pantallas grandes y pequeñas. No parece gracioso porque 10 píxeles es mucho más pequeño en un teléfono que en una computadora de escritorio.

Espero que esto ayude.