Principios de Diseño Web

9 Principios bsicos para lograr un buen diseo web.

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 usu-ario 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 aver-iges.

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

1. Precedencia (guiando el ojo)

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/


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.RellenoGeneralmente 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 blancoAntes 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 ejem-plo, 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.

2. Espacio


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 ejem-plo, 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

3. Navegacin


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 simplicar 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.

4. Diseo para construirPara los sitios grandes, en particular, puede simplicar 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.

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 simplicar 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.


4. Diseo para construirPara los sitios grandes, en particular, puede simplicar 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.

Font picker: visualiza texto con todas tus tipografashttp://www.fontpicker.net/


5. TipografaEl 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.

www.nosolousabilidad.com


6. UsabilidadEl 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!

DesignByGrid.com/


7. AlineacinMantener 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.

Font picker: visualiza texto con todas tus tipografashttp://www.fontpicker.net/


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..

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


9. ConsistenciaTodo 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 y 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/9-essential-principles-for-good-web-design/.

http://www.thebestdesigns.com/


10. Ejemplos diseos web:

Principios de Diseño Web

Documents

Transcript of Principios de Diseño Web