Web Design in Photoshop – Nonsense at its Best
Up front, I would like to explain that to me, Adobe Photoshop is one of the best programs for editing images even though there are many good alternatives by now. I am surely not opposed to using Photoshop but I never understood why there are web designers and especially graphic designers who spend hours creating web designs in Photoshop and then later use exactly these „finished“ websites as a template to spend even more hours creating an exact copy with CMS or Framework or even re-program them from scratch.
Just to say that there are great reasons for content management systems such as WordPress, Drupal and Typo3 and even frameworks such as Twitter Bootstrap that we cannot seem to do without. To me, there are not many reasons to sit down in front of an empty text editor and create a Html and Css frame yourself. It neither helps the client nor the designer or programmer.
Graphic Designers are not Web Designers
Again and again during in my professional life, customers turn up to our initial conversation with laboriously created PSDs saying „Well, our web designer already created the site in Photoshop. It just needs to be programmed now.“ Depending on the quality of the PSD file, you can expect that the customer has already invested a lot of money for the creation of this website or to put it more precisely for the idea of a website. To me, the problem is that the term ‘designer’ or ‘web designer’ is very broad. I got to know designers who admittedly have created very stylish and meaningful web designs but have not even thought about other aspects such as usability, page speed, responsive design or the actual technical implementation in general – and this is exactly where the problems begin.
Someone who has never written a single line of code or for whom fields such as technical search engine optimisation and usability are not a part of his daily work routine will naturally have a problem including them in his design. Worst case would be that the customer now receives a finished website as PSD file that the actual web designer or „programmer“ (the implementation of a website usually does not have much to do with classical programming) has to adapt or redesign from scratch since there are technical obstacles, a complex design often comes at the expense of usability and of course technical SEO factors such as page speed are not taken into account.
Full-Stack Web Designer
Creating the Site live in the Browser
In case you have acquired the above mentioned knowledge, it makes sense to create the site from the beginning live in the browser. I personally use simple Wireframing tools to create a basic framework of the site as fast as possible to then get started on the design in the browser. Of course, it is necessary to use HTML and CSS for this but the advantages are clear: I can immediately determine what works and what does not, I can see the impact of my design on website speed from the start and I work with Twitter Bootstrap on nearly every single project to test the responsive design from the beginning as well. I also am a great fan of mixing responsive design with adaptive design in order to make optimal use of breakpoints. Admittedly, this approach does not come without disadvantages. What I have often heard from colleagues and have had problems with as well is that creativity can easily suffer through this process. Often, we have a certain design in mind, that we have to visualise first in order to determine whether they work or not. Naturally, this visualisation is easier to create with the various Photoshop tools than in the browser. For this reason, it really makes sense to use Photoshop to design certain sections of the site. These section should, however, be kept to a minimum. I personally always try to implement my idea or design in the bowser as soon as I realise it works.
I think that Photoshop has not yet lost its position as a big part of web design. Especially for freelancers and web designers who implement designs single-handedly or as part of a small team, however, it does not make sense to me to create a full website in Photoshop and then transfer it to the web. Particularly the customer is going to thank you for this as the design process in Photoshop is very time-consuming and in the end it often delivers designs that can hardly be realised as planned. A designer who works in the browser from the get-go will know early on what works and what does not which especially with responsive designs can become a real burden if Photoshop is used.
Join our NEWSLETTER.
Benefit from great online marketing tips & tricks.
About the Autor
Daniel Knoflicek runs the web agancy Slidebird Webstories since 2012 . The Agency is specialized in online marketing, webdesign and search engine optimization. He also founded the Start Up “Ernst M.” in 2015. Ernst M. produces vegan Jam in Austria. Daniel Knoflicek is responsible for the online markting and the brand awareness of this young Start Up. Furthermore Daniel Knoflicek startet to support the App DESK.WORKS as an Brand Ambassador. He coordinates and look after the co working spaces in Austria.