¿Está cansado de crear sitios web de construcción utilizando los mismos diseños antiguos basados en cuadrícula para cada proyecto? ¿Has estado ansioso por romper con la norma e intentar algo un poco más orgánico?
Hoy vamos a echar un vistazo a algunos sitios que han hecho precisamente eso para ver qué podemos aprender acerca de los métodos alternativos de diseño y cómo se pueden implementar con éxito.
Diseños de cuadrícula
El diseño basado en cuadrícula es una piedra angular del diseño web moderno. En una época en que los diseños limpios y minimalistas se presentan como el ideal definitivo (una respuesta directa a los estilos de diseño desordenados de los años 80 y 90), ¿la definición misma de "buen diseño"? Sin duda incluirá mención de alineaciones simples y sólidas.
En última instancia, esto es algo bueno. Los diseños basados en cuadrículas proporcionan una estructura, equilibrio y organización inigualables. Aportan un ritmo predecible y una sensación de familiaridad al diseño y permiten que el contenido se destaque por sí solo.
Los diseños de cuadrícula son increíblemente fáciles de usar. Instintivamente leemos una página de izquierda a derecha, de arriba a abajo y las cuadrículas tienden a reforzar en lugar de desafiar esta tendencia. Con un diseño basado en cuadrícula, el contenido es exactamente donde el espectador espera que esté, sin que se requiera un esfuerzo extraordinario.
Tenemos galerías de diseño completas, como la que se muestra arriba, dedicadas a diseños basados en cuadrículas. Existen innumerables marcos de CSS y plantillas de Photoshop dedicados a ayudarnos a lograr diseños de cuadrícula rápidos con el mínimo esfuerzo. Si el diseño es una religión, las rejillas son las sagradas escrituras a las que atribuimos verdad.
Si corremos con esta metáfora de mayor alcance aún más, entonces el tema de hoy es nada menos que "blasfemia". Exploremos cómo podemos introducir un poco más de variedad en nuestros diseños abandonando la cuadrícula, al menos parcialmente, en favor de diseños y gráficos más orgánicos. Resulta que, de hecho, hay varias formas en que puedes estructurar la información, pero no le digas a los dioses del diseño.
Encuentra otras formas de dirigir la atención
Nuestro primer ejemplo de diseño alternativo proviene de We Are Empire, una agencia de diseño digital. Aquí hay una captura de pantalla de la página de inicio de su sitio web.
Como puede ver, definitivamente no representa el diseño típico de su página web. Hay varias cosas a tener en cuenta aquí. Primero, los objetos primarios en la página son círculos. Cualquier sitio web normal, basado en la red es generalmente Compuesto principalmente por objetos rectangulares. Las rejillas están formadas por rectángulos, por lo que los objetos con cuatro bordes y al menos las esquinas mínimamente duras funcionan bastante bien.
En contraste, casi todos los diseños orgánicos con los que se encontrará utilizarán círculos en gran medida. Los círculos se sienten más orgánicos y parecen adaptarse mejor a este estilo de diseño. Además, presentan a los diseñadores rebeldes otra forma de desviarse de la norma.
Aún más importante que las formas de los objetos es la forma en que están conectados. Una vez más, los diseños de cuadrícula se pueden leer de forma muy natural, pero los diseños orgánicos dejan el ojo para vagar en la confusión en busca de qué mirar a continuación.
Al crear una ruta rudimentaria, el diseñador aquí ha creado un flujo claro de información para que la sigas. Mirando esta página, casi no puedes evitar seguir el camino con tus ojos; Un truco simple y extremadamente efectivo para controlar la experiencia del usuario.
Menos objetos
El camino ayuda, pero no es una necesidad completa. Esto es especialmente cierto cuando hay realmente algunos objetos en el diseño. Por ejemplo, echa un vistazo a la página de Michael Wong a continuación, que utiliza un diseño similar.
El sitio de Wong utiliza otra técnica popular para estos tipos de diseños: animación controlada por el mouse. A medida que mueve el mouse en la pantalla, los objetos del diseño se mueven en un efecto de paralaje que simula una interfaz 3D.
La estructura sigue presente
Una cosa muy importante que recordar cuando se desvía de los diseños basados en cuadrículas es que no necesariamente tiene que abandonar la estructura por completo. Como lo ilustra el diseño de Melonfree a continuación, su diseño aún puede ser altamente lógico.
Aquí, a favor de una cuadrícula simple, encontramos una gran utilización de la simetría redondeada. El diseño es bastante atractivo y equilibrado. Leer en un círculo definitivamente no es lo más fácil del mundo, pero el resultado final es refrescantemente diferente.
Puntos focales
Cuando trabaje con un diseño alternativo, intente mantenerse siempre al tanto de dónde está creando puntos focales. El diseño anterior intencionalmente tiene un fuerte atractivo hacia el centro, donde encontrará un gran gráfico de un melón, que representa el nombre de la empresa.
En sus diseños, use el tamaño, el color y la ubicación de los objetos para crear puntos focales específicos y analice qué tan bien funcionan con la ruta visual que está tratando de crear (desde arriba).
Construir una escena
Un método de diseño alternativo muy diferente pero aún muy popular es crear una escena que sirva de interfaz para su sitio. Por lo general, advierto fuertemente contra esto, ya que por lo general termina yendo en la dirección de un sitio de comida rápida mal impulsado por Flash, donde no puedes encontrar una sola cosa.
Sin embargo, este método también puede conducir a algunos sitios atractivos y bien diseñados. Considere el siguiente sitio de iCodeLabs, que utiliza una gran escena ilustrada que se puede navegar por, lo adivinó, moviendo el mouse alrededor.
Una característica clave aquí es que el sitio de iCode reserva la escena explorativa como un elemento de diversión opcional del sitio. La navegación principal es una interfaz de barra más familiar en la parte inferior de la página. ¡No busques enlaces aquí!
Rejillas: Ocultas, pero rara vez se han ido
El gran secreto de toda esta discusión sobre el abandono de diseños basados en cuadrícula es que rara vez están totalmente ausentes de un diseño web determinado. De hecho, si visita los sitios que se muestran arriba, puede ver que todavía hay una estructura de cuadrícula general en muchas de las páginas.Los métodos de diseño alternativos existen en áreas dentro La estructura mayor.
La lección aquí es que no tiene que, y con frecuencia no quiere, abandonar por completo la seguridad de diseños claros, simples y lógicos para lograr algo que se vea y se sienta único.
Rejillas inclinadas
Una forma inteligente de ocultar su diseño basado en cuadrícula es hacer un uso fuerte de las líneas diagonales en lugar de las líneas verticales y / u horizontales. Se pueden aplicar las mismas convenciones exactas que se utilizan en las cuadrículas normales, el resultado simplemente se ve más nervioso.
Como puede ver, Estilo DLT tiene la apariencia de un diseño orgánico, pero en realidad se ajusta a algunos principios de diseño muy estrictos.
Conclusión
Romper con la norma puede ser un experimento muy refrescante. Te ayuda a pensar de manera diferente y ver el diseño de maneras que nunca antes lo has hecho. Explorar ideas de diseño alternativo es una forma excelente de mojarse los pies en este campo. Use los ejemplos y la información de arriba para comenzar en la dirección correcta.
Recuerde que los diseños de cuadrícula a menudo se rompen, pero rara vez se abandonan por completo y que incluso cuando no está utilizando una cuadrícula, todavía puede haber una estructura muy lógica para su diseño. Deja un comentario a continuación con un enlace a cualquier diseño no tradicional que hayas encontrado. Además, avísenos si usted es fanático de las redes o es propenso a aventurarse fuera de la caja con sus diseños.