0

This is my first question on this website so here we go! I'm graphic and web designer. When creating sites or apps I don't deal with front end and I don't want (for now). All I do is UI/UX design, and developers are doing the rest. So what I'm sending to my clients are .ai or .psd files, nicely layered and named, exported buttons and images in .svg or .png. I understand that Bootstrap is front-end framework with it's philosophy and tools to easily make responsive and consistent websites. I also have basic knowledge of how markup languages like HTML and CSS work, but as I said I don't want to learn to code, I want to focus on design.

So after big introduction, where can I find tips how to design for Bootstrap? I found lot of free resources online but they all focus on coding, and they don't explain it from my perspective. I prefer to use Illustrator, but for tutorial that doesn't matter it could be Photoshop as well. Advices I need are something like "never ever put elements outside of the grid", "here is what you have to be aware of when designing for mobile", "always use this font sizes"...

TL;DR How to design Bootstrap website in Adobe illustrator or Photoshop, developers are doing the rest not me.

Improve this question
1
  • Welcome to GraphicDesign! However this question seems pretty broad and may be closed as such
    – Zach Saucier
    Commented Feb 7, 2016 at 22:47

1 Answer 1

Reset to default
3

Any solid web developer can take any design and develop it for Bootstrap.

That said, it makes it easier when you take some considerations.

  • The typical "grid" (Bootstrap or Foundation) is based on 12 columns. If you create your design to have 12 columns that will help break things down. Remember that the smaller the size, the smaller the pixel widths between columns are.
  • Don't sandwich elements between columns. Gutter space is essential.
  • Use a UI kit. http://bootstrapuikit.com/ - having that will give you a base to work with that will make it faster to develop (and design since all of the elements are already there for you).
  • Mobile-first should be your mindset. I did a blog write-up about it: https://edgewebware.com/2015/03/designing-with-a-mobile-first-mindset/
  • Take some time to look into Bootstrap...specifically the elements they have and how they work. You don't need to code it, but you should understand what is available to coders.
Improve this answer
3
  • Aibrean thanks a lot! I know the question is too broad but I need some starting point. Your blog post is really good, if you have some more resources I would be even more happy.
    – Trombolo
    Commented Feb 8, 2016 at 8:39
  • Hey quick question - I'm setting up a mobile-sized Bootstrap grid for my website design. How many columns are in small Bootstrap grid? Do they keep the 30px gutter?
    – Jess J
    Commented Mar 1, 2017 at 19:34
  • Every breakpoint has 12 columns. The columns just get narrower as you scale. The gutter is relative to the breakpoint too.
    – Aibrean
    Commented Mar 1, 2017 at 23:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.