¿Cómo diseñar un archivo .PSD o .AI para Bootstrap?

Esta es mi primera pregunta en este sitio web, ¡así que aquí vamos! Soy diseñador gráfico y web. Al crear sitios o aplicaciones, no me ocupo del front-end y no quiero (por ahora). Todo lo que hago es diseño de UI/UX, y los desarrolladores hacen el resto. Entonces, lo que estoy enviando a mis clientes son archivos .ai o .psd, botones exportados e imágenes en .svg o .png, bien organizados y nombrados. Entiendo que Bootstrap es un marco front-end con su filosofía y herramientas para crear fácilmente sitios web receptivos y consistentes. También tengo conocimientos básicos de cómo funcionan los lenguajes de marcado como HTML y CSS, pero como dije, no quiero aprender a codificar, quiero centrarme en el diseño.

Entonces, después de una gran introducción, ¿dónde puedo encontrar consejos sobre cómo diseñar para Bootstrap? Encontré muchos recursos gratuitos en línea, pero todos se enfocan en la codificación y no lo explican desde mi perspectiva. Prefiero usar Illustrator, pero para un tutorial que no importa, también podría ser Photoshop. Los consejos que necesito son algo así como "nunca ponga elementos fuera de la cuadrícula", "esto es lo que debe tener en cuenta al diseñar para dispositivos móviles", "siempre use estos tamaños de fuente"...

TL; DR Cómo diseñar un sitio web Bootstrap en Adobe Illustrator o Photoshop, los desarrolladores están haciendo el resto, no yo.

¡Bienvenidos a Diseño Gráfico! Sin embargo, esta pregunta parece bastante amplia y puede cerrarse como tal.

Respuestas (1)

Cualquier desarrollador web sólido puede tomar cualquier diseño y desarrollarlo para Bootstrap.

Dicho esto, lo hace más fácil cuando tomas algunas consideraciones.

  • La "cuadrícula" típica (Bootstrap o Foundation) se basa en 12 columnas. Si crea su diseño para tener 12 columnas, eso ayudará a desglosar las cosas. Recuerde que cuanto menor sea el tamaño, menor será el ancho de píxel entre columnas.
  • No coloque elementos entre columnas. El espacio del canalón es esencial.
  • Utilice un kit de interfaz de usuario. http://bootstrapuikit.com/ : tener eso le dará una base para trabajar que hará que sea más rápido desarrollar (y diseñar, ya que todos los elementos ya están ahí para usted).
  • El móvil primero debe ser su forma de pensar. Hice un artículo en el blog al respecto: https://edgewebware.com/2015/03/designing-with-a-mobile-first-mindset/
  • Tómese un tiempo para investigar Bootstrap... específicamente los elementos que tienen y cómo funcionan. No necesita codificarlo, pero debe comprender lo que está disponible para los programadores.
¡Aibrean muchas gracias! Sé que la pregunta es demasiado amplia, pero necesito un punto de partida. Su publicación de blog es realmente buena, si tiene más recursos, sería aún más feliz.
Hola, pregunta rápida: estoy configurando una cuadrícula de Bootstrap de tamaño móvil para el diseño de mi sitio web. ¿Cuántas columnas hay en una cuadrícula pequeña de Bootstrap? ¿Mantienen el canalón de 30px?
Cada punto de interrupción tiene 12 columnas. Las columnas se vuelven más estrechas a medida que escalas. El canal también es relativo al punto de interrupción.