Design 101: Photoshop for Web Design isn’t Just Outdated… it’s Bad Practice

There once lived a day where Photoshop was the go-to place for your entire web designing creativity to be born. Yes, the day where you could convert those magical PSDs to HTMLs. That day has long passed, though. If you’re considering to create a website with Photoshop, let me chime in with a few reasons why not to and how it’s just bad practice. Don’t get me wrong; Photoshop is a great program with amazing capabilities. While you can still create web assets like images, you shouldn’t use it to make web pages. Keep reading and I can pretty much guarantee you’ll agree with me.

The Day of PSDs

The practice of creating a website in Photoshop was once a good idea… in 2003. Back then; it worked well because you could see precisely how your site was going to look.

The process was simple and effective. Here was a typical workflow, thanks to Treehouse:

1. Design a high fidelity pixel-perfect mockup in Photoshop of exactly what you want your site to look like.
2. Use the slice tool to divide your website’s imagery and then export it for the web.
3. Write HTML and CSS that utilizes the imagery you exported from Photoshop.

Easy, right? It worked so seamlessly that a designer could create an entire website mockup, hand it over to the web developer, and the developer would then write the code. In just a few steps, your site would be live.

PSD to HTML: Why it’s Outdated

So why can’t I just follow that workflow above? The answer: the web is responsive and rapidly changing. The problem with PSD to HTML is that you’re designing for a fixed resolution. In the present day, the web is completely responsive, meaning that a website will have to “…respond to the user’s behavior and environment based on a screen size, platform, and orientation.” Because a Photoshop environment is a static one, there’s no way to know how it will turn out and act on the web until it’s actually developed. A Smashing Magazine blog article states, “No manner of fixes or hacks will produce an exact match of our Photoshop comp.”

If you’re not designing a responsive website, you’re missing out on all the benefits. Check out this infographic posted by Shalaina Ocasio: Go Mobile and Responsive…Or Go Home! [Infographic]

How to Use Photoshop Now

Sure, you can design a website on Photoshop for a general idea, but it’s only going to be a drain on time in the long run if you make it pixel-perfect. My suggestion to you is if you absolutely want to incorporate Photoshop into your web development process is that you use it as a tool instead. For web design, you can quickly sketch up some cool ideas in a few minutes that you’d like to present to your web developer, but ultimately they will be the ones to tell you if it’s an actually feasible idea or not. You can also use Photoshop to create the assets for websites, such as designed images, GIFs, ads, etc. This will be a more effective use of your time so your developer can simply plug your items into a layout.

(Image Credit: Sketch website)

Introducing Sketch: Photoshop’s Successor

So what if you really loved web design, but your web development and coding skills are still subpar? Let me introduce you to a present-day, responsive-ready successor to Photoshop; Sketch. With Sketch, you can design responsive websites for the modern age of web design. What’s more is that you can use Sketch for other things like designing interfaces or vector-based iconography. That’s pretty awesome. Not convinced yet? What if I told you that you can see a real-time preview of your designs right on your iPhone, iPad or web browser? Yep, Sketch can do that too.

Even designer Sarah Parmenter (@sazzy) has shown her love for Sketch: “I love Sketch. I made the switch some time ago and I haven’t looked back. I was a Photoshop advocate for my entire working life until Sketch came along, and within a week, I was a total convert.”

In the end, while Photoshop web design is an outdated thing of the past, you can rest assured that there’s a better solution to take its place. That solution is Sketch. Don’t waste your time trying to make Photoshop websites, it will only bring you set-backs. Instead, use Photoshop as a tool to make web assets such as images, GIFs, ads, and other pieces for your developer. Give Sketch a shot. It’s an opportunity to challenge yourself to be a better designer by learning a new web design program. A modern and practical web design program. Don’t let the opportunity pass you by!

Kyle Christensen

Kyle is the Brand Director at Red Branch Media.

Kyle leads our Graphic Design Department at Red Branch Media. His ability to manage incoming tasks, collaborate with the design team, hit deadlines and keep our file storage system well-organized has helped to shape the design department clients love today. While he’s away from the branch, he spends his time playing drums, video games, cranking the latest emo, pop-punk and screamo songs on Spotify, drinking local Omaha brews, and enjoying life with his wife. Kyle has a BASA with a Concentration in Graphic Design and a Minor in Art History from UNO.