Para utilizar todas las funcionalidades que ofrece este sitio, es necesario tener JavaScript habilitado.

Yo no soy un diseñador! - Si, puedo trabajar con HTML, CSS y Javascript, que son las tecnologías que generalmente se usan para mostrar información en un navegador, pero eso no me convierte en un astro del diseño.

Me defiendo con mi poco conocimiento de photoshop/gimp, y si me dan un diseño en PSD muy seguramente soy capáz de convertirlo a HTML sin mayor problema, o si me dan especificaciones puedo traducirlas a una página web funcional, pero aún así me falta el "estilo" que tienen los diseñadores. Precisamente por eso, resideñar mi página no fue una tarea sencilla. 

La última versión de este sitio la liberé hace más o menos 2 años, antes de eso usaba wordpress y tenía un skin gratuito que encontré por ahí. Cuando empecé a trabajar en las primeras versiones de Bolido, me decidí a hacer mi propia página desde 0. Ese fué un camino lleno de aprendizajes y frustraciones, pero finalmente pude salir con una página funcional y terminé con un "pseudo framework" que hasta el día de hoy me esta dando frutos.

Que es Bolido? Básicamente es un framework que escribí para desarollar rápidamente aplicaciones en PHP. Lo uso más que todo para cosas personales o para crear prototipos de aplicaciones. Algún día escribiré más al respecto, pero el caso es que sigo trabajando en el hasta el día de hoy.

Hace un poco más de un año reescribí Bolido, lo subí a mi cuenta de github y seguí trabajando en el. La versión que usé en mi página inicial era a lo mucho una version alpha super experimental, pero aún así sostuvo este sitio sin mayores inconvenientes.

Lógicamente ya era hora de actualizar esta página, así que de paso actualizé el "motorsito" y aproveché para rediseñar todo este lugar. Aunque no gózo de cantidades alarmantes de visitas, me alegra saber que en promedio tengo 10 visitas diarias! Tenía una deuda pendiente con el chuzo y llegó la hora de ponerse al día.

Así que tomé mi página y me acerqué al tema del mismo modo que lo haría con un cliente cualquiera. Que objetivo tiene la página? Que deseo mostrar? Que tiene de bueno ahora? Que cosas se pueden mejorar? Mejor dicho, empezamos desde 0 otra vez. Una vez definido el enfoque, empiezo con un pequeño bosquejo en un cuaderno. Yo dibujo horrible, pero se hizo lo que se pudo..

Yo a duras penas combino las medias y el pantalón, así que lo segundo que hice fue ir a colour lovers y me puse a buscar una paleta de colores que me gustara. Habemus colores! - Así como algunos compositores dicen que al tener el coro, ya se tiene una canción, más o menos así me pasa con los colores y las páginas web.

Algo que me disgustaba de mi página, era que desde mi teléfono movíl no se veía bien, a cada rato me tocaba hacer zoom para poder leer alguna cosa que necesitara, así que  era necesario hacerla responsiva. El acercamiento que tomé fue empezar desde las resoluciones pequeñas, adaptar el bosquejo que inicialmente tenía para concentrarme en el contenido y paulatinamente ir subiendo la resolución.

Ya teniendo un diseño más o menos definido, mi tarea era traducir toda esa información a HTML y usar media-queries para la transición a otros dispositivos. Otra cosa que también usé como ayuda fue Bootstrap. Escogí algunos componentes que me gustán y los adapte un poco a los colores que ya tenía definidos. No quizé usar todo su css, puesto que la apariencia de páginas con Bootstrap es muy evidente y ya todas las páginas parecen iguales.

En mi humilde opinion, la magia de todos esos frameworks para CSS es que uno debe saber que cosas tomar y apropiarse de esos componentes para darle un estilo propio a cada página.

En total, todo ese proceso me tomó más o menos 4 días. Aún faltan algunos detalles por afinar pero hasta ahora estoy contento. La idea es probarlo, ver que cosas hacen falta y reiniciar el bucle hasta quedar 100% satisfecho.

Así pues, en resumén:

  • Encontrar el enfoque del sitio es fundamental.
  • Buscar ayuda para las cosas que no eres tan bueno. En mi caso, encontrar una paleta de colores que me gustara, fue algo que simplificó mucho las cosas.
  • Darle un vistazo a los frameworks CSS que hay por ahí y adaptar las partes que creas convenientes para tratar de darle una imagen distinta a otros sitios que usen ese mismo framework.
  • El contenido es y siempre será rey! Ahora con el creciente aumento de visitas desde dispositivos movíles, es importante usar diseños que se puedan adaptar fácilmente a resoluciones pequeñas. Responsive Design es una respuesta valida, pero también se puede contemplar la posibilidad de crear páginas exclusivas para celulares/tablets etc.
  • Desarrollar, testear, corregir, testear, corregir, testear, corregir, testear, corregir - ad infinitum! (O por lo menos hasta llegar a un punto optimo de satisfacción).

 

Ese fue más o menos mi proceso a la hora del rediseño visual. Si nos ponemos a hablar de la parte tras bastidores, les cuento que me sorprendió que aún 2 años despues de haber desarrollado este chuzo, no encontré problemas graves. Uno que otro "if" que estaba de sobra, pero nada más. De todas formas tuve que reescribir gran parte de cada modulo pues no eran compatibles con la nueva version de Bolido 

Otro día hablamos de desarrollo de software más a fondo, que esa si es mi salsa. Esperemos que esta sea lo oportunidad de empezar con un esquema más seguido de publicaciónes. Chao!

Comentarios