Creando un logotipo solo con html y css

Como consecuencia directa del aburrimiento de un domingo por la tarde, pasó por mi cabeza la idea de diseñar un logotipo para este blog. Desde el primer momento pensé que debía ser algo más que un simple dibujo, debía ser creativo, y porqué no decirlo, con un punto friki, tanto en su diseño, como en su forma de elaboración.

En primer lugar, empecé por definir brevemente qué quería transmitir con el logotipo de gofreeland. Las ideas que surgieron quedaron finalmente resumidas en: tecnología libre, fácil y sencilla.

Pasé entonces a pergeñar diversos esbozos rápidos sobre estas ideas dibujados a mano sobre papel. Debo admitir que algunos fueron perturbadoramente feos, raros y absurdos, es lo que tiene no ser un profesional, ni de lejos, en esta materia.


Finalmente, me decanté por el diseño que más abajo podréis ver, y esto fue así porque creo que recoje convenientemente las ideas de partida, y al mismo tiemp, es un logotipo sencillo y muy fácil de reproducir.

El logotipo parte de las tres primeras consonantes de las palabras en inglés que figuran en el nombre de este blog gofreeland (gfl), que al ser escritas a mano con mi "ugly handwritten font" sería algo así:

Me percaté que las tres iniciales (gfl) escritas generaban cinco áreas cerradas (2 en la g, 2 en la f y 1 en la l). La tecnología libre es la antítesis de la tecnología propietaria, cautiva, cerrada, por lo que consideré que sería interesante para transmitir esta idea, eliminar las líneas que encierran estas áreas, no aislándolas del resto del espacio.

Por otra parte, no hay nada que refleje mejor la situación actual de la tecnología que el imparable avance del mundo digital, cada día más complejo, pero que sin embargo está paradójicamente compuesto únicamente de dos elementos: ceros y unos. Este es el motivo por el cual en el logotipo he utilizado exclusivamente dos elementos: círculo y rectángulos de bordes redondeados, en clara alusión a ese mundo binario.


Una vez llegado a este punto, me dispuse a traspasar al ordenador este logotipo, partiendo desde la peculiar premisa/reto de que debía ser capaz de reproducirse utilizando únicamente código html y css. El resultado final podéis verlo en el siguiente enlace.

Soy consciente que es posible optimizar el código html del enlace anterior para reducir el número de líneas, pero la finalidad de este proyecto era sencillamente generar un logotipo sencillo y a la vez, seamos sinceros, demostrar que cuando uno es friki no puede evitar hacer cosas raras en su tiempo libre.

Finalmente, y como estoy empezando a juguetear con inkscape, he insertado este logotipo en la cabecera del blog, si bien le he aplicado un filtro esparcir/cubos que por ahora es a lo máximo que llego. Trataré poco a poco de ir mejorando el diseño general del blog. Bueno, espero vuestras opiniones sobre este logotipo que como siempre serán bien recibidas.