I just finished my “Pro-tips” article on designing in the browser, but I realized you’re probably still not completely sold on the idea. You’re probably asking why would a designer even put themselves through the torture of having to write actual code while at the same time trying to be creative. Here’s a pros and cons list that might help you get a firm idea of why I’ve chosen to do all my work in browser.
You have to know HTML and CSS
I’m not going to pretend there’s not a certain level of technical knowledge that is needed to work in browser, but compared to the requirements of today web developers, learning HTML and CSS is by far the easiest thing to do. There’s a ton of resources that have helped many designers. If you were to ask me how I started, I would point you to this book. Yes it’s really old. But I would say the best thing that’s helped me is just getting in it and struggling with it.
Things aren’t as easy as click and drag
When trying to decide where something goes on the page, I will admit that moving a box isn’t as simple as just dragging it there. In Photoshop, changing you mind and restructuring your layout are simple tasks. Most of the time, designers will start by popping open photoshop, placing the logo and typing out the navigation. From there, it’s just moving things around until they look good. Hopefully your process is a little better than that but either way, if that’s your plan, in-browser design is going to challenge you, in a good way.
What you see is what you get
I don’t know about your but when I was working in Photoshop, I would get everything to be just right. The text was the right weight, the background opacities where perfect, and all the white space was perfect. My colors would look great and fonts would be working just right. But after my developer finished with it, there were always things that I had to go back and change because they didn’t quite look as good when it was in the browser. That’s because Photoshop and the browser render things differently. When you’re designing in Photoshop you make decisions that make everything look good there. When put in the browser, things are different. If you simply design in browser, you’ll naturally make all your decisions in the same medium that it will finally be in. If the developer is good, the comp and the final site will look exactly the same.
Ability to use Web Fonts
Unless you’re using Google fonts, you can’t download web fonts straight onto your computer and just start using them. I take that back, unless you either buy the font, which is usually really expensive, or find an illegal copy, you won’t be able to use them in Photoshop. Typekit has an amazing number of high quality fonts with a ton of variants for each. It has a really great interface that allows you to find the perfect combination of fonts for your project. You won’t be able to use those in Photoshop, but if you’re designing in browser you can.
If I can do it in the browser I know a developer can do it
As a designer, I feel it’s my duty to be new and inventive. But I also have to temper that with my developer’s ability to produce the idea as well as the amount the client paid for the site. So my ability to code my idea is a good litmus test as to whether it should be done or not. This way, the developer can’t say, “We can’t do that.” (disclaimer: good communication is essential in every web project. You should talk with them every step of the way.)
Efficient use of time
It might seem obvious that if the comp is in HTML and CSS, then the process is going to be faster. Where I work we’ve decided that the efficiency in time is in the initial coding of the site. It’s in the Quality Check at the end. I have some amazing examples of the success we’ve seen in making sure the website is done right from the beginning.
If you’re using Photoshop and your client wants to see the comp on different devices, you’re going help to create a new layout each time. That will exponentially increase the work you have to do. If done in browser, seeing how the site will look at different sizes is as simple as resizing your browser.