Okay, I’m probably going to seem a little biased, but if you’re going to be designing for the web, you should be using tools for the web. And I know for a lot of designers Photoshop is totally your jam. I get it.
But I seriously can’t stress enough how cool designing in the browser is.
First thing’s first. Let’s talk tools.
The beauty of designing in the browser is that you basically only need too things: code and your web browser. And there are a number of handy tools out there to make the process super fast.
CSS Frameworks make it crazy easy to get the ball rolling and whip up prototypes on the fly. For the longest time I’ve used Foundation to get my designs started. But for my projects where I know that I’m going to be using the Genesis Framework, I’ll use the Genesis stylesheet plus BASSCSS for all my quick prototyping elements. So far it works like a charm
CSS Pre – Processors
If you can take it up a notch and go from using vanilla CSS to either SASS or LESS, not only will your design projects get completed faster, it will completely change the way you look at CSS. Have a look at the SASS website and have your mind blown.
Step 1: Make A Plan
First and foremost, talk with your client and start sketching. I usually bring a notebook with graph paper when I meet with clients. At this stage you want to answer as many questions as possible and brain storm ideas. It also helps to have them fill out a project planner so that way you can better understand the scope of the project.
Step 2 : Arrange The Content
Rather than whip out Balsamiq or Photoshop to come up with a static wireframe, this is where your CSS Framework comes in. You can start arranging content on the page using a CSS grid, and the best part is that frameworks will have responsive capabilities baked in. No need to create tons of static files! The important part to keep in mind in this stage is that you want to create with no commitment. Don’t add any extra styling. Only focus on the content. Once you can get the client to agree where everything goes early on it will save you tons of time and headaches later on.
Step 3 : Start Designing
Once you’ve got the content out of the way, the hard part is basically over. Now all you have to do is start adding images, colors, and typography to the design to make it come to life.
Does the client not like the color scheme? Is the font not what they were thinking? Does an entire section need to be removed? All you have to do is change a few lines of CSS. And if you’re sitting with the client, you can do it by using inspect element in the browser so the client can see the changes in seconds. No need to edit and re-upload files.
I know that some designers are probably going to find this process might now work for them. And that’s okay. But if you’re willing to give it a try, it can save you a ton of time. If you can keep the creative juices flowing the Photoshop or Sketch, by all means have at it. But personally, I’m going to stick with code.