Hola, debo empezar a diseñar con Bootstrap y me gustaría saber más allá del manejo de hojas de estilos, cómo es el proceso de diseño. Por ejemplo, ¿puedo seguir haciendo diseños en Photoshop o bootstrap tiene alguna herramienta para esto?
Gracias!!
Respuestas
Bootstrap no tiene ninguna herramienta oficial de diseño tipo Photoshop. Pero como Bootstrap es tan popular, existen muchas utilidades para facilitarte el trabajo con Photoshop. De todas ellas, la que deberías bajarte lo antes posible son las plantillas con el "grid" o rejilla que utiliza Bootstrap. Aquí puedes descargarte un PSD con las 4 rejillas de Bootstrap.
En cuanto a consejos sobre el proceso de diseño, yo no soy diseñador pero me ha tocado crear varias webs con Bootstrap 3, así que ahí van unos cuantos consejos:
- Los diseños Bootstrap se dividen en dos tipos: fluídos y fijos. Los fluídos son los que ocupan toda la anchura del navegador y los fijos son los que tienen delimitada su anchura máxima. Diseñar una página fluida con Photoshop es realmente difícil, ya que en teoría no hay limite para la anchura de la página.
- Independientemente de si la página es fluida o fija, los buenos diseños de Bootstrap en realidad se componen de 4 diseños a la vez: móviles, tablets, escritorios normales y escritorios grandes. El código HTML/CSS define los 4 diseños a la vez, por lo que en Photoshop tendrás que haber diseñado previamente 4 variantes para cada página (por eso es importante utilizar las plantillas de las 4 "rejillas" que te comenté antes).
- El diseño en Photoshop puedes empezarlo por cualquiera de las 4 variantes. Pero el diseño HTML/CSS siempre hay que empezarlo por el más pequeño: los móviles. Si empiezas diseñando para escritorio y luego bajas al móvil, todo se te va a complicar mucho. Por muy raro o incómodo que te parezca, siempre debes diseñar tu web para móviles primero y luego subir a tablets y ordenadores normales.
La explicación anterior se simplifica mucho si no quieres hacer diseños web responsive y por tanto, te dan igual los móviles y las tablets. En ese caso, diseña solamente con la rejilla que Bootstrap llama LG y verás que todo el proceso se simplifica mucho.
Si tienes más dudas concretas sobre el proceso de diseño con Bootstrap, dínoslo.
@javiereguiluz
Muchas gracias!!!
Con esto despejo mis dudas iniciales sobre como empezar a trabajar con bootstrap pero muy seguramente más adelante tendré otras. :)
@PilaBernal
¿Quiere decir que por ejemplo esta plantilla http://demo.joomlaplates.com/jp_work/extensions/revolution-slider.html que cuesta 39 euros fue hecha por alguien que empezó con las 4 rejillas de Bootstrap?
Me aclaro, Bootstrap ¿es la forma más indicada para hacer plantillas como la que muestro? Quiero hacer plantillas como la que te muestro por lo que incluí el enlace.
Gracias por sus respuestas.
@papuchyn
@papuchyn efectivamente puedes hacer esa plantilla con Bootstrap. Utilizar algo como Bootstrap no es obligatorio pero es lo mejor para conseguir trabajos profesionales dedicando un esfuerzo razonable en ello.
Gracias a Bootstrap te puedes olvidar de los problemas provocados por las diferencias entre los diferentes navegadores. Además, Bootstrap ya te da hechas muchas de las cosas que necesitas para crear tus plantillas. Así que tu productividad aumentará mucho si utilizas Bootstrap.
@javiereguiluz