In Defense Of Photoshop

Advertisement

Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop’s throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed.

In Defense of Photoshop1

The Argument

The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation. They present the final product in the final environment. They also take full advantage of browser capabilities, such as fluid layouts, progressive enhancement and animation. These are things that Photoshop simply can’t do.

If we compare the two methodologies even closer, we find a number of other disadvantages to the Photoshop approach. For example, Photoshop’s text rendering is nothing compared that of modern Web browsers. CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document. Even making certain structural changes to a website can be done more easily with CSS. Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the “Save for Web” dialog.

I admit: the benefits of mark-up are undeniable, and Photoshop doesn’t offer any of them. In fact, the mark-up generated across the entire Creative Suite is rather atrocious and unusable. Why then do I think Photoshop is still the most important Web design tool available today? The answer lies in the creative process.

Process Makes Perfect

The creative process is exactly that: a process. Clients may think we simply snap our fingers to make creative goodness flows directly from our brains to the screen, but we know better. We know that it takes hours or days of deep thought to devise the perfect solution. And if you’re anything like me, you often don’t find the perfect solution until you’ve explored a number of dead ends. Essentially, we need time and experimentation to work towards the goals of a project and determine the best way to communicate what needs to be said.

Experimentation is the key to creativity. Without it, the brain simply follows what it regards as the safest route, and the result is as mundane as the thought behind it. Most of the designers I know start all of their designs on paper: creating thumbnail sketches in order to quickly experiment with possible solutions. However, these sketches serve as jumping-off points; the design process is by no means over once the pencil is traded for mouse and keyboard.

Photoshop is vital to good Web design because it extends the process that was started on paper. It gives stakeholders a direct connection to the visuals without regard for the technical execution of the product. In other words, it accommodates visual processing. The designer is given a blank canvas—a playground for experimentation—on which anything is possible.

Experimentation: The Catalyst of Creativity

As designers, our medium is in a visual language. It’s a language of the subconscious, and it allows us to connect to other people through our work in ways that the spoken word cannot. Great design relies on an open dialogue between the artist and the medium. Interfering with that dialogue only impedes the process and distorts the message.

Designing with mark-up, however, creates a disconnect with the medium. Ideas no longer flow fluidly onto the screen. They must first be translated into a language that the computer understands. Like a game of telephone, this methodology requires a great deal of interpretation, which inevitably dilutes the idea and its potency. This chain of translation introduces a latency that kills experimentation and compromises the design.

The Foreman Or The Architect

Truth is often seen clearer in extremes. So, let’s try a little thought experiment. Imagine yourself as an architect tasked with designing a large corporate skyscraper. How would you proceed? If you’re like most architects, you would start by sketching, and then work your way into AutoCAD. Eventually, you’d end up with a computer-generated 3-D model. You’d probably take it even further by constructing a small-scale model. All of this processing gives you a better feel for the project without actually building it. It’d be preposterous for the architect to go out and start welding I-beams together as part of his design process; that is the foreman’s responsibility, and construction begins only once everything has been designed.

Designing with mark-up is like welding I-beams without a blueprint. The client understands—or should understand with your help—that the mock-ups are not the final product and that this actually benefits them. They want to get an idea of what the website will look like without having the entire thing built first. It allows them to change the direction of the project before investing too much. Our responsibility is to explain the differences between the mock-up and the final product. Moral of the story: don’t play foreman when you’re the architect.

Don't play the foreman when you should be an architect

A Call To Arms

Although mark-up can provide a truer experience for clients, Photoshop is clearly an important part of the design process. Ridding it from our toolbox could prove disastrous. What we need is not to change our methodology, but rather to amalgamate our tools. We need a tool that supports the creative process but at the same time gives us access to the subtleties of our medium.

Modern WYSIWYG editors are off the mark. We need something more like Photoshop, but with capabilities that allow us to create DOM elements as easily as we can create shapes. John Nack seems to be on the right track with his idea of HTML layers2, which would enable users to create and style HTML elements and render them with the WebKit engine all within a standard PSD file. While this idea is not completely practical, it gives us something to work with. Imagine opening the layer styles dialog and being able to add CSS3 styling to an element. What bliss!

HTML Layers
An example of what HTML layers might look like with CSS styling.

Jeffrey Zeldman makes a number of valid points about why creating such a tool is impossible3:

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

I have to agree. Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm. Computers are monolingual: they need us to make that translation. However, do we need perfectly semantic code if we’re only creating a mock-up? Why can’t we accept the reality that we’re not crafting the final product and simply spit out HTML and CSS that’s “good enough” for mock-up purposes. Once the design is approved, we’ll put on our foreman hat and begin the real construction.

Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites. Although it doesn’t currently speak to our medium the way we wish it did, it proves itself priceless when it comes to the process of designing. Photoshop is a virtual playground of experimentation; dropping it from the process only prevents your design from being fully developed. So, before you switch to the mark-up methodology, understand that you’re sacrificing creativity for a few browser capabilities, which could be explained to clients anyway. For the sake of your client, creativity and work, stick with Photoshop.

Screenshot4

For more on information on designing websites in Photoshop, check out my Smashing eBook Mastering Photoshop Web Design5, a book for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills.

Further Reading

(al)

↑ Back to topShare on Twitter

Tom Giannattasio happily makes things at nclud. He works as an Editor for Smashing Magazine and teaches at Boston University Center for Digital Imaging Arts. He loves to experiment and share his work on his personal site: attasi.

  1. 1

    Ah, very useful post.

    Every process is about separation of responsibility. When designing a website one should not worry too much about how (apart from the obvious things that are simply not possible in html), when working on the front-end one shouldn’t be led by design try-outs.

    Designing and front-end are two very different things. When combining the two you’re going to end up with inferior designs and inferior front-end code.

    I never really understood why people would want to design with html/css anyway. They are still pretty impractical tools for design.

    0
  2. 2

    Interresting article, but I cannot agree with you in many points. In my opinion neither PS nor HTML should be used to create a mockup. Both way offers good solutions for specific problems (e.g: you can achive nicer gradients and effects in PS, in HTML you can bring in the interaction part of the design process) but they are just not for this kind of job. Fireworks. Or any other wire-framing tool. To be honest I don’t understand why designers don’t use them, they really should.

    P.s.: saying that PS crashes sometimes is not an argument :)

    0
    • 3

      I second that. Fireworks ist just an underused tool to create nice mockups. Different Frames for Hovers or links, different Pages for well different Pages. It’s easier to update your whole Design in one png-file without using different psd-files or searching for groups and layers.
      Of course Photoshop has it’s benefits but its kinda no problem to import a psd into fireworks.

      0
      • 4

        true that Norman! Fireworks is our Industry standard for web design. Photoshop is just used on the side for massive pixel-crunching effects.

        0
      • 6

        True, I don’t understand why so many designers use photoshop alone to design websites.

        First of all it takes a lot more time to design a layout in photoshop, the tools to do simple things like gradients, borders, masks, etc. are a lot more cumbersome than they are in Fireworks.

        Second, in Fireworks you have the wonderful slice tool which is significantly more useful and less time consuming than photoshops slices.

        Third, vectors, photoshop might have some vector support now but it’s still no where near Fireworks or AI and as with many other photoshop tools, working with vectors is a lot more time consuming.

        Add pages (which can even be used to make a flash website) and the possibility to export html (just for the purpose of preview) and there’s no contest. Photoshop is grate for bitmaps, awkward for making website design and terrible at vectors so why not just use it for what it’s good at.

        Designers that are afraid to learn Fireworks should just try it out, it’s a lot more intuitive and makes a whole lot more sense then Photoshop.

        0
        • 7

          Web Designers use FIREWORKS, non-web designers use PHOTOSHOP.

          PHOTOSHOP is for photo mockups, FIREWORKS is for web mockups.

          Stop arguing something so obvious! =)

          -1
          • 8

            Andru, you have just labelled a majority of the web community, including many top designers, as “non-web designers”.

            Surely we should be all be able to choose to use the tools which help us achieve the best results, without calling one approach right or wrong?

            0
          • 9

            Hi,

            If you are talking about creativity, then please do not put FIREWORKS in 1st place.

            0
          • 10

            Haha screw Fireworks. What a clunky joke it is. “Photoshop is for editing photos only” – LOL

            0
          • 11

            Andru…

            Both Fireworks and Photoshop are TOOLS. Nothing more.

            0
          • 12

            Andru is correct. Fireworks and Photoshop are both tools in the designers kit. However, if you’re still using Photoshop for web design mockups you are choosing the wrong tool. Clunky and as infuriating as it can be Fireworks is better for the task.

            @sayan Creativity is in your mind not your software.

            0
      • 13

        Agreed Fireworks is the tool best suited for producing web ready images, though use whatever tool you feel most comfortable with, or which suits a particular project.

        Due to either necessity or choice, I’ve used pretty much every macromedia/adobe product at one time or another (even inDesign on one occasion). Creating a design is not just about the tool you use, it is how you use it.

        Personally I barely touch PS or FW for coming up with designs anymore, not that they’re not useful, its just my current process eliminates the need, and most of my design takes place directly in the browser. I’m sure it will change for other projects.

        0
      • 14

        I have been using Fireworks since 1999. And I am familiar with both Photoshop and Fireworks. If it comes to web design, I really do my mock-ups in Fireworks. It is much simpler to create vector based elements. Fw is really a workhorse for designing screen UI, be that a web site or an app. But Fw is for my the final assembly table. Like InDesign is for print designers. I use Illustrator for elaborate vector creations, and Photoshop for cool photo processing, effects and whatnot. Then all is dumped into Fw to make the look of the final layout. If there are simple elements, like buttons, I use vectors in Fw. Just because it is faster that way. Another major reason I use Fw for screen layout design is that this software was originally created with that purpose in mind, and so it has cool functions that one can capitalize upon. Such is the multiple preview of different export options to compare resulting look and file size, or the famous Fw-only PNG8 export with alpha transparency. Whereas Photoshop has zillions of cool features, which we all adore and deify, but the software itself originally was created for the purpose of photo manipulation.

        1
    • 15

      There is an interesting discussion here. As a former fireworks user I find myself constantly wondering why Photoshop hasn’t adopted some of the tools from fireworks. When it comes to designing for the web you would expect your tool to have all the visual elements available out of the box. Now I’m not taking it to the interactive extreme just the visual. Border and line elements should have all the options of css (fireworks does). If we can set borders to dots or dashes in css we should have this option in Photoshop. The same goes with built points and such. The text tools in PS are just hard work for laying out content in mock-ups.

      In saying all this I would still use Photoshop as the main design tool, though its hard work the flexibility is worth it. With adobe owning Fireworks, I not sure why they haven’t adopted some of it’s functions into PS?

      0
      • 16

        Because they still want to keep Fireworks and Photoshop as a separate products.
        Two products = 2x of money.
        Just my opinion though.

        0
      • 20

        level8 design studio

        July 29, 2010 8:16 am

        FW and PS are different because they’re geared toward different uses. I use FW for all my website designs. The combination of vector and bitmap is great. The ability to quickly duplicate a page and take your design in a different direction (without disturbing the original) can’t really be done in PS. Now if you’re looking for crazy photo manipulation and bitmap effects then PS is your tool. I love both programs but spend two weeks with FW and I doubt you’ll go back to PS for site designs. Not to mention how quickly you can create mock-up from your designs.

        0
        • 21

          Personally, Fireworks is the best tool for the job. I’ve used for designing all my websites since 1998. Multi-frame designs with shared layers show your over-states, flyouts, user paths. And find+replace text, font, and color! What a pain to change a font or color on all of your layers in PS!
          I still use PS image editing and FW is more like my InDesign/Quark.

          Unfortunately, Fireworks is on Adobe’s chopping block. CS6 will be it’s last run. I would hope the capabilities would be brought into PS, but I think PS is way overloaded already.

          0
          • 22

            Are they quiting on Fireworks? What a pitty! Anyway, I prefer Corel Draw over Adobe… if it was not for the Macromedia suite they bought. If they dump Fw… well, many people will dump them.

            0
          • 23

            Fireworks is the greatest prototyping tool i ever used, since tried it in 1998, and i will never go back to Ps 4.0.1 for my web site design work.

            Also, i don’t think HTML/CSS and Photoshop conflict each other, you just need suitable tool to do the job. it just likes that you will never use spoon to eat Sushi. :)

            0
          • 24

            I’m on the Fireworks Development Advisory Board, and I’ve heard no such news of Fireworks being on the chopping block. It’s sales are increasing year over year, so I’m not sure why Adobe would consider axing it. Do you care to share where you heard such a rumor?

            0
        • 25

          Sooo confused…. how does Photoshop not have vector support? Are you not using Illustrator and Smart Objects?

          And can you really do a balls-out design on Fireworks. Photoshop is a lot more than a bunch of Layer styles in my designs.

          My beef with PS is when they dropped Imageready and expected you to use Fireworks *just* for slicing and optimization – what a bummer Adobe.

          0
          • 26

            slicing as well as creating animated gifs was incorporated into Photoshop. I missed Imageready too until I realized everything I ever used it for was just added to PS.

            0
      • 27

        Remember FireWork was originally developed by Macromedia as a web design tool where as Adobe Photoshop was purely a photo processing application. They are not the same application. Yes they are some what similar but by far not one in the same.

        I find Photoshop more trouble than it is worth when I can do 99% in FireWork.

        0
    • 28

      I’ve never had photoshop crash in either Vista or Win7 on multiple machines, what’s all this talk about PS crashes? Is this really common or something, even back in XP / 98 days this might have happened to me once every few months when I was working on multi GB sized print docs.

      0
      • 29

        Yeah, I work on a Vista run pc and Photoshop hardly ever crashes on me.

        0
      • 30

        I’ve used Photoshop on a Mac for a couple of weeks and it crashed several times. I can’t remember when it crashed on a PC and I’m using it for about ten years now. I bet Thomas Giannattasio uses a Mac :)

        0
        • 31

          I use photoshop on a mac and i just can’t remember if it ever crashed once. I don’t think so.

          0
    • 32

      I agree: I can not design a site without Fireworks. It allows to “preview” a complete site, before comitting any HTML.

      0
    • 33

      I agree: I don’t understand why we are talking about PhotoShop when talking about webdesign. Ten years ago I discovered that FireWorks was much better tool for webdesign. Nothing changed since then.

      0
    • 34

      There’s no such thing as too much Fireworks love. Photoshop gets opened once every month on average when someone sends me a PSD that just wont open properly in FW, that’s about it.

      Use the tool designed for the job, people.

      0
  3. 35

    Just from reading “The Argument”, it clearly states you havent got a damn clue. This struggle of understanding that you have, is easily overcome.

    There are 2 and only 2, entirely different, areas of building a website.

    1) DESIGN; The design process in which we use photoshop to create how the website should look, we design the display of the content architecture, the navigation buttons, the header, everything that should be ‘seen’ on the website should be designed within photoshop.

    2) DEVELOPMENT; Now quite simply, we’re happy with our design and to get the ball rolling, the development stage takes place. This would involve, html, css, javascript, and maybe even a cms.

    This whole malarky is ART + TECHNOLOGY = INTERNET PRESENCE.

    Now if you’re argument is what we provide our clients with, meaning either a design (jpg/png) screenshot, or a functional html mockup then you need to know they are 2 entirely different things.

    Would you waste your time, creating the design in photoshop, then converting it into so sweet so nice html/css, to then find after you’ve shown the client, that the changes that he wants is actually a change you need to make to the ‘design / psd’ ?

    The html and css, is not as important as the design. Now this may be arguable to you fond web nerds, but its simple. The presence of a website defines the number of visitors / sales and alsorts in the marketing area. HTML and CSS, is only the glue of the website. No general client cares about glue and probably never will. All they want is to have the design you showed them, work for them.

    You might choose to use html 5 and css 3 over older versions, but why? Just because you feel more comfortable with that, or do you think by using html5/css3 your giving the client somewhat ‘the best’?

    0
    • 36

      Spot on!

      0
    • 37

      Thomas Giannattasio

      July 29, 2010 5:05 am

      Adam,

      I completely agree with what you are saying: They are two completely different processes. This was the core of my article. The suggestion of implementing CSS within Photoshop does not mean that I recommend developing a site within Photoshop. That would be ridiculous! I was simply suggesting that if we wanted to present the client with a comp that was truer to the end product, we would need something along these lines. These comps would only be used as a comp. By no means would they be used as the final site, but only a better blueprint for the final site.

      I think we’re saying the same thing here.

      0
      • 38

        Actually there are 3 phases and you’ve completely glossed over the whole content architecture phase.

        If you’re rushing to get to the coding phase because either the client can’t undertand the UI or the design you’ve failed your client.

        If you’re rushing to get to the coding phase to increase your profitability then you are failing the client.

        0
    • 39

      Good god Adam Roberts.. why would you spend 10 minutes writing a response but not 5 minutes reading the article? You just basically argued his point against him. LOL.

      0
      • 40

        The internet makes keyboard heroes out of us all… maybe he needed to smack down someone, bad day…

        0
    • 41

      that was just incredible

      0
    • 42

      They are not two entirely different processes. It’s all design. From colors to code, it’s all part of a total solution.

      To poo-poo one aspect over the other is to give a client a flawed solution.

      Use the tools. ALL of them. When and where necessary. Don’t ignore the development side. Don’t ignore the copywriting side. Don’t ignore the marketing team. Don’t ignore the usability folks. Don’t ignore the graphic design.

      There’s nothing wrong with Photoshop to communicate broad visual direction. However, Photoshop is *not* a web page. It can not communicate the intricate details of interaction. And these things *are* a critical part of the design…both visually and functionally.

      Where I don’t like Photoshop is when it’s used as the ‘master document’ that everything gets signed off on. It’s no where near the final phase of the design process. It should be a milestone, but not set in stone.

      1
    • 44

      Well, I would disagree about the ‘unimportance’ of HTML and CSS. It’s true that clients primarily want their websites to be beautiful, but they never forget to ask me about how will their sites rank on Google. And without good HTML there is no good search engine rankings. With CSS you can make miracles, if you know its true potential. I agree that a website has to be visually appealing, but it’s the interaction part that makes it trully good or bad. That, my friend, is a difference between a nice image (layout), which you call ‘the design’, and a great website. You can’t call yourself a webdesigner and say that HTML and CSS ‘are not that important’. You are a graphic designer who believes he can make websites :)

      0
  4. 45

    I agree to Marcell!!!

    0
  5. 46

    The answer is simple – use Fireworks. It provides enough opportunity for creative process but with its object-based approach is way more suited to modern web work.

    I can’t believe how Fireworks changed my design process. It is so much faster and relates better to CSS-thinking. Photoshop has its merits too (I fire it up to prepare advanced graphics or to retouch photos – but actually much less frequently than I thought I would, Fireworks is pretty capable in basic to intermediate image editing) but these days I would not recommend it as a front line web design tool.

    0
    • 47

      I couldn’t agree more. I switched to Fireworks a couple of months ago (after 10 years with Photoshop) and haven’t looked back since. I still use Photoshop for what it’s good at, like image manipulation and so on. But for actual web layouts and wireframes, Fireworks is just so much better in every way. It’s a mystery to me that Photoshop is still the most widely used software for web design.

      The article mentions that designing in the browser creates a latency that hinders creativity, and I’m actually starting to feel like this is the case with Photoshop as well. It’s just too slow to move elements around and really experiment. Whereas in Fireworks you can very quickly rearrange objects and try different layouts within seconds, giving you a real sense of freedom.

      0
  6. 48

    First flash now photoshop? It’s obvious that they still have so much to do to match photoshop.

    0
  7. 49

    Just throwing this out there, but what if the semantic and the visual CAN become the same thing and the tools and languages DO eventually merge? What if the computer learns aesthetics? What if the web reacted specifically to each user’s brainwaves?

    0
  8. 52

    Hello

    PSD or Photoshop is and will be always the best tool for Designers. If I want to convert the PSD to HTML I just use services like http://www.mypsdtohtml.com but I always will use Photoshop to generate and create the designs.

    Thoughts?

    0
    • 53

      before looking at the link I thought the site was one of those auto-generate types. It’s not. It actually looks like they go in and hand code everything and NOT run it through some algorithm. It’s definitely a good option if you’re in a time crunch but I always prefer coding it myself.

      0
    • 54

      Have you tried using BaseKit? It’s pretty easy to use with a PSD, just make sure that the layers conform to their simple spec and upload.

      There is no waiting times (apart from the upload) and you can change the PSD and upload your theme as many times as you want without any extra costs; ok they have a very small change per month that includes hosting on Amazon (they also have a free 30 day trial account).

      Once uploaded you simply drag and drop their widgets to create your site.

      Think iWeb (done properly) on steroids.

      0
    • 55

      Services like that work well for static web pages. However, without intimate knowledge of (X)HTML/CSS and web principals the designs will always be limited to “I thought the web did this” and “I want it to do this but.” When you start involving transitions and dynamic content then things really become abstract.

      Just like most highly creative and experienced coders don’t hold the most expertise in design, most highly creative and experienced designers don’t hold extensive expertise in coding. I think it’s best to have designers with a solid understanding of coding principals work with coders that have a solid understanding of design principals.

      0
      • 56

        I agree, Benny. It is actually a rare individual who is both an exceptionally creative designer and a highly proficient coder. They’re out there…but they are rare. So, as you state, the best solution is to have a team of highly skilled designers work with highly skilled developers, where each has a solid understanding of the principles involved in their counterpart’s job responsibilities.

        0
  9. 57

    I would be very happy with something that produces the exact same result as photoshop, but just doesn’t make me suffer as much in the process…

    0
  10. 58

    My problem isn’t with photoshop being used as a mocking up tool, I’m perfectly fine with that. Okay, it’s not interactive, but pretty pictures still help sell ideas.

    What my problem is with Photoshop is what a dreadful piece of software it has turned into, with big chunks of its GUI implemented in Flash, a user experience that breaks user’s expectations on both the Windows and Mac platforms, especially on the Mac where it breaks Spaces and Expose, long standing bugs that have persisted over multiple versions of the product without being fixed, and a user experience, something for which the product was once held in extremely high regard, that seems to deteriorate with each new version.

    It’s as if at some point a couple of years ago the Marketing department got put in charge and the opinions of the engineers ceased to matter.

    Photoshop as a concept is sound, but the current implementation has some very serious issues that need to be addressed.

    And ultimately, when it comes to mocking up, the best tool is still a notebook and pencil.

    0
  11. 59

    There’s several things here that I don’t really understand.

    1 ” For example, Photoshop’s text rendering is nothing compared that of modern Web browsers.”

    What? Try using Typekit or similar solutions on a Windows PC, and tell me how those fonts look compared to in Photoshop. The gap is closing, if you’re on a Mac, but that is not the majority at all.

    2. “CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document.”

    Heard of Smart Objects?

    3. “Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the ‘Save for Web’ dialog.”

    I’ve been working with Photoshop nearly daily for 4 years now, and I can count the times it has crashed on me with half of one hand, none of those being tied to saving for web. Perhaps it’s time for an upgrade to your Photoshop or your PC?

    As some in the comments have noted, Fireworks seems like a good compromise between Photoshop and HTML5/CSS3, but you’d most likely be using Fireworks and Photoshop together, with a little Illustrator now and then.

    I’ve been wanting to learn how to use Fireworks the way it is now intended to be used, but haven’t had the time. It’s a shame, because it could probably cut down the time it takes to make mock-ups for clients. Creating them simply from web markup language will only work if your designs are fairly simple in style.

    0
    • 60

      Agreed 100%. I really can’t remember the last time Photoshop crashed on me and it stays open on my computer a majority of the day along with several other programs.

      “The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation.”

      Either way you choose there is still explaining to do to the client. If you have a static mock you will have to explain how the end-user navigates, what user interactions are available and a few other items. But at least the client will know what the end result will look like. If you only do a mark-up version you have to explain to your client what their buttons look like, what their navigation will look like and why their site looks different in other browsers because you decided to use CSS3. But I also need to mention that any good front end developer will get the mock-up to translate 100% in HTML. If not, find a new developer to work with.

      To me designing without Photoshop is like putting a puzzle together with a blindfold on. Who really just sits down at their computer and aimlessly throws up some div’s in their code editor and just hopes for the best?

      0
    • 61

      Thomas Giannattasio

      July 29, 2010 5:14 am

      George,

      Thanks for your comments. I’ll address them individually.

      1. Photoshop’s anti-alias algorithms are weak in comparison to modern browsers on modern operating systems. This is especially true with the core web fonts, which were designed and hinted with browsers in mind.

      2. Smart Objects are great for updating multiple instances all at once. However, they’re not nearly as flexible and powerful as CSS. For example, say you want to change the color of all text links in a document. Smart Objects are useless for this task.

      3. Are you serious?! I’d love to have your machine then. I think Photoshop is pretty well-known for crashing. I don’t think I can make it through a week without it crashing a couple times. I’m running a pretty solid Mac w/ 4GB RAM.

      0
      • 62

        “3. Are you serious?! I’d love to have your machine then. I think Photoshop is pretty well-known for crashing. I don’t think I can make it through a week without it crashing a couple times. I’m running a pretty solid Mac w/ 4GB RAM.”

        I’m with George.

        It must be a Mac thing or there must be something amiss with your machine.

        I’m amazed that crashes are a normal part of some Photoshop users’ experiences. I use Photoshop CS4 all day every day on Win 7 Ultimate and cannot remember if or when Photoshop has ever crashed here. It’s rock solid stable.

        0
        • 63

          It is a Mac thing. Believe it or not, Adobe has never gotten around to doing an OSX-native (Cocoa) version of Photoshop — it still uses the Carbon (OS9-compatibile) API. It’s like running a Win95 version on XP/Vista/7 in compatibility mode — a good dietary source of heartache and grief.

          0
          • 64

            I understood that Photoshop CS5 Mac is 64-bit written entirely in Cocoa?

            0
          • 65

            “It’s a Mac thing”

            I Disagree… I use an Early 2009 Macbook with only 2GB and can’t remember if PS ever crashed on me. CS3 on Leopard.

            People ask me almost every day why I don’t upgrade OS X and/or CS apps. I answer with “It ain’t broke”.

            0
          • 66

            Christopher Anderton

            August 2, 2010 8:36 pm

            CS5 is in Cocoa.
            In 5 years, i had 4 crashes in Photoshop (MacOS X). All of them because of trouble with external scratch disks.

            Is it known for crashing? I actually never heard that. On the contrary.

            0
      • 67

        1. “Smooth” anti alias for fonts is almost identical to cleartype. “none” for anything under 9pts.

        2. Link text layers, select one linked layer, hold shift while changing the character option… or you can select multiple text layers using shift or ctrl and make global changes to the character options.

        3. It used to crash for me winxp. My current windows vista, 4 gigs ram, 4 core, CS4, scratch disc on a devoted 10 gig. defragged partition (this helps a lot!)… no crashes.

        0
        • 68

          I think you have just strengthened his points for 2 and 3. What if you wanted to target the equivalent of a + p.someclass or h1 > p in your photoshop file? (he only gave a simple problem as an example).

          Also,yes if you build a computer powerful enough no application will ever crash

          0
          • 69

            This suggests they tried to include “character styles” in CS5 but had to postpone it until a future release. At least they are thinking about this.

            “[Sorry, Jesse, I'm afraid not. I don't know whether this makes it better or worse, but we had to cut character & paragraph styles from CS5 at the 11th hour. I know they're something people (esp. Web designers) really want, and making the decision to hold off support until a later release was a real bummer. I think everyone would agree, however, that it's preferable to do fewer things better than to ship buggy stuff that's not ready for prime time. --J.]“

            0
      • 70

        A Mac, I knew it :) Photoshop just doesn’t crash on a PC.

        0
      • 71

        Using PS CS2 every day for 2 years on a machine i never turn off and also rarely even close PS (maybe once every 14 days) – never experienced a crash. Oh yea it’s a PC – probably crashes are MAC related.

        0
    • 72

      PS is great up to a point. But then there’s a point in the project where the more efficiency is gained by jumping over into HTML/CSS/JS.

      The benefits are numerous:
      – teams (including client) can now begin seeing and USING the true interactions on the page
      – one can get an idea of the content in proper context
      – iterative tweaking is now much easier via components and includes and master CSS files
      – one can still easily jump back into Photoshop to produce new visuals as needed
      – we’re now 1 step closer to a working site making the development phase shorter

      0
  12. 73

    This is definitely something that I’ve been dealing with lately. It seems that mocking up with HTML gets the job done quicker but can lack a certain punch and may stifle the process as you mention here. When mocking up with Photoshop, everything gets done with a little bit more flare but takes twice as long and isn’t always easily translated over into web. Perhaps it might be a better idea to talk about what method of web design is better given the situation – for instance, let’s look at the pricing, timeline, and complexity of the project and then decide where to jump in. That’s often worked best for me. Maybe the amount I’m getting paid doesn’t warrant the extra creative time, and CSS3 with its massive toolkit will work just fine. Just some food for thought!

    0
  13. 74

    Andrei Gonzales

    July 29, 2010 1:57 am

    This is all missing the point.

    What’s really needed is a tool specifically built for designing websites:

    http://jasonsantamaria.com/articles/a-real-web-design-application/

    0
    • 75

      Randy Humphries

      July 29, 2010 6:38 am

      Jason’s suggestions are spot on in that article. I’d almost be content with just a paragraph and character styles palette in Photoshop like InDesign has and a mode to show how the type will render in the various web browsers.

      But I would be very, very, very please with a tool that Jason is suggesting. Let the design/creativity happen in an application that is like photoshop but give it tools that mimic CSS and browsers. The application does not need to output the HTML or CSS.

      0
  14. 76

    Why having this discussion in the first place? If you can create designs and/or mockups with paint, why use a $1000 app to do the same?

    My point is; Just stick with the app (or technique) you’re used too work with and become better with it.

    As a developer (not designer) I’m used to create mockups in HTML+CSS and build from there. I do have basic knowledge of Photoshop since clients send me .PSD files which need to be transformed to HTML and that’s fine by me.
    The biggest problem I see with “designs” is the fact that (most of the time) designers have no idea how HTML and/or CSS works and the design isn’t pixel perfect or has impossible elements like full screen backgrounds (with fixed borders), weird fonts (which have no gracefull fallback) and stuff like that.

    Just make sure you do what you can, with wathever application you’re using and stay in your own field of expertise.

    0
    • 77

      True, but the article is “In Defence of Photoshop” thats why people arguing the pro’s and con’s of Photoshop, i’m sure they will continue with the workflow that is best for them

      0
      • 78

        I know, but these comments almost start to look like “iPhone vs Android” and “Windows vs MacOS vs Linux” threads around the web. Fanboy vs fanboy…

        I guess it’s because of the new eBook by SM, but if you think the book is wrong; write your own! Or just learn how it also can be done with an application you don’t master (yet).

        0
  15. 79

    Building a website isn’t the same as building a real object. There is no physics involved, you are still in a virtual world.

    The result of design and development in web design industry is comparable to finished 3D model in the construction industry. Fully functional website ~ 3D model of a building.

    0
    • 80

      Chris Lorensson

      July 29, 2010 4:10 am

      Obviously it’s not the same thing Norbert but as an illustration it works perfectly I think. Of course there are no physics involved! (Unless you count lifting the mouse and the Red Bull. Mouse, Red Bull. Mouse, Red Bull. Red Bull. ;-)

      0
      • 81

        It would be good, if you could build a skyscraper and than say #topFiveFloors {display: none;}
        Or #city {overflow: scroll;}

        Any “finished” website can always be altered with a keyboard stroke and it’s as hard as making amends to a blueprint or 3D model.

        0
  16. 82

    I follow the argument — but disagree. You say that ‘designing with mark-up … creates a disconnect with the medium’. No it doesn’t. What you mean is that you know Photoshop better than you know XHTML/CSS.

    Both PS and XHTML/CSS are just tools to get a computer to render something the way you want it. There’s no greater disconnect with the medium with one than with the other. It’s just a question of which you are more comfortable using.

    For someone who hasn’t always used PS, ideas may flow just as fluidly working XHTML/CSS.

    And our medium, I’d say, isn’t just a visual language. That’s slightly diminishing the significance of the designer in determining structure, hierarchy and the like. And interactivity, too.

    So while I agree that PS is a very valuable tool for many designers in the ways you describe, I don’t really agree that this comes down to anything more than the designer’s personal preference. I don’t think it’s inherently *better* for a designer than working in XHTML/CSS. Just suits a different kind of skillset.

    1
    • 83

      As a designer and developer I can see where you’re coming from, though I have to agree with both trains of thought.

      When building a sign I’ll first do a PSD mock-up. If the site has a shop or other elements I usually don’t do a PSD for these I just go straight to html and css to design. By just using css and html I can develop a satisfactory design layout but it’s not graphically moving, then again it doesn’t always need to be.

      It’s really dependent on what the end product needs to be. If there is a real graphical element to the site developing a mock-up in css and html would be a nightmare. In a PSD you can develop the elements you need and bring then to your code.

      In my experience part of the problem is people not using the tools right. They flatten things and don’t use the slice tool. The other things are to manage your client well and support them to understand the website development process. Don’t let them bully you into building the site before they have signed off a design.

      0
    • 84

      Thomas Giannattasio

      July 29, 2010 5:21 am

      I agree that there are many benefits to working in the way that is most comfortable for you. I started some 14 years ago by designing in the browser. I had never touched Photoshop, and for years I developed sites with HTML and CSS. However, as I got more involved with the industry, the benefits of Photoshop were undeniable. I felt that I made a shift from developer to designer. I learned to work more visually, which required a lot of experimentation and processing. A text editor simply can’t accommodate that. Photoshop is by no means perfect, but it’s the best I’ve found for the process of design.

      0
    • 85

      Agreed. I’ve found that of late my proficiency with CSS & markup, especially with .less to speed it up, I feel designing in Photoshop has become more of a disconnect. Also webkit with gradients, masks etc.

      0
  17. 86

    Shouldn’t this post be titled “In Defense Of Smashings ‘Mastering Photoshop Web Design’ book sales” ??

    0
  18. 88

    CSS in Photoshop?? Hmmm.. i liike that idea!

    0
  19. 89

    Personally I couldn’t do away with Photoshop; it’s my creative playground. To experiment with an idea, you shouldn’t have to translate it through markup.

    0
  20. 90

    WTF… now Facebook does even know I read Smashing Magazine. I don’t like it. FB is *everywhere* and even if you’re not on FB you can’t escape… :(

    0
  21. 91

    Interesting, but completely flawed I’m afraid.

    Making the analogy of the Architect and the Foreman is a valid one but not as a Pro for Ps. If building a website the Architect would use paper and Visio (the AutoCAD of the web industry). Once that’s done the Foreman would build the HTML and the Designer would be choosing color schemes, images and so forth. You are then akin to an Interior Designer in your building analogy, not an Architect.

    Think of Progressive Enhancement, that approach has to fit more into your website building process long before it normally does. The danger is the Designer gets carried away in Ps and loses perspective about the nature of the medium they are building for.

    Ps has its place, as does Fireworks (my particular choice) but it is quite a way into the project . At the end of the day its just a tool, IMO a rather over-complicated and bloated one, but a tool none the less and you have to realize when to use it.

    0
  22. 92

    I find this article defends more a way of working than a tool used to do the design. First off the problem with the process is usually that it takes off from “photoshop level of thinking” i.e. presentation layer and not what the web app or page is about and what activities it should support.

    There are many types of sketches – design documents – in use, some are ment for the designer herself and others are for communicating (ideas or definitions). For getting to see what an idea would look like, photoshop is good. For delivering ideas or definitions photoshop is not always that good, as it will not define or present flow or ideas of activities too well.

    And that is where comparison to architect comes along: architect thinks more of service, infrastructure and task layers than presentation layer (which still often summarizes the decisions and should play well with other layers).

    But this all depends on what type of browser viewable work is the design done for. Heavily text dependent stuff might be better off with Indesign and real content (if and as the content should be considered as the most important UI). Poster like campaign sites could actually be better of with Photoshop etc.

    0
  23. 93

    I don’t distinguish between “visual” and “technical” in the same way as many people here seem to do. I feel there is an inherent technical aspect to each component of web design. (Structure, functionalities and technical solutions also belong to web design and are often the basis for visual components).
    I don’t design “aspects” of a design strictly separately, but a website as a whole.

    It has never felt good to design using only an image editor, because you miss the opportunity to get inspired by the actual environment, and by technical aspects.
    Also, image editors are relatively inflexible, messy and slow in terms of work flow (especially when you use bloatware like Photoshop).

    For the graphic parts of a design, I often use a very simple WYSIWYG-editor (iWeb) to do a first mockup of pages, and I use an image editor to make the images that are needed in the design. That way I don’t have to worry about code when designing, but I’m still working in an environment that is closer to the real thing, and I can still try out things in code.
    A lot of refining usually still happens when I put the design into final, handwritten code, and regularly the technical aspect of a design will give me a new idea.

    BTW, on a Mac, use Pixelmator instead of Photoshop.

    0
  24. 94

    My overall thoughts on this are Ps is great but needs to adapt to the fact that designers use it for the web. Just some basic visual elements of CSS like border dashes or dots would be a great start.

    Designers developing websites and developers designing will always happen, and we will take different approaches.

    There are merits to both, but if implemented poorly or missing the elements of each other the end product will suffer. Some things just take time, hard work, and knowledge.

    If you are missing some of these toolsets, don’t be afraid to collaborate. Outsource some of the work if need be.

    It shouldn’t be about the time it takes. Put in the time and make sure the client pays for it. Make sure to manage the client well to get a great end product.

    0
  25. 95

    I use, and have always used Photoshop to build web designs. I hear everyone raving on about Fireworks but I’ve never really used it.

    I would be interested in reading some decent articles about why Fireworks is better and how to use Fireworks to build web designs as I’ve only ever found it awkward to use (probably because it’s different to Photoshop).

    Anyone fancy linking me to some? :)

    0
  26. 96

    I’ve had very bad experiences with design firms that act like many of the commenters here have expressed: as though designing in Ps is High Art that some schmuck coder will just make into a webpage. I’m here to tell you that’s a fine way to get a bloated, crappy website that still doesn’t look like the pretty pictures you were sold. I’m sure it’s not the tool’s fault, but I can’t imagine ever again hiring a firm that has designers working in Ps (or any other tool) separately from coders.

    0
  27. 97

    I completely disagree. The translation of the design from brain/paper to HTML/CSS is only as difficult as it is for the individual person, just like the translation of the design from brain/paper to Photoshop is. As someone who is far more comfortable hand-coding with HTML/CSS than using Photoshop, I prefer to skip Photoshop and go to HTML/CSS because I’ve found the frustrations of Photoshop inhibit my creativity (just like you’ve found coding inhibits your creativity).

    I’m not saying everyone should leave Photoshop and we all march against Adobe. I’m saying that people need to find whatever workflow is best for them. Designing websites, like any creative process, is different for every person and we should like it that way.

    0
    • 98

      I would agree that the transition of design from brain / paper to HTML / CSS or from brain / paper to Photoshop should be a relatively simple one for those individuals adept at doing either.

      I also agree that individuals and firms have to use production workflows that best suit their businesses and their target markets.

      Where I disagree is the glossing over of all the very important principles that go into design (not just web design, but all design), like composition, color theory, use of negative space, transition, eye flow, emotional impact, typography, etc. Unless you are both an extremely skilled design guru and a 733t coding guru, it would be very difficult to go from thoughts in your head or scratches on paper to a completed “production” concept on screen that takes all these considerations into account.

      I’ve been using Photoshop since it’s first iteration (we’re talking late 1990 here) and I’ve been developing on the web for 15 years. I went to school for graphic design / commercial illustration, and I am self taught in HTML, CSS, XML, JavaScript (vanilla and OOP), C#, WSI, JSON & REST. I have designed entire Cross-Browser WebApp UI’s that can be skinned exclusively through CSS using very granular specificity, that are still highly functional and yet, visually aesthetic. (Sorry for tooting my own horn…but I felt it necessary to provide background before my next statement).

      In all my experiences, I have never seen any project that was truly a fortune 500, production quality project, that did not have at least 1 iteration (usually more) of comps created for the client and explained by competent sales staff. In addition, I’ve had very few clients that wanted ONLY a web product. In many cases, there is print-collateral and brand identity campaigns that also must be considered. Lastly, as with any services contract, skipping a strictly design phase and creating “working” comps usually leads to clients wanting to change established functionality and / or otherwise introducing change-of-scope requests into the project that can turn a fairly straight forward contract into a never-ending-cycle of revision after revision after revision.

      No matter which program you choose to use, the design phase is just as important to the end product’s success (which is the ultimate goal) as the implementation of that design is. The ability to story-board a site for a client via static comps not only allows you to limit design revisions, it also allows you to easily archive previous iterations, so when the client comes back and says, “You know…after thinking on it, I think I like it the other way better”, you’re not left standing there with a “deer in the headlights” look on your face because you’ve either traveled too far down the “implementation” road to go back or didn’t save the previous iteration’s markup and can’t remember what your client is talking about.

      1
  28. 99

    If you know your crossbrowser HTML and CSS none of the designs you’d make would be hard to construct. At most some of them would (and should) be a challenge to broaden your skillset. You lazy bum you

    And what’s with the paper mock ups? Get a Wacom, Bamboo, whatever, select the pen tool and draw your sloppy mock up’s and save a tree, or whatever.

    1
  29. 102

    I’d like to see how you’re creating some nice collage background with HTML markup and CSS.

    I really agree with you thou. It is nice to show some type of wireframe prototype to a client before create some artworks for them.

    0
    • 103

      Picture this scenario:

      You hire me to build you a house. I draw you an overview of the house. How big the different rooms are, etc. You get excited!

      You hire me to build you a house. I show you how your finished house will look like, what colour the curtains have and what kinda dog goes along with it. You die becuase it’s so god damned sexy you can’t believe it!

      As my customer, which would you rather see first? Worth the extra wait? I should think so.

      Wireframes… pfft

      0
      • 104

        If I hire you, and you build me the house, and I don’t like it :) will you do it again in some completely different style and size without charging me more money?

        0
  30. 105

    Nonsense!

    As a designer there is no better tool than Photoshop, the end product will only ever look indifferent if the designer has a lack of knowledge for how a website is built along with it’s limitations and capabilities.

    Ignorance is the key in this article, if a designer doesn’t consider the development stage because of his lack of knowledge we will always have they poorer end product.

    KNOWLEDGE IS KEY HERE PEOPLE!

    0
  31. 106

    Chris Lorensson

    July 29, 2010 4:06 am

    hmm.. nice write-up dude!

    While I do believe there is always a ‘best’ way to do something, down here on Earth things usually get done the quickest when people just do it the way they know how.

    I don’t think this is an ignorant article, I just think it’s pointing out serious issues in the modern web design workflow. Sure- we need some incredible amalgamation of Photoshop/Fireworks/Dreamweaver or what have you, but as said above, Adobe doesn’t want to sell us one product, they want to sell us three products. Ho-hum.

    I tried out Fireworks and loved some of the CSS/HTML-esque features such as ‘states’ and things like dotted borders, but in the end I switched back to Photoshop bacuse I just couldn’t get along with FW.

    Lately for functional prototyping I’ve been using Axure Pro – which seems to very easily do 95% of what I need to represent (functionally), but the extremely low level of design it offers is hard to swallow.

    I think I’ll continue using sketches -> PS -> DW

    Thanks for the article!

    0
  32. 107

    Photoshop is a good tool but nothing beats Illustrator when it comes to designing webpages.

    0
  33. 108

    Gather content > Wireframe hierarchy > Design layout and artwork in Photoshop > Build in Dreamweaver.

    Everyone has their own way of doing things though, there’s now right or wrong way.

    0
    • 109

      I’m with Pete. Best approach. Maybe I would just say – design the wirerame in fireworks (because that’s all it’s good for.)

      0
  34. 110

    Wow! A lot of people on here got out of the wrong side of bed this morning didn’t they! I mean Adam Roberts, you need to go and talk to someone man.

    Thomas your article was an interesting read but I agree with most people here that the design stage and the build stage are 2 different task that need to be addressed separately. I like the idea of including CSS in Photoshop as an additional option but I’d hate to rely on PS to do all/some of the markup for me (have you ever sliced up a mock-up and exported it as html? Yuk!).

    I personally use Illustrator and Photoshop to create my visuals depending on the project. When I first started building websites I found my designs were being limited by my lack of XHTML/CSS knowledge as I was always thinking to myself, “If i design it like this will I be able to build it?”. This should obviously not be the case but the luxury of designing anything you like is only possible when you have the technical knowledge to match. If Photoshop included XHTML I feel it would restrict potentially innovative ideas as designers would be visually concentrating on both stages instead of one at a time.

    Thanks for the article though!

    0
  35. 111

    To the author: You don’t do programming right? Photoshop can be circumvented by developing on the go and showing the progress to the client.

    And if you really must use a graphics editor, hey use Gimp.

    Photoshop is a tool. It’s not a magical wand.

    But that’s just me speaking, with 40+ clients ranging from 2,000 – 7,000€ price ranges, mid- to large businesses.

    @SmashingMagazine: This is what you publish now? Wow, the quality of SM is free falling.

    LOL

    0
    • 112

      To Jim: You don’t do designing right?

      0
    • 113

      Wow Jim,

      That’s pretty pathetic. As a C#/ASP.NET developer, I resent your comment. I have been developing a very long time, and even I know the need for design. I’m unsure what you mean by ‘developing on the go’ as any client I’ve ever had wants a thorough design before going to development.

      Also, anyone who has ever used Photoshop and Gimp, will tell you, gimp doesn’t even come close to fulfilling the needs a designer has to create a great looking product. I put it, maybe, a block above paint at best.

      A programmer slamming the design phase as unimportant, or irrelevant? Priceless.

      0
      • 114

        Firstly, your languages of choice – C#/ASP.NET – say quite a bit about your mentality, but moving on.
        If what you say is so true, about Gimp being only a step above MS Paint, then why is it used widely within Hollywood? They seem to do fantastic jobs with it.
        You might be comparing the default setup with Photoshop’s default setup, and – if you are – then you’re right in a sense, Gimp does not match up.
        However, with some new textures and some nice plugins, Gimp starts to become a definite competitor.
        The problem with the majority of designers and web-developers is that their computer knowledge is limited at best, so they may not have the skills necessary to set up such a complicated application (sarcasm).

        0
        • 115

          All hail uber elitist Jim! He knows all, and all languages he does not know are not worth knowing. Forget prototyping! Just program! And if you don’t like gimp, you know nothing about computers!

          0
    • 116

      Thomas Giannattasio

      July 29, 2010 7:08 am

      Jim,

      I’m not entirely sure how to respond to that comment, but I’ll try my best. First off, I’ve actually been hand-coding sites for about 14 years now. Since then I’ve shifted my focus on design, but I still code sites from scratch all the time. I’d say I have a pretty good understanding of the process. What are your experiences with design? What kind of sites are you designing that allow you to circumvent Photoshop?

      Second, are those figures meant to add credibility to your remarks? Are they meant to impress? I may be speaking for myself here, but those figures are rather modest. If you’re developing sites for mid- to large-sized businesses, you may want to raise your rates unless the level of quality is extremely low.

      Thanks for your comments.

      0
      • 117

        Nice. :)

        I was thinking the same thing when I read his “price” figures. The last project I had was a 3 month project for a corporate client with a price tag over $90k, and the client was so happy, we’ve gotten three additional contracts in total valued at over $250k.

        And, should I feel ashamed because we developed on the C# / ASP.NET platform? Nah. We got paid, the application is scalable, and, bonus…NO ORACLE. Woohoo!

        0
  36. 118

    Gah….more proclaiming PS is the best tool? More like — it’s what most have and know, so they use it. Doesn’t make it “the best”. Agree with comments above, this looks like a post to defend your new book, that received rather poor reception.

    Love,
    Another Fireworks user that gets her work done x10 faster than you.

    0
  37. 119

    As a programmer (not a designer), I can give you one VERY important reason to stick with Photoshop for designers. Designers aren’t web application architects. They don’t have any concerns (generally) about bandwidth usage, scalability, or reusability. Generally, designers care about “pretty”… which is a good thing, because that’s what we hire them for.

    A programmer on the other hand will be (should be) able to whip up whatever the designer has created for them in PS as HTML in no time flat and do it right the first time.

    For a small-scale project, go ahead and let the designer do some html work, but in large scale, enterprise environments, keep them out of it.

    0
    • 120

      Andrei Gonzales

      July 29, 2010 6:25 am

      Totally disagree.

      The best web designers understand the “code” (let’s use that term), and they understand the overhead involved.

      Web designers that don’t are just traditional graphic designers looking for another source of income. In that sense, they’re not web designers, just web decorators.

      Maybe your company should start raising its budget to find the right web designers, or retrain your current crop of web decorators so that they can understand a little bit more about what actually goes on “under the hood”. In the end, everyone benefits, right?

      0
      • 121

        Thomas Giannattasio

        July 29, 2010 7:11 am

        I agree Andrei. Web designers need to understand the final product and how it’s achieved. Traditional graphic designers certainly need to understand the printing process or their work would suffer. Though web designers need not be experts, it’s really important that they have a solid understanding of HTML, CSS, JS, etc.

        0
    • 122

      To a point I agree, and I say that having dealt with designers who have credited themselves with the “coder” tag only to create web “code” that simply doesn’t scale or is mashup of Dreamweaver generated HTML/CSS/JS and their own tweaks. I think designers MUST know how the design gets implemented or the design is just a guess at how the web will handle that design.

      To sum it up, coders need to be involved in the design and designers in the coding but the fine-grain work belongs to each respectively. As a result, Photoshop or better yet, Fireworks for the designers and an IDE for coders. Let’s collaborate but not cook in each others kitchens.

      0
  38. 123

    “Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites.”

    As a long time user and appreciator of Photoshop I have to disagree with the above quote. For one, PS is the only app I’ve ever seen that can bring my computer to its knees, begging for mercy, when all I want to do is “save for web”. And two, it’s support of vector graphics is a joke. But that’s okay, PS isn’t meant to handle vector images, it’s an app for handling rasterized photographs.

    Why or how PS became the staple in the web design community is beyond me. Maybe it comes from a lack of education or the transition from print to web. I think PS has become just another common household name, with a lot of people not understanding why or how to use it. Which then leads people to believe that just because they own a copy of PS they can design things too.

    Last, I don’t think it’s a smart argument to say “stick with photoshop” over markup. That’s like comparing apples with a top sirloin. They aren’t even in the same food group. If you want a real competition, then take PS vs. Fireworks. There’s a true “toe-to-toe” matchup. I like to think of Fireworks as the featherweight boxer, dancing like a butterfly and stinging like a bee, whereas PS is like Andre the giant or something, very heavy and sluggish.

    At the end of the day though we just have to use what works for us. Design shouldn’t be about choosing sides in “defense” of one particular app. Design should be about making the best visual decisions to help communicate the message of our clients.

    0
    • 124

      First… photoshop has brought your computer to it’s knees? Wow… must have a pretty slow computer.

      Second…Photoshop is the staple in the design community for many reasons, but primarily, in my mind, due to its easy to use interface and feature set. I have yet to find a product that is as easy to pump out designs.

      Third… The author is making an argument against HTMLeans who believe the best way to do mock ups is within code, thus, the author is trying to prove this is not the case, and thus, must make a stand for another principal that is in opposition to the original idea.

      Ultimately, you definitely have to choose what’s right for you, but I definitely think that a designer will waste a massive amount of time writing html/etc if they do not make mock ups in a graphics program in general.

      0
    • 125

      Actually…Photoshop and Fireworks are still apples to oranges. In the same food group (to use your analogy), but still not the same fruit.

      Photoshop is a staple because it’s been around longer and was an old medium staple. At the time, it was simply the best program out there for raster graphic (bitmap) editing and manipulation. As it’s evolved, new media enhancements and functionality have crept in, just as enhancements in handling vectors (though still limited) has crept in.

      Photoshop is for creating graphic design and manipulating raster graphics for old and new media, with some web functionality thrown it. Illustrator is for creating vectors and illustrations that can scale to any size, be it a matchbook cover or billboard (over simplification, I know). Fireworks, on the other hand, was designed SPECIFICALLY with web development in mind, hence the reason so many useful web dev features are inherent in the program, not to mention it’s ability to export directly to flash.

      One final note…Photoshop is a common platform. There are many developers just as proficient at slicing up (manually, of course) a PSD file to create semantic markup that exactly resembles the approved comp…down to the last pixel. Those same developers likely are NOT going to take the time to learn a completely new interface and workflow pattern when there are deadlines to meet and money to be made. It’s that simple.

      For those who have switched from Photoshop to Fireworks, I say kudos. It’s great that you made the step, and that you work for companies that are willing and/or able to allow that freedom. For many established firms, especially those who also do print collateral, video, brand identity, etc…there is a proper program for every job, just as every job has the best person with the expertise to do it.

      0
  39. 126

    I would never consider mocking up in HTML…. EVER! Clients expect well designed interfaces, with great graphical elements that often require some extensive css work. Why would I put that amount of effort into a mock-up if I don’t even know if it will be sellable? There are different tools for different jobs. I actually cannot stand Fireworks, I feel it’s interface clunky, and workflow, not as great as photoshop. I would much rather put the time into photoshop, then slicing it up, for my interfaces, than trying to have a tool ‘try’ to generate an interface for me. xHTML+CSS+Photoshop, is the ultimate combo for web interface design.

    0
  40. 127

    Everyone’s got their own process. I use Illustrator to create a wireframe layout and design. I only use Photoshop as a photo editing and manipulation tool. and import into Illustrator from there when it comes to websites.

    Designing using markup language should only be used in moderation.

    0
    • 128

      I agree with you mtrang.

      Photoshop has it’s place, but I prefer Illustrator for mock-ups & design. But that’s just my opinion, and everyone has their own.

      Whatever makes you most productive is ultimately the best solution. There really isn’t a one-size-fits-all solution.

      0
  41. 129

    I agree with @mtrang
    I also do not think that photoshop will ever be completely forgotten or any other photo editing software. I feel like the only designers that really will switch to markup would be web developers and designers… not so much those involved in print or those web designers who have little knowledge of markup language…

    I personally love that it’s not easier and will only get easier to code the things I design but that’s where I’ll leave it…

    0
    • 130

      That’s ridiculous. Design is about the process. The same reason you sketch on paper is the same reason you work in Photoshop. It gives you a blank canvas to build your idea.

      No other program out there offers the same power as Photoshop. Saying that designers with a lack of HTML/CSS knowledge will only use Photoshop is a complete slap in the face to those that use Photoshop and have expert knowledge of front-end coding.

      0
      • 131

        That’s really true….” Photoshop gives you a blank canvas to build your idea” and that is creative web design.

        I completely agree.

        0
  42. 132

    I’ve always mocked up with HTML and Photoshop for image manipulation, for web design. Now photoshop with lightroom- “I’ve become an artistic photographer” Love it and will never leave it for design or photos!

    0
  43. 133

    FIREWORKS.

    Photoshop is very clunky with layers. Any Fireworks user will tell you that.

    0
  44. 134

    Seriously, Photoshop is not the best tool for web pages. Does it do multiple pages? NO! It’s only come to web design as an awkward evolution from it’s photo-based origins. It is an excellent program, but it’s nowhere near Fireworks.
    I have been using FW since day one for web design.

    0
  45. 136

    I’ve used Photoshop for years (I started on good ol’ 5.0), so I’ll probably never use anything else. Even though I hand-code all my websites, I like to have the idea in place and create it from there. For me, coding is easier when I know what I want the end product to look like.

    If I’m developing for someone, I don’t care what program they use to design it in… as long as they don’t use InDesign.

    0
  46. 137

    Those supporting graphics are very ironic.

    0
  47. 138

    No offense, but this post pisses me off.

    I’m not against us being against complacency, because with it, we don’t progress the technology. But sometimes, I think people look to pick fights with every single aspect of web design, and not only pick the fight, but then blow it completely out of proportion.

    This post reminds me of my old Illustrator CS4 teacher who used a 10 year old Mac and (probably) never used a version of AI past 7 (because her machine wouldn’t handle it). She was against the progress of technology because it “forced” her to upgrade her decade old computer.

    At times I think people write these articles just to nitpick a subject to death. You want image manipulation, you use Photoshop; that’s the way I’ve done business FOREVER and even having given PS the once over (twice), I still see no reason to question it’s dominance as a photo editor or supplier of graphics to my web sites.

    Flash websites vs. standards and usability; fine, I can see how Flash isn’t the best solution there; but even there, it’s not meant to be a web design tool; people are just (over) utilizing it for what it does well, interactive animations.

    I don’t think PS was ever exalted for being a “Web Development Tool”. It works in pixels, and many resources a site uses depends on that. These tools are just pegs to fill the many differently shaped holes that a web site encompasses. Use the right tool for the job; no 1 tool will work for all instances.

    0
  48. 139

    Adobe is now 90% bureaucracy, marketing and obfuscation, 5% “support” and 5% engineering. They are such an incredibly frustrating organization to deal with. Their software frightfully expensive. They are the new Microsoft (which is NOT a compliment). They have lousy support for hi-Ed and enterprise IT managers. And their software is frequently broken, breaks easily, crashes, fails to update, etc etc etc. I eagerly await new, cheaper and better software to move to for our schools!

    0
  49. 140

    Yes, Photoshop is definitely usable for web design. In the same way as paper and pencil are. Functionally, Photoshop is closer to paper and pencil, than to a webbrowser.

    I’ve been building websites for over 15 years. In the early days, customers wanted to have their brochures transformed to webpages. Page-for-page, retaining the same layout, often the only added web-feature was a link to browse to the next and previous pages.

    Of course, you CAN build web sites this way. And they often actually looked very good. The whole point is however, that this method does not make use of the added possibilities of a website!

    Creating a webdesign in Photoshop is, for the end product, only marginally better than using paper brochures for the web design. Yes, Photoshop is very friendly to the designer and creating a nice design is much harder in for example markup. But Photoshop simply does not offer many of the features a website can use. There is no way to design a fluid layout in Photoshop.

    Designing websites in Photoshop is like eating soup with a gold fork…

    0
    • 141

      Respectfully, I have to disagree. I’ve also been developing on the web for 15 years. Photoshop is a tool. Like a camera is a tool. It doesn’t matter how well (or not) it works, what features it has, and what upgrades are available if the person using it lacks the requisite knowledge and experience to use the tool effectively to achieve their end goals.

      There is no reason why a web developer cannot take a design that was INTENDED to be a fluid layout developed in Photoshop, and implement it as such in code. Any developer worth his salt should be able to create fluid layouts from any comp created in any application. Now, if the designer did not intend it to be a fluid layout, that is a limitation of the design…one which would occur regardless of the program used to create the comp, and one either the developer or the designer would need to correct.

      Cheers.

      0
  50. 142

    I have to say that separating out the design before the implementation definitely has it’s advantages when it comes to clients. Sometimes, it’s pretty hard to keep clients focused on the fact that they need to be reviewing the design even with a flat mock-up. Now if there’s actual functionality … we’d never get them to focus. It’s the same reasoning as putting in lorem ipsum in the design, so the client isn’t focusing on the content, but on the design.

    Just my two cents.

    0
  51. 143

    stupid to compare photoshop with html.

    Experience designer knows how to design web site that can be build.

    0
    • 144

      Uhhh… say that again?

      70% of the designers I work with have no idea how HTML and/or CSS work, and they have been in the business for years. They never heard of ‘pixel perfect’, the difference between RGB and CMYK and still design on A4 instead of 1024×768 pixels…

      The new generation designers (last couple of years) have chosen to do web design over print and have learned at least the basics of the internet.

      0
      • 145

        Then you’re working with the wrong designers. I work as a web designer (but have worked in both print and web) for a large e-commerce company and whenever someone interviews for a position as a designer without the correct tool set (including extensive knowledge of HTML and CSS), they get booted right out the door. I know the people you’re talking about though, print designers playing web designer, I’ve run across my fair share before and I do the same thing every time, call them out for what they are.

        Also the age range of web designers I know runs from people in their 20s to people in their 40s. These are classically trained designers who have exceptional knowledge of the web.

        0
  52. 146

    I agree that Photoshop is a great tool used in the creative process of building/designing for the web. More specifically I believe that is is just the best we have currently.

    Photoshop was not created with web design in mind. It was meant to bring photographers out of the dark room, and designers away from their paste up boards. Providing both with a tool that saved them time and money, and speed up the creative process. Designing for the web in Photoshop is great for mockups (like Tom stated), but it is incredibly lacking in the “save for web” options. Not that I would ever condone it, but Microsoft Word has the capability of creating websites, but it doesn’t mean you should do it.

    Dreamweaver is a basic WYSIWYG that was created with web design in mind, and tried to pull the developer from text editors the same way Photoshop pulled in photographers and designers. The creative process of designing a website would be advanced greatly if elements of Photoshop/Fireworks were incorporated into Dreamweaver. Then you could have your cake and eat it too.

    0
    • 147

      Well…that assumes that your environments allows you to develop with Dreamweaver as your primary IDE. :)

      I use Dreamweaver for most development, but when it comes to C# development / ASP.NET development, there’s no beating the Intellisense and debugging capabilities in Visual Studio, for all it’s other faults.

      Cheers

      0
  53. 148

    “Designing with mark-up, however, creates a disconnect with the medium.”

    Mark-up *is* the medium.

    “Designing with mark-up is like welding I-beams without a blueprint.”

    Except for the fact that tweaking mark-up on the fly takes seconds while re-welding I-beams can take months.

    The problem is that there’s an attempt at making this a debate between one or the other. The key is to use all tools effectively throughout the process. Be it paper, Photoshop, HTML, or what have you. Jump from one to the other as you iterate through the process.

    0
    • 149

      Thomas Giannattasio

      July 29, 2010 7:25 am

      Mark-up is the medium as much as nails are a building. The whole is really greater than the some of its parts, and what we’re discussing here is the whole – the entire visual presentation of a website. This is why Photoshop is vitally important: It connects us to the visuals, which is what the end user is most concerned with.

      0
      • 150

        I’m not arguing that Photoshop is not important. I’m arguing that it’s not *the* important part. When Photoshop is elevated to the highest point in the web design process, the web design process falls apart.

        Also, the end user isn’t most concerned with the visuals. They’re more concerned with the site doing what they want it to do in a way that doesn’t piss them off. Visuals can absolutely help with that. They are important. But they’re only there to help the user get their task done. The visual design is very important. But no more important than the interaction design. And the content design. And the Info Architecture design. And the usability design. Photoshop is GREAT for handling the visual design (though I tend to side with those that say Fireworks is even better). Not so much the other design aspects of producing web sites.

        0
        • 151

          Thomas Giannattasio

          July 29, 2010 7:40 am

          Good point Darrel. I should have been more clear. I agree that there is more to design than the visuals, and it’s true that Photoshop is not the most important part in the process. I would argue that the most important process of design happens within an individual. That being said, Photoshop (or Fireworks or any other visual editor) is the best platform for converting those ideas onto the screen.

          0
          • 152

            You gotta be joking! What a client loves most is design, they dont care about standards or technology, they want usability and good looks!

            0
          • 153

            It’s a good tool. I just can’t elevate it to ‘best platform’. It’s key PART of a web design and development platform.

            0
          • 154

            @Money that is often true. But good web design isn’t about giving the client what they love, but rather giving the client’s customers what they need.

            0
  54. 155

    I don’t see how you can even compare the two, for the most part they do completely different things. HTML vs Photography for the next article?

    0
  55. 156

    I really wait for this: http://www.antetype.com/index.html

    0
  56. 157

    Funny I never saw photoshop in the battle you talking about. Im wondering who are saying that photoshop will die?

    0
  57. 158

    Another thing that goes against photoshop is $$$$$$!
    Unless you go all Blackbeard, you gotta put your money where your design skill is, or you just have to get skilled at HTML5 and thats it.

    0
  58. 159

    Umm… someone’s trying to flog a dead horse here, oops I mean book! More of an ad than an article.

    0
  59. 160

    I think a main part of the argument between using PS and designing in code assumes that the site will be developed by the person creating the design.

    I’m a designer for an agency, and I create the “look and feel” of a site design, all the time working closely with one of our developers. I can’t code, they can’t design.

    We each do what we’re best at, and through working together (I tell them why a design will work or not, they tell me what is and isn’t possible / practical / good practice) we deliver sites that a) work, and b) match the visuals the client has seen and approved.

    Creating a working version of a site seems (at least in my experience) counter-productive. Clients will often get bogged down in fine details, such as copy and images. So handing them a site that they can actually navigate, rather than providing page mock-ups, seems to me adding yet another aspect for them to get bogged down in.

    Good planning, and education of the client, can get around many problems suggested at by people who are against using static visuals. I start on paper, and both the client and developer are involved heavily. This allows me to iron out a lot of problems before I ever hit PS, and streamlines my workflow.

    I can, using PS, create visuals for homepage, internal pages, feature page, etc. layouts (many of which will be applied across the site) in a matter of hours. These are then presented to the client and even if there are major changes it takes me less time to action these on the visuals than it would to re-code.

    In short, I think that a close working relationship with colleagues helps to eliminate most problems in web design, and results in delivering sites on-time, and on-budget. Forget the software issues.

    Some designers can master both the visual aspects of design and the technical aspects of code, but most can’t. I could learn code, but I love to design and I prefer to develop myself in terms of design proficiency and leave the coding to those who love coding.

    Rather than make yourself a “jack of all trades” why not excel in what you’re best at and collaborate with those people who have skills — and a love for that work — that you don’t possess?

    Just my thoughts…

    0
  60. 161

    The argument of using the right tools for the job is what I try to take from all this. Depending upon your preference and expertise, Fireworks or Photoshop both provide good solutions for visual design, but there’s an added argument I’d like to make about production as it relates to design and that’s where I have issue with Photoshop as it works today.

    Once you have moved forward with a design, you need a tool that can handle content in a more dynamic way, so that changes can be affected globally across multiple documents and layouts. This is where some of the Adobe tools having linked assets and libraries work well for large scale production, but Photoshop sadly lacks this functionality, a major flaw at this point in time considering how long web design has been executed using Photoshop.

    Any individual may be a master of a tool, but if the tool lacks features that make it a masterful tool, then no matter how proficient an individual is, the project suffers for the inefficiencies of the tools.

    0
  61. 162

    thomas giannattasio

    July 29, 2010 8:39 am
    0
  62. 163

    … Long time reader … first time poster

    This really shouldn’t even be a debate. You can not “design” in html … that’s building.

    It is true that building in the final medium offers the closest experience to said final medium … but the fact remains that tools like photoshop offer a rich array of tools to enhance creativity and allow the image of the site to emerge rather than solely allowing you to position a site’s elements

    Fireworks is a much better tool for designing sites with instancing and styles available you can create and edit much more quickly than in photoshop. As the name says photoshop is for photos … use it for the imagery of the sites, then port that imagery into fireworks to develop your layout.

    “designing” in html inherently limits the creativity because there are fewer tools available … unless I suppose you create sites with no imagery and only colored blocks and icons downloaded from your favorite web-widget-repository

    a programmer may make the argument to start the process in html but so long as there are creatives involved in the process there is no debate to be had … measure twice, cut once …. you don’t just start cutting …

    0
    • 164

      “This really shouldn’t even be a debate. You can not “design” in html”

      Sure you can. It’s part of the tool set. Especially when you loop in CSS and JS. Web design isn’t static visual design. It’s dynamic interaction design. PhotoShop is still a core part of the toolset, of course. But ‘design’ doesn’t start or end only at photoshop.

      ““designing” in html inherently limits the creativity”

      A lack of knowledge of a particular tool is what limits creative output if that’s the only tool one is using.

      I agree that this shouldn’t be a debate. No web design process should be centered around one tool. All tools need to be in the toolbox and used appropriately.

      “a programmer may make the argument to start the process in html but so long as there are creatives”

      I don’t like that sentence as it assumes programmers aren’t creative. There’s visual designers and there’s code designers and there’s content designers. No one of them ‘owns’ the term design IMHO.

      0
      • 165

        I agree.

        Creativity is not exclusive to the visual realm. I’ve seen very creative use of code to progressively enhance a web application’s functionality. It took creativity to come up with the concept, to decide what enhancements to make, and finally to write the code to complete the task.

        I do think people tend to link creativity to “art”. I think people just need to expand their definition of “art”. There’s the art of photography, the art of painting, the art of drawing, the art of coding, the art of thinking logically, the art of sex, and so on and so forth. Anything that anyone is inherently good at requires / required creativity to get them to that point. :)

        0
  63. 166

    in my own opinion (AI and markup user), better than to modify Photoshop for web use why not improve FW, taking on account that FW does awful markup and even DW is flawed when it comes to clean code (in the sense that makes it difficult for reasons too long to discuss here).

    I usually do my mock on AI and when the client is fully satisfied with the look of the product and my sales pitch in terms of interface I proceed to the actual coding, also what about the sketch flow in Expression Blend from MS, I’ve been looking into it as an alternative to the whole interface and feel of the websites.

    what do you guys think

    0
  64. 167

    This article is silly. You need a designer that knows how to design for the web. A good designer would know what works and what is hard to replicate with HTML/CSS.

    God…I feel like I am getting old..all these new age half assed approches to a simple design and development process are cute.

    If you are designer and you dont know the limits of HTML/CSS you are a bad designer. Get a book. Learn. Problem solved.

    0
    • 168

      @yomama: I think we are of the same age bracket. Hihi.
      “Get a book. Learn. Problem solved.”
      Could not agree more.

      0
  65. 169

    After reading your article and many of the comments above, I’d have to disagree also. I’ve been going “straight to code” with my designing for about two years now and adding graphics when necessary (using Fireworks, not Photoshop) along the way. I keep an open file in Fireworks as a kind of “canvas” that is never a complete mockup.

    I explain to clients right up front that a web-based, clickable model is a far better representation of their final product that a slickly designed photoshop file. Quite honestly, I’m not sure why Photoshop became the king of “web design” anyway, but I think it goes to our desire to create something with a “wow” factor instead of focusing on some core principles.

    I give full credit to some awesome photoshop masters out there – great stuff can be done with it, but ultimately we’re creating something fake. We’re taking a photo and removing blemishes, highlighting colors, etc. I think when applied to the web, Photoshop accomplishes the same goal – something flashy and slick, but usually fake when compared to an actual browsing experience.

    0
  66. 170

    Storm Bear Williams

    July 29, 2010 10:05 am

    Another Fireworks user piling on. I have been using Fireworks for more than 10 years. Of all the items in CS during an upgrade, Fireworks is the thing I look at first. That said, with iAd and HTML5 in the mobile space, I think this breathes life into Dreamweaver.

    0
  67. 171

    Interesting article – but it honestly feels a little irrelevant – no one that I know (besides the brilliant but somewhat detached guys at 37signals) is even considering dropping Photoshop as a platform. Drumming up a controversy seems a little like a stretch for the purpose of publishing an article… but whatever, it was a fun read :)

    0
  68. 172

    uh. can’t we all just get along?

    i’m liking the design community less-&-less because of the pointless feuds generated by.. generalizations! Remember our philosophers role before we dive into disagreements! :)

    #1 Know your tools

    0
  69. 173

    To think that you have a client and you will present a mockup by doing semantic code?
    That’s crazy! With my experience i only having slight problem with the fonts,for example
    layering the website contents using photoshop rendered fonts, but that is not a big deal, the more important is that how the design translates its impact to the client… I believe photoshop save our ass always… I describe photoshop is the basis of design, while semantic coding is just like weaving a dress…

    0
    • 174

      Ideally, they should be parallel processes — your design should have net zero impact on my markup, and both depend on a preexisting content decision. Once the content elements for inclusion have been determined, the design and code can progress separately. Semantic HTML means creating a meaning context for the content; design tries to express the meaning in a visually appealing and intuitive way. One should never find oneself translating a PS design to HTML; rather, one should be applying the visual aspects of the PS design (using CSS) to HTML that can stand alone unstyled (and, of course, that can be styled to reflect whatever the designer has envisioned).

      That’s the primary reason why I’d just as soon get a design as a PSD (or other graphics format) — it’s my job to worry about accessibility, discoverability, machine-readability and so forth, and the UX designer’s job to set the mood and make the site intuitively usable to the vast majority of the intended audience. The two tasks are, or at least should be, only loosely connected.

      0
  70. 176

    I remember the days when Photoshop had no layers and we had to dodge velociraptors. <3<3<3

    0
  71. 177

    I think that creativity is one of the things that the new digital era is not suitable for. Everytime I see or I read a note, they’re talking about tools, about technical media. Im professional graphic designer, and I want to say that every visual piece I add to a layout (aka mockup) I feel pre-defined by technology. Is that what’s happening now, and before. Tools and the mediums define our work.
    Every day a new framework appear, a new tool with tons of predefined stuff, we only have to “personalize” our work and that’s it…
    I think that we have to take the tools for what they are for, not because what they are itselves. No matter if you work with Photoshop, Fireworks, a simple textmate or notepad… I think that the whole net is starting to suffer a crysis of big fresh new ideas or ways to do things…

    0
  72. 179

    me myslef and I

    July 29, 2010 11:54 am

    Just wait for photoshop CS12 and HTML6 and you’ll get something interesting :)

    0
  73. 180

    Bratu Sebastian

    July 29, 2010 12:00 pm

    Photoshop is great, when you design a cool fashion or restaurant website, usually a media website or presentation website. But in today’s world, we have got more accustomed to simple web2.0 designs because they are simple. This is in part because of the saturation of ads and color in real life.

    I agree that for simple and budget webdesign, simple html prototyping will be better, but for real artists and master designers, Photoshop will always be the tool.

    And the tutorials we would lose without Photoshop … :)

    Interesting ideea to ponder in this article, though.

    0
  74. 181

    I must admit that I don’t really understand why PS vs. CSS/HTML has been such a battleground over the last few months. Surely different people have different processes that work for them, and that’s all that matters.

    Design is no different from my other occupation, as a writer. Some people draft on paper, others on a computer. Some write bits here, bits there and join them up, some write from beginning to end. Some plan in detail, making notes on index cards, others launch straight in and see what happens. If it works for you your way, good.

    In terms of design, I use Photoshop for some of the initial graphically-heavy elements and photographs, but get into HTML/CSS for setting text and the final mockups. I wouldn’t want to do all my work in one or the other, because that’s not how it works well for me. But if someone else finds it easier to do it all in PS or HTML/CSS, then good for them.

    It all seems like a non argument to me.

    0
  75. 182

    I think you’re confusing the conversation in the community over Photoshop’s misuse as a design tool. It’s perfectly acceptable as an image editing tool, and it’s great as a protoyping / visual design tool – but it is inefficient as a web layout tool.

    The real answer here is to use Photoshop for image editing & prototyping, but all final layout & design decisions should happen in code. The client should then be presented an actual website to finalize.

    This prevents the embarrassing situations of a design that can’t be coded and as a result needs to be changed after finalization. These arguments are squashed as coding the design becomes part of finalizing the design. Furthermore, hiding these decisions / arguments from the client is ultimately better for client / vendor relations as well as maintaining the spirit of the design in code.

    As designers we use pen and paper as a jumping board to Photoshop, but Photoshop should not be the end of the design. Photoshop should be another jumping board to get us to the endgame: an actual website in the language that websites are built in. That is where we should be finalizing designs.

    In conclusion: don’t get rid of photoshop, just incorporate HTML / CSS as a final step in your design.

    0
    • 183

      This makes more sense than most of the comments in this thread. If you don’t know HTML/CSS when you are designing a website, make sure to bounce your ideas off of someone that does.

      0
    • 184

      here here (raises mug)

      0
    • 185

      I’d agree with this one too.

      One point in particular from the article is so far off base it’s funny:
      “Photoshop is vital to good Web design because it extends the process that was started on paper”

      That’s exactly why it’s *not* a complete web design product.

      0
  76. 186

    We would build buildings without a blueprint (at least simple ones) if we could weld all the beams together and tear them all down again.

    0
  77. 187

    Useful article, but it is impossible to compare Ps and Html. Thanks for this article!

    0
  78. 188

    Hellooooo…this is what FIREWORKS is for. Yoo-hoo…

    0
  79. 189

    I have to say that this is defiantly a case of, the middle ground should be observed. Personally I started out in design and have migrated into a “hybrid” of a designer and developer playing both roles and being a liaison between the 2 worlds. My personal opinion is that no mock up should be shown with out having been converted to html/css/javascript. (pure)Designers only see the static or think that only showing the static is okay but what about that transition on the drop down menu or how well the light box shows up. Or maybe that moving background you wanted to use on the site. Mock it up in html and play around with the layout there and do what you can with css but when the time comes to work on those images and graphics break out that Photoshop and illustrator and crunch you some pixels. In the end I think if websites are done that way we will have more happy clients, developers, and designers. An amalgamation of the 2 practices is the best route not just Photoshop which produces unrealistic expectations and not just markup which limits the process some what.

    0
  80. 190

    Michel Bozgounov

    July 29, 2010 3:13 pm

    Modern WYSIWYG editors are off the mark. We need something more like Photoshop, but with capabilities that allow us to create DOM elements as easily as we can create shapes. John Nack seems to be on the right track with his idea of HTML layers, which would enable users to create and style HTML elements and render them with the WebKit engine all within a standard PSD file.

    John Nack is not on the right track, and Adobe aren’t on the right track, too. HTML layers in Photoshop?? C’mon!

    Each tool for the right job — and, IMHO, Fireworks is the right tool for this Web feature to be added to, not Ps! Why?

    Because currently, Fireworks is 10 times closer to Web/screen design, than Photoshop. Fw is also 5x times closer than Illustrator is. Ai and Ps are print design tools. Fireworks is a screen/web design tool. Fireworks is faster and more intuitive, when working with pixels. Its vector capabilities and features are amazing. It currently allows one-click creation of interactive, clickable HTML/CSS mockups/prototypes — something than Ps still doesn’t offer. It has Pages and Master Pages — you work twice faster in Fw than in Ps! It has HTML symbols. It has many more screen/web features!

    And finally — Photoshop doesn’t need any defense. This is now the No.1 Adobe product! The fact that most designers use Ps (instead of Fw) and this slows their workflow a lot, is probably a good topic for another article… ;)

    0
  81. 191

    It seems like what we have going on are a lot of confusion, assumptions and stubbornness. I find those commentators who began by stating they are in “complete disagreement” to be the best examples. Maybe some of this could be due to the somewhat misleading title of the article, though nothing against the merit of its content.

    I myself initially thought the argument was going to revolve around leaving behind gui elements that could not be achieved using css. An example are the now standard issue background gradients. They are possible to create using only css proprietary style selectors, and therefore not cross browser friendly. Should we then forgo the fallback repeating background image and offer only solid colors to those browsers? As debatable as that is, it was not the issue of the article.

    Rather than listing all of the misconceptions of what the article was not about, I will try instead to condense down the actual core argument that it was intending to address.

    *Given the improvements to css capabilities for creating graphical elements and design layouts, is the image-only mockup still a relevant and time efficient step in the development process?*

    Unfortunately, or fortunately depending on what side of the fence you are on, the answer is more likely than not, is very much gray.

    The analogy of a web designer to an architect was criticized on points that it was not realistic to the “intangible” internet and that clients prefer “sexy” prototypes to boring blueprints.

    I think those who agree with the criticisms may be subconsciously substituting the “client” in the analogy for themselves. At this point the focus of the argument is lost. If your opinion is based only on development experiences for which you were the sole stakeholder, it is important to state that.

    Few web developers/designers/any_synonym would spend hours making photoshop mockups to show themselves and ask, “do I like where this project is going?” Obviously if you have the opportunity or desire to make entirely your own website where no other approval or opinions matter, creating and exploring as you code will probably suffice. I can say from experience when even working for a client I have opted to go straight to code because its quicker. However, this was well after mockups had been approved and the project had some development already been completed.

    If you do or have done web development/design for a company or clients, you will understand how rare “decisiveness” bares its head in the design process. Clients and stakeholders may like things one day, change their minds the next, and then a week later go back to the original version. If you were to make a “sexy” working prototype for each change, you may find yourself sleeping a lot less and the projects cost a lot more over its estimate.

    In more cases than not, mockups are the guardian protectors of a web development project.

    I think the difficulty in mitigating the argument of the article, is that there always will be exceptions to best practices. If nothing less, this article does a good job of encouraging designers/developers to re-evaluate their own design process workflow to consider possible alternatives. Weather those alternatives are appropriate are up to that individual to decide.

    It would be nice however, to see an application that provided the ease of sophistical graphical manipulation of photoshop with the wire-framing logic of fireworks. Maybe one that could simulate css properties, or at least allow the designer to create elements within those confines. I am sure there are plenty of avid fireworks users that could relentlessly argue that it is the perfect solution and has all the web needed capabilities that photoshop has, and they are probably right. And I’ve tried to make the complete switch myself, but for some reason fireworks just doesn’t do it for me…yet

    0
  82. 192

    Pfft, Use Illustrator – it’s infinitely more flexible, accessible and faster than everything else but like most things – users dont “get it” and dont use it. Having worked for photographers for 15 years PS has its place (big intense manipulation), Fireworks has its place (chopping up) but I think I’m alone with AI as my primary web design tool.

    Ai has paragraph styles & character styles to create H1, H2, p etc and changing it is like changing a style sheet – try doing that in PS or FW… AI FFW !!

    0
    • 193

      As i use it i feel that Illustrator gives you somewhat more flexibility if you know the limits of what you can code

      0
  83. 194

    I’m sure this has been mentioned already –

    But SiteGrinder does almost what this article is asking for. I do code by hand – I’m just throwing it out there that maybe one day PS will be an all-in-one web app tool…

    0
  84. 195

    I’m a web designer and coder, and I do all my websites from scratch. I use Photoshop because is intuitive and I can create a mockup to see how the end product will look like. Clients like to see mockups first too. I can create any website design in PS and code it pixel perfect, so why wouldn’t I use it? I agree that designers need to know at least the basics of HTML and CSS to be able to create a design ready for the web. This discussion has no point. PS is a tool as many others and it depends on the user. I feel the design process is far more creative starting in phosothop and the coding accordingly to your mockup, it feels right to me and I’ve been doing this for 5 years now and all my websites work as planed and are 100% HTML and CSS valid.

    0
  85. 196

    Short version : Know what the limits of the final media is and design for that.

    If you do otherwise you suck.

    0
  86. 197

    I have to agree. There is a process to design that allows us to arrive at the end product. You can’t just skip steps. The answer would be smarter tools. Personally, I would love to see a CSS3 design mode in PS that allow you generate your CSS3 style sheet from html layers. I think that would be a huge leap forward.

    FYI check out http://www.nojobmonsterhere.com after August 15th. An entirely CSS3 rendered site. Only images to be displayed will be in the event of IE browser

    0
  87. 198

    I start with a 960 grid psd template. My guides are going to tell me with pixel perfect accuracy where things are going to layout when I go to css. To globally change character options (fonts, sizes, kerning etc…) Link your text layers, hold shift, make your change. To separate content data from design… use “variables.” To separate external graphics from design use “smart layers.” To create multiple variations using the same content (different designs, different pages of the design)… use “layer comps.” My starting document also has some pre-configured dummy content like content boxes and greeking text columns etc…

    Using these techniques I can show a comp to the client that is easy to alter, contained in one psd, and is a pixel perfect representation of the final product.

    0
  88. 199

    Fireworks all the way. Haven’t used Photoshop for full-time web or software UI design since 2004.

    0
  89. 200

    I don’t think this topic is relevant at all.

    If a web designer / developer is confuse what to do with photoshop within the creative process of web designing, then he/she shouldn’t be designing at all.

    Never mix them up.

    This article is silly and only creates hype for newbies and novice photoshop user.

    0
  90. 202

    Some brilliant explances hare, Excellent post ! So Inspire,Alot of helpful information her , Thanks for the sharing.

    -1
  91. 203

    I think one of the interests of using photoshop (or Fireworks – or any design software your good at) is to clearly make the difference between the design process and the development. I think both processes require different skills and when you do a bit of both (or a lot of both;) ) you need to mobilize one aspect of your skills at a time.
    When you design, you call upon your creative side, as Walt Disney would put it, the “dreamer” aspect of your personnality. In my opinion, this requires to be focussed on how you would like the product be, not how it “can” be.
    If you are “designing” directly in CSS/XHTML, I would argue it is harder to concentrate on creativity and not be constantly considering what is technically possible and what isn’t.
    There’s nothing wrong, of course, with having in mind technical constraints, but my experience is that we believe to be constraints often aren’t, and we design with the constraints in mind, we rarely make what we thought was “impossible”, possible.

    0
    • 204

      “you need to mobilize one aspect of your skills at a time.”

      I don’t know. I think that’s probably an OK method.

      But so is the alternative. On the teams I work on, we’re jumping between Viso, Photoshop, HTML, JS and CSS throughout the process. It’s very iterative and you pick up the particular tool you need at the given time.

      Admittedly, the particulars of the process change from organization to organization and project to project and client to client.

      I said it elsewhere, but I think it’s dangerous to consider the ‘creative’ part of web design only the visual aspect. All roles in the web design process are creatives. Or rather, SHOULD be creative. Be it the graphic designer, interaction design, or the PHP coder. All of these roles require a creative thought process and communication and integration with all of the other roles. To isolate the roles into rigid steps (waterfall) or departments only weakens the quality of the final product. Good web design isn’t an assembly line.

      0
  92. 205

    sonic frequency

    July 29, 2010 11:16 pm

    I love reading your article! (Had no idea…there was a war against PS) Photoshop is a must for designing sites during mock-up. People who decide to design with XHTML or CSS first find they just wasted a bunch time devoting precious time with code when they should have designed the prototype with Adobe Photoshop first. Newbies!!! :-)

    0
    • 206

      hehe… thank you for calling me a newbie :p

      I always build sites straight in HTML + CSS and only use PS to create the necessary images. As a developer I know that less is more, so using a minimum of images is better. When I (or anyone else) starts designing in Ps, Ai, Fw first; I always end up with images I never wanted…

      -1
  93. 207

    I prefer fireworks, faster, more dynamic, more manageable … Photoshop is too rigid to move objects, change colors or apply styles. In fireworks it takes you 5 minutes in photoshop takes to do the same 10 minutes.

    0
  94. 208

    Whats name of the font used in the images of this article?

    0
  95. 210

    The main problem is that people think a design is done once the designer has shown the client the final photoshop mockups and been given a go ahead. And the web developers carry this misconception on by implementing the design to a pixel (by – more often than not – adding otherwise unneeded html-elements).

    This needs to stop.

    Photoshop is a tool for doing static graphics – as such you can very well use it developing the look and feel for a website… But that’s also as far as it goes. It wasn’t designed to do webdesign – don’t let the “Save for web”-functionality fool you.

    It’s woefully inadequate for doing layout and testing designs with different amounts of content etc. Most often (photoshop) designers will only make mockups with just the right amount of text and pictures to make the mockup look the best possible. These best case scenarios won’t help highlight flaws in the design when more or less content is used.

    I’m also baffled by (photoshop) designers being given the responsibility to think up interaction design – especially given their tool of choice. How are they going to realize that making a link in the middle of a text blurb bold is generally a bad idea (as altering font-weight will nudge the preceding text)? How will they define how a custom tooltip appears? (Does it fade in? How fast?) The list goes on…

    I do agree that we need a higher level tool, but one that will help visualize interactive elements. And that tool (or those tools) might as well be made in-browser; in javascript or as browser extensions. We might need to make them ourselves!

    0
    • 211

      “The main problem is that people think a design is done once the designer has shown the client the final photoshop mockups and been given a go ahead”

      Yes! Well said. That pretty much sums up the primary issue of relying too much on PhotoShop. It’s a static, flat document and it, alone, simply can’t communicate the full design of a web site.

      0
    • 212

      I don’t believe anyone thinks that the design is done once the comp is approved. At least, I don’t. Any experienced designer would explain to the client that the design is only a comprehensive mockup of what the website will actually look like (THAT’S what we use photoshop for); that there are a million factors that each browser (and website) comes with that may change things here and there. Our jobs as web designers are to get the website as close to the comp as technically possible… most of the time we can get it 99% there. If you’re complaining that some designers don’t know what’s technically viable before they start designing the comp, then they should probably try to be better at their jobs.

      0
      • 213

        Spot on. A lot of the comments on here seem to come from “freelance” designers, or 1 or two man shops.

        Your comment strikes me as one coming from someone who, like me, has worked in a design shop with a team of developers for many years, has helped create internal work-flow and design standards, and has been part of very large projects.

        Anyway, excellent comment.

        Cheers.

        0
      • 214

        I’m very happy that there is some sanity out there :)

        But from my personal experience what you and I call mockups or comps are regarded (by the client) as the final design. Actual implementation of said design is thought of as trivial. Should a design feature be incorrectly implemented it’s automatically considered a failure on the part of the web developer…

        I’ve actually had clients take screenshots of implemented design and comparing them to the comps where they found 1 pixel descrepancies which they demanded fixed. My boss thought it reasonable to accommodate them. :(

        Things are finally beginning to look up though. But I fear there’s still long ways to go yet.

        0
    • 215

      > How will they define how a custom tooltip appears? (Does it fade in? How fast?)

      Well that’s a problem of the century. I love how coders are singing praises to their magical hover and fade in effects (oh, I forgot almighty hover and active states of links, how could we live with static images till now?), which can be *really experienced* as they should *only* in browser, like the real car vs the picture of a car, like the starry sky vs painting of it. Oh my. Cut the bs, please. I think the designer who can’t imagine a hover button or a fading tooltip appearing should not call himself a designer. I can answer the question by the way: you define the speed of fade in seconds and any movement in miles per hour and you write that with a note tool for a coder (a bit of irony here) or with a red brush on separate layer you could explain any animation by drawing it, if you need to do so.

      Seriously, in many cases (unless you are designing something animation heavy, which I doubt that most of us web designers, not flashers, do) these effects have little importance comparing with the rest of design work.

      0
      • 216

        My point exactly. If you’re a web designer and you can’t picture how the end product is going to look, or don’t know what’s technically viable before you start the design process, then you really aren’t very good at your job.

        0
  96. 217

    Interesting read and comments, boy do some of you get a little hot under the collar! After all we’re all designers and we all have our own way of doing things.

    What’s important is not how we do it but what the customer wants and gets.

    They way I design depends on the job.

    If it’s a small simple static site I go straight to HTML and CSS.

    If the design is really visual I do a Photoshop mockup supplied as jpeg then tweak this with the client to get the look and feel right. Then cut and slice and build the markup.

    I also use Sitegrinder for the really complex layouts, again getting this right with the client in Photoshop then letting Sitegrinder do it’s magic. I then amend the outputed markup as required.

    At the end of the day it comes down to using the tools that you feel comfortable with to get the job done to the client’s satisfaction, on time and on budget.

    0
    • 218

      I use SG as well on quite a few of my projects. It’s not perfect, but it allows a starting point for the layout. The cool thing is that once you have all the css code, it’s simple (and very fun) to manipulate the code to create additional pages and add PHP code as well. SG allowed me to break down the CSS and wrap my tiny little mind around the concept of CSS. It’s made me a better developer because it helped me learn how CSS works and how I can use it more to my advantage. And of course (gratuitous plug here) “The Smashing Book” has been a great learning asset as well.

      It’s not the end-all/be-all, but it’s given me tremendous insight on how to properly build 100% CSS-based, W3-compliant sites which load fast and become well oiled machines as opposed to clunky, table-based sites which are a thing of the past.

      0
  97. 219

    The car industry is a perfect example of where compromises have to be made and have to be accepted when a creation goes from concept to final production model. It will come down to technical and cost reasons usually. The main thing the concept is created for is to generate the spirit of what the car should be about.

    Saying that, when I design mockups in Photoshop, I tend to keep in mind along the way of what the developers will be able to pull off and what they won’t. I try to make their lives as painless as possible and also try to keep myself happy with the final design I provide.

    It also helps when it comes to the argument of whether something is possible to implement in the final coding of a site if you’ve taken the time as a designer to plan how it will be possible to do it and explain to them that you’ve taken the time to think about what you’re proposing.

    0
  98. 220

    If you’re in the habit of using Photoshop for prototyping, and especially if you are only the “architect” and won’t also be the “foreman,” I think that’s fine. It’s useful for selling the design to a client, but its function is entirely conceptual. As long as you’re cool with that, it’s cool.

    At some point, I think it’s more useful to hone your conceptual skills and your HTML/CSS skills to the point that you can create at least the essential functional framework first. It’s easy to slap all kind of elements into a Photoshop image that will ultimately weigh down the site with needless widgets and unprogressive enhancements; they may look cool to the customer, but in the final implementation they may aggravate the end user to death. Prototyping with Photoshop, you won’t know that until you’re committed to that implementation.

    This article from 2008 offers a more practical production method for me:
    http://www.boxesandarrows.com/view/prototyping-with

    0
  99. 221

    I have not yet ever wasted my time designing a site on photoshop. Personally, I have not once coded up a design and it look anything alike to what I first designed and from that alone I think I to be pointless to muck through time crunching layers and effects. I personally can’t think of anything better than a blunt half chewed pencil, the back of a tea stained ‘final demand’ and 10 minutes of doodling. Once you’ve coded that up, you won’t be disappointed that you spent so much time on the design and the final product not looking anything similar.
    Let the finger tips do the designing.

    0
  100. 222

    Yeah!! PS is the best web-design layout tool for me presently!!

    I’ve been hearing a lot about Fireworks but have never used it! I’m thinking about that !! But, using PS, I never think about any other options!!

    I think using a HTML/CSS template as a preview of your work to the client is really a waste of time with little visual impression!!

    As I design my site layout in PS & code myself in XHTML/CSS, I think its great to use photoshop for the all the designing & then using codes to make it work later!

    Great Article ! But PS don’t need no defence!!
    Its’ strong!! :) but yeah they should adopt some features of firewors that are especially meant for web-designing!!

    0
  101. 223

    Real coders can code any PSD into html and css and have it work like it’s supposed to :)

    6
  102. 226

    Great article! I’ve just started using Balsmiq (balsamiq.com/products/mockups) and it’s really helped expedite the design process from wire-frame to photoshop.

    0
  103. 227

    paul del signore

    July 30, 2010 6:43 am

    debating PS vs FW misses the point of the article. The main issue here is using a design tool vs designing with markup.

    Tom is correct, designing a blueprint before coding makes sense… that is all part of a process.

    0
    • 228

      Michel Bozgounov

      July 30, 2010 10:12 am

      Actually, the Fw vs Ps debate is not that irrelevant. Fireworks is much closer to the real Web design than Photoshop is! Fireworks can also create clickable, interactive prototypes (HTML/CSS/images + interaction layer), that can be presented to the client for approval; once the design is approved, you can export the graphics from Fireworks and move to handcoding your layout (HTML/CSS) and interactivity (JS/AJAX) in a coding tool of your choice (CODA, Dw, etc.).

      So working in Fireworks, you are faster; and you are much closer to the final results when building your web design, even while working in your graphic design editor!

      Since we talk “Should we start the design in Ps or directly in code?” it is perfectly relevant to ask another question “Wouldn’t it be more appropriate to start the design in a tool that will take you faster to the final results you need — Fireworks?”… :)

      0
      • 229

        Ha, Michel

        I was actually thinking, how long will it take until you start preaching about Fw again. Near enough a whole day after the article went up. What was wrong? Where you ill or on holiday?

        ;)

        1
        • 230

          Michel Bozgounov

          August 3, 2010 9:15 am

          @Falk:

          If you don’t get well the point of the discussion, you better walk away from it. Just use Photoshop and don’t spend your time in vain here… ;)

          0
          • 231

            It was a joke, Michel, as you started a discussion involving Fw and Ps on this thread. That was just funny. God, no reason to get all cross.

            I never even picked up on the discussion, because I don’t really have an opinion on the article other than looking forward to what will be developed in the near future. I am just not feeling like I have to comment on a subject just for the subject’s sake. And this is what a lot of people do on here – and a good 50% of the comment space could have been saved by just not posting “irrelevant” opinions and how we all should get on with our lives.

            0
  104. 232

    The arguments back and forth between PS and code might as well be between pens and pencils… because that’s essentially what we’re arguing about: sketching tools.

    My biggest issue with sketching in code is that many web design/dev projects aren’t done by individuals, but involve a large team of designers/developers, many of whom posses disparate skill sets and some wouldn’t know what the heck a css class is. PS and Illustrator allow these teams to really nail down the design of IA, UI, layout, grid, look/feel, typography, etc. before development begins (when a simple request from the client, like re-conceptualizing the grid, becomes a nightmare). Sketching in code is helpful to show a client a specific interactive element (“this is how the lightbox works… this is what the drag/drop feature looks like…” etc.) but pure coded mockups lack the accessibility, adaptability, and rich visuals of a PS or Illustrator mockup.

    (That being said, I make my students sketch in code…. it’s good for them! But they always ask to use PS instead.)

    Don’t get me wrong, PS has outlived time in the limelight as the preferred sketching tool. Something new needs to come along, and many of the suggestions in this article for integrating CSS and other code-driven features into a PS-like environment are brilliant. I would shocked if Adobe actually implemented them, seeing how obstinate they are regarding streamlining their current products (fingers crossed that CS5 *at least* features a more streamlined UI vocabulary).

    In an web design/dev age where limitations are decidedly déclassé, these insufferably limiting sketching tools, both code and PS, need to evolve, and quick!

    1
    • 233

      We use prior client projects to showcase functionality requested by the client. We also know, with 99% accuracy, what the goal of their web project is, what content they are going to present to site visitors, what features they are looking for, etc. before a comp is ever started in PS.

      “Sketching in code” in a production environment is a very expensive proposition, or at least it is in our case, since all of our projects make use of API’s, WSI’s or other dynamic data sources that would require coding the connectors and interfaces to display the resulting data in the “sketch”. Sure, we could build the wireframes, and greek-up some content…but this would be a far less accurate representation of the end product and much more time consuming (aka “costly”) than generating comps in Photoshop.

      Cheers.

      0
      • 234

        I should amend my comment that I “make my students sketch in code” to reflect the fact that goal of those exercises is to learn code. Not learn design. Agreed, previous work and pre-existing demos are as far as I’d like to sketch in code for my clients. Occasionally they’ll need a custom demo to show what their product will look like in a pre-existing lightbox. C’est la vie.

        0
  105. 235

    Interesting article but I don’t see the real debate. Anyone designing in markup is missing the boat.

    -1
  106. 237

    I’ve got to say, i bought a couple of fireworks books to get into it, but just haven’t had the time. Photoshop does everything you need it to, with pixel precision. As long as you have development knowledge, you can create a perfectly valid design that will translate well when coded.

    The other thing is also that I do not know of one person who uses fireworks, let alone as their default app for designing. If I handed in my designs as fireworks files at work, it would confuse the hell out of the other designers… leading me to fold-out the remaining pages each and every time.

    If everyone uses Photoshop, then that means we can all make changes / update / fold-out each others designs if necessary.

    But with that said, i do still intend to learn all about Fireworks. Pity it’s going to be axed… is that for real?

    0
  107. 239

    Tables FTW

    1
  108. 241

    hrmmm, was this a post or an extended advertisement? :)

    0
  109. 242

    Yep. Fireworks.

    Gradients, patterns, vector, bitmap, adjustment layers, …

    It’s so easy to design with. I pray adobe keeps developing it.

    0
  110. 243

    I think the real discussion is layout software vs. coding, and I think layout software in most instances. As a musician, when I get an idea in my head, I let it go where it wants, and I don’t think about whether I can play it or not, or if the instrumentation is realistic, etc. I let the idea flow and worry about the technical later.

    Likewise with web design. I design it how I want it in Photoshop and take notes on the interactions I want to take place, then I figure out how to code it later. This frees me up from thinking of an idea and altering it because “well, it would be easier this way.”

    In both cases, not thinking about my technical limitations pushes me to get better by forcing me to learn new things. My two cents.

    1
  111. 244

    Nice to see Fireworks getting a lot of recognition in the comments. I’m yet another big fan of Fireworks for many, many reason. I love Photoshop for other stuff (print and obviously photo-editing.)

    But regardless, both Photoshop and Fireworks are great design tools with no limits in the hands of a good designer, so I don’t see the “design in a design tool” workflow ever going anywhere. I wouldn’t have known there was much of a “war” going on if not for this article! Interesting article, thanks.

    What I hope to see in the future is better design-to-production integration of specific design elements. I’m not talking about outputting a full code-generated site from PS/FW, but lots of low-level design translations where it makes sense. For instance I wish both PS and FW had an easy way to output their native styles and swatches as a clean CSS stylesheet so I didn’t have to copy paste colors and strokes widths and such all the time, or if you could select some text and copy as CSS definitions, or apply CSS style borders to objects in FW/PS and copy paste, etc. Fireworks already has a 9-slice symbol object, it would nice if you could output that to CSS3 9-slice (or whatever it’s called in CSS3 now.) This stuff will just make certain steps easier to go from design to build without alienating the designer from their natural environment with full creative freedom.

    Fireworks has started to do a bit of this sort of thing, hopefully future versions will take it much further.

    0
    • 245

      IMO Fireworks is a great tool for websites on the fly but what Adobe needs to improve is it’s use of css “à la” Artisteer for example

      0
  112. 246

    I hope some other company releases a tool to make it easier to create website designs. At the moment nothing is beating Photoshop and it really shows. Just look at prices for Adobe software in Europe.

    I think that some other competitor would be really good for both Adobe and us, the end user. Cause now they can pretty much do what they want.

    0
  113. 247

    I’ve also been thinking about CSS layer styles within Photoshop. That would be awesome!

    0
  114. 248

    Photoshop is terrible for web design, Fireworks is much better suited for the task. Prototyping is faster and changes are much easier since many assets are vector. Slicing is quicker and more accurate and you can build over-states for buttons etc.

    0
  115. 249

    Photoshop may be great for the form but its the wrong tool for the function. Design is about both.

    0
  116. 250

    I think there’s definitely a workflow involved in producing a website. My team always always starts off with hand-drawn wireframes. Then we move to more precise wireframes done in illustrator. This allows us to quickly get our ideas across, enable us to discuss with our clients to work out their requirements and design with them. Then we move to creating examples of high-fidelity mock-ups in Photoshop. These examples allow clients to see how wireframes could be materialised and their branding applied to their websites. We could quickly responds to their feedback and make alterations to our wireframes and PS mock-ups if needed. Concurrently, we may choose to build technical prototype in the back-end, and bring together with the front-end once the designs have been approved. We also build front-end prototypes, if there are some interactions that we’d like to some user-testing or client demostations. They could work out fine without much styling applied at the prototype stage. I think this is quite a flexible framework. As everything is documented in versions, we can make iterations quickly and scope out our project easily.

    I think most people work this way, as jumping ahead of phases is very dangerous. This is because it’s time-consuming and doesn’t allow quick iteration process. It also interrupts the flow of ideas – as there would be too much technical constraints applied too early in the design process. It may suit some teams – maybe a designer is more comfortable with mark-ups then photoshop, which is very rare. Or maybe the designer and the front-end developer is one person. But generally speaking, I’m not in favour of it.

    0
  117. 251

    useful post! :p can you please tell me the fonts used on those images? they are really, really beautiful.

    0
  118. 254

    I think this article has a quite conservative sight onto this matter. As more and more things which were initially only available in Photoshop itself become ever more possible in Markup Language, things change. The statement that in Photoshop things are possible which aint in Coding can no longer stand as it is, but here it is still done so by the author. The argument of the necessity of Photoshop for the creative process and flow of ideas is too individual for each person.

    One must abandon the believe that the process of coding belongs to the final stage of website creation. Just because it was that way in the past, does not mean it still is or will be in future, especially not with such potent tools such as HTML5 and CSS3 which are currently advancing.

    The point is, one can be architect and foreman all at once, creating Blueprints while welding I-Beams, with the freedom to de- and reattach the I-Beams as many times as you want, whenever you want. The creation is no static building, once build never changed as the metaphor implies, but an extremely flexible fluid.

    0
  119. 255

    i am developer but have bunch of interest in designs, and stick to photoshop for the mockup. it gives me some thing to rely on when i do html/css conversion.

    back in my college days when i needed to work on a complete web project design by myself i landed a page by 37signal, ( http://37signals.com/svn/posts/1061-why-we-skip-photoshop ) the post argued about skipping the photoshop stuff and directly starting mockup with a bear-bone html/css structure. it was at first fascinating to me, i thought i got a great insight, no need to work for designs then.. i started working with just plane html and css. but the end result was, the design ended up to something that i would have done far better going through the photoshop step.

    whatever people say, we need to have a nicely done mockup with all the details (colors, fonts, font sizes, spaces.. ) before you convert them to margin, padding and all. and this can’t be achieved in such details with anything else but photoshop. some designers may do mockup just with html/css alone, but what i want to say is stick to one which takes less time for you to the final web layout. i always liked the way it’s done with photoshop.

    0
  120. 256

    Using images instead off just visuals reated with css3 and html5 makes more sense anyway, and image editing programs are necessary for that.

    0
  121. 257

    I love to see that there are so many people out there preferring Fireworks. It really is the no. 1 tool for screen layouts!
    I am always laughing when I take a look into books and articles about webdesign with Photoshop. People really have time to waste doing tasks in Photoshop for hours which takes only minutes in Fireworks.

    For all those who want to see the difference and advantages using Fireworks I have recorded a Screencast at vimeo.
    http://www.vimeo.com/12332496

    0
  122. 259

    When we give a client a mockup in the form of a static presentation – whether a PSD or a JPEG or a PNG of the expected look of the site, we are disregarding one important aspect of design which is interaction. Some clients just can’t visualize “this list comes up when you hover on this item”, or “this lightbox opens up when you click on this image”. Sometimes, they have to “feel” it for themselves. While some clients prefer to look at “how it would look”, a great number of clients prefer to see “how will it work”, and that’s where I think a static mockup fails to present.

    For me, for these kinds of clients, it’s better to present a working UI prototype rather than a mockup. You can design parts of the page in PS/AI/FW/GIMP/Paint/Whatever and stitch everything up in HTML to create the prototype. The HTML doesn’t have to be semantically sound if you think doing so will kill time – it’s a working prototype, not THE final product (just be sure that you convert it into proper semantics for production).

    But then, there are clients who are more concerned with the design. Thus, there’s nothing wrong with presenting them with a static mockup. However, implying that PS is the best tool to create this is unacceptable. While PS is great tool in itself, and helped a lot in communication through design, I think labelling it as “best for creating mockups” is wrong. If this article is really about THE creative process, then I think the designer’s CHOICE FOR A TOOL is part of that creativity – be it realized on PS/FW/GIMP/…. or HTML+CSS for that matter.

    1
    • 260

      Well said.

      To take it further, it’s not even an issue of “some clients just can’t”–it’s actually the UX team can’t fully address all aspects of an interaction merely in their head and via a few notes in the margin of the wireframe. Interactions, when well done, actually require a lot of intricate decisions that can only be fully communicated if you take the time to actually build it.

      Bill Scott points out that in a simple drag and drop scenario, there are 16 different events and 96 interesting moments that need to be accounted for. A photoshop file alone ain’t going to do that.

      http://www.uie.com/events/web_app_masters/samples/bill_scott/

      0
  123. 261

    This is just another vote for Fireworks, which has a much better interface, much more precise tools, offers pages within each file, faster/better color options (including gradients that can be adjusted and customized very quickly and easily). There is just no contest that Photoshop is better for photos, but Fireworks is certainly better for web stuff.

    0
  124. 262

    Douglas Bonneville

    August 2, 2010 10:54 am

    A tool like Fireworks is right in the middle, because it’s interface and elements more closely model the web than does Photoshop. The basic paradigm of being pixel oriented at the foundation level is critical. I can’t count the number of Photoshop mockups I’ve seen and been handed (or created myself) that make it to the 80% mark in terms of what translated from the comp to the browser. My experience with Fireworks is that it’s about 98%, because I design with web limitations in mind, and can bridge the design gap because of that knowledge.

    Essentially, if you know and understand the limitations of browsers, Fireworks is the best tool to design in, while keeping Photoshop for certain artistic sub-tasks that Fireworks is not best suited for.

    0
  125. 263

    All the tools for web design and development suck, all of them. Software in general needs to catch up, in a very large way.

    What takes 2 people should only take 1, what takes 10 hours should only take 3 and what costs $2,500 should only cost $400…and this is because the tools are behind the times.

    There is no reason why even complicated web development should not be achieved with a simple drag and drop.

    I am convinced web D & D is kept difficult and cumbersome on purpose!

    0
  126. 264

    Daniel Karlsson

    August 2, 2010 8:00 pm

    The article misses why some people have started to “design” direct in html/css. To me, it’s all about the entire project management process. If you’re following a traditional waterfall project management process (problem and solution is known). Design first, develop later is absolutely the way to go and Photoshop is a fine tool. The problem is that a big part of the industry is using agile/lean/iterative project management methodologies. The do this since the problem and/or the solution is not entirely known.

    The analogy with building a building and creating a website reveals how non agile the article writer thinks. Nothing wrong with that, but he uses this perception to web projects in general, and that don’t work for me.

    I think a lot of designers need to take a few mins and think why the “design first” philosophy getting some beats. It’s not like developers don’t want a complete specification before they start coding. But if the specification is not there, what is there to do? One could of course make up and plan(guess) specifications and just make sure you progress on the “guess plan”, but that’s a delusional option.

    Since designing/developing/testing while constantly interacting with the customer, validates your path and makes sure the final product will be what the customer expects. Since you CAN change fundamental things in software (while not in construction) the underlying thought of the article seems to me be a bit broken.

    Hope this din’t come out as lecturing, just wanted to post an other perspective.

    0
  127. 265

    This post feels like it was created purely in order to tout the book at the end.

    0
  128. 266

    The concept of having html styles is amazing but i can’t see that happening anytime soon and of course we’d still have cross browser issues.

    0
  129. 267

    I think a lot of people missed the point and it turned into a Photoshop vs Fireworks debate, rather than a design visual vs in-the-browser one.

    Of course it can entirely depend on the project, but if there has been thorough Wireframing (i.e. sketches) at the beginning of the process – why not go straight to the browser if you know what’s required and it has been agreed?

    Take into account new CSS3 decoration stuff like rounded corners, shadows, gradients, text stroke etc. Previously these would have been implemented as background images so it made sense to turn them into graphics prior to build. But now it seems kind of backward to try and recreate these styles in a graphics app if you’re going to implement them at build only using CSS.

    0
  130. 268

    This essay is a ludicrous exercise in inflammatory rhetoric that sets loose straw men made of stereotypes in simulated cage-fighting. I assume its major purpose is to flog the author’s new e-book, which I congratulate him on.

    PhotoShop remains (and, I believe, will continue to be) one of the best-selling tools in the designer’s toolbox. I believe most people know what its limits are in the design process.

    Two people in their comments mentioned ‘SiteGrinder,’ which is a very interesting, very creatively done, attempt to “bridge” the conceptual space between PhotoShop and UX design (via altering layer names, and using certain named layers with no visual content). SiteGrinder then auto-generates a complete layout with CSS and HTML from within PhotoShop using the File/Automate menu to trigger it’s rendering engine interface.

    Surely the state of dynamic flux of the entire “universe” of the web … and digital design … will spawn many a strange mutant with a mixture of UX-interactivity and vector-and-bit-map design “genes.”

    Can Adobe muster the strength to revamp PhotoShop in a way that incorporates what SiteGrinder does, or what FireWorks does now ? Can they afford not to muster that strength ?

    When I see someone saying they’ve used a product for ten years, I wonder how many version changes, and ui changes, they’ve been through.

    Anonymo is a human being in his own eyes, a human being who once had his name on two prior versions of one of Adobe’s key products mentioned in this thread.

    best, Anonymo

    “It is the mark of an educated mind to be able to entertain a thought without accepting it.” Aristotle

    0
  131. 269

    Bryan Zarbhanelian

    August 3, 2010 6:04 pm

    I was actually very glad to hear so many people bashing Photoshop for web design lol. Personally I use Fireworks and I think that everything you need to do for webdesign is harder to do in Photoshop than Fireworks.

    I do my own mockup and designs using Fireworks and it never has failed me.

    You can checkout my new website at http://www.dotvolution.com

    0
  132. 270

    Forgive me if it’s been mentioned… I only read the first 70 comments and then skipped ahead!

    I attempt to iron out all of the interaction issues in a website within the wireframe stage. Why would you generate fully rendered pieces (PS or CSS) of a site that has not yet been approved by the client?
    Wireframing is much quicker to adapt, explore, and generate, and you can quickly pull them into multiple software options to generate interactive storyboards etc. for the client – heck even PowerPoint can get the message across!

    It seems to me like too many people are simply constructing the building to show the client how it would work (like the authors example). Where are the blueprints nowadays? Why aren’t we sketching the plans, drawing up blueprints and getting approval at that point… then you render it, make it pretty and start construction.

    1) sketch out your ideas (pen and paper)
    2) wireframe your ideas + present to client (numerous software options)
    3) upon approval, generate graphical representations + present to client (Photoshop etc.)
    4) upon approval, build the site. (CSS etc.)

    Or is that just me?

    1
  133. 271

    well, certainly designing the site on psd first is important.
    but to compare with architect.. well the difference is very much high between those two occupation.

    to build house, skyscraper etc you can’t try and error.. you can try like this and like that, if it not work just bring everything down.. you can’t do like that, that why it need for plan, 3d model, or ever mini model.

    but as for web design, it always possible to try out using html, you can change anytime you like without effecting much to the process.

    photoshop is good thing for web design, but it not as important as plan for architect.

    closer example would be better

    0
  134. 272

    Sorry but any person creating design templates in Photoshop who has no idea if their end product can be fully converted into HTML & CSS should not be anywhere near the the web development process. Its not the tool its the user that causes the problems.

    You cant just boot up Photoshop and disappear of into the land of gradients, beveled buttons and pixel fairys, a designer should be completely confident that the finished graphic can be converted into fully accessible xhtml and css.

    This goes for all graphics generation apps, and bashing one over the other shows a complete lack of understanding of the whole process and an over reliance on particular applications .

    0
  135. 273

    couldn’t agree more. plain and simple, photoshop is a production tool, not a design tool. I have often used to architect/building analogy to explain the design process. I start on paper, then move to Illustrator for design. then let the minions build the crap. I hate web design :)

    0
  136. 274

    Great article.

    0
  137. 275

    If Photoshop where to create .png files for each layer, with transparency of course, and then generate CSS and HTML markup that positions the .pngs and any placed text exactly as you positioned it, wouldn’t that be a solution to our problem?

    0
  138. 276

    Hey all you webdesigners! Why don’t you prefer illustrator to design your websites? It works very intuitive for me. I think it’s very fast in experimenting and corrections afterwards (colors, fonts, size …). Even for the webdesigner who have to translate it to html and css, all the sizes, fonts and colors are easy to look up for in the illustrator document! What do you guys think?

    Greetings
    Pieter (Belgium)

    0
  139. 277

    eerkman meneerman

    August 5, 2010 1:44 am

    I’ve never understood why webdesigners cling so frantically to a software package that was never built to design pages full of interactive content.
    Photoshop shines when you’re editing a single image.
    When you build a photoshop file with tons of buttons, menu items and other elements, the file quickly becomes unusable, even for the designer who created it.
    Fireworks, on the other hand, allows you to create interaction right on the spot. You can export a working model without ever touching a html file.
    Prototyping in pure html+css is only an option if you want to check basic interactivity concepts, and don’t mind using placeholders that will later be filled with the actual design.

    0
  140. 278

    Excellent post and very well written!

    I take my hat of to you.

    0
  141. 279

    Nice article! What does anyone think about a concept like Sitegrinder 3?

    0
  142. 280

    Come on, people –Photoshop was never meant to be a design tool – that’s what Adobe Illustrator is for. Do you guys now that pixel preview has been around in Illustrator for, like, 10 years? And with Illustrator CS5, working with artboards is a charm.

    0
  143. 281

    A bunch of Photoshop haters and application zealots. Wow. Unbelievable.

    If you’re arguing that one tool is better than another for creating something, well then you are missing the point.

    If you are evangelical about using one single tool for designing a website from start to finish, I would think twice about hiring you. In fact, this is a trait I’ve passed on in many job candidates. It’s a sign of narrow mindedness.

    You plan out user experience, UI, navigation, work flow, etc, in one application, you design AESTHETICS in another, and you actually build the application using yet another tool, if applicable.

    I don’t care what you like to create the aesthetic elements of your application in. As long as you know what you’re doing, and the difference between all the disciplines involved. I’ve been doing this for well over a decade now – and I can tell you – tools of the trade change. And if you move around in the industry, you better be prepared to jump in and work in whatever tools the establishment is using. Because you won’t always get the luxury of choosing.

    0
  144. 282

    There are people who seriously think coding mark-up as opposed to using Photoshop is a good idea? I would like to personally punch them in the face for being so stupid to suggest such a thing.

    I am an interface developer. I don’t do the design, I do the coding. Having said that, I do admit that Photoshop is a pain in the butt and that I will hear “the fonts are a different size”, “the colours are different” and that would be because Photoshop isn’t a web design application. But I code the design up as best as I can, and tell them that is the best it can be.

    If more designers actually used Fireworks instead of Photoshop, then designs would be much easier to code up and still have them look like the design. Photoshop is not for web design, it is for editing and touching up images. Just because you can design in it, doesn’t mean you should.

    That’s like someone using Illustrator to design a website (trust me, I’ve seen it) and once again, just because you can doesn’t mean that you should. Fireworks was made for the web and more designers should use it. Until then, the Photoshop design will never ever ever look like the final product.

    Photoshop gives you a false sense of perfection with it’s fancy anti-aliasing. Newsflash designers, no modern web browser or operating system can render your website text like the design.

    Dwayne.

    0
  145. 283

    I have used Photoshop in the past but have stopped now for several reasons.

    After much investigation and trying, I discovered that it was indeed not a shop and did not contain any photos.

    I now just use the local shop. They have some great photos and at a great price too.

    1
  146. 287

    Come on guys…. why not just use what you feel most comfortable with??? Why should we say PhotoShop is just for photo editing and HTML is just for build, and Fireworks is just for IA… let each individual decide as best suits their own work practice!

    0
  147. 288

    I think that photoshop is the key element for all future website designs with Illustrator just beside it, especially for young and upcoming web designers. The developments and updates of the software have vastly improved. So probably we will soon be able to build a whole website on photoshop soon who knows. Then we would only need to buy one set of software instead of about five others.
    Remember very good designers break the rules.

    0
  148. 289

    Interesting discussion – but here’s another viewpoint to throw in the mix – as a developer, all the stuff our designers work with is based on HTML. You can’t develop an application in photoshop, can you?

    First, the application is designed on paper with it’s database schemas and it’s core methods, then it’s built with very basic HTML and CSS interfaces. From there, the designers create the layout BASED ON those pages. Seems like the smartest way to go in my opinion. Make the content/functionality work, make it flow right, then move to making it pretty.

    1
  149. 290

    Interesting discussion- have to agree wholeheartedly with Patrick D.

    If a site is going to be more than a digital ad-brochure, you need to know what it’s gong to display and what it’s going to do, before you show it to a web-graphic designer.THEN, they can send you mockups you can look at, in a format you don’t have to pay to look at (like .psd), annotations in plain text for things like RBG colors and fonts, and web-ready files of their graphical bling-y bits.

    0
  150. 291

    Necro this thread to say that, as a devoted Fireworks user in the early Windows XP days : I just use inkscape.

    To be honest, I think most people who think they need photoshop don’t even know what “RIP printer” and CMYK separation mean.

    0
  151. 292

    Uhm… wasn’t THIS site build from scratch in HTML?

    I’m a designer for many years, but I’d use Macaw or any other editing tool instead of Photoshop anyday.

    Of course I’d use PS to design icons & such… but for layout, man Photoshop is a pain in the deriere. I’m also contemplating on using Pixelmator because it runs better than PS on my mac.

    The text editing tools in PS are a joke. Making columns, tables & such is a pain in the deriere also.

    0
  152. 293

    I would really like to see this topic revisited. This article is from 2 0 1 0 ! Fully 3 years later I can’t imagine that the premise of this article is still true.

    I also think this entire idea of using a photo-editing program to do web design, just because you can easily move objects and fluently design with color, patterns, etc., is actually a failure at the hands of Adobe. They purchased a company that made web design tools, some very good ones like Fireworks mentioned above (Dreamweaver), and did absolutely nothing with them, and in fact as of this writing, will cease the development of them. The one they decided to put all of their dev efforts into for almost a decade: Flash… is dying… and/or for all intents and purposes… already dead (mobile has been discontinued officially).

    I’m looking forward to the day that a number of the young geniuses out there get tired of doing their work 2 or 3 times before deployment, and decide it’s time for a better way and a better program i.e. software.

    An idea and implementation like Macaw is needed ASAP!

    Oh… and let’s not forget that at the time of this article, Adobe hadn’t yet moved to the Cloud. I believe a number of web designers would love to have a better way to do the image manipulation with a cheaper and properly owned alternative like Pixelmator, and design layout with a true, HTML5 WYSIWYG design tool built on standards. Just my 2 cents.

    0
  153. 294

    I would agree with Doc Pixel – would love a revisit of this article. The industry has changed quite a lot since I started almost 10 years ago.

    MACAW looks promising – looking forward to see how that will take off and what are some of it’s initial hurdles. Adobe Muse really seems quite far from perfect but at least they’re giving it a try after all this time…. gone are the days of Firework, yes sadly.

    Still prefer coding from scratch but recently I did come upon a Photoshop plugin that helps with quick mockups – which is good for when I need to send a web mock-up to a client for first impressions and just to show some general functionality… Webbsy.com – it’s a little simpler than SiteGrinder but very comparable.

    Let’s be honest though, Adobe is still the go to for software at this time. Perhaps a good next revisit of this article would be to feature some different work flows of web designers :) Cheers!

    0

↑ Back to top