-
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/
-
9 Principios bsicos para lograr un buen diseo web.
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
-
9 Principios bsicos para lograr un buen diseo web.
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
-
9 Principios bsicos para lograr un buen diseo web.
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.
9 Principios bsicos para lograr un buen diseo web.
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/
9 Principios bsicos para lograr un buen diseo web.
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
9 Principios bsicos para lograr un buen diseo web.
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/
9 Principios bsicos para lograr un buen diseo web.
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/
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..
-
http://www.vzert.com/Diseno-Web/la-proporcion-en-el-diseno-web.html
9 Principios bsicos para lograr un buen diseo web.
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/
9 Principios bsicos para lograr un buen diseo web.
10. Ejemplos diseos web: