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

Construir con consistencia y crear relaciones en tus diseños

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Adding Space to Your Designs
Reducing the Bloat

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Una parte crucial para maquetar es comprender cómo construir y mantener la consistencia en tus diseños y cómo presentar las relaciones entre los distintos elementos de la página.


¿Construir consist- qué?

En primer lugar, uno de tus primeros objetivos en cualquier sitio debería ser construir relaciones entre el usuario y el sitio web. El motivo para esto es que queremos crear confianza en el usuario, de forma que se sientan cómodos mientras navegan e interactúan con el sitio web. A través del diseño y la funcionalidad, puedes ofrecer a tus usuarios una mejor experiencia.

Construir consistencia en tus diseños también ayuda a fortalecer tu marca y a mantener su mensaje claro. Para un cliente, es importante que el mensaje que transmite su negocio (independientemente de que lo transmita de forma online, offline o en cualquier medio) sea consistente ya que de esta manera generará confianza entre sus clientes. Si el mensaje de una marca es inconsistente, confuso o difícil de entender, puede desmoralizar a los clientes y afectar a las ventas y a las consultas, y en último término afectar al negocio de tu cliente.

Incluso tú mismo, como indivíduo, necesitas entender la importancia que tiene la consistencia para tu marca. Tú, tú mismo eres una marca. Aunque sólo tengas un blog, estás presentándote en la web y deberías preocuparte de la imagen y la marca personal que proyectas. En ocasiones, especialmente en el sector web, es incluso más importante mantener una imagen de marca consistente para ti mismo, ya que esto ayuda a sobresalir entre la competencia y ha destacar tu singularidad.

Mantener la consistencia y generar relaciones a través de tu diseño implica también crear relaciones entre los elementos más pequeños e individuales de tus diseños.

The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.
El sitio web gov.uk es extremadamente consistente, reflejando el tono y la profesionalidad que se espera en el sitio web de un gobierno.
govuk-2

Por qué es Importante

El mero hecho de que trabajes para la web, no significa que los principios válidos para el marketing y el diseño tradicional deban desaparecer. En su lugar, deberías intentar que esta transición sea fluida.

Por ejemplo, si estás trabajando en un sitio web para una tienda tradicional (que cuenta con las premisas de cualquier minorista) entonces deberías trasladar la personalidad de esta marca al diseño que crees para su sitio web. Quieres que sus clientes se sientan felices y cómodos navegando en el sitio, que lo reconozcan como familiar, aunque nunca lo hayan visitado antes. Resumiendo, diseñar teniendo en cuenta la consistencia se logra un diseño y un sistema de diseño más sólido, confiable.

Diseñar con consistencia también tiene una ventaja para ti, como desarrollador. ¿Te han entregado alguna vez un diseño sin consistencia, con márgenes, fuentes y espaciados claramente distintos? Es realmente desagradable, ¿no? Si, por el contrario, diseñas con consistencia, serás capaz de reconocer patrones en tu diseño que te ayudarán durante las fases de desarrollo, y por tanto acelerará tu flujo de desarrollo y reducirá la cantidad de tiempo que tengas que invertir dilucidando las cosas.

También es importante pensar sobre la consistencia en conjunto. En lugar de pensar únicamente de forma visual sobre qué aspecto deberían tener las cosas y como mantener una relación de consistencia entre ellas, piensa en su lugar en las interacciones y los patrones de comportamiento de tus diseños. Piensa sobre cómo interactuará el usuario en tu sitio, piensa sobre las animaciones y cómo reaccionarán distintos elementos a los inputs de los usuarios. Si cambias estos patrones de forma drástica de una página a otra, crearás confusión entre los usuarios.

At inc, there is a clear visual style that represents the brand throughout their website really well.
En inc, existe un estilo visual claro que representa la marca a través de su sitio web de una forma excelente.
inc-2

Cómo diseñar con consistencia

Diseñar teniendo en cuenta la consistencia debería ser muy sencillo. Como ya explicamos con anterioridad, la consistencia te ayuda a mantener una imagen de marca sólida y la relación entre una marca y sus usuarios, o clientes, a un alto nivel.

Una antigua técnica consistía en diseñar repitiendo tu mensaje para ayudar a tus usuarios a recordar las cosas. Aunque puedes hacer uso de ella en tus diseños, me gustaría que pensases más en la consistencia desde otro punto de vista.

Piensa en la forma en la que diseñas todos los elementos de tu diseño, por ejemplo:

  • El color (el principal y los secundarios).
  • Elementos visuales (imaginería, fotos, iconos, botones).
  • Tipografía (tamaño, jerarquía, posición).
  • Tamaños (del contenido, la imaginería, y las relaciones entre ellos).

Piensa en el estilo visual de estos elementos y en cómo se relacionan entre sí. Has aprendido a usar el color, los tamaños y la jerarquía visual para atraer la atención sobre determinados elementos, ahora quiero que intentes y pienses de qué manera puedes lograr la consistencia entre todos estos elementos. Al igual que no usaríamos (¡normalmente!) ocho tipografías distintas en un párrafo o en un área de nuestro diseño, deberíamos hacer lo mismo con el resto de los elementos del diseño.

Diseñar de forma consistente se fundamenta en los pequeños detalles que podrían pasar desapercibidos a la gran mayoría, pero que aun siendo así, subconscientemente, les proporcionan una mejor experiencia. Sin embargo, estos pequeños detalles sí serán apreciados por aquellos que perciben el tiempo y la atención extra invertidos en ellos.

Asegúrate también de mantener la consistencia entre unas páginas y otras (a menos que esta diferencia entre las páginas sea un rasgo característico del diseño, como ocurre en los blogs con dirección de arte). Pero aún entonces, es muy importante mantener la consistencia entre los elementos se vayan a mantener invariables, por ejemplo, la manera en la que está posicionado el logo y la navegación. Es importante no abandonar ningún aspecto de tu diseño y crear una sensación de familiaridad en las áreas más susceptibles a mantener la consistencia.

The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.
El sitio web OnSite tiene una imagen de marca excelente, con un diseño simple que permanece fiel a través de la página de inicio y otras páginas de nivel superior.
onsite-2

Construir relaciones en tus diseños

Color

Como ya hemos explicado en anteriores artículos de esta serie, el color tiene un gran impacto en la gente y en su percepción de tu diseño. Aunque no puedes ocuparte de la relación o sensaciones que produce el color en cada persona, sí puedes usar el color en un sentido más amplio para crear relaciones entre una audiencia objetivo y tu diseño.

El color afecta a la gente de forma personal - mentalmente, a través de las emociones y los sentimientos, como físicamente – y esto puede venir a través de la marca, construyendo, si hay fortuna, relaciones más sólidas entre los usuarios y el sitio web, si el mensaje es consistente.

Tono y carácter

El tono es importante en cualquier diseño y crea una gran impresión en tus usuarios. El tono se puede transmitir a través de cualquier aspecto de tu diseño, desde el contenido hasta las imágenes y cualquier otro recurso o estilo visual que muestres.

Añadir personalidad a una marca también es perfectamente válido, y puedes hacerlo a través de lo que ya hemos aprendido sobre el color y la tipografía. Las pequeñas decisiones como estas se traslucen en la personalidad que después podrás realzar con el contenido y la imaginería, creando un estilo visual consistente en tu diseño.

Percepciones del usuario

Piensa también cómo el usuario se va a relacionar o vincular con tu marca, y cómo se sentirán en relación a la misma. Piensa sobre cómo quieres que tus usuarios se sientan cuando interactúen con la marca e intenta reflejarlo en tu diseño. Ten en cuenta estos sentimientos y percepciones que deseas despertar en los usuarios y usa la consistencia en los elementos de tu diseño para proyectarlos o recrearlos a través del sitio web.

WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.
WooThemes presenta un magnífico estilo visual y tono a través de todo su sitio web – algo más difícil de conseguir cuando se trata, como en este caso, de sitios grandes.
woothemes-2

Herramientas para construir con consistencia

Existen muchas herramientas que puedes crear tú mismo, o que puedes proporcionar a tus clientes para que ayudarles a entender la importancia de la consistencia.

Guías de estilo

Una guía de estilo es casi como las habituales guías de diseño y de marca con las que ya trabajas, pero en lugar de tener relación en exclusiva con la marca, tiene relación con algunos de los estilos y los elementos de diseño claves en el diseño de tu sitio web.

Ver: Style Tiles para saber más.

Librerías de patrones

Las librerías de patrones son un paso más allá de una guía de estilo; son documentos que describen el estilo de cada elemento que pueda ser incluido en el diseño de tu sitio web. Desde estilos de texto, hasta estilos para los botones, para las listas y patrones para las imágenes, estas librerías pueden ser realmente útiles en el mantenimiento futuro del diseño de un sitio web y asegurarán su consistencia ante cualquier cambio futuro.

Me gusta subdividir las librerías de patrones en tres áreas clave: patrones de diseño, patrones de código y patrones de código.

  • Patrones de diseño: Cualquier elemento de diseño que tengas en tu sitio web. Se trata de un documento en el que se incluyen todos los estilos de texto, de titulares, iconos, etc.
  • Patrones de código: Se trata de copias HTML y CSS de las Librerías de Patrones de Diseño - con el HTML correcto (y las clases CSS principales, si son necesarias) para facilitar el mantenimiento futuro, cuando haya que añadir secciones al sitio web.
  • Patrones de contenido: Ayudan a dictar el estilo y el tono del contenido que se debería usar en el sitio web. Aunque es poco probable que seas capaz de presentar el contenido exacto (ya que no sabes cómo se ampliará y evolucionará la web en el futuro) al menos puedes establecer un tono para el futuro. Aunque no seas el encargado de proporcionar el contenido al cliente, puede ser una buena idea asegurarse de que entiendan que el contenido es sólo uno de los aspectos que influyen en la consistencia de su sitio web - y aunque tú puedes proporcionar un diseño y el desarrollo, es complicado que los desarrolles adecuadamente sin el contenido apropiado para el sitio web.

Listas de comprobaciones

Soy un gran fan de las listas, y creo que un método muy sencillo para comprobar elementos constantes o patrones en tu diseño es crear una lista de control simple y fácil de usar.

  1. En primer lugar, ¿cómo está perfilada la tipografía? ¿Es consistente? ¿Mantienen los titulares una consistencia a lo largo de las distintas páginas? ¿Tiene la tipografía un ritmo vertical grato a lo largo de la página? ¿Se rompe el ritmo vertical al introducir imágenes en el contenido? ¿O tiene todo un buen aspecto?
  2. Consistencia en la Imaginería o elementos visuales; ¿Qué aspecto tienen las imágenes? ¿Tiene todo un estilo y un tono similar, o existen estilos de foto muy diferentes? ¿Están todas las imágenes recortadas de forma similar, o de manera muy diferente? ¿Son los tamaños de las imágenes similares o has establecido tamaños distintos a lo largo del diseño? ¿Son los iconos del mismo cuando corresponda? ¿Tiene los botones el mismo acolchado y espacio alrededor?
  3. Uniformidad de color; ¿Cómo se ven los colores? ¿Funcionan bien de una página a otra? ¿Son apropiados? ¿Funcionan bien entre sí? ¿Son exactamente iguales allí en donde se utilizan más de una vez?

Asignaciones

Todo lo anterior debería ser útil cuando estés intentando de crear un diseño con consistencia y te ayudará a construir relaciones entre cada uno de los elementos. Quiero que uses la lista de comprobación al final (¡o crear una propia!) para ver el grado de consistencia de tu diseño. Si no es es consistente, invierte el tiempo necesario para lograrlo en tus diseños.

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.