Table of Contents
Should you create your website layout in Photoshop first or is it better to jump right into code and design in browser? In this post, I want to give you couple of reasons why ditching Photoshop and working straight with code instead is better idea.
Before we take a look at individual problems, there is something to mention first. Not every web designer also knows how to code. Some designer only create the layout in some graphic software and after that, their job is done. I don’t want to deal with that old cliche question “Should web designer know how to code?” because, first, we already touched it earlier and second, why should you do or learn something just because he or she said that? Use your head and think for yourself instead.
Responsive design
This is number one problem when it comes to web design in web design. These days, there are dozens of different devices used to access Internet and browse websites. What’s more, this percentage of users will only grow bigger in the future. When you create page layout in Photoshop, you are working with canvas that has static width and height. If you want to create layouts for different breakpoints, you have to rework and change all the elements in your psd. This can require huge amount of time depending on the size of your project. On the other hand, when you work with code, it is very easy to modify whole layout and you can do it in just few minutes.
Transitions & animations
One of the trends for this and next year will be transitions and animations. Thanks to them, you can create more fluid and natural experience for your users. Simple transition used for button or links on the page can make change the overall feeling your user will have. Using animations for sliding the content and opening windows also looks much better. In Photoshop, however, you have no chance to create this. At least it is not that easy like writing few lines of code (don’t forget the prefixes).
States of elements
Unlike problems above, this one is a bit different. Photoshop offers some way to see and work with different states of elements on the page (canvas). One thing you can do is to simply duplicate the element you want to work with and modify it. After creating various copies for default, hover and active state, you can switch between them via turning on and off their visibility. However, this option will . I don’t think that this can supplement experience you get when designing in the browser.
Time
When you are working on some project, either personal or for client, time is often one of the constraints you have to keep on mind. If you are creating layout in Photoshop first, you are also using big chunk of the time you have to get that project done. After finishing work in Photoshop, you will probably need similar chunk of time to convert the layout into code and to fix all problems that may occur. Basically, you are spending twice as much time as you would if you did all the work in code. Who wants to work twice as much time?
What about clients?
Sure, there is also the other side of this problem … You are often working not for yourself, but for some client and he will probably see some mockups of your ideas first before he will agree on moving your idea further. So, what can you do in situations like this?
You can try couple of things. First and easiest suggestion is to turn your idea into few wireframes. Creating simple wireframes is much easier than working out whole layout while it still contains the same elements. Yes, it is less appealing, but it requires less time and it is also much more suitable for iterating and modifying the layout according to client’s needs and recommendations. Second suggestion is to code a simple landing page. If you are not absolute beginner, getting together one page layout “demo” should not require more than one or two days at max. When you think about it, it is actually similar amount of time you would spend in Photoshop anyway.
The main benefit of coding this “demo” for your client is ability to play with it. Client can see how elements on the page interacts with user’s actions. It is much easier to give the demo to your client and let him understand how everything works than try to explain it while presenting him some png, psd or whatever.
Summary
To sum it up, the biggest downsides to Photoshop in case of web design are static canvas, unavailability to see transitions and animations, not that good workflow with states and time. These problems might not seem so important for you, but when you compare designing in Photoshop (and then in code) with designing straight in code, the differences become more visible. Your clients can benefit from this approach too. It will be much easier for them to make decisions based on experiences from playing with live “demo” than by looking on static image. AD
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
I totally agree with you. For all my projects, I’ve always made the design with the code, what it allow me to test my design with different browsers and supported (tablet, smartphone), and i can see if it’s adapted or not.
Thank you for your opinion on this topic! You are right, Photoshop is completely useless when you need to test various resolutions, not to mention browser compatibility.