Tras hacer un pequeño curso de márqueting digital, me di cuenta de que al diseñarlo –aviso, va a aparecer mucho esa palabra, disculpadme de antemano ; ) – me había saltado pasos imprescindibles que debía corregir sin falta. Además, me he visto forzado a simplificarlo para solventar unos problemas que yacían en la sombra, a la espera de que los descubriera. En la última parte de la entrada hablaré sobre uno de ellos y cómo solucionarlo. Así que ya sabéis, seguid leyendo ; )

Como buenos furtivos adictos al juego del gato y del ratón, de vez en cuando estos errores me iban dando señales de su presencia. Al principio eran pequeñas, sutiles, como tiempos de carga que de repente se volvían extrañamente lentos, por mencionar alguno.

No obstante he dado con su gordísimo rey, enorme, grandísimo, que no podía dejar sin arreglar. Mis códigos se volvían locos y chocaban unos con otros, alimentándose de otros fallos. Han sido dos semanas con el blog cerrado pero considero que seguramente habrá valido la pena. Por fin el trabajo está medio hecho y he vuelto. 

Durante estos días que he estado sin publicar nada se me ha hecho muy raro no escribir y he llegado a añorarlo bastante, algo que entre nosotros, espero que me dure. Así que ahí va, tal y como os prometí el Museum anterior, hoy hablaremos de las líneas de diseño que se han ido siguiendo para la creación de Novelesco, utilizando elementos usados y descartados para tal fin. Comencemos.

Quien me siga desde hace tiempo sabrá que antiguamente mi blog se llamaba “Seres de Luz Blog”. Sí, es verdad. Es un nombre extraño y abierto a conjeturas.  Hablaré un poco sobre la primera línea de diseño descartada, una que jamás llegó a ver, válgame el chiste, la luz.

Antes de abordar el tema en profundidad, desearía aclarar una cosa que considero de vital importancia. Veréis, hay una serie de normas no escritas que suelen recomendarse en temas de diseño de blogs, para evitar confundir al visitante. Algunas de ellas aconsejan que no se juegue con muchas tipografías, ni elementos discordantes, ni se abarrote el grafismo de Gifs animados por doquier, etc. En lo estético es una cuestión de estilo, cada uno tiene su propio criterio y la idea de lo que desea plasmar. Pero en la sombra, también hay una cuestión desapercibida, con mucho PESO mayúsculo, sobre todo si eres ilustrador como yo.

Desde buen comienzo buscaba hacer algo a lo grande, algo que me permitiera explorar sin limitaciones y ya de paso, logrando salir airoso por el camino. Con algunas cosas di en el clavo y con otras, pues va a ser que NO. Una de las decisiones que me salieron bien fue el hecho de jugar con varios elementos artísticos al mismo tiempo. Primero desarrollé una línea de diseño general que se mantiene en las páginas principales y que deriva hacia las distintas secciones y entradas. 

Voy a mostraros el concepto original que al final quedó relegado en el cajón desastre, a la espera de aparecer por aquí.

Como veis se plasma la línea principal, la que seguí como base para crear el entorno a su alrededor. Cuando la terminé no acabó de cuajarme la idea y realicé otro diseño que finalmente acabó por ganar, uno que estaba ligeramente inspirado en un modernismo que acabó variando bastante, entre nosotros.

Como veis en Novelesco hay una carga importante de imagen. Y aquí es cuando he de hablar sobre uno de los problemas en la sombra que arrastraba desde el principio, tal y como comenté al inicio de esta entrada. Uno del que en mi caso, se alimentaba el rey de los problemas.

Me pudo la inspiración y no me di cuenta del PESO de las imágenes. Hay que asegurarse de que se optimizan de forma apropiada para que no repercuta negativamente en la velocidad de carga de la página, y es algo que aconsejo que cuidéis. Yo al principio no lo tuve muy en cuenta y me fastidió un tiempo después. Algo que, sin poder evitar, me llevó a un arreglo largo y engorroso por la cantidad de material que ya había publicado.

Reducir el peso del apartado gráfico sin perder apenas calidad es posible, hay varios procesos. Así que me ha parecido buena idea hablaros de dos herramientas básicas que van de maravilla, bien cogidas de la mano.

La primera: a la hora de exportar las imágenes, no vale con darle a guardar y ya está. Podría decirse que hay que hacerlo de una forma apropiada, pensada para la red. Esto lo que hace es crear un archivo que ya está optimizando el peso. Se puede configurar de varias formas y da muy buen resultado. En mi caso, utilizo Photoshop. Para hacer lo que comento clicad en Archivo, Exportar y buscad Guardar para web. Por supuesto hay muchos editores gráficos en el mercado, algunos de ellos gratuitos. Y bien seguro que absolutamente todos tienen esta herramienta. 

Para Gimp por ejemplo —que es un programa libre muy conocido—, tengo entendido que hay que descargar un plugin oficial que se ocupa de esto y se descarga de su web. Sobre otros programas no se nada más. 

Aunque con parece que con lo de «Guardar para web» ya hemos salvado la papeleta, podría deciros que no. Poniéndome como ejemplo, mi problema fue pensar que utilizando solamente esta optimización de imagen ya tendría suficiente. Y el kaos me vino igual, aunque sólo hay que mirar mi blog para imaginar el motivo. 

La segunda: Una vez se ha exportado la imagen que vas a usar de forma optimizada, recomiendo los Compresores de imagen. Podría decir que los compresores se parecen al Guardado para web, pero los puedes encontrar en la red. Son webs que reducen el peso de tus archivos (imágenes), buscando eliminar la información irrelevante e intentarlo perder la menor calidad posible. Hacen lo mismo que muchos plugins que hay para wordpress, pero no hace falta instalar nada. 

Estoy seguro que hay compresores de imagen a porrones, pero recomiendo estos dos:

TINYPNG

COMPRESSOR.IO

De ambos mi preferido —por el momento— es Compressor.Io, que fue el que utilicé para pasar todo el apartado gráfico del blog. Me tiré días y días con el temita, aunque mereció mucho la pena. Y bien, hasta aquí el tercer Museum. Espero que os haya gustado y comentad, no os cortéis. ¡Hasta la próxima!

¡Hola! La semana pasada aún seguía arreglando algunas cosas del blog, por lo que decidí posponer esta entrada. Pero ahora sí, aquí va. Hoy no habrá video, pero tranquilos, sigo en fase de experimentación por lo que no descarto nada futurible. ¡Espero que os guste! ; )

Ya dejé claro en “Una landing Page de peso” que la cosa inicial iba a ir precisamente sobre esas páginas que tanto me gustaban y que replanteaba a mi manera, quizá por cabezonería pura.

Las dos imágenes que os voy a mostrar a continuación son viejas conocidas para todos aquellos que lleven más de un año siguiéndome la pista, ya que permanecieron como abanderadas del blog durante bastante tiempo; y aunque una prevaleció sobre la otra, las iba intercalando de vez en cuando.

Pero antes de abrir la galería, el museo debe explicar algo por si hay lectores despistados que no recuerden la entrada anterior. Mi plantilla tiene muchas características que la vuelven un diamante en bruto para novatos en diseño web —yo me especialicé en otra cosa— y para cualquier recién llegado a WordPress. Permite hacer diseños increíbles, sobre todo cuando se tienen nociones, pese a que para lograr algunos efectos es imprescindible tocar algo que bien podría haber sido creado por el mismísimo Cthulhu: el abrumador y maldito CSS.

Una de las características que entendí mal sobre mi plantilla fue que permitía cargar, de forma totalmente aleatoria, un elemento seleccionado. De hecho es posible hacer algo parecido, pero NO tal y como yo pensaba. Así que ingenuo de mí, volví a la carga y realicé los dos diseños, para darme de bruces con:

1. 

El servicio técnico en inglés, que pese al maquiavélico y maravilloso a partes iguales Google translator —era el traductor que usaba en aquella época— no había manera de hacerme entender respecto al tema que nos ocupa. Así que tras explicar varias veces lo que me proponía, decidí cambiar de idea.

2. 

“Ph’nglui mglw’nafh Cthulhu R’lyeh wgah’nagl fhtagn” —parte de la invocación de Cthulhu, creado por H.P Lovecraft—. ¿He mencionado ya que odio el CSS, por muy imprescindible que sea para el diseño de Novelesco? ¿Si? Vale, ya paro.

Vayamos a lo que nos interesa, los diseños de los que os he estado hablado.

Tanto en las ilustraciones anteriores como en estos diseños, se repite el mismo concepto. Hay dos versiones, la masculina y la femenina. Quizá en la entrada anterior se me olvidó comentar que deseaba simbolizar, por lo que voy a hacerlo ahora.

La creatividad es algo global, no tiene sexo, ni barreras, ni fronteras. Tampoco clases.  

Cierto es que soy un hombre clásico y buscaba un estilo elegante y vintage, que estuviera en consonancia con el carácter general del blog, inicialmente inspirado en el modernismo. Pero sobre todo, deseaba transmitir que todos y cada uno de nosotros tenemos un don creativo dentro, que se despierta en mayor o menor medida. Sí, lo sé. Un concepto abstracto que pese a no dar la sensación de hallarse presente en ambas imágenes, creo que lo está, aunque sea de forma etérea.

Las usé durante un tiempo, hasta que se me ocurrió otro diseño que unificaba la idea inicial. De todos modos, mi concepto de Landing y por lo tanto, la última ilustración duraron poco tiempo, ya que alguien me recomendó quitarla debido a la influencia negativa en cuanto a la carga del blog. Y tras hacer varias pruebas y ver que realmente seguía pesando lo suyo —pese a estar diseñada a consciencia— decidí desactivarla y cambiar un poco la página de inicio.

Además, por aquel entonces la idea de cambiar de nombre ya había ganado casi la batalla, e investigaba todo lo que necesitaba arreglar para efectuarlo.

Bien, hasta aquí la entrada de hoy. Espero que os haya gustado y no os olvidéis de comentar. La semana que viene hablaré sobre el proceso creativo de algunos carteles informativos del blog. ¡Nos vemos!

Esta sección acaba de arrancar. Y no hay mejor modo de hacerlo que remontarse a los inicios, cuando Novelesco se llamaba Seres de luz Blog —que fue, literalmente, hasta hace poco más de una semana— y cuando migré a WordPress hace año y poco. ¡No os la perdáis! ; )

Después de investigar sobre Blogger llegué a la conclusión de que, tal y como veía las cosas, para tener un diseño con el que me sintiera conforme iba a necesitar muchos conocimientos y tiempo del que no disponía. Así que tras el descubrimiento de Ghost —por aquel entonces, una nueva plataforma de Blogs que presentaba plantillas impresionantes, muy parecidas a las de WordPress— decidí probar suerte, auto alojándome en sus propios servidores. Yo era nuevo en el mundillo. Y también ellos, en cierto sentido. Fue el flechazo perfecto.

La opción escogida me resultaba muy cómoda, digna de un —muy exageradamente «Dummy»— recién llegado a la red, pues a cambio de una módica cuota mensual solo debías instalar el theme deseado y escribir, sin más, con un editor chulísimo que te mostraba en tiempo real como iba quedando tu artículo. Compré una plantilla que me había encantado desde el minuto numero uno y me lancé al vacío. Lo único malo es que a pesar de tener libertad absoluta con las imágenes, apenas podía tocar temas del diseño. Y el par de arreglos que le hice, fue mediante el competente equipo de Ghost y casi siempre gracias a la dulce y atenta Sarah, con la que usando Google transistor podía tener conversaciones y hasta preguntarle cosas.

Estuve un año y medio en esta plataforma, pero comencé a darme cuenta de que necesitaba crecer, de que acababa de comenzar y no me parecía buena idea quedarme anclado, sin explorar nuevas opciones. Es más, me animaron a aprender y explorar, y WordPress seguía atrayéndome mucho más que Blogger, por la infinidad de opciones que atesora. Fue así como aterricé en la gran W, con una impresionante plantilla que te permite hacer casi cualquier cosa y un elaborado diseño que me costó tres meses de intenso trabajo. Tres meses muy duros, agobiantes, con el aire acondicionado estropeado y una columna ventilador que al menos, me salvó la vida e impidió que mi mano derecha se fundiera, literalmente, contra la wacom.

Y como suele pasar con las personas creativas, durante ese periplo hubo una serie de elementos que por cuestiones de diversa índole, acabaron sin usarse. Como por ejemplo lo que os voy a presentar a continuación, mi primera, primerísima Landig Page.

Antes de proseguir me gustaría matizar un par de cosas.

La primera: explicar que es una Landing Page —o página de aterrizaje, en nuestro querido idioma—, por si hay alguien que no lo sabe. Voy a ser bastante conciso al respecto, pues en google se pueden encontrar auténticos expertos que os podrán iluminar mejor que yo. Se trata de una página inicial que pretende convertir visitas en Leads —es una palabra que engloba muchas cosas, desde contactos, futuros clientes, subscriptores…— y que suele usarse mucho en Marketing online. En mi caso, lo que pretendía era captar toda la atención del visitante, preparando una antesala de la curiosidad.

La segunda: La ilustración que vais a ver a continuación es el resultado final, la depuración de una idea que me llevó dos semanas de trabajo. Aunque no era lo único que hacía durante ese tiempo, pues ya estaba desarrollando todos los elementos visuales del blog.

Por un error mío al entender ciertas virtudes de mi plantilla de WordPress, llegué a la equívoca conclusión de que podía hacer dos diseños alternativos que se cargaran de forma aleatoria. Así que también diseñé la versión masculina, para irla alternando con la femenina.

Esta ilustración acabaría desechada en poco tiempo, pues la versión femenina tenía más fuerza y decidí simplificar. Aunque no sería hasta bastante tiempo después —y ya con el nuevo diseño de Landing— cuando acabaría cerciorándome de que era imposible hacer lo que pretendía, o al menos sin tocar mucho, muchísimo y abrumador Css.

1. «Algo con lo que no contaba»

¿Os ha gustado la ilustración? No voy a entrar en temas de gustos, pues son inescrutables e inacabables. Solo diré que en ella hay un fallo con el que durante mi efervescencia creativa, no contaba. ¿Lo habéis notado? Sinceramente, tampoco pretendo prolongar vuestra agonía y voy a responder ahora mismo. El formato del diseño es demasiado largo.

Veréis, yo suelo trabajar en un iMac de 27 pulgadas. Eso está genial, pero se han de tener en cuenta diversas cuestiones, entre las que destacan el Responsive —lo que hace que las webs se adapten a diversos tamaños y dispositivos— y la navegación amigable.

Normalmente, para temas grandes de diseño del blog suelo saltar entre el mac, un portátil de catorce pulgadas, una tablet prestada y mi movil —que murió la semana pasada—, comparando como se ve en todos los dispositivos. En este caso, ya en el ordenador grande la ilustración ocupaba toda la pantalla y tenías que seguir bajando, y bajando, hasta llegar a un cartel que daba la bienvenida y que custodiaba un botón de entrada a la web. Al hacer la prueba vi que no me parecía amigable, pues el internauta medio no suele tener mucha paciencia, por no hablar de que puede haber visitantes con escaso conocimiento de «informática básica». Vamos, que la ilustración quedaba preciosa, pero como Landing page no funcionaba.

Así que me enfrasqué en la tarea de achatarla, trucando de forma proporcionada todos los elementos para no deformarlos. Pero no os voy a enseñar el resultado, pues es muy parecido al de arriba, salvo que mucho más compacto. Y deseo saltar al punto número dos, en el que contra todo orden lógico hablaremos de la primera idea, la original, y el motivo final —viva la redundancia— por el que no se utilizó, ni siquiera el diseño depurado.

2. «Cuestión de peso»

Abordaré este punto con un video que he querido realizar, y que también me servirá para cerrar la entrada. ¡Espero que os guste!