Principios para un buen diseño web

Involucra lograr un diseño que sea usable a la vez que placentero, es técnicamente sonoro y visiblemente coherente.1. Preferencia (Guiando el ojo)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.Posición – Donde algo en la página claramente influencia en qué orden el usuario lo ve.– Color – Usando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde mirar.– Contraste – Ser diferente es lo que hace a 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 hace las cosas más clarasEspacio entre línea: El espacio entre líneas afecta directamente a lo legible que aparece. Puedes controlar el espaciado en CSS con el selector “line-height” (interlineado). Relleno: Las Imágenes, por ejemplo, no deben de tocar el texto, ni tocar bordes o tablas. El relleno es el espacio entre los elementos y el texto poner espacio entre el texto y el resto del mundo lo hace definitivamente más legible y placentero.Espacio en blanco: El espacio en blanco es usado para dar balance y contraste a una página. Mucho espacio en blanco tiende a hacer que las cosas parezcan más elegantes y de lujo

3. Navegación Navegación – ¿Hacia dónde puedes ir?Los botones para navegar en el sitio deberían ser fáciles de encontrar.El texto de un botón debe estar bien claro en cuanto hacia donde te está llevando, si tienes un sub-menú desplegable, es importante garantizarle a la persona que puede ir hacia los objetos del submenú sin perder lo desplegableOrientación – ¿Dónde estas ahora?En sites pequeños, 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. Puedes haber escogido un tipo de letra sorprendente para la copia del cuerpo de tu site, pero ¿Es un tipo de letra estándar en HTML? tienes un diseño que se ve hermoso pero su tamaño es de 1100px y como resultado, tendrán que recorrer la página horizontalmente para poder verlo.Mover un objeto en el diseño puede hacer una gran diferencia en cómo tendrás que codificar tu CSS después, si tu diseño tiene tres elementos y cada elemento está completamente separado de los otros, será muy fácil de crear. Si los tres se superponen uno con otro, quizá sea fácil también probablemente será un poco más complicado. Debes encontrar un balance entre lo que se ve bien y los pequeños cambios que puedan simplificar tu creación.

5.Tipografía Opciones de letras: Los diferentes tipos de letras dicen cosas diferentes sobre un diseñoTamaño de letras: 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: El espaciado entre letras, aunque en Internet esto es de importancia menor, ya que no se tiene mucho control sobre ello.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.Color: Poner texto de bajo contraste. Se ve bonito, pero no se lee bien.Parrafeando: Texto justificado tiende a crear espacios extraños entre las palabras donde ya han sido auto-espaciadas. Esto no es bueno para tu ojo cuando estás leyendo

6 .Usabilidad Si el texto esta subrayado, tu esperas que sea un link. Haciéndolo de otra manera no es una buena práctica de usabilidad. Hacer prototipos es una herramienta común usada en diseño para de hecho “probar” un diseño. Tener un cuadro de búsqueda que esté siempre accesible fácilmente.

7. Alineación Tratar de mantener las cosas bien colocadas en una página. La alineación hace tu diseño más ordenado y digerible. Quizá también quieras basar tus diseños en una cuadrícula específica.

8. Claridad (Nitidez) En CSS todo va a ser perfecto en cuanto los pixeles, en PhotoShop no es así. Para lograr la nitidez tienes que:mantén las formas de los límites pegados a los pixeles.Asegúrate de que el texto está creado usando el comando anti-alistado. Seguido usa “Nitidez”.Asegurarse que el contraste es alto para que los bordes estén claramente definidos.Sobre-enfatiza los bordes solo un poco para exagerar el contraste.

9. Consistencia Hacer que todo combine. Todo deberá basarse en un tema en específico. Para hacer tu diseño coherente entre páginas y en la misma página. Las inconsistencias en un diseño son como cometer errores ortográficos en un ensayo. 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