The future of web design and why Photoshop isn’t dead

5 min read
Watb Team
Graphic steps photoshop image

So you’ve designed these beautiful mock-ups in Photoshop, and the client loves them. They’re going positively doolally over your ideas, and both you and they can’t wait to see this new website come to fruition in the browser. You shuffle over the PSDs to your developer, kick back with a cappuccino and wait for the good times to roll.

Except, it’s at this point we usually start to see problems with this process. The developer starts pouring over your designs and the list of issues starts getting longer and longer. Before you know it, half of your design either can’t be done at all, or isn’t sensible. But you’re a web designer, you understand this happens, so you work closely with your developer and reach compromises. The site is completed and you’re both delighted with the end result.

Except, the client isn’t. The end result is a project that looks nothing like the beautifully crafted, pixel-perfected PSD they signed off on. Up in arms, they withhold their final payment and the frustrations continue as your developer tries to find the jargon-free words to explain the decisions made.

Sound familiar?

If so, it’s because you’re still following a process that is both dated and problematic. It’s a process that costs you money, client satisfaction, and causes friction between the members of your creative team. It’s a process that many agencies are abandoning because frankly it causes too much trouble.

Photoshop isn’t dead

But it’s role in dictating final webpage designs should be. Photoshop is totally inept at replicating browser conditions, being a tool originally designed to handle photo editing. It can’t handle responsive designs either, so you must create separate designs for all the different devices. This causes problems with fluid based design, because how your design behaves between those PSDs is incredibly difficult to predict.

Unfortunately, the era of Photoshop-design got clients used to seeing full page mock-ups that were then turned into table-based code. This allowed the end result to look almost exactly the same as the PSD. Clients therefore expect to see this and get uneasy if they can’t. The reality is however that this era is long dead – clients must now use their imagination more when interpreting a designers ideas.

This same principle applies to many other areas of creative design – architectural drawings and blueprints require imagination to interpret. It’s not until the builders finish their job we see the end result. How well this approach works not only depends on the client, but also the ability of the designer to utilise the tools at her or his disposal. This still includes Photoshop.

Use a variety of methods to show your ideas

So how do we communicate our ideas to clients without full PSD mock-ups? My suggestion to designers is to consider the following:

  1. Understand the problem and the project goals
  2. Seek inspiration
  3. Conceptualise, sketch and draw
  4. Wireframes and UI
  5. Assemble aesthetic ideas in Photoshop (or similar)
  6. Initial development in browser

1. Understand the problem and the project goals

Your first objective as a designer is to understand the goals of the project and the problems it’s trying to solve. Yup – I just re-worded the title there – but it’s an important step in the creative process. Designing without clear direction leads to websites that might look great but don’t achieve what was set out. Do some research to help you too, look at competitors and get a better understanding on the project context. This step will make you a better designer.

2. Seek inspiration

To do this, follow these steps:

  1. Step away from your computer.
  2. Go outside.

Ok – I’m half kidding, there is a lot of online inspiration. That said, endlessly trawling awwwards or codrops probably won’t help you much. Taking a day away from the screen, to explore a new area, take photo’s, read books or get yourself at one with nature can not only inspire you but help clear your head. Try to find unusual sources of inspiration, and consider looking at other areas of creative work such as art, architecture and even music. You could assemble your inspiration as mood boards to show the client the visual direction you’re heading for.

3. Conceptualise, sketch and draw

Hopefully by now you’re an inspired and educated designer. It’s time to start designing – but try to refrain from your screen still. Conceptualising is best done with pen and paper, it’s quicker and your creative juices will flow more freely. Start creating ideas for colour schemes. Draw out site maps and visualise how each function of the site will work. Draw pretty pictures, create gradients, conceptualise typography.

4. Wireframes and UI

I also suggest that you should wireframe your project. You might feel this could be part of step 4, but the important distinction for me is wireframes shouldn’t involve aesthetics – colour, type or styles. This can be done with online tools, but my personal experience is these cannot come close to matching the speed and flexibility of pen and paper. It’s also a great time to start involving your developers, talking them through your ideas and ironing out any potential browser issues.

5. Assemble ideas

At this stage, it’s still good to use Photoshop to combine your wireframes, colour schemes and type ideas into mockups. But you should treat these mockups not as final designs, but as quick experiments that give an idea of how your design can come together. They shouldn’t necessarily be fully complete – and you might find it better for your workflow to only mock components of the design.

6. Initial development in browser

Work with your developer to start fleshing out a few ideas in browser. Perhaps you’ll just create some ideas for navigation, modals or other various components of your idea, experimenting with animation and aspects of the design that only work in browser. These could come together as a style tile, which gives your client a more accurate representation of the behaviour of your design ideas in browser.

At this point, you should now have a body of work assembled that put together, much like pieces of a jigsaw, gives you and your client a great impression of how the site will end up once developed in browser yet without full PSD mockups. You’ll still have used Photoshop, but as part of a workflow that gives greater consideration to all areas of creative thought and process.

Granted, it can be a more disjointed and complicated process. Some clients may still be satisfied. The trouble is, for as long as we keep designing full mockups in Photoshop, we’ll never get away from the problems doing so incurs. Break the mould, and be a better designer and a better agency.

Photoshop is totally inept at replicating browser conditions, being a tool originally designed to handle photo editing. It can’t handle responsive designs either, so you must create separate designs for all the different devices.

Social Media Management Software

In order to promote your business and reach consumers that spend an entire 24 hours a week online, you need to make sure that you have a viable social media strategy in place.

By posting unique and interesting content on your social media platforms, and by actively engaging with followers, you can start to turn this into a funnel for generating leads.

In order to stay on top of your social media strategy, it’s important to have some form of social media management software to do some of the heavy lifting. Software such as this is imperative for scheduling, tracking and monitoring social media content.

At its best, social media management software can help you not only plan your content months in advance, but also remain reactive by letting you tune into ongoing news stories or trending topics.

Screenshot of Hootsuite's homepage

We recommend: Hootsuite

There are a whole bunch of social media management companies out there and all of them offer roughly the same sort of package but Hootsuite is the only one that offers an actually free service (as opposed to just a free trial period).

They do try to hide it on their website though so make sure you follow this link in order to get to the right page.

The free version of this software lets you:

  • Manage up to three social media profiles from a choice of channels including Facebook, Twitter, Instagram, Pinterest and LinkedIn
  • Schedule up to 30 posts in advance at any point in time
  • Track follower growth, likes and comments
  • Integrate two RSS feeds in order to find and share compelling content
  • Access Hootsuite’s online help center and community forum

Of course, there’s also a number of paid-for packages that you can buy from Hootsuite that give you access to a great number of services including higher ad spend budgets, automated post scheduling and custom analytics.

But if you’re a small business looking to get started, the free version of the software should be comprehensive enough to allow you to get your social media strategy in motion.

Website Tracking Software

We’ve said before that the secret to a successful lead generation strategy is to keep analysing and refining your methods. Well, website tracking software is the best way to conduct this analysis.

By digging into the analytics of your visitors’ actions, you can start to gain a better picture of why people come to your site, what they want from it, what they dislike about it and how you can improve upon their experience next time.

There are a wide variety of services that can fall into the category of website tracking software, including heatmaps, funnels, user polls, surveys, visitor recordings and more.

Basically, any kind of software that collects data about the ways in which your visitors interact with your site can be considered website tracking software.

Screenshot of Hotjar's homepage

We recommend: Hotjar

Whereas there are a multitude of smaller software companies that focus in on just one website tracking service, Hotjar offers an array of useful tools.

Hotjar tools include:

  • Click, move, scroll, download and share heatmaps that can also be split by device type
  • Visitor recordings that allow you to replay sessions of real site visitors
  • Conversion funnels that identify on which page and at which step the most visitors are leaving your site
  • Form analysis that can help you to discover which fields take too long to fill, which are left blank and why your visitors abandon your form and page
  • A customizable widget that allows you to create pop-up feedback polls
  • Responsive surveys that can be distributed through web links and emails, or featured your site just before your visitors abandon the page in order to discover what their concerns are
  • The ability to recruit test users in order to get instant feedback on your site

Hotjar’s free service is able to collect data from 2000 page views a day and will give you access to up to 300 visitor recordings and 3 heatmaps, forms, funnels, polls and surveys. Unlimited users can be added to your account and Hotjar will also store your data for a full year.

While we’d normally recommend free services when possible, it’s probably worth paying for Hotjar’s Plus plan to begin with.

For just under £25 a month you can collect data from 10,000 page views a day and have unlimited services and reports. Plus there’s even a 15-day free trial for you to test out whether you like their software or not.


Lead generation doesn’t have to be an expensive endeavour.

What’s important is that you put real effort into all of your interactions with potential leads - whether that’s through educational and informative blog posts, social media interactions or even just a chat on the phone.

If you believe in your business’ ability to help its customers then all you have to do is let that shine through.

Ultimately, these tools are just there to help you meet potential leads on their level. The rest is up to you.

Related Posts

Posts you may also like