Como crear una web: 4 Diseño estético

Introducción

Una vez que ya hemos decidido como vamos a hacer la web y hemos elegido el dominio, llega uno de los pasos que más tiempo nos va a requerir. Esto es la creación del soporte visual de nuestra web. Esto es fundamental, tiene la ventaja de que se pueden desarrollar en paralelo, por ello si sois varios los creadores de la web, podéis reducir los tiempos. Llegados a esta parte sería bueno contar con alguien que entienda de diseño (normalmente un informático no suele ser buen diseñador).

El diseño de la web

Es muy importante aclarar, llegados a este punto, que el diseño de la web es una parte muy importante y que mucha gente pasa por encima. Un diseño de web bueno, no es únicamente una buena paleta de colores y degradados que hagan atractiva la web, sino que también es una manera de optimizar nuestra web. La optimización es un apartado que puede hacernos perder muchas visitas, así que hay que cuidarla mucho, por ello para decir que algo es un buen diseño, también hay que mirar qué grado de optimización conseguimos.

Elección de la paleta de colores y degradados

Es fácil que un usuario abandone tu web, por una mala elección de los colores. Por ejemplo si usas un fondo negro y una letra de color gris oscuro, esto hace que el usuario no pueda leer bien el contenido y decida irse a otra web a buscar ese mismo contenido. Normalmente este tipo de usuario no volverá a tu web, porque recordará que era imposible leer el contenido.

Pero hoy en día, contamos con múltiples herramientas para que esto no ocurra y todos podamos conseguir un estilo visual bastante bueno. Para ello recomendamos:

• Un selector de colores con múltiples opciones, para conseguir tonalidades parecidas. Además de poder conseguir la referencia directa de esos colores. Podéis usarlo desde aquí
• Colrd una plataforma en la cual hay grandes conjuntos de colores (formando paletas) para utilizar en nuestros temas.
• Para firefox yo utilizo este addon que ayuda mucho a elegir colores y crear degradados.
• Otro recurso útil es Picular que permite sugerir colores a partir de conceptos.

Optimización

Como hemos hablado más arriba un buen diseño, tendrá como resultado una página bastante optimizada (aunque este tema lo trataremos en profundidad más adelante). Aquí os detallo algunas cosas que NO deben realizarse:

1. Usar imágenes innecesarias, por ejemplo para botones. Con la potencia actual de CSS ya no es necesario que un botón de respuesta, sea una imagen. Sino que basta con hacer un en CSS un rectángulo (definiendo anchura y altura), establecer un tipo de letra, un color de fondo y un borde y luego poner el texto en la parte de HTML. Así conseguimos un bonito botón, muy parecido al que podríamos hacer con una imagen, pero sin utilizar esto. Las imágenes no se deben utilizar por 2 cosas, la primera es que aumentan el “peso” de la web (es frecuente ver páginas con muchas imágenes que ocupan 3MB cada una de sus páginas), la segunda es que por cada imagen, se lanza una petición a nuestro servidor, esta  petición tarda tiempo en procesarse y por regla general; menos peticiones, menos tiempo.
2. Usar muchos plugins/javascript al principio, cuando eres un usuario nuevo, sueles utilizar múltiples plugins (cada uno lleva asociado un archivo javascript). Esto te permite por ejemplo, crear un mosaico de fotos o darle un efecto a tu página. LLegados a este punto debes plantearte si son totalmente necesarios si utilización y probar cuantos milisegundos supone tener cada plugin o javascript activo. Es decisión de cada uno valorar si sigue siendo interesante utilizarlos.
3. Utilizar nombres con caracteres propios del español. Queda muy bonito poner Año como nombre de una imagen, pero esto te va a traer 2 problemas, el primero que los buscadores no suelen llevar bien aquellos caracteres que no existen en inglés y que puedes tener problemas al utilizar la caché o un plugin de caché (esto será uno de los últimos capítulos).
4. Utilizar Flash, hace 5 años, utilizar flash en una página web, daba la sensación de una página muy profesional, hoy en día, la mayoría de los que se dedican a esto pensarían directamente que es una chapuza. Flash hace que las páginas tarden en cargar, los buscadores no lo entienden muy bien y las personas que no lo tengan instalado no podrán ver tu web correctamente.
5. Recargar con Gif animados, esto es similar a Flash, hace 10 años era muy gracioso pero hoy en día, su uso está decayendo. Una cosa es utilizar alguno para cosas, muy concretas y otra hacer una web, tipo de la Homer Simpson.
6. Crear degradados en forma de imágenes, como bien se apunta arriba CSS tiene muchas características, así que es bueno utilizarlo para crear degradados, que son visualmente muy atractivos y no tienen un coste alto, en tiempo de carga de web, ni aumentan el “peso” de nuesta página.

Se pueden encontrar algunos buenos ejemplos de buenos diseños en esta página.