El diseño Web tiene como finalidad lograr que un diseño que sea usable a la vez placentero, entrega información y crea marcas, es técnicamente sonoro y visiblemente coherente. Existen 9 principios para un diseño web que a continuación se muestran:

1. Preferencia (Guiando el ojo)

Preferencia se trata de la carga visual que tienen las diferentes partes de tu diseño.

Un ejemplo de preferencia es que en la mayoría de los sitios, la primer cosa que ves es el logo. Esto pasa frecuentemente por que es grande y está colocado en la esquina superior izquierda.Esto es bueno ya que tú probablemente quieres que el usuario inmediatamente sepa cual sitio está viendo.

La preferencia tienes muchas herramientas como:
Posición – Donde algo en la página claramente influencia en qué orden el usuario lo mira.
Color – Usando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde mirar.
Contraste – Ser diferente es lo que hace las cosas resaltar, mientras que siendo similares las hace secundarias.
Tamaño – Lo grande toma preferencia sobre lo pequeño (a menos que todo sea grande, en cuyo caso lo pequeño quizá sobresaldrá gracias al contraste)
Elementos de diseño – Si hay una gran flecha apuntando algo, adivina ¿hacia dónde mirará el usuario?

2 Espacio. El espacio es importante por que hace las cosas más claras en el Diseño Web.

En el Diseño Web hay tres aspectos de espacio que son los siguientes:

Espacio entre líneas. El espacio entre líneas afecta directamente a lo legible que aparece en cambio cuando hay demasiado espacio afecta cuando por que cuando terminas una línea de texto y vayas a la siguiente, la pierdas de vista.

Relleno. El relleno es el espacio entre los elementos y el texto. Un texto no debe tocar otros elementos, por ejemplo las imágenes no deben de tocar el texto, ni tocar bordes o tablas. Como regla general, poner espacio entre el texto y el resto del mundo lo hace definitivamente más legible y placentero.

Espacio en blanco. El término de espacio en blanco se refiere al espacio vacío en una página (o espacios negativos como a veces se le llama). El espacio en blanco es usado para dar balance y contraste a una página.

3. Navegación Para una navegación se debe ubicar bien cada punto de tu sitio web.Hay dos aspectos sobre la navegación que hay que tener en cuenta:

Navegación – ¿Hacia dónde puedes ir?
El texto de un botón debe estar bien claro en cuanto hacia donde te está llevando. Aparte del sentido común, es importante también hacer usable la navegación. Por ejemplo, si tienes un sub-menú desplegable, es importante garantizarle a la persona que puede ir hacia los objetos del submenú sin perder lo desplegable.

Orientación – ¿Dónde estas ahora?

Orientar al usuario es solo cuestión de un gran encabezado o una versión “menor” de la versión del botón correspondiente. En un sitio más grande, podrías utilizar la técnica de las migas de pan, sub-encabezados y un mapa del sitio para los que están realmente perdidos.

4. Diseña para construir. Los diseñadores Web hicieron la transición a plantillas (layouts) CSS, pero incluso ahora es importante pensar acerca de cómo vas a construir tu sitio si aun estás en PhotoShop. Considera cosas como:

¿De veras puede hacerse
Es importante saber lo que se puede hacer y lo que no, por lo cual creo que todos los diseñadores web deberían incluso hacer sitios completos, al menos unas cuantas veces.

¿Algo de lo que estás haciendo es técnicamente difícil?
Incluso con el posicionamiento del CSS, algunas cosas como el alineamiento vertical son un poco dolorosas y algunas veces mejor evitarlas.

5. Tipografía. El texto es un elemento común en el diseño.

Opciones de letras.Los diferentes tipos de letras dicen cosas diferentes sobre un diseño. Asegúrate de que estás utilizando la herramienta adecuada para el trabajo.

Tamaño de letras.Asegúrate de que el tamaño de tus letras sean consistentes, suficientemente grandes para leerse y proporcionales para que el encabezado y el sub-encabezado resalten apropiadamente.

Espaciado.Deberías de pensar en el espaciado entre letras.

Anchura de las líneas. Las líneas de tu texto no deberían ser tan largas. Mientras más largas son, más difíciles son de leer. Pequeñas Columnas funcionan mucho mejor.

6 .Usabilidad El diseño Web no solo se trata de fotos bonitas. Con la tanta información e interacción que hay que efectuar en un web Site, es importante que tú, el diseñador, lo proveas para todo. Eso significa que hagas tu web Site utilizable.

Apegándose a los estándares.Por ejemplo, si el texto esta subrayado, tu esperas que sea un link. Haciéndolo de otra manera no es una buena práctica de usabilidad.

Piensa sobre lo que los usuarios van a hacer.Hacer prototipos es una herramienta común usada en diseño para de hecho “probar” un diseño. Esto se hace por que con frecuencia cuando utilizas un diseño, llegas a notar pequeñas cosas que pueden hacer una gran diferencia.

Piensa en las tareas del usuario.Enlista los diferentes tipos de tareas que la gente hace en un Site, cómo las logran, y qué facilidad quieres darles para ello. Esto puede significar que haya tareas comunes en tu homepage (por ejemplo, “empieza a comprar”, o “aprende lo que hacemos”, etc.) o incluso puede significar asegurar algo como tener un cuadro de búsqueda que esté siempre accesible fácilmente.

7. Alineación Mantener las cosas alineadas es tan importante en el diseño Web como lo es en un diseño de impresión. No quiere decir que todo tiene que estar derecho, sino que debes tratar de mantener las cosas bien colocadas en una página. La alineación hace tu diseño más ordenado y digerible, al igual que lo hace ver más pulido.

8. Claridad (Nitidez) Mantener nítido tu diseño es súper importante en el diseño Web. Y en cuanto a la claridad, se trata de los pixeles.

Mantén las formas de los límites pegados a los pixeles.Esto podrá incluir limpiar los límites manualmente, las líneas y los cuadros de texto si las estás creando en PhotoShop.

9. Consistencia Consistencia significa hacer que todo combine. Tamaño de encabezados, tipos de letra escogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de ilustraciones, fotos escogidas, etc.

La manera más simple de mantener la consistencia es hacer decisiones tempranas y pegarte a ellas. Aún así, con un Site grande, las cosas pueden cambiar en el proceso de diseño. Tener un buen set de CSS también puede ayudar a hacer un diseño consistente.

	Creado por Veloz Alvarado 4°l hace más de 8 años

Apunte sobre PRINCIPIOS PARA UN BUEN DISEÑO WEB, creado por Veloz Alvarado 4°l el 05/03/2016.