If you’re like me, then you’ve had a love/hate relationship with Photoshop for almost a decade. The software is bloated, it crashes right at the moment you forgot to hit save, and it produces a design that is nothing more than a useless and non-functioning image to send to clients. Despite loathing the software that is the staple of our industry, we can’t live without it. High fidelity mockups have spoken in a way that we just can’t beat with any other applications… until now. Let’s explore the next stage in the evolution of the web and one where Photoshop is a waste of our valuable time. Here’s how to kill Photoshop and do responsive web design in real-time with the only app we need: the browser.
Contents
Why Kill Photoshop?
1. It’s Double the Work.
The main reason to kill Photoshop is because it doubles or even triples your current workload. You can spend hours of your precious time inside of Photoshop and what do you get? A picture.
2. Clients Can’t Use It.
This brings me to my second point. Photoshop produces a mockup that clients simply can’t use. To quote Steve Jobs, “Design is how it works”, and if your clients can’t use what you’ve built then you’re missing a huge piece of the puzzle. Once your clients get to use your design and they find that it doesn’t work for them, if you’ve used Photoshop you’re back to square one.
3. You Can’t Make Changes Live.
If you’re designing in the browser you can make changes to your design in real-time. Let’s say you have a client drop in the office and they want to change the color of the main headline (or gasp, the size of the logo), but they’re not quite sure what color they want it to be. You launch your browser with a single tool (more on this later) and iterate as many colors quickly to find the perfect shade of light-ish, aqua-ish, color of my second wife’s Mercedes, blue. (you know exactly what I mean)
Client wants a red headline? Who needs Photoshop when you can make changes live in Firebug?
4. CSS is Ready.
For years there were certain things that we needed Photoshop for that CSS just couldn’t do. These included things like buttons, shadows, borders, etc. Now that CSS is all grown up, we can do many of the stylistic elements that we crave in CSS, and Photoshop is needed less and less with every new release.
5. Photoshop is Expensive.
Part of the beauty of the web is that it’s income-agnostic. Anyone can get into web design with a basic PC (gross) or an older model of Mac (yum, that’s better). The problem for years has been that you needed a machine that could handle the load it required for the latest version of Photoshop that you had to mortgage your home to get in the first place. You can keep from having to sell your little sister to buy Photoshop now that you can design straight in the browser.
6. Photoshop is Static.
Now that we’ve established that Responsive Web Design is the future of the web, why spend time designing a website in Photoshop that isn’t fluid? If you feel the urge to design each breakpoint (where the Responsive Design breaks) in Photoshop, then return to my first point and change “Double the Work” to “Six Times the Work”.
Working inside of Photoshop only gives you an image that clients can’t use.
7. Photoshop Has No Prototype Value.
Sure you can prototype the look of a website inside of Photoshop, but you can’t iterate on the fly. The new evolution of the web places an enormous value in the ability to let a design evolve with use. Designing in the browser also affords you the luxury of creating multiple style sheets for your markup to drastically change the look and feel of your site with just a few changes in the style sheet link. From there, you can again fine tune your design live to really hone in on what the client wants.
8. You Start with Content, Not Style.
A good web designer understands the holy grail of designing for the web: great markup. Content out or the content first approach to design isn’t just a fad, it’s gospel. In his famous article, The Web is 95% Typography, Oliver Reichenstein of Information Architects, argues:
“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”
Oliver Reichenstein argues that the web is 95% Typography.
It’s important to note that “shaping written information” refers to style, but my point here is that if the content that you use is 95% of your design, then the majority of your time in Photoshop is wasted on 5% of a great design. In that light, you’re also spending that time in the wrong order. Designing your content first and coding semantic, standards-based markup is the foundation of a great design and not something you approach as an after thought of Photoshop. Having this markup first allows you to iterate your styles quickly without having to reinvent the wheel every time you make a change.
Conclusion
The next era in designing for the web is a more advanced, mature and intelligent one. It’s about streamlining, semantics, great markup, responsive or fluid design, great typography, web fonts, content first, rapid prototyping and advanced javascript. My argument is that html, CSS and the browser tools we need have all advanced us past the point of needing Photoshop. If you want to be a great designer moving forward, I would start thinking about “Killing Photoshop”. …and here’s a bonus reason to kill Photoshop: no more spinning beach balls! In part 2, we’ll take a look at the tools you’ll need to start your new strategy for responsive web design in the browser.