Un buen diseño Web equivale a un buen diseño. Si entiendes los elementos que hacen un buen diseño, tendrás una página Web que trabaja bien. Estos elementos de un buen diseño tienen aplicación, tanto si diseñoas una página Web, una tarjeta de presentación, o una camisa playera; y una vez que los entiendes, tendrás las habilidades para ser un gran diseñador.

Los elementos de diseño son los bloques de construcción del diseño. Estos elementos son los que hacen cada página que construyes. Y entendiendo los elementos básicos podrás colocar en conjunto mejores páginas Web.

Existen cinco elementos básicos de cada diseño:

Líneas y Trazado (linework)

Las líneas incluyen bordes y reglas. Pueden ser horizontales o verticales y pueden ayudar a delinear los espacios alrededor de los elementos en las páginas Web. El linework o trazado, aumenta la legibilidad del diseño.

Forma

Las formas crean cualquier contorno incluido en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. Pero no siempre tienen que ser así. Puedes usar imágenes para generar otras formas dentro de tus diseños.

Textura

La textura le da a un diseño una sensación de superficie. La textura en las páginas Web es completamente visual, pero puedes usar texturas naturales o artificiales para obtener el efecto en tus diseños.

Color

El color es el único elemento del diseño del que la mayoría de diseñadores Web son agudamente conscientes. Pero recuerda que el color no es un elemento requerido para cualquier diseño. De hecho, un buen plan de diseño, es crear primero el diseño sin color, luego, añadir un poco de color puede realzar el diseño.

Dirección

La dirección da a su diseño web la idea de movimiento. En la mayoría de diseños hay un sentido de movimiento en una dirección a través del diseño. Los buenos diseños conducen el ojo por el diseño en una forma deliberada a fin de que el espectador vea lo que el diseñador quiere.

LINEAS

Que son las líneas en el Diseño:

Las líneas son un elemento básico de diseño. Le añaden el estilo a un diseño y pueden realzar la comprensión y la legibilidad de un diseño. Las líneas pueden ser utilizadas como un borde alrededor de elementos o un divisor entre elementos.

El Uso de Líneas en Diseño:

Las líneas en diseño Web pueden ser usadas de muchas formas:

• bordes alrededor de elementos
• líneas divisorias entre elementos
• contornoss alrededor de elementos
• decoración

Cómo incluir líneas en el diseño web:

Hay tres formas para incluir líneas en el trabajo del diseño Web:

La etiqueta <hr /> coloca líneas horizontales en documentos de la página Web. Luego puedes darle estilo a la etiqueta <hr /> para obtener mejores resultados con las líneas.

CSS provee muchas formas para añadirle bordes a los elementos. Con bordes en uno o dos lados de un elemento, puedes crear líneas que son algo más interesantes que un borde simple de la caja.

Las imágenes pueden ser utilizadas como líneas y bordes para crear más efectos decorativos.

FORMAS

Que son las Formas en Diseño:

Las formas son un elemento básico de diseño. Están hechas de contornos cerrados y objetos tridimensionales colocados en el diseño. Las formas se usan para transmitir significado y organizar información. Las formas pueden ser bidimensionales o  tridimensionales.

Hay tres tipos básicos de formas:

• Las formas geométricas
• Las formas naturales
• Las formas abstractas

El Uso de Formas en Diseño:

Las formas en diseño Web pueden ser usadas de muchas formas:

• Añadir interés a un diseño
• Mantener el interés
• Organizar o separar elementos
• Dirigir el ojo a través del diseño

Formas Geométricas:

Las formas geométricas son en las que la mayoría de personas piensan cuándo nos referimos acerca de las formas. La mayoría de formas geométricas en las páginas Web son creadas a través del esquema (layout) y CSS. Algunas formas geométricas comunes que usted ve en las páginas Web son:

• cuadrados y rectángulos
• círculos
• triángulos
• diamantes

Formas Naturales:

Las formas naturales son formas que son encontradas en la naturaleza, pero son también formas de objetos hechos por el hombre. La mayoría de formas naturales en las páginas Web son creadas con imágenes. Algunos ejemplos de formas naturales son:

• hojas
• charcos

Formas Abstractas:

Las formas abstractas tienen una forma reconocible pero no son reales como lo son las formas naturales. Por ejemplo, la silueta de un perro pintada de negro es una forma abstracta del perro, una foto del perro es una forma natural. Las formas abstractas en diseños Web se agregan usualmente a través de las imágenes. Algunos ejemplos de formas abstractas son:

• glifos del alfabeto
• iconos
• símbolos

TEXTURA

Que es la Textura en Diseño:

La textura es lo que le da a un diseño la sensación de superficie. Es el sentido táctil de los elementos en el diseño. En el diseño Web, la textura es visual, pero provee la ilusión de textura física. Algunas texturas comunes son:

• Áspero
• Suave
• Duro
• Blando

El Uso de Textura en Diseño:

La textura en diseño Web puede ser usada de muchas formas:

• en los fondos
• para poner énfasis
• diseños estilizados como grabados o delineaciones

Cómo Incluir Textura en Diseño Web:

La forma más común para incorporar textura en los diseños Web es con la propiedad de estilo de imagen de fondo. Puedes aplicar las imágenes de fondo a la mayoría de los elementos de bloque, lo cual te permite añadir texturas a todo lo largo de tus páginas Web.

No olvides que aun cuando no utilices fondos, puedes tener o puedes aproximarte a una textura. Por ejemplo, cualquier imagen que tengas tendrá textura dentro de ella. Y la combinación de elementos en una página puede combinarse conjuntamente para verse texturizada.

COLOR

Que es el Color en Diseño:

El color es un elemento básico de diseño, pero de lo que muchos diseñadores no se dan cuenta, es que no es un elemento requerido. Una cierta cantidad de los mejores diseños han terminado sólo en blanco y negro o simplemente con un poco de un color.

El Uso del Color en Diseño:

El color en diseño Web puede ser usado de muchas formas:

• fondos
• texto y primeros planos
• imágenes
• énfasis

Cómo Incluir Color en Diseño Web:

El color es muy fácil de añadires en las páginas Web. Hay muchas propiedades de estilo que añaden color, incluyendo:

• color - para color del primer plano, como las fuentes y el texto
• color de fondo - hace como lo que suena, cambia el color de fondo del elemento
• color de borde - para cambiar el color de bordes alrededor de elementos

También se le puede añadir color a un diseño a través de imágenes. Las imágenes JPEG para fotos e imágenes con millones de colores y GIFs para imágenes de color plano.

DIRECCION

Que es la Dirección en Diseño:

La dirección en diseño provee ambientación y atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. Hay tres direcciones básicas en diseño:

• Horizontal
• vertical
• diagonal

El Uso de Dirección en Diseño:

En el diseño Web, la dirección está más a menudo representada por las imágenes en la página. Se puede imponer dirección a través de la colocación de elementos en la página, y con líneas, especialmente cuando tienen cabezas de flecha en ellas.

Cómo Incluir Dirección en Diseño Web:

Incorpore dirección en sus diseños Web en las siguientes formas:

Mira tus imágenes para determinar hacia qué dirección miran los temas. Si las personas dentro de la imagen miran hacia la derecha, entonces deberíamos colocar la imagen en el lado izquierdo de la página. De otra manera la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.

Usa tu esquema (layout) para sugerir dirección. Sitúa elementos densos, como las fotos, en líneas horizontales, verticales, o diagonales. Mientras elementos menos densos, como el texto, los rodean.

Usa líneas, ya sea imágenes o etiquetas HR, para sugerir movimiento y dirección.

Artículo escrito por Jennifer Kyrnin

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