Tenía tiempo queriendo hacer una actualización a mi sitio web principal creixems.com

El diseño que tenía hasta ahora se ha mantenido bastante parecido desde 2006. Ha sido un diseño ganador de varias menciones en sitios web y que, fundalmentalmente ha cumplido muy bien con su propósito.

Cuando “rehice” desde cero el diseño esta vez me dí cuenta de que no había cambiado demasiado y es que entendí que el diseño original es lo suficientemente sustentable y bien concebido como para aguantar y aguantar años de cambios (además que me gusta un montón).

En pro de empezar a llevar record histórico quise mantener la versión anterior de creixems.com la cual se veía algo así y se puede ver en vivo haciendo click aquí

creixems.com v3

El Nuevo Diseño

El nuevo diseño mantiene la misma estructura anterior y el único cambio verdaderamente importante es el menú, que cambia por primera vez desde su concepción. Sin embargo es por completo un nuevo diseño.

Empecé por querer cambiar el fondo, el cual nunca me llegó a convencer esos bloques de líneas. Quise también disminuir un poco la variedad de colores para darle algo más de sobriedad al diseño. Además quise reducir el espacio que ocuapaba el menú en pro de mostrar el contenido más arriba en la página (content is KING).

Quise buscar un diseño más tranquilo y fresco agregando algún toque caricaturesco. Finalmente me decidí por basar la página en un cielo azul claro con algunas nubes que resultó ser bastante agaradable a la vista e inobtrusivo. Conseguí un diseño con menos elementos, mas minimalista y en el cual el usuario pudiera enfocarse y encontrar más rápido el contenido que busca.

Aproveché de implementar algunas técnicas CSS3 como esquinas redondeadas y sombras en los divs (en el menú específicamente).

Una vez terminado el diseño pasé a “reescribir” buena parte del contenido, tratando de hacerlo más concreto y explicativo. Además utilicé PHP para detectar el país y colocar los precios de los planes según se estuviese en Venezuela o España.

La cimentación en un sistema de plantillas PHP y un buen CSS como el que tenía la versión anterior hizo que cambiar el diseño fuera un proceso maravilloso. Con sólo cambiar 3 o 4 archivos la nueva página de creixems.com estaba casi lista. Eso demuestra que cuando se planifica bien y se trabaja pensando en escalabilidad, los futuros cambios son mucho mas sencillos de hacer.

Finalmente como diseñador quise darle un toque especial. El diseño tiene 2 versiones, una diurna y una nocturna. A partir de las 8PM pueden ver la versión nocturna del diseño la cual carga un CSS independiente que contiene, sin exagerar, unas 6 líneas de código cuando mucho, son sólo 3 imágenes que hay que cambiar para poner el diseño en “modo nocturno”. Un pequeño Javascript hace el trabajo de detectar la hora y cargar el CSS apropiado.

Este es el nuevo diseño:

creixems.com v4

El pequeño tucán fue diseñado e ideado por mi esposa y es ahora la mascota del studio

A nivel de  diagramación todo queda bastante igual. A nivel de contenidos si hubo mucho cambios e inclusive simplifiqué las opciones del menú servicios, actualizando los contenidos y organizándolos de forma más intelignente.

El Portafolio

Un trabajo que vale la pena destacar es el nuevo portafolio el cual no había cambiado desde la época en que trabajaba en web ink. Ahora es más descriptivo, tiene los screenshots en vez de los logos y una pequeña descripción del trabajo realizado. Me tomó ver más de 30 sitios de portafolio de diseñadores escoger este. Además el efecto lightbox lo logro ahora usando Jquery en vez de scriptacoulous lo cual hace la carga más liviana y es mucho más confiable. Coloqué en el footer otros efectos de tooltip usando Jquery también.

Portfolio - creixems.com v4

Finalmente la idea del cielo me gustó tanto que la use para modificar el header  y marco de este blog (el cual también tiene un “modo nocturno”), hice un nuevo fondo para mi twitter e inclusive el lo usé para el diseño de mi CV que ahora también incluye un fondo de cielo con nubes.

De esta manera logro integrar una misma imagen para los distintos sitios que hablan de mí en la red, dando consistencia y cimentando mi identidad digital.

Ahora te toca a tí… Que opinas del nuevo diseño?