Designing properly for the web – grids for bootstrap and preparing files in photoshop

I have graphic design skills but never designed anything from scratch for the web (except using WordPress templates). I have a lot of experience in Photoshop but not a lot in web. I want to start a project with a friend and I would like to start the proper process (prototype in Invision or Axure > Photoshop > code). He will code but I would like to know how I can prepare the file to be properly coded?

How can I plan my grid for both the mobile version and the desktop using Bootstrap? Should I use Photoshop combined with another software? I would like to avoid learning too many softwares at the same time (like going to another design tool) otherwise the free time that I have with the learning curve will be frustrating.


You’ll find that every designer has a different process. I used to be PS or nothing, but now that websites are less photo based and rely more on CSS and SVG’s for graphics I’ve become devoted to Illustrator. I still use PS to edit my photos. Using symbols have become valuable as it saves time in the long run, say you need to make a change to an icon, you can edit the symbol and it will update the icons on all art boards. 9-slice scaling for the symbol helps with certain shapes.

Downside of Illustrator is that invision support for it is still in the works. PS is still the industry standard.

As for Sketch, I found no real advantages over Illustrator. Also, it’s just another software to learn and pay for, everyone has Adobe and it’s easier to pass on an Adobe file than a Sketch file.

Axure is great but it’s expensive and it’s a UX tool. I have no strong opinions of it but if you’re going to use Adobe/invision then I don’t really think there’s a need for another program.

As for invision, the most valuable feature for me is the mobile skins. It’s easy to neglect mobile but it’s so important. Invision makes sure I don’t neglect it.

I’ve never used bootstrap as I’m a designer and bootstrap is a framework for developers to use when they don’t have much in the way of design resources. I have no solid advice on this.

Grids are a funny one. I’ve tried designing with grids and failed every time. My team have decided that designing the same screen at multiple breakpoints is the way to go. This way I have more design freedom and I don’t have to calculate percentages or work with odd numbers. I can snap everything to my standard Illy grid. This often means extra work because I have to provide 3 different versions of the same screen, but it pays off in the long term.

As for providing direction to your developer, you ask him how he likes to work. Some want the design working files, some want detailed annotations overlaying the design in a pdf, some want a PNG which they can place into the browser using a chrome and then code over the top.

One thing all developers seem to like so far is a detailed style guide. There’s lots of articles about it, and when I say “style guide” I mean a document with all of the typography, colours, form field/button/table/ styles as well as effects such as corner radius, drop shadows and borders. The development team that I work with use my style guide as a bible and if don’t update it, bad things happen. Check out the Google Material Design style guide for inspiration.

There is another type of style guide that UI Developers refer to which I think is actually coded. I can’t comment on that.

It’s a very subjective topic, you’ll find a process that works for you!

Source : Link , Question Author : Daniel Vianna , Answer Author : Mithical

Leave a Comment