jueves, 1 de diciembre de 2011

La importancia de un buen diseño: Bootstrap

En esta entrada voy a generalizar sobre el tema, y me tomo esta libertad por que es algo que he vivido en mis carnes, y TODOS con los que he hablado del tema lo han sufrido, si hay algún programador que tenga un estilo impecable en la sala, que no se de por aludido, y dicho esto, allá vamos.

Uno de los problemas mas grandes que tenemos los programadores en general es que somos bastante “inútiles” a la hora de diseñar. Podemos crear las funcionalidades mas increíbles, súper optimizadas, que funcionan a una velocidad endiablada, con las mejores practicas y con una arquitectura que es la ostia, pero con una capa de presentación que en la mayoría de los casos es FEA, así, con mayúsculas.

A veces lo suplimos con cientos de horas jugando con los CSS, otras veces, con dejarlo medio decente nos conformamos. A veces, tenemos la suerte de que alguien del equipo es un poco mas mañoso y tiene algo mas de gracia para estas cosas y salvamos los muebles, pero casi siempre, el conseguir algo decente nos lleva muchas mas horas de las que nos gustaría. Yo me he tirado horas y horas para conseguir que se vea igual (o lo mas parecido posible) una página en IE, Firefox y Chrome, he sudado sangre y he derramado lagrima.

Y lo mas frustrante de todo esto, es que al final, lo que ve el cliente, lo que se aprecia de una aplicación web, lo que deja alucinados a los corbatas en las presentaciones, no es mas que lo que se ve, la UI, la capa de presentación.

Hace poco descubrí a partir de una entrada en GenbetaDev un toolkit creado por Twitter para hacernos la vida un poco más fácil con esto del CSS y el HTML, yo lo he probado y realmete los resultados son asombrosos.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Es fácil de usar y se pueden conseguir resultados muy buenos en formularios:

image

Botones:

image

Alertas:

image

Etc…

A mí, personalmente, me ha facilitado la existencia.

En próximas entradas podré algunos tutoriales de como usarlo.

Ir a Bootstrap.

1 comentario:

  1. Llevo casi 30 años metido en diseño y programación y te tengo que dar toda la razón. Los programadores son un auténtico desastre diseñando. Yo he tenido la suerte de pasar muchos años rodeado de buenos diseñadores, y como tenía aptitudes para el diseño, se me fue pegando de ellos cierto gusto, pero no mucho más.

    Lo realmente importante es saber lo que estas vendiendo, y como bien apuntas, la presentación gráfica es VITAL.

    Lo que os aconsejaría que hicierais para solucionar el problema es:

    1.- Si hay presupuesto, no ser avaricioso y contratar los servicios de un diseñador que nos haga la interfaz gráfica. Sin lugar a dudas es la mejor opción.

    2.- Si no nos queda otra que hacer nosotros la interfaz gráfica la solución es buscar documentación, es decir, buscar diseños que se puedan adaptar a nuestras necesidades. Una vez que los tengamos hay dos opciones, si se es un poco hábil con el diseño, creamos una interfaz basándonos en lo visto pero sin fusilarla. Y en el caso de que nuestra habilidad sea poco menos que nula, directamente fusilamos y en el mejor de los casos, buscamos una paleta de colores diferente para que no sea exactamente igual. Hay muchas webs donde podemos crear paletas con colores perfectamente equilibrados por el propio software.

    Como dije antes, la mejor opción es un diseñador que sepa hacer su trabajo, que como en todo, hay mucho zarzo. Lo que si aconsejo, es que si no sabéis diseñar, no os metáis en camisa de once varas. Todo el trabajo de programación es fácil que vaya a la basura porque al cliente no le guste la interfaz.

    ResponderEliminar