9 Principios para buen diseño Web

 se trata de información. Una de las más grandes herramientas en tu arsenal para hacer esto es lapreferencia. Cuando navega por un buen diseño, el usuario debería ser guiado en la pantalla por el diseñador. Yo llamo a esto preferencia, y se trata de la carga visual que tienen las diferentes partes de tu diseño.

4e1a1a83-4383-4ccc-bb0b-76b81f1e8a5e (image/jpg)

Preferencia 

Pie de foto: : http://fedrick.deviantart.com/art/Some-Web-61158902

El espacio hace las cosas más claras. En el diseño Web hay tres aspectos sobre espacio que deberías considerar:: – Espacio entre líneasCuando tú presentas un texto, el espacio entre líneas afecta directamente a lo legible que aparece. – RellenoGeneralmente hablando, el texto nunca jamás debería tocar otros elementos. Las Imágenes– Espacio en blancoAntes que nada, el espacio en blanco no es necesariamente de color blanco. El término se refiere al espacio vacío en una página

                                  Espacio

ba704494-9a83-4538-91a2-223ab3d7a015 (image/jpg)

Pie de foto: : http://sone-pl.deviantart.com/art/FP-website-31885626

             Navegacion

Una de las experiencias más frustrantes que puedes tener en un Web Site es cuando no sabes en donde estás ni para dónde vas.Navegación – ¿Hacia dónde puedes ir?Hay algunas reglas con sentido común que hay que recordar. Los botones para navegar en el sitio deberían ser fáciles de encontrar.Orientación – ¿Dónde estas ahora?Hay muchísimas maneras en las que puedes orientar a un usuario, así que no hay excusa para no hacerlo. 

85bd558d-8f6e-4321-bbf6-db8eccd73bf4 (image/jpg)

Pie de foto: : http://tit0.deviantart.com/art/INFINsite-V2-56491417

     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? Quizá 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. 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.– Para sitios grandes, particularmente, ¿puedes simplificar las cosas?Hubo una vez que solía hacer botones con imágenes para mis sites. Así, si había un botón de download, por ejemplo, lo hacia tipo imagen. En el último año más o menos, he cambiado a usar CSS para hacer mis botones y nunca más como antes. Claro, significa que mis botones no siempre tienen la flexibilidad que me gustaría, pero me ahorra bastante tiempo de creación por que ya no tengo que hacer docenas de pequeños botones. 

82581a8c-4fcb-41fc-a541-ec486064a038 (image/png)

Pie de foto: :

                        Tipografía

El texto es un elemento común en el diseño, así que no es sorpresa que muchos pensamientos se enfoquen en eso. Es importante considerar cosas como: Opciones de letras Tamaño de letras Espaciado  Anchura de las líneas Color Parrafeando  Esto no es bueno para tu ojo cuando estás leyendo, así que pega el alineamiento hacia la izquierda a menos que tengas un cuerpo de texto mágico que haga el espaciado perfecto.

ae1c030b-43a4-477d-9282-0ee392021f37 (image/jpg)

Pie de foto: : http://tit0.deviantart.com/art/sport-deluxe-60969702

                             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.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. Al final del día, tu diseño Web es una herramienta para que la utilice la gente, y a la gente no le gusta utilizar herramientas molestas!

f801da17-3170-4526-8532-0c43ff58a030 (image/png)

Pie de foto: : http://nikeos.deviantart.com/art/evolve-website-V2-67108757

                          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.Quizá también quieras basar tus diseños en una cuadrícula específica.

bfcc86e4-8dfa-40b4-9453-9d9b2141ec69 (image/jpg)

Pie de foto: : http://es.wikihow.com/centrar-un-texto-en-lenguaje-HTML#/Imagen:Center-Text-in-HTML-Step-1Bullet1.jpg

Claridad

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.En tu CSS todo va a ser perfecto en cuanto los pixeles, así que no hay nada de que preocuparse, pero 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. 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.

8ef720d6-4c8d-49a3-b24c-86623d012f68 (image/jpg)

Pie de foto: : http://previews.123rf.com/images/alexeysmirnov/alexeysmirnov1211/alexeysmirnov121100002/16236695-P-gina-Web-HTML-con-c-digo-fuente-t-tulo-del-documento-descripci-n-de-metadatos-y-enlaces-monitor-de-Foto-de-archivo.jpg

 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. Todo deberá basarse en un tema en específico. Para hacer tu diseño coherente entre páginas y en la misma página.Mantener tu diseño consistente es lo que te hace un profesional. Las inconsistencias en un diseño son como cometer errores ortográficos en un ensayo. Lo único que hacen es bajar la percepción de calidad.Tener un buen set de CSS también puede ayudar a hacer un diseño consistente. Trata de definir etiquetas básicas como <h1> (header 1)

fe90ed14-3b09-4251-86ac-92a74169dd4b (image/jpg)