I was going through some blogs and sites and noticed a few people talking about how it's no longer practical to design in photoshop. They suggest things like designing in the browser.

To me, designing in the browser doesn't seem very efficient. Like, instead of focusing on your design, you have to fiddle with code to get it to work right. Eventually you might lose that creative thought.

Am I wrong to think so?

  • 3
    Photoshop? Browser? What happened to paper?! – Jonathan Sep 9 '14 at 17:44
  • And if you're designing a desktop app, you'll be designing it in C++? :) – Vitaly Mijiritsky Sep 9 '14 at 18:32
  • @VitalyMijiritsky Don't encourage people to continue doing that! :-) – Danny Varod Sep 9 '14 at 18:36
  • 1
    @DA01 Well, that's partially what I meant. People who claim that designing in photoshop is a thing of the past (and they're usually the same who claim that UX professionals must know code) tend to forget that not all of UX takes place in the browser. Outside of the browser both claims are pretty absurd. – Vitaly Mijiritsky Sep 10 '14 at 16:40
  • 1
    @VitalyMijiritsky yes, definitely good point. And even when designing in the browser, Photoshop is still heavily used. Just in a different way. – DA01 Sep 10 '14 at 16:47

I think it depends on the person. I am very familiar with HTML and CSS so I design in what feels right at the moment. Pencil and Paper, Visio, Photoshop, HTML/CSS (and sometimes Illustrator or Axure).

I always start with paper and pencil but after that, for instance, I might make a table in excel and copy and paste it directly into Photoshop. I just, moments ago, finished making a few detailed graphs in Excel/HTML/CSS for a dashboard.

It depends on what you're comfortable with. It's just as easy for me to create a form w HTML as it is for some to do so in Photoshop.

| improve this answer | |

We all do stuff differently, but whatever workflow gets you good results.

For me, once IA and UX research is undertaken, I sketch on paper to find solutions before taking ideas into Balsamiq/Axure for lo-fidelity fast iterations on structure, navigation & interaction producing prototypes if complex. Enables you to sound out and test ideas quickly, without spending 4 days editing a hi-fidelity design. There are some very awesome mobile UX apps out there that can help with responsive wireframing.

I would then always use Photoshop for hi-fidelity designs - to create, develop and finally get agreement on 'look & feel'. I can't see Photoshop ever not being a part of any designers toolbox because it's so quick and facilitates creativity.

Once signed off, development can start to take place, but keep those wireframes handy! We all know what developers are like, hehe

| improve this answer | |

What do you mean by "designing"? - UX, Themes, Graphics?

In my opinion UX is the easiest to do in wireframe tools, e.q. Balsamiq which is embedded is this site (or paper).

For visual elements such as logos and icons are best done in vector graphic tools e.g. Adobe Fireworks.

For large raster images, image editing tools like Adobe Photoshop are more suitable.

| improve this answer | |

First of all: you can not really design in a browser –– except you use some web based service or a sophisticated add-on or the like. A browser is basically made for displaying layouts / designs / webpages – and not for designing them.

  • During a design process you can however (and should) check your design from time to time in a browser. This can be very useful since you can quickly get an impression of how your design would look and feel in its natural surrounding.
  • For rapid prototyping, wireframes and mockups you can choose from a wide range of different tools like Axure, Balsamiq, InDesign, Illustrator, Photoshop, HTML+CSS – or pen and and paper. You 'just' need to find out what tool works best for you.
  • For more complex layouts and in-depth designs you can again choose from a wide range of tools – photoshop probably still is a very popular tool for that stage of designing a website. Others use InDesign or Illustrator – and I heard the powerful gimp is catching up too. Again: you 'just' need to find out what tool works best for you.

To sum it up: yes, designing in photoshop is a thing of the past, the present and the future. For collaborative work / in teams and agencies it can be considered a standard. But that doesn't mean that it has to be your favourite choice.

| improve this answer | |
  • Of course you can design in a browser. If you're writing the HTML, CSS and JS to create a web site, that's designing. – DA01 Sep 10 '14 at 2:36
  • 1
    Well - sorry for nitpicking, but then you're actually designing in a text (or code) editor and checking the rsults in a browser. I also like that approach myself – but instead of calling it "designing in a browser" – I would prefer "drawing by numbers". – tillinberlin Sep 10 '14 at 6:46
  • 1
    Ha! Well, maybe. But I design in the browser all the time. Tools like Firebug or Chrome console means you actually can design directly in the browser if we want to pick nits. :) That said, the term 'designing in the browser' while perhaps technically debatable is the common term used to refer to 'designing with actual code/markup rather than photoshop' – DA01 Sep 10 '14 at 6:49
  • I sure know what you mean – and I use firebug just the same way – a lot – and I love it. And in my original answer I tried to mention that since I pointed out that you can actually use web based services or plug ins to actually design in a browser –– but I would consider this an exception and in my optinion this also does not make photoshop obsolete. Maybe you and I (and many others) don't need to use photoshop – but I would still consider it industry standard. If the question would have been "can I use firebug" then the correct answer probably would have been "yes you can". – tillinberlin Sep 10 '14 at 6:59

If you mean designing websites - kinda yes. You can achieve same result (now very quickly) using CSS and HTML 'directly'. Furthermore you won't waste your time for rewriting photoshop project into a code.

If you mean other things, I guess you need to design eg. JAVA projects somewhere...

| improve this answer | |
  • i have to admit reading your 'answer' I was close to hitting the down arrow… – tillinberlin Sep 9 '14 at 22:34
  • The answer is short and points what is the most important in designing websites - time consumption. Actually, I do not agree with yours: "you can not really design in a browser". It is definitely not true. – knapcio Sep 10 '14 at 17:14

Designing in Photoshop is easy for me. However, updating Photoshop is not. Updating multiple areas for responsive design is a pain. Photoshop is usually the first and last step for me. In between I'm using Balsamiq.

It's also good to design somewhat in the browser because there are variables that you don't think about often without testing inside of the various browsers. Not to mention management can touch-and-feel your work which usually elicits a more positive response than a static image.

| improve this answer | |

Designers should design using what makes sense for their product, their team, their skills set... and various other factors. So no particular method is universally right or wrong.

As time goes on, we see new and often better ways of designing. When I was first starting out, many said not to use use FreeHand, Illustrator, Photoshop... to design with. Their reasoning was that you would spend your time trying to fiddle with the software rather than being creative. It appears some look at writing code with the same distaste designers in the past looked down on computer software.

Although I've used Photoshop for over 15 years, more and more I find myself designing directly in HTML & CSS because, in many ways, it's easier. Once you learn how to do it, there's a lot of time savings. Plus, if you're designing something where the end result will be built in HTML & CSS, it more accurately reflects what the final output will look like.

Again, depending on what you're designing and the team you're working with, the tools vary. Having used Balsamiq & Axure, I've run into more problems by incorporating those tools into a workflow than they solve. For example, we built out a new product in Balsamiq & Axure, and we ran into all sorts of issues properly setting expectations. Axure is especially bad. We also built out a prototype using a JS framework. It took less time, more accurately reflected the UX we wanted to create, and could be leveraged into the final product. Of course, it takes having a JS rockstar on the team to be able to do it.

Currently I am building a design team at a company and I am looking for designers with at least HTML & CSS skills. Many companies are requiring companies to have at least these basic coding skills. Build an experience language and design with it.

| improve this answer | |
  • I'm still really struggling with the idea that designers can 'design' directly using HTML and CSS. I can understand the use of say Twitter Bootstrap for fast prototyping (probably better than Axure imo), but the actual look and feel is something that needs to be considered a bit more, surely? Or is this a pure reflection of the continuing trend in producing 'Flat' UI - i.e, because everything is straight, flat and has all it's gloss removed, it's pretty simple to get something that looks 'on trend'? – TheSaint Sep 11 '14 at 8:38
  • I think it's actually easier to design full detailed buttons in CSS than in Photoshop. Photoshop doesn't even have an editable border radius. After the box is drawn, you have to redraw it to change its size and border radius. In CSS, it's a matter of just changing the attributes of the box. And it's easier to make global changes. Plus there's a good chance that detailed design will have to be converted to CSS anyway. And as I mentioned, years ago people said it took people too much effort to design in Photoshop - that it inhibited the design process. – user1337 Sep 11 '14 at 16:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.