I see myself primarily as a designer, and since I started web design I have always used Photoshop to get my ideas down before I put them into code. This has been my method for a long time and until recently I have never questioned this.
I have read several articles which talk about designing websites straight in the browser and skipping Photoshop altogether. My immediate thought was to dismiss this, until I read some of the benefits which make a lot of sense.
Typography
A huge downside of designing in Photoshop is the way it renders text, and how different it is when you attempt to recreate this text in a browser. The font size is almost always different and this can hinder your whole design.
When a design has been agreed the client wants to see a final product which is identical, if the text looks completely different, it is hard for your client to be happy.
However there are a few ways around this. Tools such as Typetester let you see exactly how it will look in each browser, so you can choose a font to suit your design.
Client Satisfaction
A major benefit of designing right in the browser is that the client will never hold any false expectations about what they will be receiving from their site. They will be able to see from the outset how it looks in different browsers and how it will feel to use their site. If they are happy with the design early on, it makes the job a whole lot easier as once the design is agreed the site will be mostly coded already, meaning there will only be small tweaks and changes to make.
Web Tools
Say for example you had designed a site for a client, they liked the layout but wanted to try a few different things. They ask for rounded corners – if you are in Photoshop you now have to go through each element and make painstaking changes which are time consuming. Whereas in the browser you can simply add the ‘border-radius’ property and the job is a gooden!
With all the new CSS3 elements it also means the same applies for other things such as drop and text shadows – and because you are designing directly in the browser the client will always be able to see how it looks in older browsers and will never be under any false pretences that it will look exactly the same in all of them.
Less Experimental
The major downside for me when it comes to designing in the browser would be feeling limited with regards to experimentation or breaking out of the box with an exciting layout. There are no real boundaries with Photoshop and that is what I love about it. Designing straight into a browser makes it much more difficult to express your creativity and as primarily a designer I feel this would hold me back.
Conclusion
In conclusion, I personally don’t think I will be making the switch from Photoshop just yet. I feel like I can express myself much more with a completely blank canvas and no boundaries. I can however see the advantages of designing straight into the browser, and for some projects I understand it could be very useful.
I wouldn’t want to get into a trap of using boring layouts with no exciting design elements. I like a challenge, and one of the best ways to improve myself as a designer is to create interesting layouts and then methodically work my way through the development stage enhancing my skills.
Meagan Fisher has written a brilliant article on the subject, you can check it out here.
