Errores comunes en el diseño web

A los usuarios les resulta más fácil digerir la información si está agrupada en bloques lógicos. Ajuste el relleno a 120-80 píxeles y separe los bloques de texto utilizando fondos de color.

Los bloques lógicos deben ir rodeados de espacios del mismo tamaño. De lo contrario, la página parecerá desordenada y los usuarios no prestarán la misma atención a cada sección.

Para evitar que las partes lógicas se mezclen, manténgalas separadas e inserte un gran espacio (al menos 120 píxeles) entre ellas.

Debe haber suficiente contraste entre el texto y el fondo. Para que el texto destaque, coloque un filtro de contraste sobre la imagen. El negro es un color popular, pero también puedes utilizar colores vivos y mezclarlos y combinarlos.

Otra opción es utilizar una imagen contrastada desde el principio y colocar el texto encima de una sección oscura de una fotografía.

Demasiados estilos tipográficos y de diseño en una página hacen que parezca poco profesional y difícil de leer. Para evitarlo, limítese a un único tipo de letra y dos opciones de peso. Por ejemplo, normal y negrita.

Evite resaltar con colores los elementos estrechos de la página. No queda bien. Por ejemplo, los títulos ya están bien marcados, gracias a su tamaño, el peso de la fuente y los rellenos. ¿Quiere destacar un punto concreto de una página? Utilice un fondo de color para todo el bloque, incluidos el encabezamiento y el texto.

Es difícil leer cuando hay mucho texto en columnas estrechas porque los visitantes del sitio web tienen que saltar de una línea a la siguiente. Además, no queda bien. Lo mejor es reducir el número de columnas y acortar el texto. De lo contrario, nadie lo leerá.

Centrar el texto en la página funciona bien cuando hay poco texto; de lo contrario, es difícil que los usuarios naveguen por ella de forma eficiente. Al mismo tiempo, aumente el tamaño de la fuente a partir de 24 píxeles.

Si necesita incluir mucho texto, utilice los bloques con copia de texto plegable (en Tilda, utilice los bloques TX12, TX16N o el botón BF703).

Evita cubrir con texto partes significativas o pequeños detalles de una imagen. De este modo, oscurecerás la imagen y harás que el texto sea ilegible. Prueba distintas posiciones para las líneas de texto, como centradas, alineadas a la izquierda o incluso en vertical.

Para que la jerarquía de la información sea claramente visible en una página, el título de la portada debe ser más grande que el resto de los encabezamientos o, al menos, del mismo tamaño. Esto es especialmente cierto si el encabezamiento es largo, por ejemplo.

El mismo principio se aplica a la jerarquía visual dentro de un bloque lógico. El título debe ser el elemento de diseño más grande de la página, seguido de un subtítulo más pequeño y menos prominente. A continuación, los títulos de las características deben ser notablemente más pequeños que el encabezamiento y tener el mismo grosor. Para las descripciones de las características deben utilizarse los tipos de letra más pequeños.

Esto ayudará a los visitantes del sitio web a distinguir entre la información más importante y la menos importante.

Una imagen o galería a pantalla completa que sigue a un texto parece un bloque separado e independiente. Si añades relleno alrededor de la galería, tanto la copia del texto como las imágenes parecerán un todo lógico, gracias a un fondo compartido.

Un tipo de letra muy grande es perfecto para una frase corta. Si el encabezamiento es largo, utilice una fuente de menor tamaño. Esto facilitará la lectura y dejará espacio suficiente para el resto de elementos de diseño de la página.

Los bordes son necesarios cuando un botón es transparente. Añadir un borde para un botón de color no tiene sentido. No es más que otra característica de diseño sin sentido que sobrecarga una página y dificulta su lectura.

Utilizar demasiados colores en una página es confuso. Además, no queda claro qué partes son más importantes. Uno o dos colores bastan para dar peso visual a lo realmente importante.

La gente visita los sitios web para encontrar soluciones a sus problemas, ¡ayúdeles! Utilice el menú para ayudar a la gente a navegar por el sitio web y encontrar lo que necesitan de forma rápida y sencilla. No les sobrecargue con información excesiva. Basta con tener de 5 a 7 elementos de menú.

Un muro de texto dificulta la comprensión de la lectura. Para facilitar la navegación, divídelo en párrafos o introduce pausas como frases de impacto, citas o una imagen.

Un encabezamiento no debe "colgar" entre capítulos a una distancia similar porque pertenece al párrafo que le sigue. El espacio por encima de un encabezamiento debe ser 2-3 veces mayor que el espacio por debajo. Al mismo tiempo, la distancia bajo un encabezamiento debe ser aproximadamente la misma que el espacio entre párrafos o ligeramente mayor. De este modo, el encabezamiento remitirá visualmente al texto siguiente.

En tipografía, el contraste se utiliza para dividir visualmente distintos niveles de texto y establecer una jerarquía estricta. Los títulos principales deben ser los más destacados de la página; los subtítulos deben ser bastante más pequeños, pero claramente visibles.

Si los bloques tienen el mismo peso, deben tener el mismo aspecto y estar colocados a la misma distancia unos de otros.

Por un lado, la ilustración y su pie de foto forman un todo único, pero se trata de dos elementos separados, y los pies de foto no deben interferir con la imagen.

El subtítulo y el texto que le sigue van juntos, pero si el espacio entre párrafos de un artículo es mayor que el espacio entre el subtítulo y el párrafo siguiente, el artículo parece inconexo.

Los elementos utilizados como expresiones de énfasis, como frases clave o citas, son objetos independientes. Para que destaquen de verdad, colóquelos a 75-120 píxeles del texto principal.

Si desea destacar una frase determinada, sea audaz, haga una frase clave más grande que el texto principal entre 10 y 15 píxeles. Deje que la frase clave destaque realmente sobre el resto del texto.

Si desea destacar una pequeña sección de la página, como la información sobre el autor, sólo tiene que colocar suficiente relleno a su alrededor para crear la impresión de espacio. No coloque esta sección sobre un fondo de color; parecerá fuera de lugar.

Cuando utilice varias imágenes a pantalla completa en una secuencia, evite dejar un espacio entre ellas. El borde seguirá siendo visible, y no hay necesidad de añadir un elemento adicional. Simplemente no añade nada, no tiene sentido.

Los acentos de diseño (como las negritas aquí) funcionan bien cuando hay pocos. Si pones demasiados, entorpecerás la lectura de la página.

El diseño no debe interferir con la legibilidad. Cuantos menos estilos tipográficos haya, mejor se verán los elementos importantes. Basta con destacar los títulos y subtítulos y utilizar el contraste para las frases clave.

El centrado suele aplicarse a los títulos y citas para distinguirlos del resto del texto. Un texto largo alineado al centro es difícil de leer.

Un encabezamiento es un elemento de diseño individual. No debe colocarse demasiado cerca de la imagen que le sigue. Para una combinación ganadora, ponga un relleno no inferior a 60 píxeles y añada un subtítulo: desplegará el contenido de la página y pondrá el énfasis justo donde tiene que estar.

La cursiva se utiliza para enfatizar una palabra o frase corta en el texto. No es tan evidente como la negrita, pero permite enfatizar lo que sea necesario.

No utilice la cursiva en el cuerpo del texto ni en los títulos. Y si se utilizan fuentes sans-serif en el texto, evite por completo la cursiva.

Usted mismo puede detectar este molesto error si hace una pequeña pausa después de editar su página (cambiando el tamaño de la fuente, la alineación o el espaciado) y echa un nuevo vistazo al resultado.