6 ms·

Life Without Photoshop

111 points by rpsubhub 16y ago

gjenkin 16y ago
Context is important. A no-Photoshop approach makes sense for Quora since their product is text-heavy. For a product that requires, say, rich data visualizations like Google Analytics, some design ideas need to be mocked in a graphics package (Googlers often use Fireworks instead of Photoshop) first, then prototyped in code. Context is also important in terms of what stage of the development process the designer is at. If a product design is already well defined (e.g. "top nav is global, 2 columns in the core content space, right column is contextual nav, left column is the content stream, here's the style guide ..."), then going directly to code makes sense. As Joel suggests, going directly to code is great for day to day new feature iterations. But if your product is completely undefined, Photoshop or Fireworks can be excellent tools for mocking up design variations and sets of use cases or states within those variations. Hats-off to Quora for going straight to code when it comes to design. It works for them but it's not going to work for everyone in every case.
- vog 16y ago
  I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. First of all, vector graphics tools like Inkscape are a lot better suited for that task. Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support.
  - uptown 16y ago
    I tend to think that whatever allows the designer to create and communicate their vision the fastest is what's best suited for the task. For many designers, its the tool they've been using for over a decade. It imports and exports a wide range of formats, so even the case against proprietary is a non-issue. And when the project moves from the mock-ups stage to the creation of the graphical assets for the launch, Photoshop is still good for that too! Without question, Photoshop is the most versatile tool I've used in my professional career as a web developer.
  - karterk 16y ago
    >I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. People have been using Photoshop for years (like myself), and personally these people feel that open source equivalents like GIMP are still way off in terms of competing with Photoshop. >First of all, vector graphics tools like Inkscape are a lot better suited for that task. I have used both Inkscape and Photoshop for quite a few years. It's unfair to even compare them. And, frankly Photoshop _is_ far more powerful if you want to go for high fidelity mockups.
    - xyzzyb 16y ago
      Why not fireworks over photoshop? Its hybrid vector/imaging toolset make for a good web design experience.
      - tiddchristopher 16y ago
        In my experience, Fireworks is far less useful when it comes to the creation of graphics after the initial wireframing. On the other hand, Photoshop [and GIMP] is completely usable throughout the entire design process. For this reason, many designers would rather learn, and pay for, only one product, and that product is Photoshop. As a side note, although GIMP lags in a few areas, notably on the typography side of things, it's the best product for my needs when I weigh cost and features, and only rarely do I find myself wishing I had tossed several hundred dollars for Photoshop.
  - threepointone 16y ago
    +1 for inkscape. I love it. -1 for the horrid experience inkscape is on the mac. Great on windows though.
    - shaggyfrog 16y ago
      Somedays I think Inkscape on the Mac is only slightly better than having to hand-code my data with a hex editor.
      - vog 16y ago
        Although your statement is apparently a joke, there's some unexpected truth in it: You don't even need a hex editor – SVG is an XML format, so a simple text editor will do perfectly fine! This means that in case of some Inkscape issues, you can always fine-tune the vector graphics "by hand". This also means that generating vector graphics is as easy as generating HTML code in a web application. You don't need any imaging library for that. (For the old-school hackers: yes, this is also possible with Postscript, i.e. EPS) Then, you can use Inkscape to preview the picture and to make some final changes by hand, if desired. (Here, things get tricky if you use EPS instead) Also, any modern browser understands SVG, so you don't have to do any image conversion. Heck, you don't even need an <img> tag! Just put the SVG code directly into your (X)HTML document. tl;dr: SVG is really cool, and Inkscape uses it natively.
  - moxiemk1 16y ago
    >> Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support. I'm not sure that I follow here. Why do they deserve our support? (Not to say that they don't deserve support, but thats a rather imposing claim without support)
  - Silhouette 16y ago
    > I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. When I was younger, I couldn't imagine why people would spend hundreds on Creative Suite, MS Office, etc. I could just use GIMP, Inkscape, OpenOffice, etc. for free, and stick it to the man. Now, I run a business, and I think anyone who uses substandard tools to save a few hundred bucks is crazy. I also think anyone who really believes that the freebie tools I mentioned are even close to the standard of the professional tools I mentioned is crazy. The cost of these professional tools is relatively small compared to the money they save through increased efficiency alone, but in many cases they get much better results that would justify the cost anyway. (I could list a numerous objective, widely applicable reasons in each case, and I have done so in other forums on several occasions, but this probably isn't the place. I'm just trying to explain why people do the things you asked about.)
deleted 16y ago
[deleted]
lwhi 16y ago
To be fair, Quora isn't a very graphically rich site. I'm not totally sure whether an absence of Photoshop (and other Creative Suite products) is particularly worthy of explanation.
- flyosity 16y ago
  It seems like every "I didn't use Photoshop" article is always showing off a site that... looks like the designer didn't use Photoshop. As a designer who's in Photoshop all day long, knowing when a layout necessitates using Photoshop or not is second-nature to me now. I'll just stop using it and hop over to my text editor and start writing HTML & CSS. And for sufficiently sparse layouts, I'll just not use Photoshop at all. I assumed everyone knew and did this, but perhaps I was mistaken.
  - gambler 16y ago
    Problem is, Photoshop is the default for many designers. They start with image-rich websites and scale them down if necessary. I think good design should be scaled up from simple to more complex - with each instance of complexity being justified. Do I really need to watch that video when I go to gm.com? Do I really need to figure out custom Flash-based navigation scheme when I go to a movie or game website?
  - lwhi 16y ago
    I think there is an alternative to using Photoshop - especially if you use a Linux based OS. I've often heard of people stating that GIMP is a valid alternative - I'd argue it isn't. GIMP is fine for performing a lot of everyday editing functions - but it's lacking in quite a few key areas (most notably CMYK support). I think as an alternative, rather than having Photoshop - which could be conceptually viewed as an 'image IDE' - it's possible to choose to use a number of different command line utilities, plugins, scripts and applications to achieve the feature-set that Photoshop traditionally provides. Creating and modifying imagery in this way, is arguably less intuitive, as workflows aren't so clearly defined - but there's the chance of matching (or possibly exceeding) what Photoshop makes possible.
dot 16y ago
I love starting in photoshop because I can play with an idea visually without taking my eyes off of what I'm working on. For me photoshop is a really fast way to develop ideas and sell people on my dreams. I can mock something up that looks real and get feedback very, very quickly. Then once I know what I want to build I move to the text editor. Photoshop is pen and pencil for me.
- srgseg 16y ago
  Exactly. Within 60 seconds I can have screenshotted another site whose template might be vaguely close in structure to that I'm thinking of, delete their text and write in my own. No way you can get anywhere close to that kind of speed with code.
  - sudont 16y ago
    Well, technically you can, but you’re right about the speed: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
    - nswanberg 16y ago
      Very cool. I figured there must be some Chrome extensions that make use of this, and it looks like there are. One adds some WYSIWYG-type tools to the current page: http://chrome.google.com/extensions/detail/claldafnnhbflndjbjlmlefpcifojcag http://chrome.google.com/extensions/detail/claldafnnhbflndjb...
mgrouchy 16y ago
Oddly enough, we don't use photoshop either. We use Keynote! http://blog.swixhq.com/designing-swix-with-keynote/ http://blog.swixhq.com/designing-swix-with-keynote/
- jdp23 16y ago
  Very interesting! I've worked with people who did their design in PowerPoint for many of the same reasons.
iuguy 16y ago
I'm not a designer by any stretch of the imagination, but I do like fiddling around with pictures and occasionally make posters and design T-Shirts. I haven't used photoshop in about 5 years or so, I haven't needed to. The Gimp is one of those tools that covers 80% of your design requirements. Having said that it's not particularly friendly for Photoshop users. An easier version for the transition is GimpShop (http://www.gimpshop.com/ http://www.gimpshop.com/), although this hasn't been updated for a while. For designers I can understand why living without Photoshop is strange, especially if it's the tool you're used to. For most people Gimpshop and The Gimp are more than capable enough, Free software and free to use.
- nswanberg 16y ago
  I think the article was more about using code to do the design rather than any image tools. You could replace Photoshop with Gimp in the article and the original arguments would hold.
matt1 16y ago
Plug: I'm building a web-based mockup tool called jMockups [1], which my long term goal is to supplant Photoshop as the high fidelity mockup tool of choice. If you have qualms with Photoshop and can entertain the possibility of a better tool coming along, I'd really, really, really love to hear your thoughts on jMockups, what I can do to improve it, and how it can become a tool so phenomenal that it wouldn't make sense for you not to switch from Photoshop. Email me at matt@jmockups.com. [1] http://www.jmockups.com http://www.jmockups.com PS: New feature you might like: Instantly convert almost any website to a mockup so you can redesign it in minutes: http://www.jmockups.com/websiteconverter http://www.jmockups.com/websiteconverter
- jdp23 16y ago
  Seems intriguing. How would you compare/contrast with Balsamiq?
  - matt1 16y ago
    Balsamiq is for designing low fidelity mockups (wireframes) whereas jMockups is for designing high fidelity (pixel perfect) mockups. It makes more sense to compare jMockups to Photoshop than Balsamiq. That being said, I can pretty effortlessly pivot from focusing on high fidelity to low fidelity. Right now I'm considering adding a toggle button that lets you switch back and forth, but am not sure if I want to go down that path yet. Do one thing well, right?
    - jdp23 16y ago
      Very clear explanation, and agreed on doing one thing well. It'll be a lot easier to to leadership in the high-fidelity mockup segment, and then use that as a base to expand if it makes business sense.
    - selectnull 16y ago
      I've played with jMockups demo and as a Balsamiq user I can say that one of its best features is "low fidelity", specifically lines that look hand drawn and comic sans font. That combo is what I consider most important in mockups: when you give that to a client, it's very clear that it's not a product, it's a mockup. If you can make that kind of low fidelity, I think you would have very good mockup tool. Of course, seeing what you have right now, I can understand your thinking in pursuing high fidelity route.
jasonfried 16y ago
Along the same lines, here's why I skip Photoshop when working on designs at 37signals: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop
- jdp23 16y ago
  Jason, I wonder if a "direct to code" approach tends to correlate with design styles like 37signals and Quora's that favor clean sparse text-oriented designs. Conversely a Photoshop-oriented approach is likely to lead to image-oriented designs, with a lot more visual richness, appealing more to the emotions.
- lwhi 16y ago
  I don't think Photoshop has ever been a good application for creating website mock-ups. There are a lot of custom applications that have been created specifically for the job - from simple apps like Mockingbird, and Balsamiq; to more advanced applications like Visio and OmniGraffle. I think these applications are best for carrying out the grunt-work involved in UI design. I think the process of creating HTML mockups adds a layer of complexity that isn't necessary in the initial stages. Being able to concentrate on the purpose of design (rather than implementation) is liberating. However, I think there are times when a client needs to be able to visualise a potential aethetic near the beginning of a project. Perhaps Photoshop has a place here - because a basic wireframe produced in one of the former apps often requires too great a leap of imagination to effectively communicate the intended result. However - I think, a lot of the time, a vector package like Illustrator (or Xara or Inkscape) allows greater freedom (on the part of the designer) and makes the process of modifying a design less cumbersome.
- bane 16y ago
  Laugh if you will, but I've found sketching out mockups in PowerPoint to work surprisingly well and about as fast (or faster) than paper since I don't have to redraw the whole thing after too many changes are made. And to your point: You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience. You can hyperlink in PowerPoint to other slides, so you can mockup the workflow a bit too. I agree that being able to click and move around a mockup is incredibly important.
yaix 16y ago
And you see it in the Quora design. It is centered on the content, and not on fancy graphics that distract from what the user came to find on the site.
chaz 16y ago
I've stopped designing with code for all but the most trivial elements because I realized it's too easy to get sucked into the details too early on in the process. Designing via coded prototype means that mockups are high fidelity, and there were a lot of things going on at the same time: trying to write good copy, getting each element to align correctly, finding the perfect icon, and coding good HTML/CSS/JS. Iterations then starting feeling pretty expensive. For the same reason people use lorem ipsum, I would recommend lower resolution tools (paper, whiteboard, wireframes, etc.) to keep details out of focus until it's time. I try to avoid Photoshop when doing early design work, but it's valuable for creating proofs for clients or as a spec for engineers.
talbina 16y ago
I'm definitely going to be in the minority here, but I start with Excel. Here's why: - It's free - I have a perfect grid system - I can color in anything with borders and gradients also - I can format the text with spacing - Margin and padding properties are done using cell spacing properties - You can add pictures anywhere - I can easily copy the entire worksheet and paste it into Paint
- lwhi 16y ago
  .. and it translates perfectly into a <table> :P
- sbarre 16y ago
  Excel is free?
  - talbina 16y ago
    I already have it for other purposes. It is free compared to the mockup tools that I would have to pay for, I don't have to pay extra to use Excel.
- namityadav 16y ago
  I've also used Excel for some mockups. This forces you to keep things in grids and focus on simplicity, functionality and usability rather than the fluff that Photoshop filters bring.
- jdp23 16y ago
  In parallel with this discussion, I'm doing some design work in a Word table. It's funny, I didn't even think of using Excel. Excel's grid-oriented focus gets me out of creative space and into analytical space. Also I used to do a lot of spreadsheeting and would have dreams about being in the grid of the spreadsheet and having to maneuver around, so it doesn't have particularly pleasant associations to me.
- zaidf 16y ago
  Paint?
mwsherman 16y ago
This is exactly backwards. One needs to start with the needs of the user, which means mocking up the user experience without regard for implementation. The tool might vary, but the concept of starting with the user is essential. Starting in code makes it about the coder, not the user. It conflates implementation with design. I am a coder, and will do mockups in code -- only when I know a real design won't be available. I would much rather be directed by a good UX person. Better for the user, and faster for me as an implementor.
antidaily 16y ago
Everyone should convert - Photoshop is still a necessary evil for image editing and sprites - but with grid layout frameworks, it's really never been easier to mockup a layout or three in pure HTML greatness. Add the flair after.
juddlyon 16y ago
Fireworks still suits me best for prototyping and slicing. I'd rather give my money to Pixelmator or an indie though. Somebody could make a fortune building an OS X app that supports legacy layered PSDs and PNGs.
- ThomPete 16y ago
  The irony though would be that they would probably use either Photoshop or Fireworks to do the app.

111 points by rpsubhub 16y ago

Context is important. A no-Photoshop approach makes sense for Quora since their product is text-heavy. For a product that requires, say, rich data visualizations like Google Analytics, some design ideas need to be mocked in a graphics package (Googlers often use Fireworks instead of Photoshop) first, then prototyped in code. Context is also important in terms of what stage of the development process the designer is at. If a product design is already well defined (e.g. "top nav is global, 2 columns in the core content space, right column is contextual nav, left column is the content stream, here's the style guide ..."), then going directly to code makes sense. As Joel suggests, going directly to code is great for day to day new feature iterations. But if your product is completely undefined, Photoshop or Fireworks can be excellent tools for mocking up design variations and sets of use cases or states within those variations. Hats-off to Quora for going straight to code when it comes to design. It works for them but it's not going to work for everyone in every case.

vog 16y ago
I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. First of all, vector graphics tools like Inkscape are a lot better suited for that task. Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support.
- uptown 16y ago
  I tend to think that whatever allows the designer to create and communicate their vision the fastest is what's best suited for the task. For many designers, its the tool they've been using for over a decade. It imports and exports a wide range of formats, so even the case against proprietary is a non-issue. And when the project moves from the mock-ups stage to the creation of the graphical assets for the launch, Photoshop is still good for that too! Without question, Photoshop is the most versatile tool I've used in my professional career as a web developer.
- karterk 16y ago
  >I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. People have been using Photoshop for years (like myself), and personally these people feel that open source equivalents like GIMP are still way off in terms of competing with Photoshop. >First of all, vector graphics tools like Inkscape are a lot better suited for that task. I have used both Inkscape and Photoshop for quite a few years. It's unfair to even compare them. And, frankly Photoshop _is_ far more powerful if you want to go for high fidelity mockups.
  - xyzzyb 16y ago
    Why not fireworks over photoshop? Its hybrid vector/imaging toolset make for a good web design experience.
    - tiddchristopher 16y ago
      In my experience, Fireworks is far less useful when it comes to the creation of graphics after the initial wireframing. On the other hand, Photoshop [and GIMP] is completely usable throughout the entire design process. For this reason, many designers would rather learn, and pay for, only one product, and that product is Photoshop. As a side note, although GIMP lags in a few areas, notably on the typography side of things, it's the best product for my needs when I weigh cost and features, and only rarely do I find myself wishing I had tossed several hundred dollars for Photoshop.
- threepointone 16y ago
  +1 for inkscape. I love it. -1 for the horrid experience inkscape is on the mac. Great on windows though.
  - shaggyfrog 16y ago
    Somedays I think Inkscape on the Mac is only slightly better than having to hand-code my data with a hex editor.
    - vog 16y ago
      Although your statement is apparently a joke, there's some unexpected truth in it: You don't even need a hex editor – SVG is an XML format, so a simple text editor will do perfectly fine! This means that in case of some Inkscape issues, you can always fine-tune the vector graphics "by hand". This also means that generating vector graphics is as easy as generating HTML code in a web application. You don't need any imaging library for that. (For the old-school hackers: yes, this is also possible with Postscript, i.e. EPS) Then, you can use Inkscape to preview the picture and to make some final changes by hand, if desired. (Here, things get tricky if you use EPS instead) Also, any modern browser understands SVG, so you don't have to do any image conversion. Heck, you don't even need an <img> tag! Just put the SVG code directly into your (X)HTML document. tl;dr: SVG is really cool, and Inkscape uses it natively.
- moxiemk1 16y ago
  >> Second, even if you don't like vector graphics, there are great Free Software projects like Gimp and Krita that deserve our attention and our support. I'm not sure that I follow here. Why do they deserve our support? (Not to say that they don't deserve support, but thats a rather imposing claim without support)
- Silhouette 16y ago
  > I never understood why people are buying proprietary, expensive stuff like Photoshop just for mock-ups. When I was younger, I couldn't imagine why people would spend hundreds on Creative Suite, MS Office, etc. I could just use GIMP, Inkscape, OpenOffice, etc. for free, and stick it to the man. Now, I run a business, and I think anyone who uses substandard tools to save a few hundred bucks is crazy. I also think anyone who really believes that the freebie tools I mentioned are even close to the standard of the professional tools I mentioned is crazy. The cost of these professional tools is relatively small compared to the money they save through increased efficiency alone, but in many cases they get much better results that would justify the cost anyway. (I could list a numerous objective, widely applicable reasons in each case, and I have done so in other forums on several occasions, but this probably isn't the place. I'm just trying to explain why people do the things you asked about.)

deleted 16y ago

[deleted]

lwhi 16y ago

To be fair, Quora isn't a very graphically rich site. I'm not totally sure whether an absence of Photoshop (and other Creative Suite products) is particularly worthy of explanation.

flyosity 16y ago
It seems like every "I didn't use Photoshop" article is always showing off a site that... looks like the designer didn't use Photoshop. As a designer who's in Photoshop all day long, knowing when a layout necessitates using Photoshop or not is second-nature to me now. I'll just stop using it and hop over to my text editor and start writing HTML & CSS. And for sufficiently sparse layouts, I'll just not use Photoshop at all. I assumed everyone knew and did this, but perhaps I was mistaken.
- gambler 16y ago
  Problem is, Photoshop is the default for many designers. They start with image-rich websites and scale them down if necessary. I think good design should be scaled up from simple to more complex - with each instance of complexity being justified. Do I really need to watch that video when I go to gm.com? Do I really need to figure out custom Flash-based navigation scheme when I go to a movie or game website?
- lwhi 16y ago
  I think there is an alternative to using Photoshop - especially if you use a Linux based OS. I've often heard of people stating that GIMP is a valid alternative - I'd argue it isn't. GIMP is fine for performing a lot of everyday editing functions - but it's lacking in quite a few key areas (most notably CMYK support). I think as an alternative, rather than having Photoshop - which could be conceptually viewed as an 'image IDE' - it's possible to choose to use a number of different command line utilities, plugins, scripts and applications to achieve the feature-set that Photoshop traditionally provides. Creating and modifying imagery in this way, is arguably less intuitive, as workflows aren't so clearly defined - but there's the chance of matching (or possibly exceeding) what Photoshop makes possible.

dot 16y ago

I love starting in photoshop because I can play with an idea visually without taking my eyes off of what I'm working on. For me photoshop is a really fast way to develop ideas and sell people on my dreams. I can mock something up that looks real and get feedback very, very quickly. Then once I know what I want to build I move to the text editor. Photoshop is pen and pencil for me.

srgseg 16y ago
Exactly. Within 60 seconds I can have screenshotted another site whose template might be vaguely close in structure to that I'm thinking of, delete their text and write in my own. No way you can get anywhere close to that kind of speed with code.
- sudont 16y ago
  Well, technically you can, but you’re right about the speed: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
  - nswanberg 16y ago
    Very cool. I figured there must be some Chrome extensions that make use of this, and it looks like there are. One adds some WYSIWYG-type tools to the current page: http://chrome.google.com/extensions/detail/claldafnnhbflndjbjlmlefpcifojcag http://chrome.google.com/extensions/detail/claldafnnhbflndjb...

mgrouchy 16y ago

Oddly enough, we don't use photoshop either. We use Keynote! http://blog.swixhq.com/designing-swix-with-keynote/ http://blog.swixhq.com/designing-swix-with-keynote/

jdp23 16y ago
Very interesting! I've worked with people who did their design in PowerPoint for many of the same reasons.

iuguy 16y ago

I'm not a designer by any stretch of the imagination, but I do like fiddling around with pictures and occasionally make posters and design T-Shirts. I haven't used photoshop in about 5 years or so, I haven't needed to. The Gimp is one of those tools that covers 80% of your design requirements. Having said that it's not particularly friendly for Photoshop users. An easier version for the transition is GimpShop (http://www.gimpshop.com/ http://www.gimpshop.com/), although this hasn't been updated for a while. For designers I can understand why living without Photoshop is strange, especially if it's the tool you're used to. For most people Gimpshop and The Gimp are more than capable enough, Free software and free to use.

nswanberg 16y ago
I think the article was more about using code to do the design rather than any image tools. You could replace Photoshop with Gimp in the article and the original arguments would hold.

matt1 16y ago

Plug: I'm building a web-based mockup tool called jMockups [1], which my long term goal is to supplant Photoshop as the high fidelity mockup tool of choice. If you have qualms with Photoshop and can entertain the possibility of a better tool coming along, I'd really, really, really love to hear your thoughts on jMockups, what I can do to improve it, and how it can become a tool so phenomenal that it wouldn't make sense for you not to switch from Photoshop. Email me at matt@jmockups.com. [1] http://www.jmockups.com http://www.jmockups.com PS: New feature you might like: Instantly convert almost any website to a mockup so you can redesign it in minutes: http://www.jmockups.com/websiteconverter http://www.jmockups.com/websiteconverter

jdp23 16y ago
Seems intriguing. How would you compare/contrast with Balsamiq?
- matt1 16y ago
  Balsamiq is for designing low fidelity mockups (wireframes) whereas jMockups is for designing high fidelity (pixel perfect) mockups. It makes more sense to compare jMockups to Photoshop than Balsamiq. That being said, I can pretty effortlessly pivot from focusing on high fidelity to low fidelity. Right now I'm considering adding a toggle button that lets you switch back and forth, but am not sure if I want to go down that path yet. Do one thing well, right?
  - jdp23 16y ago
    Very clear explanation, and agreed on doing one thing well. It'll be a lot easier to to leadership in the high-fidelity mockup segment, and then use that as a base to expand if it makes business sense.
  - selectnull 16y ago
    I've played with jMockups demo and as a Balsamiq user I can say that one of its best features is "low fidelity", specifically lines that look hand drawn and comic sans font. That combo is what I consider most important in mockups: when you give that to a client, it's very clear that it's not a product, it's a mockup. If you can make that kind of low fidelity, I think you would have very good mockup tool. Of course, seeing what you have right now, I can understand your thinking in pursuing high fidelity route.

jasonfried 16y ago

Along the same lines, here's why I skip Photoshop when working on designs at 37signals: http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop

jdp23 16y ago
Jason, I wonder if a "direct to code" approach tends to correlate with design styles like 37signals and Quora's that favor clean sparse text-oriented designs. Conversely a Photoshop-oriented approach is likely to lead to image-oriented designs, with a lot more visual richness, appealing more to the emotions.
lwhi 16y ago
I don't think Photoshop has ever been a good application for creating website mock-ups. There are a lot of custom applications that have been created specifically for the job - from simple apps like Mockingbird, and Balsamiq; to more advanced applications like Visio and OmniGraffle. I think these applications are best for carrying out the grunt-work involved in UI design. I think the process of creating HTML mockups adds a layer of complexity that isn't necessary in the initial stages. Being able to concentrate on the purpose of design (rather than implementation) is liberating. However, I think there are times when a client needs to be able to visualise a potential aethetic near the beginning of a project. Perhaps Photoshop has a place here - because a basic wireframe produced in one of the former apps often requires too great a leap of imagination to effectively communicate the intended result. However - I think, a lot of the time, a vector package like Illustrator (or Xara or Inkscape) allows greater freedom (on the part of the designer) and makes the process of modifying a design less cumbersome.
bane 16y ago
Laugh if you will, but I've found sketching out mockups in PowerPoint to work surprisingly well and about as fast (or faster) than paper since I don't have to redraw the whole thing after too many changes are made. And to your point: You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience. You can hyperlink in PowerPoint to other slides, so you can mockup the workflow a bit too. I agree that being able to click and move around a mockup is incredibly important.

yaix 16y ago

And you see it in the Quora design. It is centered on the content, and not on fancy graphics that distract from what the user came to find on the site.

chaz 16y ago

I've stopped designing with code for all but the most trivial elements because I realized it's too easy to get sucked into the details too early on in the process. Designing via coded prototype means that mockups are high fidelity, and there were a lot of things going on at the same time: trying to write good copy, getting each element to align correctly, finding the perfect icon, and coding good HTML/CSS/JS. Iterations then starting feeling pretty expensive. For the same reason people use lorem ipsum, I would recommend lower resolution tools (paper, whiteboard, wireframes, etc.) to keep details out of focus until it's time. I try to avoid Photoshop when doing early design work, but it's valuable for creating proofs for clients or as a spec for engineers.

talbina 16y ago

I'm definitely going to be in the minority here, but I start with Excel. Here's why: - It's free - I have a perfect grid system - I can color in anything with borders and gradients also - I can format the text with spacing - Margin and padding properties are done using cell spacing properties - You can add pictures anywhere - I can easily copy the entire worksheet and paste it into Paint

lwhi 16y ago
.. and it translates perfectly into a <table> :P
sbarre 16y ago
Excel is free?
- talbina 16y ago
  I already have it for other purposes. It is free compared to the mockup tools that I would have to pay for, I don't have to pay extra to use Excel.
namityadav 16y ago
I've also used Excel for some mockups. This forces you to keep things in grids and focus on simplicity, functionality and usability rather than the fluff that Photoshop filters bring.
jdp23 16y ago
In parallel with this discussion, I'm doing some design work in a Word table. It's funny, I didn't even think of using Excel. Excel's grid-oriented focus gets me out of creative space and into analytical space. Also I used to do a lot of spreadsheeting and would have dreams about being in the grid of the spreadsheet and having to maneuver around, so it doesn't have particularly pleasant associations to me.
zaidf 16y ago
Paint?

mwsherman 16y ago

This is exactly backwards. One needs to start with the needs of the user, which means mocking up the user experience without regard for implementation. The tool might vary, but the concept of starting with the user is essential. Starting in code makes it about the coder, not the user. It conflates implementation with design. I am a coder, and will do mockups in code -- only when I know a real design won't be available. I would much rather be directed by a good UX person. Better for the user, and faster for me as an implementor.

antidaily 16y ago

Everyone should convert - Photoshop is still a necessary evil for image editing and sprites - but with grid layout frameworks, it's really never been easier to mockup a layout or three in pure HTML greatness. Add the flair after.

juddlyon 16y ago

Fireworks still suits me best for prototyping and slicing. I'd rather give my money to Pixelmator or an indie though. Somebody could make a fortune building an OS X app that supports legacy layered PSDs and PNGs.

ThomPete 16y ago
The irony though would be that they would probably use either Photoshop or Fireworks to do the app.