En este post pretendo mostrar la experiencia en el rediseño de un sitio ya existente, primero que todo un poco de historia, Expedientes.co es un proyecto en el que puedes buscar Expedientes Judiciales en Colombia, inició como una Startup y, debido a esto no hubo mucha inversión en diseño, por lo que se prefierió trabajar en la funcionalidad de la aplicación y enfocarse en el negocio.

Inicialmente fue un proyecto que tuvo su primer MVP que se implementó con Python/Django por cuestiones de facilidad puesto que Django es un framework ideal para desarrollar MVP’s pero surgió la duda para la parte de Front-End por lo que se decidió usar un tema comprado en wrapbootstrap, llamado brave, a continuación capturas de pantalla:

 


Para este rediseño, las tecnologías que se utilizaron fueron:

Sass es un meta-lenguaje de Hojas de Estilo en Cascada (CSS). Es un lenguaje de script que es traducido a CSS.

Bower es una herramienta que nos permite encontrar proyectos y herramientas de javascript y administrarlas dentro de nuestro proyectos, dicho de forma fácil nos permite descargar y actualizar de forma sencillas paquetes como Jquery, Bootstrap, etc. El cual fue importante para manejar todos los paquetes de frontend como Bootsrap3, jQuery.

 

Gulp es una herramienta, en forma de script en NodeJS, que nos ayudó a automatizar tareas comunes en el desarrollo como compilar el Sass


npm
(node package manager) es un gestor de paquetes de node.js, que nos permite descargar librerías y enlazarlas o descargar programas de js. Con esta herramienta descargue herramientas como Gulp

Luego de observar el diseño anterior, se empezó a organizar el nuevo diseño; trabajo no sólo realizado por mí sino por todo el equipo de Swapps. El procedimiento fue el siguiente:

  • El diseñador creó las pantallas usando Photoshop.
  • Se convirtió los Photoshop en HTML+CSS.
  • Definir la estructura de archivos SASS del nuevo proyecto.
  • Configurar SASS con el proyecto Django existente.
  • Pasar LESS a SASS.
  • Modificar los templates de Django con el contenido de los nuevos HTML.

Entre los retos que hubo, el mayor fue pasar de LESS a SASS en Swapps preferimos SASS sobre LESS porque la curva de aprendizaje para Sass es mas corta y es más completo, por lo que tuve que buscar la manera de pasar este código a SASS, para ello encontré https://github.com/brauliobo/less2sass usé esta herramienta porque me permite usarla sin tener que configurar ningún Gulpfile y ya que solo la iba a usar una vez me pareció la mejor elección.

Si quieres saber otras ventajas de Sass sobre Less puedes entrar https://css-tricks.com/sass-vs-less/.

Se logró tener el nuevo diseño en el sitio de producción expedientes.co, sin embargo también adjunto las capturas.

En conclusión, realizar este proceso puede ser tedioso, ya que hay que modificar clases en el marcado html, e irse acoplando al nuevo diseño, pero finalmente es gratificante saber que con esfuerzo y las herramientas correctas se puede lograr mejorar un diseño y la usabilidad de un sitio web, aunque hay que darle su merito a Django, cuyo sistema de plantillas es muy flexible.