Diseño modular: la guía completa para principiantes
Hay muchos diseños de estilo de bloque y tarjeta en este momento. Para los diseñadores, son a la vez modernos y funcionales. El diseño es optimizado y simple, y en términos de diseño de sitios web, funciona muy bien en marcos receptivos.
La raíz de esta tendencia de diseño es el diseño modular. Y sin importar lo que pienses, no es nuevo. El diseño modular tiene profundas raíces en la teoría del diseño y ha sido utilizado por varios diseñadores durante mucho tiempo. ¡Hoy analizamos los antecedentes y las aplicaciones prácticas del diseño modular!
¿Qué es el diseño modular?
El diseño modular es una técnica en la que todo se construye utilizando un patrón de cuadrícula de bloques. Cada uno de los elementos de diseño encaja en módulos en patrones rectangulares.
El diseño modular existe desde hace mucho tiempo. Los diseñadores de periódicos lo popularizaron en varias etapas, ya que crearon módulos para los componentes de cada historia en la edición del periódico de ese día. Pero los módulos también son populares para otros estilos de diseño porque usar una cuadrícula distinta es una buena manera de organizar y administrar el contenido.
La cuadrícula modular es especialmente útil para proyectos en los que hay abundancia de contenido, o muchas piezas de contenido que pueden no estar relacionadas pero que aparecen juntas en un diseño (razón por la cual el estilo ha sido tan popular para los periódicos con muchas partes no relacionadas) . en un gran lienzo).
En el panorama del diseño de sitios web, el diseño modular es una opción popular debido a la naturaleza flexible de la cuadrícula modular. Puede ser fácil trabajar con conceptos modulares cuando se diseñan marcos receptivos, y el formato de estilo de cuadrícula funciona especialmente bien con otras tendencias como tarjetas y minimalismo.
El diseño modular requiere un poco de reflexión en el frente de los proyectos, pero en realidad es solo un sistema de diseño basado en cuadrículas que funciona como cualquier otra cuadrícula. Sirve para cualquier tipo de proyecto o estilo. Y te ayudará a diseñar con organización y armonía.
Raíces en otras áreas
El diseño modular no es un concepto solo para diseñadores gráficos. Todo, desde la arquitectura hasta el diseño de interiores, la forma en que se construyen las computadoras o incluso los automóviles, puede ser de naturaleza modular. (Y cualquiera de estos lugares puede ser un buen lugar para buscar inspiración en el diseño gráfico modular).
En otros campos, la definición de diseño modular es un poco más amplia, pero aún se puede aplicar a la teoría del diseño gráfico. El diseño modular incluye elementos que encajan visualmente como bloques, como cubículos en una oficina o una pared de ladrillos en el exterior de un edificio. Los elementos de diseño modular también están hechos para ser intercambiables, como piezas que puede usar en una computadora u otra, o cierto tipo de batería de automóvil que funciona en varios automóviles. En la práctica física, el diseño modular a menudo hace que la gente piense en un diseño estilo bloque de Lego, donde las piezas se pueden unir o separar entre sí.
Impresión de diseño modular
El diseño modular para proyectos de impresión comienza con la cuadrícula. La cuadrícula y los módulos incluidos en la cuadrícula dictan cada elección de diseño que realice. La cuadrícula le ayuda a determinar dónde colocar los elementos, el espaciado y cómo alinear el texto.
Afortunadamente, el uso de esta cuadrícula no es tan restrictivo como podría imaginar. Debido a que puede dibujar en las líneas de cuadrícula en cualquier número de patrones o combinaciones, las posibilidades reales son casi ilimitadas.
Este tipo de cuadrícula se puede configurar en casi cualquier tipo de software de diseño gráfico que desee utilizar y consta de líneas de cuadrícula horizontales y verticales y canales (guías de espaciado). Una vez que la cuadrícula se coloca en el lienzo, debe verse como una serie de ‘bloques’, aunque no tienen que ser cuadrados, y bloques delgados (que son las guías de canaletas o espacios abiertos).
El funcionamiento es simple. Cada pieza de contenido vive en bloques y debe haber un ancho de medianera de espacio entre los elementos. Puede mezclar y combinar bloques de diferentes formas y tamaños, pero todo permanece en un patrón de diseño armonioso con flujo horizontal y vertical.
He aquí un vistazo a algunas de las combinaciones de foto-imagen para darle una idea de cómo funcionan juntos los bloques de cuadrícula:
Modular en Diseño Web
Lo primero que encontrará cuando hable sobre el diseño de sitios web modulares es la resistencia de que es aburrido. Puedes superarlo ahora mismo. Cualquier diseño puede ser aburrido o interesante, pero una cuadrícula por sí sola no lo determinará.
Modular es una opción popular de diseño de sitios web en este momento porque combina con otros elementos bastante modernos. Los diseñadores lo empujaron de nuevo a la conversación con un diseño plano y apilando muchos bloques de colores como un patrón de diseño, Windows usó una interfaz modular para el diseño «Metro» de Windows.
Pero también es una gran herramienta para crear muchos otros tipos de sitios web. Al igual que con el diseño de impresión modular, el concepto se basa en una cuadrícula vertical y horizontal en el lienzo. Donde es diferente es en el desplazamiento y los puntos de interrupción para diferentes resoluciones de pantalla. (Puedes trabajar un poco de magia CSS aquí, y solo nos centraremos en las imágenes).
Cuando se trata de diseño de sitios web modulares, lo primero que pensamos es un estilo de diseño casi WYSIWYG, similar a lo que a menudo se encuentra con los temas de sitios web premium. Vienen bloques prefabricados que ya encajan, al igual que la idea de construir automóviles y computadoras, por lo que cada bloque encaja en un marco general y ni siquiera tiene que pensar en un diseño modular.
Esta es la manera fácil de modular.
También está la opción de hacerlo tú mismo. Las cuadrículas de sitios web modulares tienden a tener bloques más grandes que las cuadrículas impresas y dividen la pantalla en partes digeribles. La forma más fácil de pensarlo es en un formato de dos columnas que divide la pantalla por la mitad verticalmente (con un canalón). Las divisiones horizontales son a menudo la profundidad de un desplazamiento, que es una opción particularmente popular cuando se trabaja con animaciones de desplazamiento de paralaje.
Una de las mejores definiciones simples (y visuales) de cómo funciona el diseño de sitios web modulares proviene de Christopher Butler de Novedoso:
10 recursos de diseño modular
Ahora que está listo para comenzar su primer proyecto de diseño modular, aquí hay algunos recursos adicionales para ayudarlo en el camino.
- Patrón de cuadrícula modular: Grillas modulares que puedes personalizar y descargar.
- «Diseño modular vs. no modular: La conversación continúa” de Mario García
- del arquitecto Todo Modo Todo: Ejemplos de inspiración
- «METROsistemas de disposición modularde Jason Santa María
- Libro sobre cuadrículas y diseños: «Fundamentos de diseño: 100 principios de diseño para el uso de cuadrículas»
- Grillas y tipografía experimental (PDF descargable)
- Red modular compleja por Karl Gerstner: Si desea sentirse realmente asombrado acerca de las formas de pensar y desarrollar una cuadrícula modular
- Bandeja: CSS para un sistema de cuadrícula fluido y modular para navegadores modernos
- Cómo crear una rejilla modular en adobe illustrator
- temas modulares de ThemeForest
Conclusión
No deje que las grandes ideas detrás de un esquema de diseño modular lo asusten. Comenzar con el diseño modular es como cualquier otra cuadrícula o marco. Esbozalo, desarrolla un plan y empieza a diseñar.
Los beneficios del diseño modular son espacio y organización claros, una cuadrícula que funciona en casi cualquier estilo y facilidad de uso para proyectos digitales. Se está convirtiendo constantemente en una opción más popular todo el tiempo por una razón. Funciona. Ahora sal y prueba suerte en un proyecto de estilo modular.
Fuentes de imagen: Luisa Cohen y nils mengedoht.
