Design techniques, particularly Responsive Web Design techniques, have evolved considerably in recent years.

The world wide web is ever changing and as designers it’s important we remain eager to stay up to date as much as possible. This can be as exciting as it is terrifying!

For many agencies, our processes haven’t quite caught up. I’ve always used Photoshop / Lightroom for simple web design, but have wondered lately with having so many pages to design and varying screen sizes there’s got to be a better way? I’m sure I’m not alone here.

Photoshop is one of the most controversial topics among web designers today, and has been since responsive web design came on the screen in 2011.

I could ditch Photoshop after years of learning the program, mastering grids, selection tools, becoming a layer organisation whizz, advocate of blending modes and photo editing extraordinaire. I could learn a new web design app and never look back. Everyone is doing it … right? As a designer who has learnt HTML and CSS, I have to ponder, what keeps bringing me back to Photoshop? There’s not exactly a “Make this responsive” option in the menu, or a plugin you can simply download and install to do this. Some designers are amazing at using code to express design. I am not one of them. Staring at code isn’t the best way to breed creativity and ingenuity. Quick sketching and then taking into programs such as Photoshop enables us to think through unique solutions rather than rely on the ones developers are using to execute through code.

Fluid canvases, adjustable breakpoints and easy browser previews aren’t native to Photoshop – but I can hope these features will be introduced by Adobe in the near future. However, the lack of these features make Photoshop a great environment for solely focusing on the design principles and creativity – as one “single moment”. Not everything about designing in a static medium is as bad as you might think. You can think BIG and exhaust creative ideas that just aren’t achievable in basic HTML and CSS.

“Each site design presents a set of challenges and problems to solve, and you can spot the WordPress templates a mile away from unique and considered ones” Dan Rose

Fortunately, there are also a few exercises you can do in Photoshop that are much shorter in scope than full page designs and allow you to work with the browser. These include style tiles, (see below)style prototypes, visual inventories and element collages. Exercises such as moodboards help bring the team together as a part of the process, helping to define the most appropriate direction up front. This means we can continually refine as we work towards a finished site.

These can then be exported and viewed using online prototyping software such as Marvel and Invision. Both as simple as dragging in a PSD. We’ve all experienced that horrid moment of having to present a client flat designs, Marvel has been life changing. Photoshop CC has also introduced two great features called Generator and Extract Assets, which means no more continually going back and forth between Photoshop and the browser.

To make a responsive workflow successful we need to shift our focus from “Which tool should I use?” to “Where does it make sense to use each tool in my process?” An approach that works for one project may be ineffective for another and today’s workflows are about staying agile. I believe we can stay agile using Photoshop but we need to rework our traditional approaches to do so. The fact we now have to design for multiple screens places greater emphasis on this!

Overall, Photoshop is a fantastic web design tool that works for me. You might prefer a different app, and that’s ok, however, I do still believe Photoshop is a viable choice for web design. Even so, tools that aim to replace it will continue to come. There’s no single approach that stands above the others for everyone because the situations, clients and projects encountered can vary so greatly. Find what works for you, share it and continually improve on it.

Responsive Web Design isn’t so much an option, it’s a necessity these days we await you!