Join Over 20,000 Designers and Get My Free Design Tools

Get access to my email newsletter and all of my exclusive design tools, assets, Genesis child themes and more.

Get Free Access
Get Free Access
The Essential Web Design Handbook

Learn to Design Beautiful and Simple Websites

using my simple and proven methods.

The Essential Web Design Handbook is a complete guide to designing simple websites from initial ideas to the final Photoshop project files.

Get The Ebook

Comments

  1. I agree. I’ve tried designing in the browser without working in Photoshop and it slows me down too because I’m constantly fixing or tweaking as I go along, which I find to be very distracting.

    For me, lo-fi mockups on paper followed by working in Illustrator and Photoshop before prototyping in the browser works best. In my view, Illustrator and Photoshop are great for laying down basic layout, colours, typography etc, and prototyping in the browser allows for a) building something in context to demonstrate to clients and, b) it allows for quicker minor iterations before production.

    I ought to give Edge Reflow a go soon. I’ve heard of it but never got around to trying it out.

    • I like creating hi-fi mockups in Photoshop but they’re not so pixel-perfect when I know that I’m going to code it, I just need a design concept and I can take it from there.

      Thanks for your comment!

    • But at same time you can re-use templates and code from previous projects, whereas for Photoshop you have to move everything manually, because there are no styles for interaction between objects (basically, everything is position:absolute in photoshop, no margin, padding, width, height, float, box-size, no even tables)

    • It is possible and I have no doubts that we could make a nice looking theme coding CSS directly in the browser BUT you need a solid HTML/CSS framework and I found myself being much less creative.

      If I can’t be creative when designing websites, then I would have no fun doing it at all 😉

  2. As both a designer and developer, I tend to agree with you and your assessment. I always use Photoshop for the design portion, and even if I am going to develop the site myself, I always try to have my designs pixel perfect. The extra minute or two it takes in Photoshop during design to have the correct measurement for each item makes my development go that much faster. And if I decide to have someone else do the code work, it takes away the questions that come with “sloppy” design files.

    And making changes for responsive design in Photoshop is not all that hard if you have a well designed and clean psd file.

    • Converting simple pages to mobile responsive in Photoshop is not that hard but I found many problems when the pages were more complicated. Especially when then some modifications are needed and you need to apply them both in your desktop mockups and mobile mockups.

      You’re right that it’s all much easier if you keep your PSDs clean.

    • That’s the problem, in Photoshop you have to manually measure “pixel perfect”, because everything is position:absolute, so you have to double check everything with rulers to see if you accidentally moved object few more pixels, whereas in code you can set “margin-bottom: 20px” and all same blocks with that class have 20 pixels between them, no need to manually move them every time you add new blocks.

  3. I have to admit that I never use Photoshop to design websites — mainly because I’ve never taught myself how to use it in a way that’s any faster than designing on the fly.

    For me, I need to design and make changes in realtime, because that’s simply the most efficient way for me to work.

    • As we can all see your process works pretty well for the themes you create :)

      I would still encourage you to try at least pre-design typography in Photoshop. I think you would like the way to quickly try different color schemes.

  4. I don’t think the focus on evolving software is as important as much as the responsibilities of designers and/or from what direction we’re approaching each project. If you’re strictly “designing” a site, why not rely on Illustrator, Photoshop, or anything else you’re most productive with?

    But if you’re going to be involved in “building” a site, you should start with your feet planted in a browser, focused on code, and use those tools as needed for handling required images and assets. At least for now they’re usually the best tools for those particular jobs. The foremost worry shouldn’t be about the tools though–they’ll always be changing. It’s making sure the workflow is laid out and planned for what will best get you from idea to reality.

    • Michael,
      I agree with you. We have to use what’s the best for the project and our team after all.

      Most of the teams I worked with required PSDs from me. If you want to be a flexible designer and be able to work with different teams, then it might be hard to avoid Photoshop.

      Of course, as a designer, you need to know how websites work, so your PSD files are possible to code and you can easily extract graphics from it. I think some designers forget about it and too many people blame Photoshop for it.

  5. In early 2013, Dan Rose wrote about the limitations of Photoshop for web design for Smashing Magazine: http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
    In the fall of 2013, I heard Dan speak at Chicago WebVisions and he had pretty much changed his mind and spoke on “Redeeming Image Editors for Mobile Web Design.” Adobe obviously wants to be a solid player in the web world. I would not give up on PS unless you are a really rapid front end coder!

  6. Great post Rafal. Design on the browser by coding does not work for me either.
    I mostly use Photoshop for designs however I have been playing with Sketch http://www.bohemiancoding.com/sketch/ lately and I loved to use it. Its main focus is on Interface designs and has a great feature that provides the CSS code. But as you said we should master our design skills. We have to work with the tools we are more productive and comfortable with.

  7. Been reading a bit of your site (good stuff!) and had to just pop a quick note in here about InVision. Seems like it might be a missing link in your process that could help.

    Cheers

  8. Totally agree! I have seen many posts where they wanna make me stop using photoshop, but they can not:)

    I am 70% coder, and 30% designer. And even though i am fast and skilled when it comes to the front end stuff. Its exactly as you say, the creativeness dies on me. I have a vision in my head, i code it up, just to realise it wasn’t what i expected it to be. Then i get tired of it since it took me some time to do the stuff. If it had been in photoshop, i would have seen it much faster.

    I think the best way of doing it, is using photoshop roughly. And when you know the idea works, then its a code go ahead.

    William
    pixney.com

  9. Use Export Kit and take the hard work out of converting your PSD to HTML. Its a plugin for Photoshop that will convert your PSD in minutes to HTML5 and responsive CSS3 – no coding required – but it gives you super clean code without tables!

    Check here: http://exportkit.com/plugin/environments/html5/convert-a-psd-to-html5 you can convert your PSD in a few clicks – not weeks or months.

    So the answer to the Post is – YES – use Photoshop for your designs, now with Export Kit you can convert your PSD on the fly to HTML, CSS, JavaScript and more without the hard work.

  10. hi guys.
    I am a beginner just little knowledge of HTML CSS Photoshop and Dreamweaver. i want to learn web designing so kindly give me direction where should i start from. what should i focus on and how should i learn.
    Thanks

    • Hi Shami,

      First of all forget Dreamweaver – I don’t know of any web professionals that use it. You would be best to start with learning about design principles, i.e what makes a good design?,then learn photoshop so you can put those principles into action. Next you should study HTML and CSS followed by basic javascript.
      In my opinion http://www.teamtreehouse.com offer the best structured training programmes. They are also offering a months free trial membership so you can try before you buy.

      HTH and good luck!

  11. I am not sure if it is too late to answer, buut I’ll still do it :)

    I visited an Institute in Berlin where I learned developing and designing webdesign. This was in 2001.

    I never was tought to slice huge images to embed them into a web layout and I have always learned to code by hand directly in the browser.

    If I have a first meeting with a client, I listen to what they want (if they know what they want, which is seldom) and after the meeting I sit at my desktop and create a design online.

    Images for design create http-requests and there are enough of those already by all the scripts and css files a moderate modern site needs.

    Nowadays with flat and material design, there is absolutely no need for designgraphics. The only images used for design should be an oversized background image which covers the whole back of the website, which is quite On Vogue at the moment.

  12. I’ve used Photoshop for nearly twenty years. I used it for web design. Today I mainly use it to edit images though. That is what it’s best for. I found I gradually stopped using it as my CSS skills improved and CSS caught up to Photoshop in terms of its graphic ability. Photoshop was once very good for creating graphics for the web but the adoption of the SVG format requires vector based graphics that are better created in programs like Adobe Illustrator (icons, logos). You really can’t use the graphic you’ve created of your site within your site. You can use the markup you create. I like designing in the browser because that’s the native space for the final product. It’s fluid. The PS canvas is not. HTML/CSS is also a much better layout tool for organizing text.

    It’s really a comfort issue. If you’re more comfortable using PS to layout your website then you should use that tool.

  13. Hi, I’ve always used Indesign or Illustrator to build a site design and pass the PDF file to the programmer. So I’ve never used Photoshop to design a website. But this new programmer asked for Photoshop files (PSD).

    So my question is, ‘can’t a programmer use a PDF file to develop a site? ‘

    • Hanbi,

      You can save a layered PDF and instruct your programmer to use Illustrator, but I think using Photoshop is much more common and that’s why programmers expect PSD files.

      If your programmer doesn’t know how to use Illustrator, you can export all the design assets for him (at extra cost?) and provide all the information about typography (web style guide would be best: http://rafaltomal.com/free-web-style-guide-psd-template/ – you can recreate it in Illustrator).

  14. I don’t understand why devs still need PSDs. Sure in the days of skeuomorphism and fixed width sites.

    Sites are fluid now, so a PSD can never be more than snapshot at one particular size.

    Consequently, a PSD is not going to contain any usable assets, nor fixed dimensions.

    So what is it a dev needs the PSD for? A PDF should suffice.

    Therefore, for a designer, a proper layout software – like Sketch, Illustrator, Affinity etc – would make a lot more sense.

    I reckon if your dev wants a PSD, get a new dev.

    • Chris,

      I see your point. I don’t know what’s your experience working on various design projects with different development teams, but most developers I worked with were just more familiar with Photoshop than any other software. I’m a web developer too and I see benefits of having my design in a PSD.

      PSD actually contains a lot of useful information and is fully layered, which makes exporting assets really easy. The biggest downfall is like you said, it’s just a snapshot of one screen, but a new artboards feature and Adobe Edge Reflow can help with that too.

      If you prefer to design websites in Adobe Illustrator and your developers are comfortable working with PDF files, that’s fine! Whatever works best for you and your team.

      Thanks for your comment.

  15. Many people are all for it, whilst some believe that designers shouldn’t touch code. However, those designers that do code are getting more confident and some are even arguing that designing in Photoshop is no longer relevant in certain scenarios.

  16. Photoshop is so bad to make sites: you can’t flow the different blocks, you cant have responsive design, or style classes. I still dont understand why do people make sites in Photoshop, it’s extra job to convert it to code and waste of time. It will be even faster/more precise to code site, make only separate pictures in Photoshop (instead of whole picture).

    Or I think, there should be some good program to allow fast prototyping. Photoshop is not good for prototyping but 99% of web designers still doing that.

  17. p.s. Firework sucks too. Probably even worse than Photoshop. If anything, I think InDesign is best for prototyping, even though it was made for print industry.

  18. p.p.s. (can these be combined into one comment, please?) the worst thing about photoshop design, is that designers never provide with [i]already made[/i] button designs, images, effects. You have to manually crop them from layers. It would be great to be able to reuse parts from different projects, but every time designers reinvent wheel and coder have to reinvent it too.

    And they also never provide style guide. So I code one page, and then on different page style is completely different, so I have to change my code on old page to fit all pages.

    With prototyping program, it would be much easier to have style guide, and instanced images would be already cropped, easier to not screw up module grid (force to abide it instead of putting objects “by eye”), etc.

Leave a Reply

Your email address will not be published. Required fields are marked *