Lic. Gonzalo Rodríguez

Diseño UI Web con Formación de Programador

Siempre que me ha tocado trabajar desarrollando alguna aplicación web completa encuentro la mayor dificultad en lo que respecta con el diseño de la UI, tengo claro que la misma debe ser simple, atractiva, dinámica y verse de forma correcta en los distintos dispositivos que puedan utilizar los usuarios y por supuesto (le tiene que gustar al cliente y a los usuarios). Supongo que algunos programadores estarán de acuerdo conmigo en que lograr esto con formación de programador por más que domines (HTML5, CSS3, Javascript) suele ser muy complejo y yo personalmente lo reconozco cómo una debilidad.

Pero bueno también la experiencia me ha permitido aprender técnicas y conocer herramientas que facilitan esta tarea y permiten realizar desarrollos completos prolijos y lograr satisfacer las necesidades del cliente y los usuarios.

A continuación voy a comentar cuatro posibles soluciones:

1. Involucrar a un Diseñador Gráfico y Maquetador Web

Si el proyecto cuenta con un porte adecuado y presupuesto suficiente para incluir a una persona con habilidades de diseño gráfico y maquetación web, sin lugar a dudas esta sería la solución óptima que permitiría mejorar notablemente la calidad y los tiempos de trabajo a nivel de Desarrollo Web.

De hecho solamente en una empresa tuve la oportunidad de trabajar de esta forma, el desarrollo era muy rápido y el resultado excelente. Yo en mi rol de programador escribía todo el código de backend y para las páginas simplemente tiraba literalmente los controles de ASP.NET en las páginas sin colocar ningún estilo ni preocuparme por el orden, mi única responsabilidad era desarrollar los requerimientos y lograr que los controles funcionaran de forma adecuada, después ese trabajo lo agarraba un muchacho que cumplía roles de diseñador gráfico y maquetador web y se encargaba de dejarlo lindo y optimizado de acuerdo a las necesidades del proyecto.

Realmente si existe la posibilidad de trabajar así en el proyecto, es por lejos la mejor solución, en esa empresa también se incluía un equipo de SQA y realmente todo combinado hacía que el producto final fuera de muy buena calidad.

2. Comprar un Template

Esta solución es muy interesante principalmente si nuestras preocupaciones son, bajar costos, no perder tiempo con el diseño de UI y lograr un producto funcional y muy prolijo.

La ventaja principal que tiene es que se puede evaluar entre muchos diseños y comprar uno que se adapte lo mejor posible a los dispositivos donde se espera utilizar la aplicación web y también que conociendo HTML5, CSS3 y Bootstrap se puede customizar de forma fácil y adaptar el template comprado a las necesidades particulares del proyecto. (Incluí Bootstrap ya que todos los templates que trabajo lo usan, pero esta claro que hay otros tempaltes que no usan bootstrap y también son muy buenos y funcionales).

En el proceso de compra puede llegar a hacer participar el cliente lo cuál tiene una ventaja muy importante ya que permite al mismo tener una idea de cómo va a ser el sistema antes de invertir horas de trabajo para maquetar.

En mi caso cuando trabajo con proyectos en .NET suelo utilizar algún template de los que venden en https://wrapbootstrap.com/ son templates basados en bootstrap y la verdad que editarlos resulta bastante sencillos. Las únicas complicaciones suelen aparecer cuando trabajo en ASP.NET ya que tengo que sustituir los controles HTML de los template por los server controls de ASP.NET. En cambio esto en ASP.NET MVC es más fácil de útilizar.

Por otra parte para los programadores que trabajan con el CMS WordPress quiero recomendar el Framework Genesis y los templates que se venden en la Web de StudioPresshttp://my.studiopress.com/themes/genesis/ Genesis me ha resultado de particular ayuda y considero que los themes de StudioPress son muy buenos y también fáciles de customizar, el código CSS resulta ser muy prolijo y fácil de entender, pero también tienen una pequeña desventaja con respecto a los templates que recomendaba previamente de la web WrapBootstrap, estos themes son muy completos y bastante más caros, sus precios suelen rondar los 100 USD mientras que los de WrapBootstrap andan en los 15 USD en promedio.

Comentario: Este blog no utiliza enlaces de afiliados, los links que aparecen en este artículo y otros son recomendaciones personales que yo he utilizado y recomiendo a cualquier profesional.

3. Comprar un Template y trabajar con un Diseñador Gráfico

Esta solución es mi favorita desde que trabajo en mi propia empresa. La idea consiste en comprar un template que se adapte a las necesidades particulares de los proyectos y asignarle trabajos cómo el logo, retoque de imágenes y terminaciones que se realizan en Photoshop a la diseñadora.

De esta forma podremos tener una UI muy buena y uno como programador puede enfocarse al máximo a programar.

4. Vender todos los trabajos con un Diseño Similar

Para mi forma de ver esta es la opción que menos me gusta pero tiene sus ventajas y puede ser aprovechada por nuestro cliente y por nosotros mismos. La idea consiste en desarrollar una plantilla por defecto y entregar todos nuestros trabajos aplicando los estilos de dicha plantilla. Para el cliente tienen las ventajas de que puede reducir importantes costos que se irán a ver reflejados en el presupuesto.

Por otra parte para la empresa que desarrolla esta solución presenta la ventaja de ser más fácil de implementar y eliminar el riesgo que configura el hecho de tener que desarrollar una UI que se adapte perfectamente a las necesidades del proyecto, también reduce costos de producción.

Este tipo de soluciones lo he visto en sistemas de administración y soluciones para utilizar internamente en las instalaciones del cliente donde el objetivo principal es que resuelva el problema para el cual fue desarrollado el producto y el diseño de la UI tiene cómo objetivo ser funcional y lo más prolijo posible.

Si te ha gustado este artículo, te invitó a compartirlo para que más gente pueda leerlo.