9 Principios Para Buen Diseño

8/18/2019 9 Principios Para Buen Diseño

1/17

9 principios para buen diseño Web

04feb09

El diseño Web puede ser decepcionantemente difícil, pues involucra lograr un diseño que sea

usable a la vez que placentero, entrega información y crea marcas, es técnicamente sonoro y

visiblemente coherente.

gregado a esto est! el hecho de que muchos diseñadores "eb son autodidactas, y que el

diseño Web es todavía lo suficientemente nuevo para ser solo un tema aparte en muchas

instituciones de diseño, y que el medio cambia tan frecuentemente como la tecnología

subyacente lo hace.

sí que el día de hoy pongo #untos mis $ principios para un buen diseño Web. Estas son solo

mis opiniones y traté de poner lin%s con m!s lectura a cada uno de los temas para que no soloescuchen mi opinión. &bviamente, tengo muchas cl!usulas' las reglas est!n hechas para

romperse, diferentes tipos de diseño funcionan diferente, y yo no siempre tomo mis propios

conse#os. sí que por favor lean esto de la manera en que lleva su intención' como algunas

observaciones que estoy compartiendo.

()apture the valley* usa barras de colores para guiar tu o#o entre las secciones de aba#o

hacia arriba.

1. Preferencia (Guiando el ojo)

El buen diseño Web, quiz! aun m!s que otro tipo de diseño, se trata de información. +na de

las m!s grandes herramientas en tu arsenal para hacer esto es la preferencia. )uando navega

por un buen diseño, el usuario debería ser guiado en la pantalla por el diseñador. o llamo a

esto preferencia, y se trata de la carga visual que tienen las diferentes partes de tu diseño.


2/17

+n simple e#emplo de preferencia es que 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 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.

0ero la preferencia debería ir m!s all!. 1eberías dirigir los o#os del usuario mediante una

secuencia de pasos. 0or e#emplo, t/ tal vez quieras que tu usuario vaya del logo a una

e2presión posicional primaria, seguida de una imagen enérgica -para darle personalidad al

sitio, luego al te2to principal, con navegación y sidebar tomando una posición secundaria en

la secuencia.

3o que tu usuario debería estar buscando depende de que t/, el diseñador Web, lo averig4es.

0ara lograr la preferencia tienes muchas herramientas a tu disposición'

– Posición 5 1onde algo en la p!gina claramente influencia en qué orden el usuario lo ve.

– Color 5 +sando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde

mirar.

– Contraste 5 6er diferente es lo que hace a las cosas resaltar, mientras que siendo similares

las hace secundarias.

– Tamaño 5 3o 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 5 6i hay una gran flecha apuntando algo, adivina 7hacia dónde mirar!

el usuario8

(9arius* tiene un sitio muy limpio, muy sencillo con bastante espacio.


3/17

2 Espacio

)uando yo empecé a diseñar quería llenar todo espacio disponible con cosas. 3os espacios

vacíos se veían desperdiciados. de hecho lo opuesto es verdad.

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íneas

)uando t/ presentas un te2to, el espacio entre líneas afecta directamente a lo legible que

aparece. 9uy poco espacio hace f!cil que tu o#o caiga de una línea a otra en lugar de lasiguiente: demasiado espacio significa que cuando terminas una línea de te2to y vayas a la

siguiente, la pierdas de vista. sí que necesitas encontrar una medida media feliz. 0uedes

controlar el espaciado en )66 con el selector (line;height* -interlineado.


4/17

>ay e2cepciones, por supuesto, en particular si el te2to es alg/n tipo de encabezado?gr!fico

o tu nombre es 1avid )arson. 0ero como regla general, poner espacio entre el te2to y el resto

del mundo lo hace definitivamente m!s legible y placentero.

– Espacio en blanco

ntes que nada, el espacio en blanco no es necesariamente de color blanco. El término serefiere al espacio vacío en una p!gina -o espacios negativos como a veces se le llama. El

espacio en blanco es usado para dar balance y contraste a una p!gina. 9ucho espacio en

blanco tiende a hacer que las cosas parezcan m!s elegantes y de lu#o, así que como e#emplo,

si vas a un sitio costoso de arquitectura , casi siempre ves mucho espacio. 6i quieres aprender

a usar espacios en blanco de forma efectiva, consigue una revista y revisa como est!n

presentadas las paginas publicitarias. 3os comerciales para grandes marcas de relo#es y

automóviles tienden a tener mucho espacio vacío usado como elemento de diseño.

3. Navegación

+na de las e2periencias m!s frustrantes que puedes tener en un Web 6ite es cuando no sabes

en donde est!s ni para dónde vas. @uiero pensar que para la mayoría de los diseñadores Web,

la navegación es un concepto que hemos pasterizado, pero aun encuentro algunos malos

e#emplos por ahí. >ay dos aspectos sobre la navegación que hay que tener en cuenta'

Navegación – ¿Hacia dónde puedes ir?

>ay algunas reglas con sentido com/n que hay que recordar. 3os botones para navegar en el

sitio deberían ser f!ciles de encontrar 5 hacia la parte de arriba de la p!gina y f!ciles de

identificar. 1eberían verse como botones de navegación y estar bien descritos. El te2to de un

botón debe estar bien claro en cuanto hacia donde te est! llevando. parte del sentido

com/n, es importante también hacer usable la navegación. 0or e#emplo, si tienes un sub;

men/ desplegable, es importante garantizarle a la persona que puede ir hacia los ob#etos del

submen/ sin perder lo desplegable. l igual que lo es cambiar el color de la imagen al pasar el

9ouse por encima: es una e2celente reacción para el usuario.


5/17

Orientación – ¿Dónde estas ahora?

>ay muchísimas maneras en las que puedes orientar a un usuario, así que no hay e2cusa para

no hacerlo. 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 consruir.

3a vida se ha vuelto m!s f!cil desde que los diseñadores Web hicieron la transición a plantillas

-layouts )66, pero incluso ahora es importante pensar acerca de cómo vas a construir tu sitio

si aun est!s en 0hoto6hop. )onsidera cosas como'

– 71e veras puede hacerse8

0uedes haber escogido un tipo de letra sorprendente para la copia del cuerpo de tu site, pero

7Es un tipo de letra est!ndar en >A938 @uiz! tienes un diseño que se ve hermoso, pero su

tamaño es de BBCCp2 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 "eb deberían incluso hacer sitios completos, al menos unas cuantas

veces.

– 7@ué pasa cuando una pantalla cambia de tamaño8

7Decesitas fondos repetitivos8 7)ómo funcionar!n8 7El diseño es alineado a la izquierda o

centrado8

– 7lgo de lo que est!s haciendo es técnicamente difícil8

=ncluso con el posicionamiento del )66, algunas cosas como el alineamiento vertical son un

poco dolorosas y algunas veces me#or evitarlas.

– 70odrían algunos pequeños cambios en tu diseño simplificar enormemente cómo lo

construiste8

veces, mover un ob#eto en el diseño puede hacer una gran diferencia en cómo tendr!s que

codificar tu )66 después. En particular, cuando los elementos de un diseño se cruzan entre

ellos le añade un poco de comple#idad al proyecto.. así que si tu diseño tiene, digamos treselementos y cada elemento est! completamente separado de los otros, ser! muy f!cil de

crear. 0or otro lado, si los tres se superponen uno con otro, quiz! sea f!cil también, pero

probablemente ser! un poco m!s complicado. 1ebes encontrar un balance entre lo que se ve

bien y los pequeños cambios que puedan simplificar tu creación.

– 0ara sitios grandes, particularmente, 7puedes simplificar las cosas8

>ubo una vez que solía hacer botones con im!genes para mis sites. sí, si había un botón de

do"nload, por e#emplo, lo hacia tipo imagen. En el /ltimo año m!s o menos, he cambiado a

usar )66 para hacer mis botones y nunca m!s como antes. )laro, significa que mis botones no

siempre tienen la fle2ibilidad que me gustaría, pero me ahorra bastante tiempo de creaciónpor que ya no tengo que hacer docenas de pequeños botones.


6/17

!. "ipograf#a

El te2to 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'

– &pciones de letras 5 los diferentes tipos de letras dicen cosas diferentes sobre un diseño.

lgunas lucen modernas, algunas lucenRetro. seg/rate de que est!s utilizando la

herramienta adecuada para el traba#o.– Aamaño de letras 5 ños atr!s era tendencia tener te2to realmente chiquito. elizmente, en

estos días la gente ha empezado a darse cuenta de que el te2to est! hecho para leerse, no

solo para observarse. seg/rate de que 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 5 )omo lo discutimos anteriormente, el espacio entre líneas y le#os de otros

ob#etos es de importante consideración. 0ero también deberías de pensar en el espaciado

entre letras, aunque en =nternet esto es de importancia menor, ya que no se tiene mucho

control sobre ello.

– nchura de las líneas. 5 Do hay una regla establecida, pero generalmente las líneas de tute2to no deberían ser tan largas. 9ientras m!s largas son, m!s difíciles son de leer. 0equeñas

)olumnas funcionan mucho me#or -así como ponen sus te2tos los periódicos.

– )olor. 5 uno de mis peores h!bitos es poner te2to de ba#o contraste. 6e ve bonito, pero no se

lee bien desafortunadamente. un así, parece que lo hago con cada diseño de "eb que he

creado, ts% ts% ts%.

– 0arrafeando . 5 antes de que empezara a diseñar, adoraba #ustificar el te2to en todo. 3o

hacía para que tuviera bonito bordeado en cada lado de mis p!rrafos. 1esafortunadamente,

el te2to #ustificado tiende a crear espacios e2traños entre las palabras donde ya han sido

auto;espaciadas. Esto no es bueno para tu o#o cuando est!s leyendo, así que pega el


7/17

alineamiento hacia la izquierda a menos que tengas un cuerpo de te2to m!gico que haga el

espaciado perfecto.

$ .%sa&ilidad

El diseño Web no solo se trata de fotos bonitas. )on la tanta información e interacción que

hay que efectuar en un "eb 6ite, es importante que t/, el diseñador, lo proveas para todo.

Eso significa que hagas tu "eb 6ite utilizable.

– peg!ndose a los est!ndares.

>ay un cierto tipo de cosas que la gente espera, y no d!rselas provoca confusión. 0ore#emplo, si el te2to esta subrayado, tu esperas que sea un lin%. >aciéndolo de otra manera no

es una buena pr!ctica de usabilidad. 6eguro, puedes romper con algunos convencionalismos,

pero la mayor parte de tu Website debería de hacer lo que la gente espera que hagaF

– 0iensa sobre lo que los usuarios van a hacer.

>acer prototipos es una herramienta com/n usada en diseño para de hecho (probar* un

diseño. Esto se hace por que con frecuencia cuando utilizas un diseño, llegas a notar

pequeñas cosas que pueden hacer una gran diferencia. 3 tenia un artículo llamado Dunca

uses una advertencia cuando quieras decir deshacer -Glin%H , el cual es un e2celente e#emplo

para pequeñas interfaces decisivas de diseño que pueden hacer de la vida de un usuario un

asco.

– 0iensa en las tareas del usuario.

)uando un usuario entra a tu sitio, 7qué es lo que trata de hacer8 Enlista los diferentes tipos

de tareas que la gente hace en un 6ite, cómo las logran, y qué facilidad quieres darles para

ello. Esto puede significar que haya tareas comunes en tu homepage -por e#emplo, (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. l 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 molestasF

http://alistapart.com/articles/neveruseawarninghttp://alistapart.com/articles/neveruseawarning


8/17

'. lineación

9antener las cosas alineadas es tan importante en el diseño Web como lo es en un diseño deimpresión. Do quiere decir que todo tiene que estar derecho, sino que debes tratar de

mantener las cosas bien colocadas en una p!gina. 3a alineación hace tu diseño m!s ordenado

y digerible, al igual que lo hace ver m!s pulido.

@uiz! también quieras basar tus diseños en una cuadrícula específica. 1ebo admitir que no

hago esto concientemente, aunque obviamente 061A+A6 tiene de hecho una cuadrícula

estructural muy firme. Este año he visto muy pocos artículos sobre cuadrículas como

este Glin%H y este Glin%H . 1e hecho, si est!s interesado en el diseño en cuadrículas, deberías

pasar por designbygrid.com, la casa de todas las cosas cuadriculadas.

. *laridad (Niide+)

9antener nítido tu diseño es s/per importante en el diseño Web. en cuanto a la claridad, se

trata de los pi2eles.

En tu )66 todo va a ser perfecto en cuanto los pi2eles, así que no hay nada de que

preocuparse, pero en 0hoto6hop no es así. 0ara lograr la nitidez tienes que'

– mantén las formas de los límites pegados a los pi2eles. Esto podr! incluir limpiar los límites

manualmente, las líneas y los cuadros de te2to si las est!s creando en 0hoto6hop.

– aseg/rate de que el te2to est! creado usando el comando anti;alistado. 6eguido usa

(Ditidez*.

– asegurarse que el contraste es alto para que los bordes estén claramente definidos.

– sobre;enfatiza los bordes solo un poco para e2agerar el contraste.

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegridhttp://alistapart.com/articles/outsidethegridhttp://alistapart.com/articles/outsidethegridhttp://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegrid


9/17

,. *onsisencia

)onsistencia significa hacer que todo combine. Aamaño de encabezados, tipos de letraescogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de

ilustraciones, fotos escogidas, etc. Aodo deber! basarse en un tema en específico. 0ara hacer

tu diseño coherente entre p!ginas y en la misma p!gina.

9antener tu diseño consistente es lo que te hace un profesional. 3as inconsistencias en un

diseño son como cometer errores ortogr!ficos en un ensayo. 3o /nico que hacen es ba#ar la

percepción de calidad. Do importando cómo luce tu diseño, mantenerlo consistente siempre

har! que se vea bien. =ncluso si es un mal diseño, al menos haz de él un mal diseño

consistente.

3a manera m!s simple de mantener la consistencia es hacer decisiones tempranas y pegarte a

ellas. /n así, con un 6ite grande, las cosas pueden cambiar en el proceso de diseño. )uando

yo diseñé las1en Glin%H por e#emplo, el proceso me llevó meses, y ya para el final, algunas de

mis ideas para los botones y las im!genes habían cambiado, así que tuve que regresar y

revisar las paginas anteriores para que enca#aran perfectamente con las que hice después.

Aener un buen set de )66 también puede ayudar a hacer un diseño consistente. Arata de

definir etiquetas b!sicas como IhBJ -header B y

-paragraph de una manera para hacer que las predeterminadas enca#en perfectamente y te

evites el estar tratando de recordar nombres de clases específicas todo el tiempo.

9 principios para buen diseño Web

04feb09

El diseño Web puede ser decepcionantemente difícil, pues involucra lograr un diseño que sea

usable a la vez que placentero, entrega información y crea marcas, es técnicamente sonoro y

visiblemente coherente.

gregado a esto est! el hecho de que muchos diseñadores "eb son autodidactas, y que el

diseño Web es todavía lo suficientemente nuevo para ser solo un tema aparte en muchasinstituciones de diseño, y que el medio cambia tan frecuentemente como la tecnología

subyacente lo hace.

sí que el día de hoy pongo #untos mis $ principios para un buen diseño Web. Estas son solo

mis opiniones y traté de poner lin%s con m!s lectura a cada uno de los temas para que no solo

escuchen mi opinión. &bviamente, tengo muchas cl!usulas' las reglas est!n hechas para

romperse, diferentes tipos de diseño funcionan diferente, y yo no siempre tomo mis propios

conse#os. sí que por favor lean esto de la manera en que lleva su intención' como algunas

observaciones que estoy compartiendo.

()apture the valley* usa barras de colores para guiar tu o#o entre las secciones de aba#ohacia arriba.

http://flashden.net/http://flashden.net/


10/17

1. Preferencia (Guiando el ojo)

El buen diseño Web, quiz! aun m!s que otro tipo de diseño, se trata de información. +na de

las m!s grandes herramientas en tu arsenal para hacer esto es la preferencia. )uando navega

por un buen diseño, el usuario debería ser guiado en la pantalla por el diseñador. o llamo a

esto preferencia, y se trata de la carga visual que tienen las diferentes partes de tu diseño.

+n simple e#emplo de preferencia es que en la mayoría de los sitios, la primer cosa que ves esel 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.

0ero la preferencia debería ir m!s all!. 1eberías dirigir los o#os del usuario mediante una

secuencia de pasos. 0or e#emplo, t/ tal vez quieras que tu usuario vaya del logo a una

e2presión posicional primaria, seguida de una imagen enérgica -para darle personalidad al

sitio, luego al te2to principal, con navegación y sidebar tomando una posición secundaria en

la secuencia.

3o que tu usuario debería estar buscando depende de que t/, el diseñador Web, lo averig4es.

0ara lograr la preferencia tienes muchas herramientas a tu disposición'

– Posición 5 1onde algo en la p!gina claramente influencia en qué orden el usuario lo ve.

– Color 5 +sando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde

mirar.

– Contraste 5 6er diferente es lo que hace a las cosas resaltar, mientras que siendo similares

las hace secundarias.

– Tamaño 5 3o grande toma preferencia sobre lo pequeño -a menos que todo sea grande, en

cuyo caso lo pequeño quiz! sobresaldr! gracias al contraste


11/17

– Elementos de diseño 5 6i hay una gran flecha apuntando algo, adivina 7hacia dónde mirar!

el usuario8

(9arius* tiene un sitio muy limpio, muy sencillo con bastante espacio.

2 Espacio

)uando yo empecé a diseñar quería llenar todo espacio disponible con cosas. 3os espacios

vacíos se veían desperdiciados. de hecho lo opuesto es verdad.

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íneas

)uando t/ presentas un te2to, el espacio entre líneas afecta directamente a lo legible que

aparece. 9uy poco espacio hace f!cil que tu o#o caiga de una línea a otra en lugar de la

siguiente: demasiado espacio significa que cuando terminas una línea de te2to y vayas a la

siguiente, la pierdas de vista. sí que necesitas encontrar una medida media feliz. 0uedes

controlar el espaciado en )66 con el selector (line;height* -interlineado.


12/17

técnicamente llamado leading -pronunciado ledding, que se deriva del proceso que las

impresoras usaban para separar las líneas de te2to en los vie#os tiempos, poniendo barras de

plomo entre las líneas.

– Relleno

ay e2cepciones, por supuesto, en particular si el te2to es alg/n tipo de encabezado?gr!fico

o tu nombre es 1avid )arson. 0ero como regla general, poner espacio entre el te2to y el resto

del mundo lo hace definitivamente m!s legible y placentero.

– Espacio en blanco

ntes 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 -o espacios negativos como a veces se le llama. El

espacio en blanco es usado para dar balance y contraste a una p!gina. 9ucho espacio en

blanco tiende a hacer que las cosas parezcan m!s elegantes y de lu#o, así que como e#emplo,si vas a un sitio costoso de arquitectura , casi siempre ves mucho espacio. 6i quieres aprender

a usar espacios en blanco de forma efectiva, consigue una revista y revisa como est!n

presentadas las paginas publicitarias. 3os comerciales para grandes marcas de relo#es y

automóviles tienden a tener mucho espacio vacío usado como elemento de diseño.

3. Navegación

+na de las e2periencias m!s frustrantes que puedes tener en un Web 6ite es cuando no sabes

en donde est!s ni para dónde vas. @uiero pensar que para la mayoría de los diseñadores Web,

la navegación es un concepto que hemos pasterizado, pero aun encuentro algunos malos

e#emplos por ahí. >ay dos aspectos sobre la navegación que hay que tener en cuenta'

Navegación – ¿Hacia dónde puedes ir?


13/17

>ay algunas reglas con sentido com/n que hay que recordar. 3os botones para navegar en el

sitio deberían ser f!ciles de encontrar 5 hacia la parte de arriba de la p!gina y f!ciles de

identificar. 1eberían verse como botones de navegación y estar bien descritos. El te2to de un

botón debe estar bien claro en cuanto hacia donde te est! llevando. parte del sentido

com/n, es importante también hacer usable la navegación. 0or e#emplo, si tienes un sub;

men/ desplegable, es importante garantizarle a la persona que puede ir hacia los ob#etos delsubmen/ sin perder lo desplegable. l igual que lo es cambiar el color de la imagen al pasar el

9ouse por encima: es una e2celente reacción para el usuario.

Orientación – ¿Dónde estas ahora?

>ay muchísimas maneras en las que puedes orientar a un usuario, así que no hay e2cusa para

no hacerlo. 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 consruir.

3a vida se ha vuelto m!s f!cil desde que los diseñadores Web hicieron la transición a plantillas

-layouts )66, pero incluso ahora es importante pensar acerca de cómo vas a construir tu sitio

si aun est!s en 0hoto6hop. )onsidera cosas como'

– 71e veras puede hacerse8

0uedes haber escogido un tipo de letra sorprendente para la copia del cuerpo de tu site, pero

7Es un tipo de letra est!ndar en >A938 @uiz! tienes un diseño que se ve hermoso, pero su

tamaño es de BBCCp2 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 "eb deberían incluso hacer sitios completos, al menos unas cuantas

veces.

– 7@ué pasa cuando una pantalla cambia de tamaño8

7Decesitas fondos repetitivos8 7)ómo funcionar!n8 7El diseño es alineado a la izquierda o

centrado8

– 7lgo de lo que est!s haciendo es técnicamente difícil8

=ncluso con el posicionamiento del )66, algunas cosas como el alineamiento vertical son un

poco dolorosas y algunas veces me#or evitarlas.

– 70odrían algunos pequeños cambios en tu diseño simplificar enormemente cómo lo

construiste8

veces, mover un ob#eto en el diseño puede hacer una gran diferencia en cómo tendr!s que

codificar tu )66 después. En particular, cuando los elementos de un diseño se cruzan entre

ellos le añade un poco de comple#idad al proyecto.. así que si tu diseño tiene, digamos tres

elementos y cada elemento est! completamente separado de los otros, ser! muy f!cil de

crear. 0or otro lado, si los tres se superponen uno con otro, quiz! sea f!cil también, pero


14/17

probablemente ser! un poco m!s complicado. 1ebes encontrar un balance entre lo que se ve

bien y los pequeños cambios que puedan simplificar tu creación.

– 0ara sitios grandes, particularmente, 7puedes simplificar las cosas8

>ubo una vez que solía hacer botones con im!genes para mis sites. sí, si había un botón de

do"nload, por e#emplo, lo hacia tipo imagen. En el /ltimo año m!s o menos, he cambiado a

usar )66 para hacer mis botones y nunca m!s como antes. )laro, significa que mis botones no

siempre tienen la fle2ibilidad que me gustaría, pero me ahorra bastante tiempo de creación

por que ya no tengo que hacer docenas de pequeños botones.

!. "ipograf#a

El te2to 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'

– &pciones de letras 5 los diferentes tipos de letras dicen cosas diferentes sobre un diseño.

lgunas lucen modernas, algunas lucenRetro. seg/rate de que est!s utilizando la

herramienta adecuada para el traba#o.

– Aamaño de letras 5 ños atr!s era tendencia tener te2to realmente chiquito. elizmente, en

estos días la gente ha empezado a darse cuenta de que el te2to est! hecho para leerse, no

solo para observarse. seg/rate de que 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 5 )omo lo discutimos anteriormente, el espacio entre líneas y le#os de otros

ob#etos es de importante consideración. 0ero también deberías de pensar en el espaciado

entre letras, aunque en =nternet esto es de importancia menor, ya que no se tiene mucho

control sobre ello.

– nchura de las líneas. 5 Do hay una regla establecida, pero generalmente las líneas de tu

te2to no deberían ser tan largas. 9ientras m!s largas son, m!s difíciles son de leer. 0equeñas

)olumnas funcionan mucho me#or -así como ponen sus te2tos los periódicos.


15/17

– )olor. 5 uno de mis peores h!bitos es poner te2to de ba#o contraste. 6e ve bonito, pero no se

lee bien desafortunadamente. un así, parece que lo hago con cada diseño de "eb que he

creado, ts% ts% ts%.

– 0arrafeando . 5 antes de que empezara a diseñar, adoraba #ustificar el te2to en todo. 3o

hacía para que tuviera bonito bordeado en cada lado de mis p!rrafos. 1esafortunadamente,el te2to #ustificado tiende a crear espacios e2traños entre las palabras donde ya han sido

auto;espaciadas. Esto no es bueno para tu o#o cuando est!s leyendo, así que pega el

alineamiento hacia la izquierda a menos que tengas un cuerpo de te2to m!gico que haga el

espaciado perfecto.

$ .%sa&ilidad

El diseño Web no solo se trata de fotos bonitas. )on la tanta información e interacción que

hay que efectuar en un "eb 6ite, es importante que t/, el diseñador, lo proveas para todo.

Eso significa que hagas tu "eb 6ite utilizable.

– peg!ndose a los est!ndares.

>ay un cierto tipo de cosas que la gente espera, y no d!rselas provoca confusión. 0or

e#emplo, si el te2to esta subrayado, tu esperas que sea un lin%. >aciéndolo de otra manera no

es una buena pr!ctica de usabilidad. 6eguro, puedes romper con algunos convencionalismos,

pero la mayor parte de tu Website debería de hacer lo que la gente espera que hagaF

– 0iensa sobre lo que los usuarios van a hacer.

>acer prototipos es una herramienta com/n usada en diseño para de hecho (probar* un

diseño. Esto se hace por que con frecuencia cuando utilizas un diseño, llegas a notar

pequeñas cosas que pueden hacer una gran diferencia. 3 tenia un artículo llamado Dunca

uses una advertencia cuando quieras decir deshacer -Glin%H , el cual es un e2celente e#emplo

para pequeñas interfaces decisivas de diseño que pueden hacer de la vida de un usuario un

asco.

– 0iensa en las tareas del usuario.

)uando un usuario entra a tu sitio, 7qué es lo que trata de hacer8 Enlista los diferentes tiposde tareas que la gente hace en un 6ite, cómo las logran, y qué facilidad quieres darles para

http://alistapart.com/articles/neveruseawarninghttp://alistapart.com/articles/neveruseawarning


16/17

ello. Esto puede significar que haya tareas comunes en tu homepage -por e#emplo, (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. l 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 molestasF

'. lineación

9antener las cosas alineadas es tan importante en el diseño Web como lo es en un diseño de

impresión. Do quiere decir que todo tiene que estar derecho, sino que debes tratar de

mantener las cosas bien colocadas en una p!gina. 3a alineación hace tu diseño m!s ordenado

y digerible, al igual que lo hace ver m!s pulido.

@uiz! también quieras basar tus diseños en una cuadrícula específica. 1ebo admitir que no

hago esto concientemente, aunque obviamente 061A+A6 tiene de hecho una cuadrícula

estructural muy firme. Este año he visto muy pocos artículos sobre cuadrículas como

este Glin%H y este Glin%H . 1e hecho, si est!s interesado en el diseño en cuadrículas, deberías

pasar por designbygrid.com, la casa de todas las cosas cuadriculadas.

. *laridad (Niide+)

9antener nítido tu diseño es s/per importante en el diseño Web. en cuanto a la claridad, se

trata de los pi2eles.

En tu )66 todo va a ser perfecto en cuanto los pi2eles, así que no hay nada de que

preocuparse, pero en 0hoto6hop no es así. 0ara lograr la nitidez tienes que'

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegridhttp://alistapart.com/articles/outsidethegridhttp://alistapart.com/articles/outsidethegridhttp://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegrid


17/17

– mantén las formas de los límites pegados a los pi2eles. Esto podr! incluir limpiar los límites

manualmente, las líneas y los cuadros de te2to si las est!s creando en 0hoto6hop.

– aseg/rate de que el te2to est! creado usando el comando anti;alistado. 6eguido usa

(Ditidez*.

– asegurarse que el contraste es alto para que los bordes estén claramente definidos.

– sobre;enfatiza los bordes solo un poco para e2agerar el contraste.

,. *onsisencia

)onsistencia significa hacer que todo combine. Aamaño de encabezados, tipos de letra

escogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de

ilustraciones, fotos escogidas, etc. Aodo deber! basarse en un tema en específico. 0ara hacer

tu diseño coherente entre p!ginas y en la misma p!gina.

9antener tu diseño consistente es lo que te hace un profesional. 3as inconsistencias en un

diseño son como cometer errores ortogr!ficos en un ensayo. 3o /nico que hacen es ba#ar la

percepción de calidad. Do importando cómo luce tu diseño, mantenerlo consistente siempre

har! que se vea bien. =ncluso si es un mal diseño, al menos haz de él un mal diseño

consistente.

3a manera m!s simple de mantener la consistencia es hacer decisiones tempranas y pegarte a

ellas. /n así, con un 6ite grande, las cosas pueden cambiar en el proceso de diseño. )uando

yo diseñé las1en Glin%H por e#emplo, el proceso me llevó meses, y ya para el final, algunas de

mis ideas para los botones y las im!genes habían cambiado, así que tuve que regresar y

revisar las paginas anteriores para que enca#aran perfectamente con las que hice después.

Aener un buen set de )66 también puede ayudar a hacer un diseño consistente. Arata de

definir etiquetas b!sicas como IhBJ -header B y

-paragraph de una manera para hacer que las predeterminadas enca#en perfectamente y te

evites el estar tratando de recordar nombres de clases específicas todo el tiempo.
http://flashden.net/http://flashden.net/

9 Principios Para Buen Diseño

Documents

Transcript of 9 Principios Para Buen Diseño