: How to design .PSD or .AI file for Bootstrap? 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
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.
More posts by @Lengel450
1 Comments
Sorted by latest first Latest Oldest Best
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. 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: 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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.