9 Principios bsicos para lograr un buen diseo web.

1. Precedencia (guiando el ojo)

El buen diseo Web, quiz aun ms que otro tipo de diseo, se trata de informacin. Una
de las ms grandes herramientas en tu arsenal para hacer esto es lapreferencia. Cuando
navega por un buen diseo, el usuario debera ser guiado en la pantalla por el diseador.
Yo llamo a esto preferencia, y se trata de la carga visual que tienen las diferentes partes de
tu diseo.
Un simple ejemplo de preferencia es que en la mayora de los sitios, la primer cosa que
ves es el logo. Esto pasa frecuentemente por que es grande y est colocado en donde ha
sido demostrado en muchos estudios realizados ser el primer lugar que la gente ve (la
esquina superior izquierda). Esto es bueno ya que t probablemente quieres que el usuario inmediatamente sepa cual sitio est viendo.
Pero la preferencia debera ir ms all. Deberas dirigir los ojos del usuario mediante una
secuencia de pasos. Por ejemplo, t tal vez quieras que tu usuario vaya del logo a una
expresin posicional primaria, seguida de una imagen enrgica (para darle personalidad al
sitio), luego al texto principal, con navegacin y sidebar tomando una posicin secundaria
en la secuencia.
Lo que tu usuario debera estar buscando depende de que t, el diseador Web, lo averiges.
Para lograr la preferencia tienes muchas herramientas a tu disposicin:
- Posicin Donde algo en la pgina 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.
- Tamao Lo grande toma preferencia sobre lo pequeo (a menos que todo sea grande, en
cuyo caso lo pequeo quiz sobresaldr gracias al contraste)
- Elementos de diseo Si hay una gran flecha apuntando algo, adivina hacia dnde
mirar el usuario?
Marius tiene un sitio muy limpio, muy sencillo con bastante espacio

Recursos web:

Pginas web que nos ayudan a cuadrar mejor el color:

Colllor: Herramienta para crear consistentes esquemas de colores (http://colllor.com/)

http://www.colorexplorer.com/
http://colorschemedesigner.com/

9 Principios bsicos para lograr un buen diseo web.

2. Espacio

Cuando empec a disear quera llenar todo el espacio disponible con cosas. El espacio
vaco pareca un desperdicio. De hecho es todo lo contrario.
Espaciado hace las cosas ms claras. En el diseo de web, hay tres aspectos del espacio que
usted debe considerar:

Interlineado
Cuando t presentas un texto, el espacio entre lneas afecta directamente a lo legible que
aparece. Muy poco espacio hace fcil que tu ojo caiga de una lnea a otra en lugar de la
siguiente; demasiado espacio significa que cuando terminas una lnea de texto y vayas a la
siguiente, la pierdas de vista. As que necesitas encontrar una medida media feliz. Puedes
controlar el espaciado en CSS con el selector line-height (interlineado). Generalmente
encuentro que el valor usado por defecto es muy pequeo. El espaciado entre lneas es
tcnicamente llamado leading (pronunciado ledding), que se deriva del proceso que las
impresoras usaban para separar las lneas de texto en los viejos tiempos, poniendo barras
de plomo entre las lneas.

Relleno

Generalmente hablando, el texto nunca jams debera tocar otros elementos. Las
Imgenes, por ejemplo, no deben de tocar el texto, ni tocar bordes o tablas. El relleno es el
espacio entre los elementos y el texto. La simple regla aqu es quesiempre debes tener
espacio ah. Hay excepciones, por supuesto, en particular si el texto es algn tipo de
encabezado/grfico o tu nombre es David Carson. Pero como regla general, poner espacio
entre el texto y el resto del mundo lo hace definitivamente ms legible y placentero.

Espacio en blanco

Antes que nada, el espacio en blanco no es necesariamente de color blanco. El trmino se

refiere al espacio vaco en una pgina (o espacios negativos como a veces se le llama). El
espacio en blanco es usado para dar balance y contraste a una pgina. Mucho espacio en
blanco tiende a hacer que las cosas parezcan ms elegantes y de lujo, as que como ejemplo, si vas a un sitio costoso de arquitectura , casi siempre ves mucho espacio. Si quieres
aprender a usar espacios en blanco de forma efectiva, consigue una revista y revisa como
estn presentadas las paginas publicitarias. Los comerciales para grandes marcas de
relojes y automviles tienden a tener mucho espacio vaco usado como elemento de
diseo. relojes y automviles y similares tienden a tener un montn de espacio vaco
utilizado como un elemento de diseo.

9 Principios bsicos para lograr un buen diseo web.

3. Navegacin

Una de las experiencias ms frustrantes que puede tener en un sitio Web es ser incapaz de
averiguar o saber dnde se encuentra. Me gustara pensar que para la mayora de los
diseadores de web, la navegacin es un concepto que hemos logrado dominar, pero yo
todava encuentro algunos ejemplos muy malos por ah. Hay dos aspectos de la
navegacin a tener en cuenta:

Navegacin - Dnde puede ir?

Hay algunas reglas con sentido comn que hay que recordar. Los botones para navegar en
el sitio deberan ser fciles de encontrar hacia la parte de arriba de la pgina y fciles de
identificar. Deberan verse como botones de navegacin y estar bien descritos. El texto de
un botn debe estar bien claro en cuanto hacia donde te est llevando.
Aparte del sentido comn, es importante tambin hacer usable la navegacin. 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. Al igual que lo es cambiar el
color de la imagen al pasar el Mouse por encima; es una excelente reaccin para el usuario.

Orientacin - Dnde ests ahora?

Hay muchsimas maneras en las que puedes orientar a un usuario, as que no hay excusa
para no hacerlo. En sites pequeos, es solo cuestin de un gran encabezado o una versin
menor de la versin del botn correspondiente. En un sitio ms grande, podras utilizar
la tcnica de las migas de pan, sub-encabezados y un mapa del sitio para los que estn
realmente perdidos

9 Principios bsicos para lograr un buen diseo web.

4. Diseo para construir

La vida se ha vuelto mucho ms fcil ya que los diseadores Web la transicin a diseos
de CSS, pero incluso ahora sigue siendo importante para pensar en cmo se va a construir
un sitio cuando todava ests en Photoshop. Tenga en cuenta cosas como

Puede realmente hacerse?

Es posible que tenga un diseo que se ve hermoso, pero es 1100px de ancho y se traducir
en una rueda de desplazamiento horizontal para la mayora de los usuarios. Es importante
saber lo que puede y no se puede hacer, por lo que creo que todos los diseadores web
tambin debe construir sitios, por lo menos a veces.

Qu sucede cuando una pantalla cambia de tamao ?

Necesita fondos se repiten? Cmo funcionan? Es el diseo centrado o alineado a la
izquierda? El fondo es una foto que distrae los elementos del sitio? El fondo es un
degrade de colores estindentes?

Est usted haciendo todo lo que es tcnicamente difcil?

Incluso con el posicionamiento de CSS, algunas cosas como la alineacin vertical todava
estn un poco doloroso y, a veces lo mejor es evitarlo.

Podra pequeos cambios en su diseo simplificar enormemente cmo lo

construyes?
Algunas veces, mover un objeto en torno a un diseo puede marcar una gran diferencia en
cmo se tiene que codificar tu CSS ms tarde. En particular, cuando los elementos de un
diseo se cruzan entre s, se aade una complejidad poco a la generacin. As que si su
diseo se ha, digamos tres elementos y cada elemento es totalmente independiente el uno
del otro, sera muy fcil de construir. Por otro lado, si los tres se solapan entre s, an
podra ser fcil, pero probablemente ser un poco ms complicado. Usted debe encontrar
un equilibrio entre lo que se ve los cambios buenos y pequeos que pueden simplificar su
construccin.

9 Principios bsicos para lograr un buen diseo web.

4. Diseo para construir
Para los sitios grandes, en particular, puede simplificar las cosas?
Hubo un tiempo en que yo sola hacer botones de imagen para mis sitios. As que si haba
un botn de descarga, tenia que hacer la imgen del boton de descarga de imgenes . En
el ltimo ao , he empezado a usar CSS para hacer mis botones y nunca mir hacia atrs.
Claro, esto significa que mis botones no siempre cuentan con la flexibilidad que podra
desear, pero el ahorro en tiempo de construccin al no tener que hacer docenas de
imgenes de los botones pequeos son enormes.

9 Principios bsicos para lograr un buen diseo web.

5. Tipografa
El texto es el elemento ms comn del diseo, por lo que no es de extraar que
una gran cantidad de libros se centren en l. Es importante tener en cuenta
cosas como:
Las opciones de fuente - Diferentes tipos de fuentes dicen cosas diferentes sobre un
diseo. Algunos aspecto moderno, algunos aspecto retro. Asegrese de que est utilizando
la herramienta adecuada para el trabajo.
Los tamaos de fuente-Aos atrs era de moda el texto muy pequeo. Afortunadamente,
en estos das la gente ha empezado a darse cuenta de que el texto est pensado para ser
ledo. Asegrese de que los tamaos de texto son compatibles, lo suficientemente grande
como para ser ledo, y proporcionado de manera que los ttulos y subttulos destacan
adecuadamente.
Espaciado - Como se mencion anteriormente, el espaciado entre lneas y lejos de otros
objetos es importante tener en cuenta. Usted tambin debe estar pensando en el espaciado
entre las letras, aunque en la web esto es de menor importancia, ya que no tiene tanto
control.
Longitud de la lnea - No hay regla dura y rpida, pero en general sus lneas de texto no
debe ser demasiado largo. Cuanto ms tiempo estn, ms difcil sera para leer. Pequeas
columnas de texto funcionan mucho mejor (pensar en cmo un peridico establece el
texto).
Color - Uno de mis peores hbitos est haciendo bajo contraste del texto. Se ve bien, pero
no lee tan bien, por desgracia. Sin embargo, me parece que lo hacen con todos los diseos
de sitio web que he hecho.
De prrafos - Antes de empezar a disear, me encant para justificar el texto en todo. Se
hizo para los bordes agradables a cada lado de mis prrafos. Desafortunadamente, el texto
justificado tiende a crear espacios entre las palabras extraas que han sido
auto-espaciadas. Esto no es agradable para el ojo al leer, por lo que se adhieren a alineado
a la izquierda a menos que usted tenga un cuerpo mgico de texto que pasa al espacio a la
perfeccin.

Font picker: visualiza texto con todas tus tipografas

http://www.fontpicker.net/

9 Principios bsicos para lograr un buen diseo web.

6. Usabilidad
El diseo web no se trata slo de fotos bonitas. Con tanta informacin y la interaccin que
se realiza en un sitio Web, es importante que usted, el diseador tenga en cuenta todo.
Esto significa hacer el diseo de su sitio web usable.
Ya hemos hablado de algunos aspectos de la usabilidad - navegacin, la precedencia, y el
texto. Aqu hay otros tres ms importantes:

Adherirse a los estndares

Hay ciertas cosas que la gente espera, y no darles causa confusin. Por ejemplo, si el texto
tiene un subrayado, se espera que sea un enlace. Hacer lo contrario no es una prctica
buena usabilidad. Claro, usted puede romper algunas convenciones, pero la mayor parte
de su sitio web debe hacer exactamente lo que la gente espera que haga!

Piense en lo que los usuarios realmente van a hacer

Cree prototipos es una herramienta comn utilizada en el diseo de realidad 'try' un
diseo. Esto se hace porque muchas veces cuando utilice un diseo, que cuenta las cosas
pequeas que hacen una gran diferencia. ALA publica un gran artculo que te ayudara a
profundizar en este punto (http://www.alistapart.com/articles/neveruseawarning)

Piense en las tareas del usuario

Cuando un usuario llega a su sitio que es lo que intentan hacer? Haz una lista de los
diferentes tipos de tareas que la gente podra hacer en un sitio, cmo lo van a lograr, y lo
fcil que desee hacerlo por ellos. Esto podra significar que tiene tareas muy comunes en
su pgina de inicio ("ir de compras inicio ', por ejemplo," conocer lo que hacemos ", etc) o
puede significar asegurar algo as como tener una caja de bsqueda siempre de fcil
acceso. Al final del da, el diseo de su web es una herramienta para las personas a
utilizar, y la gente no le gusta usar herramientas molestas!

www.nosolousabilidad.com

9 Principios bsicos para lograr un buen diseo web.

7. Alineacin
Mantener las cosas alineadas es tan importante en el diseo Web como en el diseo de
impresin. Eso no quiere decir que todo debe ser en lnea recta, sino que hay que ir a
travs y tratar de mantener las cosas siempre colocadas en una pgina.
La alineacin hace que su diseo ms ordenado y fcil de digerir, as como lo que parece
ms pulido.
Le recomendamos tambin basar sus diseos en una red especfica. Debo admitir que no
lo hace conscientemente, - aunque, obviamente, un sitio como Psdtuts + es, de hecho,
tienen una estructura de rejilla muy firme. Este ao he visto algunos artculos muy buenos
en el diseo de la red, incluyendo SmashingMagazine de diseo con rejilla de enfoque
basado en A List Apart y es el pensamiento fuera de la cuadrcula. De hecho, si usted est
interesado en el diseo de la red, debera hacer una visita a la casa bien llamado a todos
los DesignByGrid.com griddy cosas.

DesignByGrid.com/

9 Principios bsicos para lograr un buen diseo web.

8. Claridad (Nitidez)
Mantener el diseo ntido y fuerte es sper importante en el diseo Web. Y cuando se trata
de la claridad, es todo acerca de los pxeles.
En tu CSS, todo estar pxel perfecto as que no hay nada de qu preocuparse, pero en
Photoshop no es as. Para lograr un diseo de vanguardia usted tiene que:
Mantenga los bordes de la forma espet a los pxeles. Esto podra implicar manualmente
la limpieza de formas, lneas y cuadros si usted los est creando en Photoshop.
Asegrese de que cualquier texto que se crea mediante el adecuado ajuste de anti-aliasing.
Yo uso 'Sharp' mucho.
Asegurar que el contraste es alto para que las fronteras estn claramente definidas.
El exceso de nfasis en las fronteras slo un poco para exagerar el contraste.
.

Font picker: visualiza texto con todas tus tipografas

http://www.fontpicker.net/

9 Principios bsicos para lograr un buen diseo web.

9. Consistencia
Todo debe ser consistente, El tamao de los tipos de texto, los colores, los estilos de los
botones, los elementos del diseo, el tipo de imgenes y fotografas, etc. La imagen de una
pgina debe ser consistente para que las personas la recuerden. La mejor manera de
mantener la consistencia es la planeacin, si se cuenta con una buena planeacin la pgina
ser consistentemente buena.
Tener un buen conjunto de hojas de estilo CSS tambin se puede recorrer un largo camino
para hacer un diseo coherente. Trate de definir etiquetas bsicas como <h1> y <p> de tal
manera como para hacer coincidir sus valores predeterminados correctamente y evitar
tener que recordar nombres especficos de la clase todo el tiempo.
Artculo tomado de:http://psd.tutsplus.com/tutorials/designing-tutorials/9essential-principles-for-good-web-design/.

http://www.vzert.com/Diseno-Web/la-proporcion-en-el-diseno-web.html

9 Principios bsicos para lograr un buen diseo web.

10. Ejemplos diseos web:

http://www.thebestdesigns.com/