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

Question

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.

Answer 1

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!

Answer 2

Just thought I'd comment as a developer getting into design and also someone who uses Bootstrap more than I'd like to admit.

On using grids...

Since you're already familiar with the Adobe workflow I would just learn to work with grids in Photoshop. There's lot's of tutorials you can find, along with PSD grid templates. Here's one that looks like a good place to start. As a developer it's easy for me to think in terms of grids because most markup is organized in 'containers' of some sort (aside, div, span, etc) which are usually divided up in grid-like fashion. As a designer I like the extra constraint of having to organize my content into relative divisions and it helps to ensure the design will work in a browser in close to the same way it does in static form.

On designing for mobile and desktop...

Again, if you're already familiar with the Adobe workflow, especially if you using CC versions, you should try Edge Reflow. It makes it super easy to adjust you designs for different screen sizes, you can import PSD's directly, and it will even output CSS code for you to use in development. Macaw is another great tool and the code it outputs is some of the best I've seen in my opinion but I understand not wanting or having the time to learn a bunch of new tools so Reflow is still really good option.

On using Bootstrap...

Bootstrap's great, especially for rapid prototyping. However, I wouldn't get too hung up on frameworks. Bootstrap is very opinionated and I find myself spending a lot of time overriding styles that I could have just created from scratch. I agree with some of the other answers that making a style guide that defines how elements should be constructed will be much more helpful, especially if you aren't already working with Bootstrap and aren't familiar with it's way of styling things.

If you do go with Bootstrap, spend some time making a custom 'theme' that fits the mocks you create. There's a great Customize page on getbootstrap.com where you can adjust all the values you need and then out a custom theme to work with. You'll need to know a little bit about CSS values but you won't have to learn to write CSS so it's a lot quicker. Also, if your dev already works with Bootstrap, nothing has to change. He just swaps out your file with the default one.

Either way, just remember their are lots of good tools and Bootstrap is just one of them. If you're going to do a lot of work for web (or even mobile) you'll have to at least be familiar with how they work. You don't have to take a class or anything but learn the basic of CSS, and maybe a preprocessor like Sass or LESS. It will help you understanding the way your visual components actually get built and you'll be thinking about that as you make design choices later on.

Answer 3

How can I plan my grid for both the mobile version and the desktop using Bootstrap? Should I use Photoshop combined with another software?

You need to learn CSS and how Bootstrap works to design for a responsive website. This isn't something you do with Photoshop.

In fact, if you don't know CSS/Bootstrap, Photoshop will get in your way, as you will start designing things that work just fine in the logic of a mock-up, but will be a huge chore to actually implement in usable markup.

If you don't know CSS/Bootstrap, I suggest you get with someone that does and have them help you as you go along with your mockups to catch any big gotchas for you.

Answer 4

I perceive two questions here:

1. I want to design a Bootstrap 3 site, where do I start?
2. Should I be purchasing "designer" buttons and flair for a site I'm building?

A couple of pointers:

1. I personally recommend the experience gained by starting with your Photoshop or Illustrator mockup, then coding by hand in HTML and CSS. Still, there's no shame or huge disadvantage starting with Bootstrap 3 - it's built to get websites off the ground fast. Bootstrap itself has no official supported .psd templates, but a quick Google sesh will find you plenty of shared resources such as This Link.
2. Debatable. A designer worked hard to create something of value for you to make your website look pretty. Just buy it and use it and make them proud.