Designing for Responsive
HOW PHOTOSHOP ALONE, NO LONGER CUTS IT
In the past, web designers have always used photoshop to design their webpages to present to the client. This was a great method while website designs were only required for static desktop screens but now that technology requires us to cater for multiple screen sizes and devices, the design method has had to change too.
A routine design process would include designing the home page and multiple inner pages, which with feedback from the client, would go through multiple rounds of revisions before refining the design to hand over to the developer to build. Add a tablet and mobile screen designs to the process and all of a sudden you have 3 designs of each, all of which you have to update with every revision requested from the client. So instead of making edits to 1 design, you are making edits to 3 designs of each page and before you know it the design process of your overall website project has burned many hours of the total project. This is a stage of the project where many agencies and designers lose time and often get burnt. As a web designer that watched the transition occur from desktop only design to responsive, I very soon realised that photoshop on it’s own was no longer the time-efficient method to designing websites. This is when I got introduced to prototype designing on a platform like Webflow.
FROM PHOTOSHOP TO WEBFLOW
The digital agency I used to work for, realised that photoshop was no longer the answer to our design process, so they started the hunt for a design and development tool that we could prototype websites on - this is when I got introduced to Webflow - a professional web design tool for designers and developers. “It gives you the power to build custom, dynamic websites visually, while writing clean, semantic code for you.” How exciting - this meant that with this platform, I could build a website visually with all the interactions and effects in a browser that worked immediately on all screen sizes - allowing the client to view how the website would look in reality, on all screen sizes with all it’s interactiveness. Then when revisions were made, it would easily effect the design at all dimensions and have code ready to export for the developers to integrate with the desired CMS! This cut down the design hours dramatically making the whole process much more efficient for the client, the designer and the developers! It makes everyone happy!
Does this mean photoshop is useless? Of course not - it just becomes a much smaller part of the design process. Instead of designing all pages in photoshop, I now only mockup the Home pages in photoshop to establish and confirm the artistic direction that the client would like to go with and then from there, I build the website in Webflow. I design and build the core pages in Webflow and once the design process is complete, I export the code and pass it on to the developers to integrate into the chosen CMS. Since using this process to design responsive websites - I haven’t looked back! Happy clients and happy designer!