Los principios básicos del diseño son útiles tanto para el diseño Web, como también para todo tipo de diseño. Nos muestran cómo colocar conjuntamente elementos del diseño de una manera efectiva. El diseño Web es más que simplemente colocar etiquetas HTML encima de una página, y usando estos principios nos ayudarán a construir diseños más agradables y útiles.

BALANCE

El balance en diseño es la distribución de los elementos a través del diseño. El balance es una interpretación visual de la gravedad en el diseño. Los elementos grandes y densos parecen ser más pesados, mientras los elementos más pequeños parecen ser más ligeros. Podemos balancear los diseños en tres formas:

• Balance simétrico
• Balance asimétrico
• Discordante o fuera de balance

El Uso del Balance en el Diseño:

El balance en el diseño Web lo encontramos en el esquema o trazado(layout). La posición de los elementos en la página determina qué tan simétrica la página se presenta. Un reto grande para lograr un balance visual en el diseño Web es el desplazamiento. Podemos diseñar un esquema(layout) que es perfectamente simétrico en la vista inicial, pero cuando el lector desplaza la página, puede despojarse del balance.

Cómo Incluir Balance en el Diseño Web:

La forma más común para incorporar balance en los diseños Web está en el esquema o trazado(layout) . Pero podemos usar también la propiedad de estilo “float” para situar elementos y balancearlos a través de la página. Una forma muy común para balancear un esquema simétricamente es centrar el texto u otros elementos en la página.

La mayoría de páginas Web están construidas en un sistema cuadriculado, y esto crea una forma de balance para la página de inmediato. Los clientes pueden ver la cuadrícula, aún si no hay alguna línea visible. Y las páginas Web están bien adecuadas para diseños cuadriculados por la naturaleza cuadrada de formas de la Web.

El Balance Simétrico:

El balance simétrico es logrado colocando elementos en una moda muy uniforme en el diseño. Si tenemos un elemento grande y pesado del lado derecho, tendríamos que hacer juego con un elemento pesado a la izquierda. El centrado es la forma más fácil para obtener una página simétricamente balanceada. Pero tengamos cuidado, ya que puede ser difícil crear un diseño centrado que no se vea plano o aburrido. Si queremos un diseño simétricamente balanceado, es mejor crear el balance con elementos diferentes - como una imagen en la izquierda y un bloque grande de texto más pesado a la derecha de ella.

El Balance Asimétrico:

Las páginas balanceadas Asimétricamente pueden ser más desafiantes para diseñar - como no tienen elementos que se correspondan a través de la línea central del diseño. Por ejemplo, podríamos tener un elemento grande, acomodado muy junto a la línea central del diseño. Para balancearlo asimétricamente, podríamos tener un elemento pequeño más lejano de la línea central. Si pensamos en nuestro diseño como estar en un sube y baja, un elemento más ligero puede balancear uno más pesado, estando más lejos del centro de gravedad. Podemos también usar color o textura para balancear un diseño asimétrico.

Discordante o Fuera de Balance:

Algunas veces el propósito del diseño hace que un propósito fuera de balance o discordante marche bien. Los diseños que están fuera de balance sugieren movimiento y acción. Hacen sentirse a las personas incómodas o inquietas. Si el contenido de nuestro diseño está también dirigido a ser incómodo o hacer que las personas piensen, un diseño discordantemente balanceado puede trabajar bien.

CONTRASTE

El contraste en el diseño es una acentuación de las diferencias entre elementos en un diseño. La idea que la mayoría de la gente tiene contraste se aplica únicamente a los colores, pero el contraste puede surtir efecto con cualquier elemento del diseño. Por ejemplo, si tenemos un grupo de líneas que son todas del mismo tamaño, no hay contraste. Pero si una es bastante más larga que las demás, contrasta con ellas.

El Uso del Contraste en el Diseño:

Al aplicar el contraste a los diseños Web, pensemos más allá del color. El contraste del color, fácilmente puede ser llevado a extremos. Pero usando diferencias más sutiles en los tamaños de las fuentes, formas del esquema(layout) , las imágenes, y los estilos del texto (como las listas vs largos bloques de prosa) podemos aprovecharnos de hacer contraste, sin estallar la vista de nuestros lectores con una combinación de colores contrastantemente fuerte.

Cómo Incluir Contraste en los Diseños Web:

El contraste en el diseño Web puede ser implementado de muchas formas:

• Cambiemos las fuentes. El tamaño de la fuente, el ancho de la fuente, o la familia de fuentes, todo esto nos puede proveer de contraste a nuestro texto. Los encabezads nos proveen una gran cantidad de contraste alrededor del texto.
• Los enlaces proveen gran contraste en el texto. El cambio de color y la adición de un subrayado marchan bien para contrastar alrededor del texto.
• Podemos usar imágenes y elementos de diferentes dimensiones. Si tenemos una sección de texto que es el foco primario de una página, podríamos ponerle un tamaño grande y todas las imágenes y elementos circundantes de tamaño pequeño.
• Usar colores contrastantes o cambiar la tonalidad y brillo de sus colores.

ENFASIS

El énfasis en el diseño provee el punto focal para la pieza. Es una forma de hacer que el elemento que es más importante sobresalga en el diseño. El énfasis es algunas veces llamado predominio.

El Uso del énfasis en el Diseño:

Uno de los errores más grandes que los diseñadores cometemos, es tratar de hacer que todo en el diseño sobresalga. Cuando todo tiene énfasis podemos lograr en el mejor de los casos hacer que la pieza tenga la apariencia de estar atareada y concentrada, y en el peor de los casos el diseño será aburrido y poco atractivo.

En lugar de eso, enfoquemos la atención en crear una jerarquía visual en nuestros diseños. Si hemos trabajado para crear un flujo semántico para nuestra maquetación HTML, esto será más fácil. Porque nuestra página Web ya tendrá una jerarquía, todo lo que nuestro diseño necesita hacer es aplicarle el énfasis a los elementos correctos - como el elemento H1 para la mayor énfasis, y así sucesivamente.

Cómo Incluir énfasis en los Diseños Web:

• El énfasis en el diseño Web puede ser implementado de muchas formas:
• La maquetación semántica utilizada proveerá algún énfasis, aun sin cualquier estilo.
• Cambiando el tamaño de las fuentes o de las imágenes para enfatizarlas o restarles importancia en el diseño.
• Usar colores contrastantes puede proveer énfasis.

RITMO

El ritmo en el diseño es también llamado repetición. El ritmo le permite a nuestros diseños desarrollar una consistencia interna que da facilidades para que nuestros clientes lo entiendan. Una vez que el cerebro reconoce el patrón en el ritmo puede relajarse y entender el diseño entero. La repetición raramente ocurre delante de si mismo y eso les proporciona un sentido de orden encima del diseño. Y por esto, la repetición atrae la atención e incita a los clientes a seguir investigando.

El Uso del Ritmo en el Diseño:

Casi cualquier cosa en un diseño Web - que se repita - crea un ritmo para sus diseños. Podemos repetir múltiples veces el encabezado para dar énfasis, podemos repetir una imagen a través de la parte superior denuestro diseño, podemos crear un fondo estampado con elementos repetitivos, o podemos repetir un estilo a todo lo largo de las páginas de nuestro sitio para proveer consistencia.

Cómo Incluir Ritmo en el Diseño Web:

• El ritmo en el diseño Web puede ser implementado de muchas formas:
• Repitiendo el texto en nuestro HTML.
• Agregando imagenes multiples veces.
• Usando la propiedad background- repeat,  para repetir una imagen de fondo horizontal o verticalmente.
• Repitiendo los elementos de navegación de nuestro diseño a través de las páginas del sitio.

UNIDAD

La unidad en el diseño es también llamada proximidad. La unidad nos provee la cohesión a nuestros diseños. Es lo que junta los elementos. Los elementos que se situan cerca unos de otros se relacionan mientras los elementos que están más allá están menos relacionados.

El Uso de la Unidad en el Diseño:

La unidad en el diseño es lograda primordialmente a través de la colocación de los elementos en nuestro esquema(layout). Pero también puede ser lograda a través del cambio de margen y relleno (padding) de los elementos.

Cómo Incluir Unidad en el Diseño Web:

La unidad en el diseño Web puede ser implementada de muchas formas:

• Ajustando los elementos en el esquema(layout) para colocarlos cerca o lejos.
• Cambiando el espaciado alrededor del texto.
• Jugando con las propiedades de la caja, para afectar los márgenes y el relleno(padding).

Si disfrutaste nuestro artículo, siéntete libre de suscribirte a nuestro feed rss