¿Aun te preguntas qué es el diseño web? Hoy en día es casi imposible encontrar a alguien que no sepa definirlo con sus propias palabras de una manera más o menos acertada. Por supuesto excluimos las tribus amazónicas y de otras regiones del mundo que aun no conocen tu civilización ni la nuestra… Deun amanera rápida el diseño web podemos definirlo como el aspecto de una web. Aunque un buen diseño web es más complejo de definir.

En este artículo te daremos consejos sobre qué es un buen diseño web. Debemos tener en cuenta que la forma de navegar cambia con rapidez, por lo que algunas métricas actuales no eran lo idóneo hace unos años, o no lo serán en los próximos. Claro ejemplo de ello el diseño web en flash, y el diseño web responsive

Con este panorama vamos con los consejos:

1- Diseño web responsive o diseño web adaptativo

Esto debería ser un must, como dicen los ingleses. Todo diseño web debe ser responsive. Es decir que se adapte a cualquier tamaño de pantalla. Si trabajas con WordPress esto es muy fácil. Debes instalar un theme que sea adaptativo. Si el theme no está muy logrado y tenemos Search Console correctamente configurado estaremos al tanto de posible errores relacionados con esto. Recuerda antes de cambiar de theme haz una copia de seguridad por lo que pudiera pasar. Y no olvides configurar tu child theme. Si necesitas ayuda contacta con una agencia de diseño y desarrollo web que te asesore o que lo haga por ti.

El cambio a este tipo de themes aumentan la navegabilidad de la web y la venta, en caso de tener un ecommerce. Además de dar una mejor imagen y mucho más profesional.

Quizás este consejo sea muy conocido y superficial para muchos, pero es básico y fundamental. Pero estamos seguros que el siguiente quizás no lo conozcas.

2- Tipografías y tamaños de letra

Nos encantan las tipografías y nos hace mucha ilusión poder incluirlas dentro de nuestro sitio web. Lo cierto es que debemos hacerlo con mesura. Si incluimos muchas tipografías estaremos perjudicando nuestra web. No solo por el peso y el aumento de peticiones a nuestro servidor, si no que estaremos complicando su lectura.

Lo idóneo es usar una sola tipografía, a lo sumo dos. Ten en cuenta que dentro de cada tipografía tenemos diferentes versiones: negrita, cursiva… Debemos jugar con estos diferentes grosores de tipografía para ayudar al usuario en su lectura. Además estamos reforzando nuestra imagen corporativa al dar un aspecto más homogéneo.

Ya sabemos cómo tenemos que escribir nuestra letra para web… ¿Pero estamos seguros que se ve correctamente? Vamos con el tercer consejo.

3- Imágenes y texturas

Cuidado con las imágenes y texturas que colocamos en nuestra web. Si están de fondo sobre las letras debemos cerciorarnos que éstas se leen correctamente. Para ayudar a su lectura podemos poner mediante CSS una capa superpuesta semitransparente que aumente el contraste con las letras. También podemos lograr este efecto mediante el editor de fotos. La ventaja de hacerlo mediante CSS es la reutilización posterior de la imagen en otro post.

Es importante que comprobemos en los diferentes tamaños de pantalla que hemos establecido en las mediaqueries. En ocasiones la letra se lee correctamente en desktop, pero la hacer la redimensión a mobile hay parte del texto que no se lee.

Si superponemos textos e imágenes mediante CSS debemos ver en qué plano de z-index está cada elemento para que no se oculten. Esto tiene que ver con nuestro siguiente consejo.

4- Distribución y espaciado de elementos en el diseño web

Este consejo une lo aprendido en el primer y tercer consejo.

En primer lugar debemos dejar suficiente espacio entre elementos. Este espacio puede lograrse mediante padding o margin, en función de las necesidades que presente el diseño. Esto comunmente e llama respiración, o respiro. Es decir, debemos dejar que cada objeto respire por si mismo (tenga aire al rededor y no parezca apretado).

Aquí podemos jugar con simetrías y superposiciones. Si optamos por superponer elementos debemos tener en cuenta lo comentado en el apartado anterior. El z-index, o el nivel de superposición de los elementos. Si trabajamos con este atributo CSS debemos hacer un análisis más detallado en los diferentes tamaños de pantalla. Es frecuente encontrar diseños muy interesante en desktop que al ser cargados en mobile se superponen a otros elementos. Aquí debemos tener en cuenta el mobile first. Esto quiere decir que diseñemos primero para pantallas pequeñas y después realicemos la adaptación a desktop.

Y con esto llegamos al último consejo.

5- Paletas de colores

Siéntete libre de usar el color que quieras, pero por favor, combínalo bien. Normalmente suelen dominar colores neutros en el diseño web, pero esto no tiene porqué ser así. Todo depende del público al que te dirijas. Es habitual encontrar colores más estridentes si nos dirigimos a un público joven y tonos negros y grises si queremos trasmitir cierta elegancia.

Ten en cuenta el color predominante de las imágenes que utilices en la web que también vayan a juego. Al establecer una paleta de colores uniforme (también incluyo aquí el tono general de una foto) nuestro diseño transmitirá un aspecto más calmado y uniforme. Ni que decir tiene que en la paleta de colores también se incluye la tipografía que comentábamos en el consejo 2.

Con estos consejos esperamos haberte ayudado con tu diseño web. Si aun te quedan dudas puedes escribirnos.

Y recuerda, ¡valora y comparte!

Hasta la próxima entrada o hasta que nos contactes.

Juan M. Alonso

Autor: Juan M. Alonso

Todo el día cavilando que nos trae la cabeza loca con nuevas ideas e mejoras continuas. Le apasiona comunicación, el marketing digital y la programación web. No concibe un trabajo sin equipo