¿Debo contratar a un diseñador para crear una maqueta de cada página de mi sitio web, incluso si uso Twitter Bootstrap?

Esta es una excelente pregunta. Es probable que surja a medida que los gerentes intenten aprovecharlo en sus procesos de desarrollo de productos.

Una analogía
Supongamos que su aplicación web es una casa y Bootstrap es un proveedor integral de material de construcción prefabricado. Gracias a este nuevo proveedor, ahora tiene el 80% de los componentes que necesitará para construir su casa, y todo funciona muy bien.

Preguntar si aún necesita un diseñador o si un programador puede construirlo todo por su cuenta es como preguntarle si todavía necesita un arquitecto para diseñar su casa o si podría entregarlo a su contratista general.

Sí, existe una buena posibilidad de que un contratista pueda construirle una casa, pero involucre a un arquitecto y usted está construyendo un tipo diferente de casa.

El papel de Bootstrap y el diseñador del producto.

Algunas personas implican que un “buen” diseñador no debería / no debería usar Bootstrap. Creo que no hay vergüenza de diseño al usar Bootstrap. Un buen diseñador aprovechará pragmáticamente la mejor herramienta para el trabajo. Bootstrap no es una amenaza para nuestro comercio. Crear elementos de estilo Bootstrap es solo una pequeña parte de lo que un diseñador de productos / experiencia de usuario podría hacer.

Para abordar el sabor genérico de Bootstrap: es muy fácil bifurcar y crear un tema de Bootstrap, por lo que, en muchos casos, es una opción inteligente. Con un poco de personalización, tener un diseñador a bordo puede darle a su código Bootstrap una identidad distinta.

Bootstrap es una biblioteca de elementos de la interfaz de usuario, pero no es nada sin un diseñador que pueda convertir los modelos mentales de los usuarios en experiencias de usuario. Cualquiera puede lanzar una serie de pestañas, acordeones, modales y botones de alternar en una página. La habilidad del diseñador es saber cómo crear una aplicación que soporte humanísticamente a los usuarios en sus diversas tareas, y cuándo usar un patrón de diseño de interacción dado. Además, debe tenerse en cuenta que Bootstrap (2.1.0) no tiene / no puede dar cuenta de cada elemento de la interfaz de usuario que necesitará, por ejemplo, no hay javascript ‘arrastrar y soltar’ en Bootstrap, o calendario de selección de fecha. Si alguna vez necesita nuevos elementos, deberá saltar y agregar elementos aquí y allá de vez en cuando. Ya sea que los esté diseñando o utilizando un complemento, querrá asegurarse de que encajen bien.

Esto se logra con una base sólida en diseño de interacción y usabilidad. La usabilidad es un área esencial de experiencia para cualquiera que diseñe aplicaciones. En la práctica, rara vez es el fuerte de los programadores … esos muchachos se están divirtiendo demasiado escribiendo código.

Lo complicado de la usabilidad es que realmente no se puede saber cuándo es bueno, solo se puede saber cuándo es malo porque estás atrapado en la mitad de una tarea. Cuando la usabilidad se hace correctamente, inicia sesión, completa su tarea y cierra sesión, sin que cada uno se dé cuenta de todos los elementos que lo apoyaron en el proceso.

En ese sentido, no es suficiente decir: “Paso 8 horas al día en la red” o “He estado en línea desde los años 90”, o incluso “Soy un programador”. Ser un viajero frecuente no te convierte en un buen asistente de vuelo. Si quieres convertirte en uno, necesitas aprender el oficio. Del mismo modo, la única forma de aprender sobre la usabilidad es realizar pruebas y leer libros y estudios sobre el tema.

Lo que obtendrás de un diseñador
Estas son algunas de las cosas que normalmente no obtendrá de un programador (a menos que sean multidisciplinarias, lo cual no es típico):

  • Investigación exhaustiva de usuarios
  • Personalización de Bootstrap o cualquier otra interfaz de usuario para que coincida con su identidad
  • Conceptualizar los modelos mentales de los usuarios en tu aplicación
  • Aplicación y diseño efectivos de patrones de diseño de interacción
  • Siguiendo los principios de usabilidad y pruebas de posibles problemas.

Lo que obtendrá de su programador usando Bootstrap
En total, siendo el cofundador de una startup, entiendo las realidades presupuestarias y de tiempo que impulsan las decisiones comerciales. Entonces, esto es lo que obtendría de su programador usando Bootstrap en ausencia de un diseñador:

  • Principios de diseño de buena interacción aplicados a los elementos de la interfaz de usuario de la placa de la caldera.
  • Lindos (aunque genéricos) píxeles fuera de la caja que podría usar como tema más adelante. No tendrá que confiar en su programador para hacer esto.
  • Una cuadrícula sólida y una tipografía que da cierto sentido de orden (cuando se usa correctamente)
  • Impresionantes prácticas de codificación HTML / CSS / LESS / JS. Creo que sería difícil codificar una interfaz de usuario mejor.

Espero que esto ayude. Como siempre: no hay bala de plata. El contexto es clave.

Depende de si está creando un prototipo para mostrar a los inversores, por ejemplo, o si está planeando que este sitio se convierta en un negocio viable.

Si realmente tiene muy poco tiempo y dinero, y solo le importa la funcionalidad del sitio, continúe y use Bootstrap. Puede parecerse a cualquier otro sitio, pero si solo planea mostrar lo que su sitio puede hacer , Bootstrap es una solución bastante decente.

Sin embargo , si se está preparando para lanzar este sitio al público en el futuro cercano, le recomiendo contratar a un diseñador independiente o de tiempo completo. Hacerlo mejorará, entre otras cosas, las siguientes cosas:

– La credibilidad de su sitio web o producto
– La facilidad de uso de su sitio web o producto
– La estética de su sitio web o producto (obviamente)

Al final, depende de usted, pero si puede permitirse un diseñador talentoso (talentoso es la palabra clave aquí; contratar a un diseñador de mierda para ahorrar dinero no es realmente mejor que usar Bootstrap), mejorará sustancialmente su sitio.

Benjamin ha proporcionado una respuesta muy completa y precisa.

En resumen, Twitter Bootstrap es una colección de componentes de interfaz de usuario bien diseñados, junto con un marco (“andamiaje”) para aplicarlos. Pero, para crear un sitio web o aplicación web atractivo, intuitivo y efectivo, aún necesitará a alguien capacitado en el arte de los factores humanos / experiencia del usuario para diseñar páginas y flujos de trabajo que permitan a los usuarios realizar eficientemente las tareas requeridas.

El uso de Twitter Bootstrap puede ahorrarle mucho tiempo y dinero al eliminar la necesidad de diseñar y codificar su propio marco de UI, y cada elemento de UI, desde cero. También puede ahorrar mucho tiempo si su sitio / aplicación debe ser utilizable en muchos dispositivos diferentes (computadoras de escritorio, tabletas, teléfonos inteligentes, etc.), ya que tiene soporte incorporado para “diseño receptivo”.

La desventaja es que, si bien los sitios basados ​​en Twitter Bootstrap pueden ser fácilmente temáticos, naturalmente tienen un aspecto similar a otros sitios basados ​​en Bootstrap. Es decir, si bien obtiene una ventaja significativa en términos del tiempo / costo del desarrollo de su sitio, renuncia a cierta originalidad en términos de diseño visual.

Además, para agregar a uno de los comentarios de Benjamin (con el que estoy de acuerdo):

Además, debe tenerse en cuenta que Bootstrap (2.1.0) no tiene / no puede dar cuenta de todos los elementos de la interfaz de usuario que necesitará, por ejemplo, no hay javascript ‘arrastrar y soltar’ en Bootstrap o calendario de selección de fecha. Si alguna vez necesita nuevos elementos, deberá saltar y agregar elementos aquí y allá de vez en cuando.

jQuery UI es una buena fuente de componentes adicionales de UI, que se integran fácilmente en sitios basados ​​en Bootstrap.

Es difícil imaginarme a mí mismo en tus zapatos. Como no tenemos tanto tiempo como dinero, deberíamos pensar en incorporar una estructura muy básica a nuestro sitio web ahora. Veo que Twitter Bootstrap posee un sistema de red muy poderoso.

Sistema de red
La última versión del marco proporciona una filosofía de diseño muy receptiva. Utiliza la cuadrícula para diseñar navegadores de escritorio, pero luego se comportan de la misma manera para tus móviles Android, Apple Iphones e Ipad. El sistema de cuadrícula es muy fácil de aprender un montón de etiquetas div html que deberían usar valores de clase jerárquicos. Eso es.

Consejo
Si la organización del contenido no es importante para sus inversores o usuarios, continúe con las cosas existentes y no le tome mucho tiempo. Pero quería contenido alineado a la izquierda, a la derecha con espacios en la parte inferior, etc. Utilice solo el sistema de cuadrícula con la opción de complementos de JavaScript. Revise cómo está configurado el sitio ahora y piense dónde y cómo aplicar esos atributos de clase css para que su sitio se vea bien.

Si hay más consultas, no dude en preguntar

La respuesta de Benjamin Mailian es excelente. Pero para abordar mejor el asunto en cuestión, también creo que vale la pena resaltar la línea más importante en su respuesta:

“Bootstrap es una biblioteca de elementos de la interfaz de usuario, pero no es nada sin un diseñador que pueda convertir los modelos mentales de los usuarios en experiencias de usuario”.

Dicho de otra manera, Bootstrap es un medio, no es un fin. Al igual que un martillo, hay una diferencia entre poner un martillo en manos de un artesano experto y poner un martillo en manos de un niño pequeño.

O como dice el dicho: “Los martillos no construyen casas, la gente sí”. 😉