Advertisement
  1. Design & Illustration
  2. Designing
Design

9 principios esenciales para el buen diseño web

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Silvia Lohrmann (you can also view the original English article)

El diseño web puede ser engañosamente difícil, ya que implica lograr un diseño que sea usable y agradable, que ofrezca información y construya marca, que sea técnicamente sólido y visualmente coherente.

A ello se suma el hecho de que muchos diseñadores web (me incluyo) son autodidactas, que el diseño web sigue siendo lo suficientemente nuevo como para ser solo un tema secundario en muchas instituciones de diseño, y que el medio cambia con tanta frecuencia como la tecnología subyacente.

Por eso hoy he compilado mis 9 principios para el buen diseño web. Estas son tan solo mis opiniones y he intentado enlazar a otros artículos sobre el tema para que no escuchen solo mi voz. Obviamente, tengo muchos descargos de responsabilidad que hacer: las reglas están para romperse, diferentes tipos de diseños funcionan de diferente manera, y no siempre estoy a la altura de mis propios consejos. Así que, por favor, lee estas reglas según la intención con que fueron escritas: como observaciones que estoy compartiendo...



Capture the Valley utiliza barras de color para guiar el ojo a través de las secciones de arriba hacia abajo...

1. Precedencia (Guiando el ojo)

El buen diseño web, tal vez incluso más que otro tipo de diseño, pone el foco en la información. Una de las herramientas más importantes en tu arsenal para hacer esto es la precedencia. Cuando se navega por un buen diseño, el usuario debe ser conducido por la pantalla por el diseñador. Llamo a esto precedencia, y es acerca de cuánto peso visual tienen las diferentes partes del diseño.

Un ejemplo simple de precedencia es que, en la mayoría de los sitios, lo primero que ves es el logo. Esto es a menudo porque es grande y está ubicado en lo que estudios han demostrado que es el primer lugar al que la gente mira (la parte superior izquierda). Esto es bueno, ya que probablemente deseas que el usuario sepa inmediatamente qué sitio está viendo.

Pero la precedencia debe ir mucho más lejos. Debes dirigir los ojos del usuario a través de una secuencia de pasos. Por ejemplo, puedes desear que tu usuario pase del logo/marca a un enunciado de posicionamiento principal, luego a una imagen pregnante (que le dé personalidad al sitio), luego al cuerpo principal del texto, y que el menú de navegación y una barra lateral tomen una posición secundaria en la secuencia.

Lo que tu usuario esté mirando depende de tí, que eres el diseñador.

Para lograr la precedencia tienes muchas herramientas a tu disposición:

  • Posición: Dónde algo está en una página influye claramente en qué orden lo ve el usuario.
  • Color: Utilizar colores audaces y sutiles es una forma sencilla de decir al usuario dónde buscar.
  • Contraste: Ser diferentes hace que las cosas resalten, mientras que ser iguales las hace secundarias.
  • Tamaño: Lo grande toma precedencia sobre la pequeño (a menos que todo sea grande, en cuyo caso lo pequeño podría destacar gracias al contraste)
  • Elementos de diseño: si hay una flecha gigante apuntando a algo, ¿adivina hacia dónde mirará el usuario?


Para seguir leyendo:

Puedes leer más de mis reflexiones sobre precedencia en un artículo anterior de Psdtuts+ llamado Elements of Great Web Design - the polish (Elementos del gran diseño web: el lustre). Joshua David McClurg-Genevese discute principios del buen diseño web y del diseño en general en Digital-Web. Joshua también tiene el nombre más largo que he visto :-)



Marius tiene un sitio muy limpio, muy simple, con un montón de espacio

2. Espaciado

Cuando empecé a diseñar quería llenar cada espacio disponible con algo. El espacio vacío parecía un desperdicio. En realidad es todo lo contrario.

El espacio hace que las cosas sean más claras. En el diseño web hay tres aspectos del espacio a considerar:

  • El espacio entre líneas
    Cuando se compone el texto, el espacio entre las líneas afecta directamente la legibilidad. Muy poco espacio puede hacer que el ojo se las confunda, pero con demasiado espacio puede perderse al llegar al final de una línea de texto e ir a la siguiente. Lo que necesitas es encontrar un término medio. Puedes controlar el interlineado en CSS con el selector  'line-height'. Usualmente encuentro que el valor por defecto suele generar muy poco espacio. El interlineado se llama técnicamente leading (pronunciado lédin), que se deriva del proceso que los impresores utilizaban para separar las líneas de texto antaño, colocando barras de plomo ('lead', en inglés) entre las líneas.
  • Padding
    En general el texto nunca debe tocar otros elementos. Las imágenes, por ejemplo, nunca tienen que estar tocando el texto, tampoco tienen que hacerlo los bordes ni las tablas.
    El padding es el espacio entre los elementos y el texto. La regla general aquí es que siempre debe haber espacio entre ellos. Hay excepciones por supuesto, en particular si el texto es una especie de gráfico/título o tu nombre es David Carson :-) Pero como regla general, poner espacio entre el texto y el resto del mundo lo hace infinitamente más legible y agradable.
  • Espacio en blanco
    En primer lugar, el espacio en blanco no necesita ser blanco. El término se refiere simplemente al espacio vacío en una página (o espacio negativo, como a veces se le llama). El espacio en blanco se utiliza para dar balance, proporción y contraste a una página. Bastante espacio en blanco tiende a hacer que las cosas parezcan más elegantes y lujosas, por ejemplo si vas a un sitio web de arquitectos caros, casi siempre verás mucho espacio. Si quieres aprender a utilizar los espacios en blanco con eficacia, ojea una revista y mira cómo están diseñados los anuncios. Los anuncios de grandes marcas de relojes, coches y similares suelen tener mucho espacio vacío utilizado como un elemento de diseño.


Para seguir leyendo:

En WebDesignFromScratch hay un gran artículo llamado Web 2.0 how-to design guide (La guía de cómo hacer diseño Web 2.0), que habla de la simplicidad, un concepto que hace mucho uso del espacio. ¡También tiene un montón de otras cosas útiles!



Noodlebox utiliza muy bien los estados encendido/apagado en su navegación para mantener al usuario orientado.

3. Navegación

Una de las experiencias más frustrantes que puedes tener en un sitio web es ser incapaz de saber a dónde ir o en dónde estás. Me gustaría pensar que la navegación es un concepto que hemos conseguido dominar la mayoría de los diseñadores web, pero todavía pueden encontrarse por ahí algunos ejemplos bastante malos. Hay dos aspectos de la navegación a tener en cuenta:

Navegación: ¿Adónde puedes ir?
Existen algunas reglas de sentido común para recordar. Los botones para desplazarse por un sitio web deben ser fáciles de encontrar —hacia la parte superior de la página— y fáciles de identificar. Deben parecer botones de navegación y estar bien descritos. El texto de un botón debe ser muy claro en cuanto a dónde te lleva. Aparte del sentido común, también es importante hacer a la navegación usable. Por ejemplo, si haces un menú rollover, asegurarte de que una persona pueda llegar a los elementos del submenú sin perder el rollover es importante. También cambiar el color o la imagen cuando está activo el rollover es excelente para el usuario.

Orientación: ¿Dónde estás ahora?
Hay muchas maneras de orientar a un usuario, por lo que no hay excusa para no hacerlo. En sitios pequeños, podría ser sólo cuestión de utilizar un título grande o una versión apagada del botón apropiado en el menú. En un sitio más grande, podrías hacer uso de la miga de pan (del inglés 'breadcrumb'), de subtítulos y, para los realmente perdidos, de un mapa del sitio .


Para seguir leyendo:

SmashingMagazine tiene una selección de estilos de navegación basados en CSS que son agradables de recorrer, ¡y el #3 es uno de los míos! A List Apart también tiene un buen artículo sobre orientación llamado Where Am I? (¿En dónde estoy?).


4. Diseña para construir

La vida se ha vuelto mucho más fácil desde que los diseñadores web cambiaron a diseños CSS, pero incluso hoy sigue siendo importante pensar cómo vas a construir un sitio web cuando estás todavía en Photoshop. Ten en cuenta cosas como:

  • ¿Realmente puede hacerse?
    Puedes haber escogido una tipografía increíble para el cuerpo del texto, pero ¿es realmente una fuente estándar de HTML? Puede que hayas hecho un diseño hermoso, pero es de 1100 px de ancho y hará que a la mayoría de los usuarios les aparezca una barra de desplazamiento horizontal. Es importante saber lo que puede y no puede hacerse, por eso creo que todos los diseñadores web deben también construir sitios web, por lo menos algunas veces.
  • ¿Qué pasa cuando una pantalla cambia de tamaño?
    ¿Necesitas un fondo que se repita? ¿Cómo funcionará? ¿El diseño será centrado o alineado a la izquierda?
  • ¿Estás haciendo algo que es técnicamente difícil?
    Incluso con posicionamiento CSS, algunas cosas como la alineación vertical siguen siendo complicadas y a veces es mejor evitarlas.
  • ¿Podrían pequeños cambios en tu diseño simplificar enormemente cómo lo construyes?
    A veces, mover un objeto en un diseño puede hacer una gran diferencia en cómo tienes que codificar tu CSS más adelante. En particular, cuando los elementos de un diseño se solapan, agregan un poco de complejidad a la construcción. Así que si tu diseño tiene, digamos, tres elementos que están totalmente separados entre sí, sería muy fácil de construir. Por otro lado, si los tres se superponen unos a otros, puede todavía ser fácil, pero probablemente será un poco más complicado. Lo mejor es encontrar un equilibrio entre lo que se ve bien y pequeños cambios que pueden simplificar la construcción.
  • Para sitios grandes en particular, ¿se pueden simplificar las cosas?
    Hubo un tiempo en el que hacía botones de imagen para mis sitios. Así que si había un botón de descarga, por ejemplo, haría una pequeña imagen de descargar. En los últimos años me pasé a usar CSS para hacer mis botones y nunca me arrepentí. Sin duda, significa que mis botones no siempre tienen la flexibilidad que podría desear, pero el ahorro en tiempo de construcción por no tener que hacer montones de imágenes de botoncitos es enorme.


Si alguien sabe de buena tipografía es iLoveTypography!

5. Tipografía

El texto es el elemento más común del diseño, por lo que a nadie sorprende que se le dedique mucho tiempo. Es importante tener en cuenta cosas como:

  • Opciones de fuente: Diferentes tipos de fuentes dicen diferentes cosas acerca de un diseño. Algunas son modernas, otras son retro. Asegúrate de que estás utilizando la herramienta correcta para el trabajo.
  • Tamaños de fuentes: Hace años estaba de moda poner texto muy pequeño. Afortunadamente, estos días la gente ha comenzado a darse cuenta de que el texto está para a ser leído, no sólo mirado. Asegúrate de que los tamaños de los textos sean consistentes y suficientemente grandes como para ser leídos, y proporcionados para que los títulos y subtítulos se destaquen apropiadamente.
  • Espaciado: Como hemos comentado anteriormente, es importante considerar el espacio entre las líneas, y entre el texto y otros objetos. También debes pensar en el espacio entre letras, aunque en la web es de menor importancia, porque no se tiene mucho control.
  • Longitud de la línea: No hay normas inmutables, pero en general las líneas de texto no deben ser demasiado largas. Cuanto más lo son, más difícil es la lectura. Es mucho mejor colocar pequeñas columnas de texto (piensa en cómo se compone el texto en un periódico).
  • Color: Uno de mis peores hábitos es diseñar texto con poco contraste. Se ve bien pero, por desgracia, no se lee tan bien. Aún así, desafortunadamente, lo sigo haciendo en cada sitio web que diseño.
  • División de párrafos: Antes de empezar a diseñar, me encantaba justificar el texto siempre. Hacía que los bordes a ambos lados de mis párrafos quedaran prolijos. Por desgracia, el texto justificado tiende a crear espacios extraños entre palabras. Al leer, esto no es agradable al ojo. Es mejor alinear siempre a la izquierda, a menos que tengas un cuerpo de texto que quede espaciado perfectamente por arte de magia.


Para seguir leyendo:

Nick La en WebDesignerWall tiene un gran artículo sobre tipografía para web llamado Typographic Contrast and Flow (Contraste tipográfico y flujo).



Happycog conoce la usabilidad por dentro, y su propio sitio es simple y fácil de usar.

6. Usabilidad

El diseño web no sólo se trata de imágenes bonitas. Con tanta información y tanta interacción a ser efectuada en un sitio web, es importante que tú, el diseñador, estés a la altura. Esto quiere decir que el diseño de tu sitio web debe ser usable.

Ya hemos analizado algunos aspectos de la usabilidad: navegación, precedencia y texto. Aquí están otros tres más importantes:

  • Adhesión a estándares
    Hay ciertas cosas que la gente espera y no darlas causa confusión. Por ejemplo, si el texto tiene un subrayado, esperas que sea un enlace. Hacerlo de otra forma no es una buena práctica de usabilidad. Seguro, puedes romper algunas convenciones, ¡pero la mayor parte de tu sitio web debe hacer exactamente lo que la gente espera que haga!
  • Piensa en lo que los usuarios harán realmente
    El prototipado es una herramienta muy común que se utiliza para 'probar' un diseño. Esto se hace porque a menudo cuando se utiliza un diseño en la vida real, se notan pequeñas cosas que hacen una gran diferencia. ALA tenía un artículo que tiempo atrás se llamaba Never Use a Warning When You Mean Undo (Nunca utilices una advertencia cuando quieres decir deshacer), que es un excelente ejemplo de una decisión de diseño de interfaz que puede hacer la vida miserable para el usuario.
  • Piensa en las tareas del usuario
    ¿Cuando un usuario llega a tu sitio, qué es lo que realmente está tratando de hacer? Haz una lista de los diferentes tipos de tareas que las personas podrían hacer en un sitio, cómo consiguen hacerlas y cuánto quieres facilitárselas. Esto podría significar tener tareas muy comunes en tu página web (por ejemplo, 'ir de compras', 'conoce lo que hacemos', etc.) o puede significar asegurarse de tener un buscador siempre accesible. Al final, tu diseño web es una herramienta para que las personas la utilicen, ¡y a la gente no le gusta usar herramientas molestas!


Para seguir leyendo:

AListApart tiene un montón de artículos sobre usabilidad web.



Electric pulp logra parecer desprolija, pero si te fijas bien te das cuenta de que hay una grilla rígida y que las cosas están bien alineadas.

7. Alineación

Mantener las cosas alineadas es tan importante en el diseño web como en el diseño para impresión. Eso no quiere decir que todo debe estar en una línea recta, sino que se debe tratar de mantener las cosas consistentemente ubicadas en la página. La alineación hace tu diseño más ordenado y digerible, al igual que lo hace parecer más pulido.

También puedes querer basar tus diseños en una grilla específica. Debo admitir que no hago esto conscientemente, aunque obviamente un sitio como Psdtuts+ en realidad tiene una estructura de grilla muy firme. Este año he visto un par de artículos muy buenos sobre el diseño de grillas incluyendo el de SmashingMagazine, Designing with Grid-Based Approach (Diseñar con el enfoque basado en la grilla), y el de A List Apart, Thinking Outside The Grid (Pensar fuera la grilla). De hecho, si estás interesado en el diseño de grillas, definitivamente debes visitar la muy bien nombrada DesignByGrid.com, hogar de todas las cosas relacionadas con la grilla.



El sitio ExpressionEngine es el alma de la claridad. Todo es neto y limpio.

8. Claridad (nitidez)

Mantener tu diseño nítido y claro es super importante en el diseño web. Y cuando hablamos de claridad, hablamos de los píxeles.

En tu CSS, todos los píxeles van a estar perfectos por lo que no hay nada de que preocuparse, pero en Photoshop no es tan así. Para lograr un diseño nítido tienes que:

  • Mantener los bordes de las formas ajustados a píxeles. Esto podría incluir limpiar las formas, líneas y recuadros manualmente si estás creándolos en Photoshop.
  • Asegurarte de que cualquier texto sea creado usando anti-aliasing. Yo uso mucho 'Sharp'.
  • Asegurarte de que el contraste esté alto para que los bordes estén claramente definidos.
  • Exagerar un poco los bordes para enfatizar el contraste.


Para seguir leyendo:

Escribí un poco más sobre la claridad en Elements of Great Web Design - the polish (Elementos del gran diseño web: el lustre). Me he dado cuenta de que los que diseñan para impresión y luego se pasan al diseño web, en particular, no piensan en píxeles, pero realmente es vital.



Veerle hace un gran trabajo de mantener hasta el más mínimo detalle consistente en todas los páginas.

9. Consistencia

La consistencia es hacer que todo coincida. Tamaños de títulos, tipografías, color, estilos de botón, espaciado, elementos de diseño, estilos de Ilustración, elecciones de fotografías, etc. Todo debe pertenecer a un mismo tema para hacer que tu diseño sea coherente a través de las páginas y en la misma página.

Mantener tu diseño consistente es ser profesional. Las inconsistencias en un diseño son como faltas de ortografía en un ensayo. Disminuyen la percepción de calidad. Cualquiera sea tu diseño, manteniéndolo consistente subirá de nivel. Incluso si es un mal diseño, al menos que sea un diseño malo consistente.

La forma más sencilla de mantener la consistencia es tomar decisiones tempranas y adherirse a ellas. Con un sitio muy grande, sin embargo, las cosas pueden cambiar en el proceso de diseño. Cuando diseñé FlashDen, por ejemplo, el proceso tomó meses, y al final habían cambiado algunas de mis ideas para botones e imágenes, así que tuve que volver y revisar las páginas anteriores para que coincidieran con las últimas.

También, tener un buen conjunto de hojas de estilo CSS puede hacer mucho para que un diseño sea consistente. Trata de definir etiquetas de base como <h1> y <p> de tal manera que sus valores por defecto emparejen adecuadamente, evitando así tener que recordar nombres de clase específicos todo el tiempo.


Para seguir leyendo:

El artículo de ThinkVitamin, How CRAP is your design? (¿Cuán malo es tu diseño?), habla de lo importante que es la repetición al bajar la página. El artículo está escrito por Mike Rundle, quien diseña 9rules, ¡por lo que sabrás que es digno de leerse!

¡Obtén mi libro!

¿Disfrutaste de este artículo? Acabo de terminar un libro sobre freelancing que puedes adquirir en línea como un ebook. Sigue para obtener más información sobre cómo ser un Rockstar Freelancer.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.