Share
Limpiar. Un término que se usa a menudo para describir el diseño de un sitio web, pero ¿qué significa? ¿Cómo lo defines? Estoy bastante seguro de que no significa que el espacio en blanco sea más blanco que blanco o que todo el polvo haya sido cepillado bajo el pie de página ... Echemos un vistazo más de cerca.
Los diseñadores de todo el mundo se llenan de admiración al ver un diseño web y exclaman "¡es hermoso, está tan limpio!". Hay un sinnúmero de redondeos de diseño web dedicados al diseño 'limpio' y es un término muy difundido en la comunidad de diseño web. Puede ser fácil detectar un buen ejemplo de diseño limpio, ya que promueve un cierto sentimiento de profesionalidad y calidad. Sin embargo, lo que no se discute a menudo son los principios y factores subyacentes que se combinan para crear este aspecto "limpio" y eso es precisamente lo que pretende hacer este artículo..
Antes de comenzar, seamos claros en una cosa: diseño limpio no es diseño mínimo.
Algunas personas pueden confundir los dos y puede ser fácil hacerlo. Si bien hay algunas similitudes y superposiciones de los principios de diseño entre los dos, creo que hay diferencias clave.
El diseño minimalista tiende a centrarse en eliminar elementos superfluos y no esenciales para permitir que el contenido y el mensaje central del sitio ocupen un lugar central. Cada elemento debe tener un propósito justificable. El diseño minimalista por naturaleza debe ser altamente utilizable y funcional, ya que no debe haber distracción para competir con la información que el sitio está tratando de comunicar..
En lugar de preguntar qué se puede eliminar, debería preguntar cómo puede ser refinado.
Sí, el diseño limpio debe ser utilizable, y sí, el propósito del sitio debe ser claramente obvio. Sin embargo, hay un margen para elementos puramente estéticos y un toque creativo al diseñar un sitio 'limpio'. En lugar de preguntar qué se puede eliminar (en el caso de un diseño minimalista), debería preguntar cómo puede ser refinado.
Si hubiera una palabra que usaría para definir el diseño "limpio", es el refinamiento. Cada elemento individual debe parecer que pertenece y debe beneficiar y complementar el diseño en su conjunto. El diseño general debe estar equilibrado para permitir que la información fluya y sea fácil de consumir.
Antes de llegar al diseño final, cada elemento debe ser examinado. El diseñador debe tomarse un momento para considerar el propósito de cada elemento y decidir si es el mejor posible y si se puede aclarar..
O.K, ahora que tenemos una comprensión general del diseño 'limpio', echemos un vistazo a los diversos factores que contribuyen a este estilo.
Una atención al detalle es esencial para producir un diseño de sitio web limpio. El diseño realmente genial y limpio se basa en la ejecución de píxeles perfectos de muchos elementos de diseño sutiles. Los detalles aparentemente menores, como bordes, resaltes, sombras, texturas y muchos otros, deben considerarse cuidadosamente.
Como ejemplo, echemos un vistazo más de cerca a la sección de características principales del tema de Wordpress de Studeo, diseñado por Orman Clark. Orman es ampliamente conocido por (y extremadamente exitoso) en la producción de temas de Wordpress limpios y fáciles de usar..
Donde algunos diseños de temas pueden simplemente implementar un deslizador de imagen grande y audaz, el área de características de Studeo es un refugio para detalles de diseño delicados. Observe la sutil textura superpuesta sobre la imagen, el resaltado de un píxel y el borde gris claro casi imperceptible en la parte inferior. Todos estos detalles pueden parecer insignificantes e incluso pueden pasar desapercibidos para algunos, pero colectivamente crean la sensación de calidad y refinamiento..
La precisión es clave a la hora de elegir diseñar de esa manera. Una cosa que puede destruir un diseño de sitio limpio es el temido medio píxel. Los medios píxeles pueden aparecer en Photoshop cuando las líneas y los bordes de las formas no se alinean exactamente en el píxel. Cuando esto sucede, los bordes de una forma se vuelven borrosos. Puedes ver en la imagen de abajo, los cuadrados en el aspecto correcto ligeramente borrosos.
Una forma de evitar esto al diseñar en Photoshop es seleccionar la opción "Ajustar a píxeles". Cada vez que se selecciona esta opción, todos los bordes de su forma estarán bellamente nítidos y limpios.
No hace falta decir que un diseño limpio no puede aparecer desordenado de ninguna manera. Muchos elementos se amontonan sin embargo, darán la apariencia de un sitio web desordenado y desordenado. No es lo que queremos. Aquí es donde entra el espaciamiento.
El espacio en blanco, los márgenes, el relleno y la altura de la línea tienen un papel crucial que desempeñar para lograr un diseño web limpio. Proporcionar a los elementos de un sitio web una cantidad adecuada de espacio garantiza que parezcan pertenecer y encajar en el diseño general. Una cantidad adecuada de espacio también genera una sensación de amplitud y elegancia a un sitio web.
Además de garantizar que sus elementos estén bien espaciados, también es necesario que sea coherente con los valores que decida. Intente repetir los valores de margen y relleno cuando pueda y cuando sea sensato hacerlo. Los sistemas de cuadrícula como 960.gs son herramientas increíblemente útiles al diseñar sitios web de esta manera (más sobre esto en un momento).
Para ver el efecto completo que tiene el espaciado adecuado en el diseño de un sitio web, considere las siguientes dos imágenes. La primera imagen es una vista previa de una publicación de blog con cantidades mínimas e inconsistentes de espacio entre los elementos.
Ahora aquí está la misma vista previa de la publicación del blog con generosas cantidades de espacio..
La diferencia que puede hacer es bastante sustancial. El segundo diseño se ve mucho más equilibrado y limpio ahora que todos los elementos tienen mucho más espacio para respirar y espacio para estirarse.
Como con la mayoría de las cosas en la vida, sin embargo, es posible tener demasiado de algo bueno. Demasiado espacio puede hacer que los elementos parezcan perdidos y desconectados entre sí. Como resultado, la cohesión y el flujo de un sitio web pueden romperse.
Una de las mejores herramientas que puede utilizar para ayudarlo a crear un diseño de sitio web "limpio" es un sistema de cuadrícula. Ya hemos tratado cómo pueden ser extremadamente útiles en términos de espaciado, pero también son invaluables para asegurarnos de que su alineación sea perfecta..
Al igual que el espaciado, la alineación puede hacer una diferencia significativa en la apariencia de un sitio web. La alineación correcta y continua permite que se ejecuten líneas limpias a lo largo y ancho del diseño de su sitio. Las líneas suaves e ininterrumpidas son visualmente agradables y pueden llevar la vista más abajo en la página.
El ojo es muy sensible a los cambios en la alineación y es capaz de detectar cambios diminutos e inconsistencias. Por lo tanto, es importante que no solo sea un píxel perfecto en la creación de sus maquetas de diseño, sino también que esta precisión no se pierda en la etapa de desarrollo que sigue..
Idealmente, los grandes cuerpos de texto deberían estar (en la mayoría de los casos) alineados a la izquierda. El texto alineado a la izquierda produce una línea continua y crea columnas de información fácilmente distinguibles. Por otro lado, el texto alineado centralmente crea un borde desigual en ambos lados y puede ser difícil de leer en columnas grandes. Guarde la alineación central para líneas cortas de texto.
Como un excelente ejemplo de alineación, es posible que desee revisar Diseño sin fronteras. El diseñador no solo ha hecho un uso excepcional de la alineación, sino que ha hecho que sus intenciones sean cegadamente obvias al simular las líneas de guía de Photoshop que se ejecutan en todo el sitio web..
Con la llegada de @ font-face y muchos servicios tipográficos, la tipografía en el diseño web nunca ha sido tan grande y, dado que la gran mayoría de la información en la web es de texto, no hay duda de por qué. No vamos a ahondar en las complejidades de la tipografía aquí, ya que hay muchos recursos excelentes, pero veremos un par de formas en las que puede jugar un papel importante..
En primer lugar, usar tipografía es una forma efectiva de establecer una jerarquía visual muy fuerte. Si alguna vez has estudiado los fundamentos del diseño web, te das cuenta de que la jerarquía es algo muy importante. Usar tipografía para establecer su jerarquía es un método muy elegante y limpio para hacerlo. Simplemente cambiando el tamaño o el peso de su texto, puede guiar al usuario a través de su sitio y comunicar la importancia de varios elementos. No hay necesidad de flechas brillantes o insignias ruidosas para enfatizar lo que usted quiere que el usuario vea.
En segundo lugar, al igual que ciertos colores funcionan armoniosamente y se complementan entre sí, lo mismo ocurre con las fuentes. Hay muchas sugerencias y pautas para emparejar y trabajar con múltiples fuentes, pero para un diseño limpio, es mejor que sea sencillo..
La selección de dos tipos de letra es generalmente una opción segura, ya que demasiadas fuentes diferentes pueden complicar un diseño. Optar por un tipo de letra más atrevido o más decorativo para sus encabezados y un texto más seguro y legible para el texto de su cuerpo rara vez puede estar mal. Combinar una fuente serif y una fuente sans-serif puede funcionar bien y se practica comúnmente.
Hay muchos artículos y tutoriales que analizan la teoría del color y cómo se aplica al diseño web. También hay muchos recursos útiles para ayudarlo a seleccionar una paleta de colores apropiada. Cuando se trata de diseño limpio, hay algunas pautas básicas.
La gran mayoría de los sitios web limpios optan por una paleta de colores claros, neutros y limitados por varias razones.
Los blancos, grises y colores claros son simples y discretos, lo que permite que cualquier contenido reciba el enfoque del usuario. Esto es ideal desde el punto de vista de la usabilidad, y para aquellos que quieren que su trabajo sea el centro de atención, como los diseñadores y fotógrafos. Las pequeñas salpicaduras de color se usan a menudo para acentuar ciertos elementos como logotipos, navegación y encabezados para ayudar a establecer una jerarquía visual..
Los colores fuertes, especialmente si se usan muchos, pueden complicar en exceso un diseño limpio y distraer la atención del usuario. El color evoca ciertas emociones y reacciones y muchos colores pueden inducir sentimientos múltiples y conflictivos. Lo último que queremos es que un usuario se sienta confundido al ver nuestro sitio web.
Esto no quiere decir que un diseño limpio no pueda ser colorido, ya que siempre hay excepciones a la regla y hay muchos ejemplos de diseño limpio que utilizan el color con eficacia. También hay pautas generales si desea o necesita usar color en sus diseños limpios.
Opte por colores únicos y sólidos en lugar de degradados en su diseño. Los bloques sólidos de color crean líneas claras e ininterrumpidas y ayudan a distinguir diferentes secciones de un diseño. Los degradados, los patrones y las texturas pueden distraer y reducir la legibilidad del texto. Si decide utilizar degradados y texturas, manténgalo sobrio y sutil..
Saber lo que implica crear un diseño limpio y cómo implementar este estilo de diseño puede ser invaluable para un diseñador web. Un diseño limpio comunica una sensación de refinamiento y sofisticación, precisamente con lo que muchos clientes y nosotros mismos queremos asociarnos. Esperamos que pueda quitar algo de este artículo y aplicar algunos de estos métodos en uno de sus futuros proyectos..
¿Hay alguna otra característica de diseño limpio que haya notado? ¿O sabes de una demostración particularmente buena de diseño limpio? Por favor, háganos saber en los comentarios.
Accentsconagua