Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

La unidad en el diseño web

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
The Web Designer’s Theory of Relativity
6 Beginner “Safety First” Color Guidelines for the Web

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Hoy vamos a echar un vistazo a un principio de diseño que juega un rol aún más importante en el éxito de un diseño web: la Unidad. Así como con muchos elementos diseñados en el mundo, la unidad puede hacer o no el diseño de un sitio. Un sitio bien “unido” provoca una sensación natural, orgánica y perfecta. Un sitio carente de “unidad” puede sentirse desarticulado, discontinuo o confuso (en otras palabras “simplemente se desmorona visualmente”). Sigue leyendo para saber más.

Introducción a la Unidad

La Unidad es un concepto muy interesante. Si echamos un vistazo a la definición técnica, hay algunos que podemos aplicar en el contexto de diseño web, tales como; “la condición de estar unidos o unidos cómo un todo” y “armonía y compromiso entre las personas o los grupos”. Específicamente creo que, podemos ver una definición que se aplica a este escenario como la regla de oro del buen diseño web: "la condición de formación de un conjunto completo y agradable".

LA UNIDAD es realmente importante porque ayuda a crear una marca consistente y la identidad para tu sitio. Forma una conexión entre sus elementos de su sitio web para que los usuarios avancen fácilmente entre los elementos, y también entre las diferentes páginas de tu sitio web. Básicamente, el concepto de unidad crea una fuerte relación entre los elementos para que los usuarios perciban el sitio como uno solo y no como grupo.

¿Por qué es tan importante la Unidad?

Piense de esta manera: Si vives en una casa hecha de ladrillos, no dices: “Yo vivo en un montón de ladrillos”, ¿no es así? En lugar de eso, usted dice: “Yo vivo en una casa”. Eso es porque tienes un grupo de diferentes elementos (que normalmente llamamos “ladrillos”) que están unificados como una casa y las personas toman la estructura como “un solo edificio” gracias a la conexión y la fuerte relación entre los ladrillos del edificio (literalmente).

Lo mismo sucede también con muchas cosas en el mundo natural. Considere la hoja a la derecha. Esta contiene millones de células y otras estructuras de bloques de construcción, pero la mayoría de las personas simplemente pensarían que se trata de una “hoja”.

La Unidad conserva su diseño unido como una estructura, ya sea; visual y conceptualmente. Agregue organización y será fácil para los usuarios viajar a través de su página web porqué no tienen que estar procesando cada elemento individualmente. Esto, indirectamente, ayuda a empujar el elemento hacia afuera y permite a los usuarios enfocarse en el mensaje principal de la página web.

Los Factores de la Unidad

Hay muchos factores que contribuyen a una sensación de unidad dentro de una página web. Sin embargo, antes que intentes aplicar cualquiera de ellos, deberías asegurarte de qué entiendes cuál es el objetivo central de diseño. El propósito del diseño debería ser apoyado por el diseño unificado que hace que todo visiblemente sea enlazado y fácil de ser percibido.

  • Color - El Color es uno de los factores más grandes en la unidad de un diseño, ¿por qué? Porque las empresas suelen seguir un esquema de color controlado, también ayuda a unificar sus productos dentro de una familia; además puede tomar grandes masas de información y hacer que todo se sienta constante. Tomemos a Apple, por ejemplo, se aferran a los productos de color plateado, blanco y gris, porque ayuda a representar que sus Macs son parte de un producto familiar.
  • La Repetición - Continuando con la analogía de Apple, echemos un vistazo a la línea iOS. Cada uno de los productos ahí repite ciertos elementos cómo el botón de inicio en los botones, o la cámara en parte superior. Esta “plantilla” para sus dispositivos ayuda a las personas a reconocer que ellos son parte de la misma familia, porque se repiten a través de los productos. Apple ha estado unificando sus productos como una marca, o como una familia, debido a su repetición de elementos específicos en todas partes.
  • Alineación - Actualmente la alineación puede jugar un rol en la unidad, ya que los elementos son diseñados en torno a un eje común se pueden sentir más conectados. Esto es el lado hacia la unidad visual, no unidad conceptual.
  • Proximidad: - TLas cosas parecen estar juntas, cuando están más cerca entre ellas. Es simplemente natural. Además es muy sencillo porque cuando pones las cosas juntas se ven, digámoslo; ¡juntas! Sin embargo, no deberían estar juntas, otros factores (como el color) pueden ser utilizados para continuar construyendo el sentido de unidad.
  • Continuidad y Dirección Visual - Moverse fácilmente entre los elementos ayuda a unificar el sentimiento y la inducción a través de esta dirección visual táctica es uno de los métodos de hacerlo. ¿Dudas? Esta bien, entonces explicare un poco más al respecto en un momento, por lo pronto continuemos.
  • Consistencia - La consistencia en otros factores como la tipografía también hace los elementos no muy distintos. Mantener las cosas consistentes significa que lucen como las otras y las conexiones son generadas desde ahí.

Ahora expliquemos un poco más sobre cada una de estos factores puede ser utilizado para crear una fuerte relación entre los elementos.

Color

Como ya hemos establecido anteriormente, el color puede ser una excelente forma de formar una conexión entre los objetos. Casi todo lo que se apega a un esquema de color, ya sea sitios web o no, ayuda a crear una relación, especialmente cuando se usa en la conexión con un producto o alguna entidad no web, específicamente. Por ejemplo, el sitio web de Coca-Cola (abajo) usa principalmente los colores rojo y blanco, los mismos que su producto estrella. Por consiguiente, nuestro uso del producto puede ser instantáneamente enlazado con el sitio debido a su consistencia del color.

Como podemos apreciar la unidad a través del color puede ser generada con tan solo asegurarte de seguir un esquema de color bien definido. Si no se es consistente al respecto de este tema entonces resultará en un diseño que da la sensación de estar separado porque una de las influencias más grandes para un enlace visual se perderá. Incluso, podríamos decir que vas a dañar la unidad de tu diseño si tus opciones no están relacionadas a su tipo de producto, como el color verde que puede estar relacionado a las finanzas.

Repetición y Consistencia

Los elementos recurrentes que lucen idénticos forman una conexión desde su cerebro a pensar: “hey, esto ya lo había visto antes”. Se crea familiaridad en el diseño por lo que tus usuarios no están obligados a reprocesar esa parte en particular de tu sitio web nuevamente. Conecta las páginas a través de sus similitudes para que tu enfoque principal este en el contenido y en el mensaje que quieres destacar.

Por supuesto que la repetición de elementos no es el único método para crear unidad en tus diseños. Simplemente usando factores similares (como el color o la tipografía) se pueden conectar los elementos de tu diseño porque parecen similares. Usando el mismo esquema de color, el mismo estilo de borde o simplemente la misma fuente se pueden unir las páginas, o incluso los objetos en su diseño.

Para una mejor comprensión, miremos la analogía por ejemplo. Miremos la repetición pero desde otra perspectiva: Muchos sitios mal intencionados repiten los diseños de sitios populares para que le sean parecidos a los usuarios como lo fueron otras páginas de servicios que usan todos los días. Por ejemplo, una falsa pantalla de inicio de sesión de Facebook repetirá el esquema de color y el diseño de Facebook.com, por lo que le parecerá al inocente usuario, como una página oficial de la red social. Por supuesto que el usuario sin educación no la va a pensar dos veces en conectarse porque su cerebro no está forzado a reprocesar estos elementos particulares de la página.

Alineación

Conservar una alineación consistente contribuirá a tener una unidad visual dentro de los elementos. Diseñando alrededor de un eje común hace que los elementos parezcan que están relacionados. Un montón de párrafos con la misma alineación parece que son parte de un artículo, no simplemente como trocitos de texto arrojados juntos, al final lucen bien organizados y finos.

Alineaciones múltiples requieren sencillamente más esfuerzo para formar una conexión, y es simplemente extremadamente mejor para evitar gastar mucho tiempo haciendo esto.

Si consideramos cómo una guía puede jugar un rol en la alineación tan bien. De hecho, limitándose solamente a usar guías puede hacerte sentir cómo un nuevo diseñador, porque ofrece una base sólida para que usted alinee una gran variedad de elementos dentro de una simple guía. Solamente por un momento considere el espacio cuadrado del sitio web abajo:

Observe cómo una simple guía de tres columnas convierte una página repleta de información en una bien muy bien diseñada, de hecho, las páginas bien unificadas hacen sentir bien, ¿no es así?

Proximidad

Es otro concepto que contribuye a la unidad general de tu diseño. A medida que empuja los elementos a estar más cerca, son más fáciles de tomarse para leerse como uno solo. En un intento por crear analogía, solamente puedo pensar lo siguiente; si tienes un montón de ovejas juntas en un campo, entonces pueden llamarse un rebaño. Sin embargo, si se colocan en diferentes campos, no podrías reconocerlas inmediatamente como parte del mismo rebaño, (y ese el término colectivo para las ovejas). Quizás una analogía más adecuada sería la de mirar a dos personas andando por la calle, hablando y riendo juntos. Porque por su aproximación de cada uno hacia el otro podemos suponer que ellos tenían una clase de relación previa.

Observa, incluso, como las formas que no son similares (los cuadrados) se unifican en el centro, mientras que los círculos que están afuera parecen que carecen de unidad a pesar de compartir la misma forma.

Al llegar a aplicar esto al diseño web, no es demasiado diferente. Cuanta más cerca están los elementos entre sí, están más juntos, más fuerte es la relación que el usuario reconoce y mejor es la unidad que crea. Ahora, si damos un paso atrás por un momento y apreciamos que todo lo que tiene que ver con unidad realmente es la interacción entre los elementos, entonces podemos reconocer que una fuerte relación se correlaciona perfectamente con el nivel de interacción, y en esa medida; la unidad.

Reconocemos instantáneamente que estas personas tienen algún tipo de relación existente, simplemente porque están juntos. Y esperamos en que usted este de acuerdo en que se ven como una familia, en caso afirmativo, ¿cuál otra indicación hay de que es la aproximación?

Dirección Visual

Tenemos un estupendo artículo aquí en Tuts+ sobre la dirección visual y cómo influencia en los diseños. En síntesis, es la teoría, que afirma, que podemos influenciar o manipular en una dirección específica de un usuario sobre una página web adaptando nuestro contenido hacia ese objetivo. Hasta cierto punto, usamos la dirección visual en este escenario para ayudar a influenciar a los usuarios a moverse hacia otro elemento en forma natural.

Quizá estoy presionando un poco, sin embargo, presentando este tipo de manipulación podemos juntar los elementos de una página para crear vínculos más fuertes, de esa manera usted se deslizan fácilmente entre cada uno de los elementos, pero alcanzó todas las áreas que el diseñador quiere que usted vea. Esta relación puede ser usada en el contexto para dirigir la atención de los usuarios a otra historia dentro de su página web, o la posibilidad de continuar leyendo debajo de la página. Puede usar el concepto, para aumentar, subconscientemente por supuesto, a que alguien mire he interactúe con el botón de Twitter o incluso con el botón “Añadir al carrito de compras”.

Este es uno de los ejemplos usado en el artículo de la dirección visual. Observe como el tema de la imagen influye al usuario a buscar en la parte superior central. Podemos usar esto en diseño web para hacer que los elementos de la página fluyen a la perfección.

Consistencia

La consistencia en tu carrera como diseñador web es un principio fundamental que contribuye a la unidad. Por ejemplo, los jugadores de un equipo de futbol no saldrían a jugar en camisetas con diferentes colores por cada jugador, en vez de eso, ellos se ven unidos como un equipo con un solo diseño que representa su marca (o en este caso al equipo).

La consistencia se logra tratando de mantener el estilo de los elementos similares y se refiere a temas como el color, ya que son los mismos factores que crean consistencia y por consiguiente, éxito. Para lograrlo, no hay mucho que hacer aparte de seguir un esquema a través de sus elementos.

Conclusión

La unidad hace que las cosas se sientan y se vean conectadas y, sobre todo, juntas. Haciéndolas ver del modo que se deben ver. Un sitio web es un sitio web, no es solamente una barra de navegación, y un logo o una pieza de contenido, claro que no, en lugar de eso, es una cosa que visitamos es: un sitio web.

De modo que si tenemos demasiados colores y fuentes, o los elementos están demasiado alejados o simplemente la alineación difiere de su texto, los vínculos se rompen y ya no lucen estar conectados entre si. Sin embargo, podrías preguntarte ¿por qué mi diseño debería lucir unificado? ¡Para hacerlo sencillo de navegar! Lo que significa que los usuarios no necesitan procesar cada elemento, o cada página cada vez que ellos se encuentren con una nueva porque es reconocible. También mejora el viaje que realizan los usuarios cuando navegan a través de la página empezando desde el menú que no tiene que lucir como si se encontrara en un territorio diferente.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.