Apuntes sobre diseño web. Texturas, colores y tipografías

Ando últimamente con la casa ‘patas arriba’. Estoy estudiando el nuevo diseño web de mi blog/tienda, buscando contenidos, estructura, elementos y detalles. Es por ello que publiqué la mini-serie de artículos sobre el ‘Efecto Parallax’.

Esta semana toca el tema de colores, tipografías y texturas.

La textura

Quiero un fondo cálido, agradable. Aunque el fondo blanco sea el más adecuado para una buena lectura, me apetece que tenga algo de color, y, sobre todo, de personalidad. Entonces, necesitaba una textura, algo que le diera un relieve.

Para la textura, tenía dos opciones:

  • El papel texturado ‘Pergamino Champán’ ref. 11958 de APLI.
  • O bien, la muestra de Palazzo 210 de la serie de pintura Fassade A1 de la empresa CAPAROL.

Aquí tenéis una muestra de ambas:

Textura imitación pergamino
Textura imitación pergamino

Textura pintura fachada
Textura pintura fachada

De ellas, mediante Photoshop, extraje el color, en concreto el rgb(255, 231, 184) o bien #ffe7b8, que es el color de fondo.

 

Los colores

A continuación, como dichas texturas ya me proporcionaban un color, tenía que buscar colores complementarios para el resto de elementos.

Para ello, en el artículo ‘14 generadores de paletas de color online‘, Andrea Sánchez nos muestra 14 sitios donde podemos encontrar colores complementarios, tríadas y demás para nuestros propósitos.

En concreto, yo he utilizado dos: Adobe Color CC y ColorHexa. El primero te da unos colores resultantes más vivos, el segundo, ante el color pastel que le introduje, me ofrecía otros colores pastel.

Color base #ffe7b8
ColorHexa
Complementario #b8d0ff
Tríada #e7b8ff
#b8ffe7
Adobe Color CC
Complementario #0049b2
Tríada #8f14cc
#19ff8d

En cuanto a los verdes, lo siento. Por más que probé, ni uno ni el otro me satisficieron lo más mínimo.

Sobre el complementario y el magenta de ColorHexa, hombre, están bien para pintar las paredes de la habitación de un niño o una niña.

Finalmente, sobre los mismos de Adobe Color CC, son demasiado fuertes.

Pues, si unos son muy flojos y otros muy fuertes, busquemos los puntos intermedios. ¿Cómo? Fácil. De cada color sacamos sus 3 componentes rgb, y hacemos la suma del flojo y del fuerte y dividimos entre dos.

Así, tenemos el siguiente resultado final:

Color base #ffe7b8 Fondo
Complementario #5c8cd8 Enlaces
Tríada #bb66e6 Títulos

 

Tipografías

En cuanto a las tipografías, mi consejo es ir a la que, para mi, es la mejor fuente de tipografías, Google Fonts.

La tipografía general

Para la tipografía general, me gustan las letras SENCILLAS, sin rabitos (serif), ni manuales (handwriting), ni tipo consola (monospace), ni raras (display). O sea, quiero una tipografía Sans Serif.

Por tanto, en la página principal desactivamos las categorías no deseadas y ordenamos (sorting) por popular. La primera es Roboto.

Los títulos

Cuando entramos en Roboto, abajo encontramos emparejamientos más populares. En este caso, mi criterio es buscar una tipografía que no ocupe demasiado espacio. No me gustan los títulos que ocupan más de una línea (en la medida de lo posible).

En conclusión, la tipografía seleccionada para los títulos es Oswald.

Las citas

A grandes rasgos, sólo nos quedaría la tipografía para las citas, que se puede hacer con font-size: 1.125em (un 12,5% mayor) y font-style: italic, como hace Twenty Seventeen.

 

Conclusiones sobre diseño web

A la hora de abordar la creación de un nuevo diseño web para un sitio, es conveniente perder un rato estudiando los colores, las texturas y las tipografías que van a constituir el front-end de ese sitio, es decir, lo que el visitante va a ver.

En este artículo sólo he querido mostrar mi forma de estudiar estos temas para la plantilla más importante que pueda hacer: la de mi propio blog.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *