Durante 4 meses, estuve ejerciendo de diseñador y maquetador web junto a otras tareas de frontend y backend, en una startup llamada BeetGig. BeetGig es un marketplace de externalización de proyectos de empresas, para que estudiantes, freelancers y cualquier persona capaz pueda introducirse en el mundo laboral o ganar un dinero extra.

Cuando llegué a la startup, había un buen trabajo de backend ya terminado, pero el frontend y el diseño estaban cogidos con pinzas. Es por eso que se me delegó una remodelación completa y un lavado de cara de toda la aplicación, un reto difícil pero apasionante.

Para ello, hice un completo análisis del estado actual y los requerimientos de la aplicación. Con eso, ya me pude hacer un poco la idea por donde podría tirar. Ya que desde el principio se me confió todo el diseño, quise establecer un objetivo desde el principio, que cumplía unas directrices que yo mismo había marcado; un diseño moderno, plano, con pocos colores, amigable y usable.

Las primeras semanas fueron de hacer pruebas y pruebas con bocetos a mano de la distribución de los elementos. Una vez tenía algunos mockups, los pasé a Photoshop para detallarlos un poco más, aunque en una primera versión. Una vez tenía varios mockups detallados, se analizaron y compartieron con el resto del equipo hasta decidir una versión que evolucionaría hasta lo que son los wireframes finales, que podéis ver un poco más arriba. La intención de hacer los wireframes tan detallados, píxel a píxel, era que después, era mucho más fácil maquetar y estilar, además de ofrecer al resto del equipo incluso a los primeros clientes, una visión de cómo iba a quedar la aplicación exactamente.

La fase de maquetación fue bastante bien. El sistema de grid del framework Bootstrap ayudó bastante, aunque hubieron partes un poco más tediosas de maquetar y estilar. Luego, se testeó la usabilidad en varias fases, retocando la distribución de elementos en varias ocasiones, incluso algunos colores para que la navegación fuera más óptima.

Aunque esta aplicación es un poco excepción del resto, ya que todos los proyectos requieren de un ordenador para realizarlos, y sabíamos que la mayor parte del usuario utilizaría este dispositivo para navegar, la adaptación a dispositivos portátiles también se ha trabajado bastante, sobretodo en móbiles.

Las tecnologías y herramientas utilizadas en este proyecto, en mis tareas, han sido: herramientas de maquetado y diseño (Adobe PhotoShop, Adobe XD), lenguajes como HTML5, CSS3, JavaScript, jQuery, Angular, PHP, BootStrap, etc.

 

Además de encargarme de remodelar por completo el diseño y la maquetación de la plataforma BeetGig, también me enrcargé de el rediseño corporativo de la empresa, diseñando un nuevo logo y aplicandolo en la página web, carteles, flyers y otro material gráfico.

www.beetgig.com