Evita estos 6 errores para crear un buen diseño web

Oh, el Principio de Vilfredo Pareto, qué socorrido.

Cuántos calendarios editoriales ha llenado y en cuántos trainings gratuitos lo ha petado.

Ya sabes, lo de:

El 80% de los resultados se consigue haciendo bien un 20% de ciertas cosas.

O como se diga.

Yo por si acaso lo menciono antes de contar lo que voy a contar.

Quizá es un codigo Da Vinciano y cuando el bot de Google pasa por tu blog y lo encuentra envía la orden de pulsar un botón en sus oficinas de Mountain View para que subas como la espuma.

El caso es que siguiendo estas recomendaciones tendrás, no sé si el 80% de tu diseño guay, pero sí una inmensa parte de un buen diseño web hecho.

6 fallos que te separan de un buen diseño web

No voy a entrar aquí en lo que es la comunicación.

Es decir, lo que tu web luego va a contar, a vender, a publicar en internet.

Esto no va a hacer que tu web sea un éxito y vendas en piloto automático.

Voy a hablar solo de diseño puro y duro, de atractivo visual.

Por supuesto, la tipografía sí que es la gran protagonista de estos briconsejos.

Poner un logotipo con texto no legible

Los logos con texto secundario no me gustan nada de por sí, pero hay ocasiones en que te ves forzado a ponerlo por designios del cliente.

No me gustan porque lo recargan innecesariamente.

ejemplo de logo legible con texto secundario nike para un buen diseño web

A Nike le quedó bien. Pero es difícil ser Nike.

Además, este tipo de logos son como una alarma que dice: «eh, con la marca principal no conseguimos transmitir todo lo que queremos así que te dejamos una aclaración aquí abajo».

Soy muy cabezota con el branding, ya lo sé.

Me refiero a los logos de este tipo:

«ESTA ES MI MARCA»
«Y hago esto y lo otro»

El «esto y lo otro» es una de esas cosas con las que debes tener mucho cuidado, es fácil que se te vaya de las manos.

Para empezar, selecciona y manipula la tipografía hasta que explote de legibilidad:

  • Sin serifs.
  • No handwritten.
  • Pasa el test de: iLlI («i» minúscula/mayúscula, «L» mayúscula/minúscula).
  • Cambia el peso de la letra.
  • Ante la menor duda, muestra el texto en mayúsculas (Nike ya lo hizo).

Y es que, con estas cosas mal, tendrás problemas para que se vea correctamente en resolución Full HD o en móvil.

Así que si tu logo lleva texto secundario, asegúrate de que se lee de forma clara en todo tipo de pantallas.

Un logo que no se visualiza sin esfuerzo de forma inmediata, no es un buen logo.

Poner texto que no se ve bien sobre fondos con imagen

Un oso panda albino se atraganta comiendo bambú cada vez que alguien hace esto.

Es aún más grave si el menú principal de navegación (uno de los dos elementos esenciales en tu sitio web) es el afectado.

Y no solo tienes que tener en cuenta la legibilidad de la tipografía, el estilo, el tamaño y el color en reposo, sino también el hover, el aspecto al pasar el cursor del ratón sobre los enlaces, o el visited.

ejemplo de mala práctica texto sobre imagen buen diseño web
No se ve un carajo, y eso que tiene degradado.

Por lo general, yo evito mostrar texto sobre un fondo con imagen siempre que puedo.

Hablo de una imagen que no es plana, que no es simplemente un color de fondo con algún patrón, sino de una fotografía.

Si lo tengo que hacer, solo lo dejo en la versión final si es perfectamente legible en todas las situaciones o puedo tratar digitalmente la fotografía para añadir un degradado o una capa de color plano.

Un diseño con textos que adolecen de esto, luce muy poco profesional.

Tipografías sin contraste y sin alma

Ya te hablé de lo crucial que es el tratamiento de la tipografía en un diseño.

Trabajar el espaciado en la tipografía, líneas y párrafos es importantísimo.

Pero queda en un segundo plano si has escogido la tipografía sabiamente.

Es decir, puedes no tocar el espaciado y que el diseño quede bien, porque hay tipografías tan buenas que con los valores por defecto ya te ganan el partido.

Pero, ay, escoge bien la tipografía.

Si tu web trata temas de «ciencia ficción» no pongas una tipografía tipo «western».

ejemplo de tipografia monótona a evitar para crear un buen diseño web
Aunque varíes el tamaño, queda monótono si no introduces un contraste.

Estudia muy bien la esencia de la tipografía; si es necesario, averigua la web del creador e investiga en qué se inspiro y qué sensaciones trató de potenciar con ella.

Utiliza los visores de las webs de fuentes, como el de google fonts, para poner a prueba la tipografía en todo tipo de situaciones.

Pero no te confíes.

Una sola tipografía en toda la web es aburrida y monótona.

Crea contrastes entre menús, encabezados y cuerpo de la web.

Por lo general, una tipografía serif realiza esta función de romper y dar contraste en los encabezados; pero hay que saber usarlas muy bien.

Y las de palo seco o sin serif son más multitarea, te valen para encabezados, cuerpos, pies, menús…

Una de las pocas tipografias serif «universales», de las que siempre quedan bien, incluso en el cuerpo de la web, es Georgia.

Georgia ha sido la tipografía más usada en la mayoría de periódicos durante mucho tiempo. Su legibilidad es legendaria.

Georgia es una apuesta segura y una tipografía que me encanta, quizá le dedique su propio post.

Formularios con tamaño desproporcionado

Esto es un fallo muy común, de principiante, o de haber hecho un diseño con prisas y sin atención por el detalle.

Pero me sirve para descansar, por hoy, de las tipografías y no darte más la lata con ellas.

Es algo muy sencillo.

buen formulario web en un buen diseño web
Ejemplo de formulario en monomalista.com.

Cuando insertes un formulario: con código, con un maquetador visual, con un plugin, con un widget… Asegúrate de que el ancho y el alto de cada campo tiene una proporción adecuada.

Es muy típico ver formularios con campos kilómetricos ocupando todo el ancho del cuerpo de la web.

O el campo «Mensaje» del formulario con una altura minúscula.

Queda fatal.

Controla siempre el ancho y el alto del formulario para cada resolución, en función del lugar donde irá colocado, no dejes esos valores al libre albedrío.

No tienen por qué ocupar todo el espacio que has asignado al ancho del contenido.

Los formularios deben estar impecables, pues es una ventana directa de interacción entre el usuario y tú.

O entre los usuarios de tu cliente, y tu cliente.

Abusar de los colores o escogerlos por capricho

Es que me gusta mucho el verde y el rosa, yo era superfan del Oso Amoroso del arco iris y me traen mucha suerte.

Tus motivaciones personales le dan igual al visitante y no vas a tener tiempo para explicárselas.

Y si se las explicas en la web, es hasta probable que salga corriendo.

Lo que va a percibir son colores sin armonía, escogidos al azar y que no cuadran, no transmiten.

Además, tienes que pensar con serenidad cuáles van a ser los colores corporativos de tu producto o servicio.

Haz el siguiente ejercicio.

  • Elige tres colores en armonía y copia sus valores hexadecimales (tienen el formato #212121).
  • El blanco y los tonos de grises no cuentan.
  • Oblígate a construir una sola página (de ventas, de producto, de lo que quieras) que utilice en exclusiva esos tres colores para TODO.
  • Desde el menú hasta los enlaces, los botones, llamadas a la acción, encabezados, fondos, tablas, iconos…
  • Juega con ello y observa cómo queda mejor que si utilizas los 7 colores del arco iris.
  • Cuando hayas acabado, redúcelo a 2 colores.
uso de los colores en un buen diseño web
Trabajar con colores en armonía es esencial.

Con el tiempo, detectarás rápidamente cuándo merece la pena introducir un nuevo color o no en tus diseños.

Solo tienes que dejar volar a tu imaginación al igual que los Osos Amorosos lanzaban el dibujo de sus barrigas para salvar al Reino.

Negro absoluto

Se tiende a hablar de blanco y negro en diseño web, pero hay que acostumbrarse a decir blanco y tonos de grises.

Si el blanco #FFFFFF es el color universal (aunque tiene sus detractores) y la base para cualquier buen diseño, el negro es el mal.

Sí, lo sé, te entiendo.

Yo también fui joven y cuando empecé en esto me montaba mis páginas web con fondo en negro #000000 y tipografía en amarillo.

Porque, qué coño, destacaba de cojones. Je.

El negro absoluto queda mal en el 99% de las ocasiones, y solo suele ser utilizado en un fondo que interesa «dar por muerto», hacer inservible.

Tiene sus fans, que suelen ser los que adoran el modo noche en las aplicaciones o trabajan mucho con código, pero en diseño web, y casi siempre en general, solo ayuda a empeorar la legibilidad y permanencia en tu sitio.

Observa este ejemplo tan sencillo que acabo de crear en un documento de texto.

Comparativa y tratamiento de colores para un buen diseño web sin negro absoluto
Tampoco hay que pasarse, si el tono de gris lo pones demasiado claro, crearás el efecto contrario y será difícil de leer.

Seguramente tu primera reacción ha sido ir a leer el primer bloque de texto pero, cuando has pasado a leer el segundo, volver al anterior te parecía demasiado cansado y agresivo.

Y esto es solo un ejemplo con dos encabezados y sus respectivos párrafos, imagina si usas el negro absoluto en toda la web, ya sea en textos o fondos.

Bonus

Je, si creías que en la primera lista de cosas en monomalista.com no iba a tirar del 7, estabas equivocado.

Podría ser otro Código Da Vinciano de esos, no me arriesgo.

Nadie verá tus diseños igual que tú.

¿Cómo dices?

Lo sé, es un realidad dura de aceptar, pero es que es así.

La mayoría de la gente no repara en esta cuestión, porque no entiende como funciona el asunto.

Diseñar como si tu monitor fuera el ombligo de internet es otro gran fallo.

diferentes pantallas y medios para mostrar un mismo buen diseño web
Hoy día nos invaden decenas de pantallas y medios todos los días.

Una pantalla no es más que tecnología para mostrar píxeles muy juntitos iluminados en un color u otro para crear la apariencia de algo.

Pero las pantallas no son universales.

Aún hay muchas en baja resolución, otras tantas en HD Ready (720), otras en Full HD (1080), otras en 2k, otras en 4k.

Para colmo, hay diferentes tecnologías tras la creación del panel que montan cada una de estas pantallas:

TN, VA, IPS, OLED son solo algunas de ellas.

Esta tecnología, por darte una explicación hipersencilla, digamos que es la culpable de que cuando miras al monitor desde diferentes ángulos, los colores, el brillo, la tonalidad cambien, se vean igual o peor.

Y para acabar de rematar la cuestión, cada fabricante, con su panel, entrega un calibrado distinto.

Puede tener valores diferentes de:

  • Brillo.
  • Contraste.
  • Colores.
  • Saturación.
  • Filtros.

Estos vendrán de fábrica ya ajustados y, para colmo, luego tú, como usuario, ¡puedes cambiarlos a tu antojo!

¿Qué obtenemos como combinación de todos estos factores?

Exacto.

La probabilidad de que un visitante de tu web esté viendo la pantalla de su ordenador, tablet, móvil, exactamente igual que tú, cuando diseñaste esa página web tan chula en tu monitor, es ínfima.

Por eso tienes que diseñar siempre teniendo esto en cuenta y por eso es tan importante trabajar la tipografía, la legibilidad, el tamaño, no abusar de los colores, las imágenes o el negro absoluto, porque son los primeros que te dejarán en evidencia en las pantallas del resto de personas del mundo.

Todos esos aspectos cuya importancia acabas de aprender en este post.

Por lo tanto, evita estos seis 7 errores y estarás muy cerca de crear un buen diseño web.

No ya solo un buen diseño web minimalista, sino un buen diseño web en general.

¿Te ha resultado interesante?

Estoy pensando en enviar más hacks, tips, trucos cambiavidas de estos por correo a los suscriptores de monomalista.com.

Si te interesa, nos vemos en los comentarios. ↓ ↓ ↓

2 comentarios en “Evita estos 6 errores para crear un buen diseño web”

Deja un comentario