05/06/08
49Graphics Editor or Text Editor?
Over on 37 Signals, there’s an interesting post about why they don’t use Photoshop, and prefer to go straight to HTML and CSS to create a UI. I agree with a lot of what Jason says here, especially point number 3 – you can never get text in a static comp to look the way it does on the web. (This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!)
I would also add a couple more points in favour of going straight to HTML/CSS:
- You can’t demonstrate a fluid design with a static comp, and show how it reflows with window sizes. This is a biggie.
- Why spend time recreating form widgets in Photoshop, when you can have the real thing by just typing the html tag? Also whoever looks at the design, sees these widgets in the style of their OS, rather than one fixed style in a static comp.
This is the approach that I’ve been taking over the last year, and it felt right at the time. It felt like removing the middle man, and being more efficient.
The one drawback was the designs were often dull, dull, dull.
This is not an approach that encourages visual richness. That’s not to say you can’t create a good design this way, or that a design needs ‘superflous eye candy’, but my thought processes were definitely being constrained by the tool I was using. As Jeff Croft points out in the comments on , this is an approach that works well for a 37 Signals style application, but not necessarily for everything else.
I’ve been trying to think through why this is the case, and the only thing I can come up with, is that it’s easier and quicker to move stuff around in a graphics editor. Also, I find Photoshop the wrong tool for mockups. Fireworks, rules my roost, and here’s a few reasons why:
- I can keep all the page designs of a site in just one file – with shared layers for common elements like navigation. When it’s time to export, Fireworks can create an individual file from each page with one click.
- The ’9-slice tool’, in combination with it’s Symbols Library, means I can have a pre-made set of form widgets and other interface elements that I can drop in to the page, and resize without losing the integrity of the image. Mocking up is fast.
- The vector tools are superb. Create a pixel-constrained layout in Illustrator is a pain, and Photoshop was never meant to be a vector creator. Any Photo collage work is done in Photoshop though.
- The Fireworks colour picker can sample from anywhere on the screen, not just the open document. (Apparently Photoshop can now do this by clicking and holding!)
Yes I still have to create it in HTML and CSS at the end of it, but by that point I know exactly what I need to do.
Fireworks still isn’t the absolute ideal tool though. The ideal tool hasn’t been created yet, and would be a mixture of the two, but that’s for another post I think!
Tags: 
Previous
Download our vCard
Mark van Eijk said 127 days ago:
I couldn’t agree with you more. I experienced myself and urrently I create my designs with Fireworks and then translate it into HTML & CSS. Also I like to draw my designs at te very beginning on a piece of paper.
Time said 127 days ago:
You can colour pick from the entire screen in Photoshop…click/hold with the eyedropper and you can sample from anywhere on the screen.
Doug said 127 days ago:
Part of me wants to agree with the 37signal guys because I have been in a situation where visual designers spend a large portion of there time in photoshop designing things that will never see the light of day in markup (also photoshop files are throwaway files for the most part). On the other hand, I think time can be wasted pushing and pulling pixels around via css.
All these arguments always have the same solution. You need to analyze what works for you, who your audience/client is and what solution will provide the road to profitability (monetarily and artistically).
Nate said 127 days ago:
Fireworks is without a doubt, the way to go. I started using it years ago and I’ve been converting my colleagues ever since.
I’ve found that any time I save by skipping Fireworks mock-ups, is easily lost by making “design” changes in HTML and CSS, and then some. I’ve found the “No Anti-Alias” option for type to be fairly similar to how browsers render <p> sized type.
I completely agree with your comments on the vector tools and the colour picker. I just hope Adobe will stop neglecting Fireworks in CS4.
Cristiano Rastelli said 127 days ago:
Fireworks rules. Dot.
Then go HTML. Quick & dirty.
ocdude said 127 days ago:
@Mark van Eijk: The whole design on paper thing is the way I’ve been doing it since I started doing “web design” back at the tender age of 13. I still do it that way from time to time, but it’s gotten to a point where I can just visualize it and start doing HTML/CSS.
A.Fruit said 127 days ago:
Fireworks does seem much more intuitive to my workflow. I’ve always been an Illustrator guy, so sometimes I make details in AI and ‘save for web’ (as a png) then bring it into Fireworks. There’s the color-shift issue though.
I’ve always been amazed at things people build in Photoshop, thinking to my self “That could be made in Illustrator so much quicker, and it’d be easier to manage.” Often times the same holds true with Fireworks over photoshop too. I do, however understand the “effects” that only photoshop can hold dear.
@Time – Wow. I never knew this. That’s a good tip.
Matt Wilcox said 127 days ago:
Fireworks is an app I really wish I could gel with. But, it’s a macromedia app and I’m used to Adobe tools. Fireworks simply doesn’t work how I want it to, the tools don’t behave as I expect (for example mocking up a logo usually involves typing a word and then stepping through fonts. Easy in photoshop, just select the font in the pallet and keep hitting the down arrow. No can do in Fireworks)
I hope CS4 switches to adobe behaviour for tools and interface instead of the macromedia versions.
Also, photoshop can sample from anywhere on any screen – start selecting a colour and just drag your mouse outside the window. It’ll keep sampling.
Dan McCullum said 127 days ago:
I never understood how people managed to put designs together in photoshop. It seems like such a difficult and backwards way of doing things. I love the way Fireworks allows you to play around with settings and parameters so easily…
Jeff Lynch said 127 days ago:
@John – Yes indeed. Fireworks CS3 works great for “designing” your sites.
@Matt – Adobe bought Fireworks several years ago and the latest incarnation (CS4) is more and more like a good combination of Photoshop and Illustrator. For the price, its the best value Adobe offers to web designers and developers.
Jon Hicks said 127 days ago:
Thanks Time!
Beau said 127 days ago:
I am loving Fireworks CS4. Even with its custom UI shenanigans. The enhanced vector tools are fantastic and vastly better typesetting. I recommend giving it a run. It is behaving nicely installed along side my CS3 install (on a mac).
Gus Mueller said 127 days ago:
I’d love to hear your thoughts on what the ideal tool would look like, if only for my own selfish reasons.
Dale Harvey said 127 days ago:
The ideal tool will be a wysiwyg editor that doesnt suck, and actually hand coding html / css will be a thing of the past.
It sounds nasty to say, because of the heritage of terrible code that comes with wysiwyg editors, but it isnt a hard enough task that it cant be done with a graphical tool, Im surprised its not available already.
Nick Caldwell said 127 days ago:
We’ve got some Fireworks licences at work, and I’ve tried running it a couple of times to see what the fuss was about, only to quit it in frustration about 5 minutes later, having failed to do much more than draw a rectangle on a canvas. Fireworks’s interface is maddeningly opaque.
Really, Jon, what I’m trying to say is that you need to start doing a series of instructional screencasts! Preferably in the Rissington stylee. I’d pay.
Pete Nicholls said 127 days ago:
I’ll let you in on the secret to quick HTML/CSS-driven design: WebKit! Use a WebKit-based browser like Safari and you can harness a whole plethora of design features through its CSS extensions and support for CSS3. Anti-aliased text with a drop shadow? Rounded corners on a div with a drop shadow? Rotate an image, a div? No problem! It’s great for quick, easy mockups before you hit a graphical editor. The documentation for this stuff is largely scattered though; you will have to hunt.
joel said 127 days ago:
I know it’s totally back-asswards, but one thing I’ve tried recently is a webpage comp in indesign. I’m not done yet, but I just thought I’d give it a try.
I can see it coming down the pipe as a lot of slicing and extra work, but since it’s a personal project it’s not a huge problem. =)
So far I’m liking it for the quick and easy grid creation. (as compared to photoshop, which i found a bit more time-consuming. but that’s probably a user problem.)
Nick Whitmoyer said 127 days ago:
37signals point definitely works for a suite of web apps that already has a style guide established. To attempt this technique with a complete redesign would oversimplify the process and easily limit creative exploration.
This article has opened my mind with the old Macromedia app that I’d never install. Thanks!
hawken king said 127 days ago:
fireworks is rubbish, I have no idea how it works ;) Layered PNGs?
I use illustrator for all my layouts, for the ease of measuring and fonts. It’s easier to shift stuff around, you can get pixel perfect lines if you click the right buttons.
Joshua Brewer said 127 days ago:
First, I haven’t used Fireworks in about 3+ years and only recently thought about getting it out again. Maybe a few posts about your workflow (with examples) would help folks gain a foothold.
Second, the guys over at 37signals seem to be inciting the masses lately, but really they are just talking about a workflow that fits their team and their products. Trying to claim that it is THE supreme way is a little short-sighted, IMHO.
As you mentioned, the perfect tool hasn’t been created yet. So for now, us Web Designers will just have to apply our knowledge of css/html (whatever that may be) to the design process and try our best to make the most informed and creative choices in our designs.
Yes, knowledge of what actually works is huge, but it can stifle the creativity too, if you’re not careful.
David Airey said 127 days ago:
Interesting discussion. I’m by no means a web developer, but do on occasion need to outsource. This makes perfect sense, and is something to consider when dealing with sub-contractors.
Rodrigo said 127 days ago:
I thought I was the only guy in the whole world screenshotting and pasting the damn text in Photoshop! PS antialias just feels bad :( Malarkey, CSS Type helps: http://csstype.com/
Jon, I’m downloading Fireworks and giving it a try :)
Kean Richmond said 127 days ago:
I know when it comes to the web Fireworks does some things better, but I love Photoshop and have used it for so long going anywhere else would just slow me down.
Matthias said 127 days ago:
I agree that some ‘realtime-conditions’ can’t be reproduced in graphic/vector programs and this is an issue that is open for a long time. But I don’t want to miss Photoshop when creating a website because the workflow of creating the HTML/CSS afterwards still proves itself.
I also think it’s matter of taste and it’s up to your profession/range (design,development,both) so I wouldn’t draw a line between Photoshop (or other graphics software) and coding. Both methods have their advantages I think.
Although I’m looking forward to webdesign-improvements in Photoshop/Fireworks. Fireworks CS4 has some nice CSS-export-abilities and for Photoshop, there are free plugins which can export some CSS for you (e.g. the font-properties).
I wish there was symbiosis of Photoshop and Fireworks because both programs lack of some features, the other program has.
Later there will be the possibility of extending Photoshop with user-made Flash-extensions which can be used as floating windows (check out John Nack’s blog on Adobe). So there will follow helpful plugins that may improve the webdesign-workflow in Photoshop. A built in browser-preview would be wonderful.
Neil Bradley said 127 days ago:
I have always felt more comfortable using Illustrator to do my design comps, rather than Photoshop. Illustrator can’t do some of the jazzier effects that Photoshop can do, but the text tends to look more like the final appearance in the html.
Olly said 126 days ago:
Jon, you wally! This is only going to encourage more Fireworks questions on the podcast ;)
Really must give it a proper try though. Photoshop has everything I need (layer groups and layer comps are genius), but it feels rather bulky and slows down noticably as the layers mount up.
Rob Mason said 126 days ago:
Isn’t it about what feels right for you as the designer and what you are most comfortable with?
alex morris said 126 days ago:
Fireworks has always been my weapon of choice and with CS4 looming – the final nail in the coffin for Photoshop has come.
Text wrapping around an image or vector shape!
http://www.communitymx.com/content/article.cfm?cid=1B934
This feature seems to have been missed by most reviewers but this is what we’ve been waiting for…
Derek Kinsman said 126 days ago:
At this point I think I’ve read the 2 37Signals posts and 4/5 follow up posts and I agree with everyone [I know total fence sitting].
Depending on the project I’m working on I’ll figure out the best method. If it’s a design that ends up being light on graphics I’ll start with a doodle on grid paper and jump into html/css from there.
I use a combination of all the Adobe apps when doing mock ups. Again, depends on the tools needed. I mostly stick with InDesign, Illustrator and Fireworks. Sometimes I bust out Photoshop if I’m lazy.
Vagelis said 126 days ago:
As I see things, you can only bypass the rich raster image editor (may that be photoshop for me plz ?) everytime you don’t need to create rich visual elements for your design.
It is obvious that web applications differ from web sites, the in between thing, that the most usual case… The closer the projects responds to “website” the more photoshop I tend to use.
I take 37 signals approach with a grain of salt. Loved this article though ;)
paul haine said 126 days ago:
“This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!”
Oh my god that’s genius.
Darren Hoyt said 126 days ago:
Seems like 37signals might have done a clearer job framing the original argument. Demoing “a design” can be very different than demoing “a user-experience” which is especially pertinent to the kind of apps they produce. Because of the way they framed it, lost of commenters seemed to misunderstand. Just goes to show how diverse the role of “web designer” has come to be and how tricky it is to compare methods.
Erwin Heiser said 125 days ago:
Damn you John, youre making want to check out Fireworks :)
Richard Angstmann said 125 days ago:
I am at the stage where I am about to start producing a web site from the ground up for the first time in about 10 years! As you can imagine a lot has changed in that time. I was always a Photoshop guy who could never get to grips with Fireworks, yet I have always loved Illustrator. I am pretty comfortable with CSS/HTML coding nowadays, but its the design/layout/mockup stage that I am about to embark on, and frankly I am totally confused about the best way to go about it. Fireworks/Photoshop/Illustrator/InDesign, or forget them all to begin with and concentrate on the code!?
3stripe said 125 days ago:
I use Fireworks to mockup HTML/CSS designs, and Illustrator for Flash mockups. You can now copy and paste pretty much anything from Illustrator to Flash and it imports perfectly.
If you use Fireworks cleverly you can save a hell of a lot of time.
One thing I’ve never figured out is why jpgs/pngs exported from Illustrator aren’t the same as they look in the application. Try exporting a jpg of some text and then compare it to the original – it’s always fuzzier. Am I doing it wrong? :)
George Penston said 125 days ago:
It’s funny because we’ve been struggling with this very thing as of late. I normally would go from concept and light sketching to building out full on HTML/CSS mockups. Now that we have more people in our company, we’ve been trying to find the right balance between sketching/whiteboarding to wireframing in Fireworks and then ultimately HTML/CSS mockups. I don’t think we’re there yet but Fireworks definitely is a great tool for the in-between stage.
Being a user experience designer, here’s why I think Fireworks is great. It’s the only Adobe app for web design to support pages. Before Fireworks had this, I would use InDesign for wireframes @joel (InDesign page management still wins). Pages is a killer feature for user experience design because you can quickly knock out click-through wireframes. This coupled with Fireworks simple method of building out a button symbol with hovers makes it really easy to accomplish a pretty rich click-through. Export this out to HTML/CSS and you have a next-to-real simulation of what the final product will behave like. Not only that but the beta for CS4 will allow you to save these linked up pages out as a clickable PDF.
And speaking of the Fireworks CS4 beta, one other little feature that may have been overlooked by many are the new HTML symbols in the Common Library. Drag these on your page and edit them through the Symbol Properties panel. Then when you export them, Fireworks saves out actual (and valid) XHTML elements (including form elements). Drag an input text field out and when you export you’ll get the actual <input type=“text”> code in its place. Think of semantic HTML stamps with smarts.
These features are really cool about Fireworks. But I have to say being a longtime Adobe user, I’m still not completely thrilled by the new, superficial Adobe UI paint job that Fireworks received in CS4. I really want it to be reworked down deep in the user experience. It’s great they finally have the Adobe type manager working in it but I still think Photoshop doesn’t a much better job optimizing web graphics (especially subtle gradients). And the longstanding bug of the scrollwheel on Macs not scrolling panel windows still persists in the current beta of Fireworks. All that being said, it’s a much better tool for the job than any other Adobe application out there.
I do feel that I still spend too much time than I care to making wireframes then just going straight into HTML/CSS mockups. I’m starting to wonder if it would be a better investment in more upfront sketchboards and then going right into HTML mockups.
nicolas said 124 days ago:
Really interessting i almost only know photoshop
Bill said 123 days ago:
If I “designed” stuff that looked like their apps I wouldn’t use photoshop either.
They don’t really have the same dynamic with clients that most designers have. Most of their design approval process occurs internally and they just spit things out to the public.
Design is pretty inconsequential for them.
Tim Wright said 122 days ago:
I’m a big fan of fireworks, but I usually don’t design the whole site in there before mocking up something in html
Rogie King said 122 days ago:
Hooray for Fireworks! Totally agreed. I remember thinking the same thing after reading that article – this works well for their style. Surely you can’t mock anything too complex using purely CSS, but you can with Fireworks. My only beef with Fireworks is exporting semi-transparent PNG-24 bit graphics – it straight up sucketh.
Nice write up Jons!
Rich said 121 days ago:
Although I’m probably not as experienced as most here (straight out of uni) I have to agree with the notion of “Fireshop”.
Theres not many times both aren’t running simeltaneously on my machine!
Keep up the good stuff Jon!
Dan Rubin said 120 days ago:
Good points Jon, well said. As a Photoshop user (Fireworks years ago, and Photoshop before Fireworks came out, and lately I bounce between both – I’m like you with browsers ;) I must point out that much of the Pages functionality in Fireworks is available to Photoshop users via Layer Comps, with the main difference being that your layers are shared between all Layer Comps.
Layer Comps can also be exported as individual PNGs using one of the built-in scripts in Photoshop, and you can use a combination of Layer Comps and Layer Groups to get all your various page designs stored within a single PSD.
Of course, that PSD will cause Photoshop to move slower than an 90 year old on valium, which is a problem I haven’t seen with Fireworks yet ;)
Andri Sigurðsson said 116 days ago:
Have to agree with Fireworks being the right tool for the job. It really is a fantastic program and more people should be using it. Photoshop is like a dead dog compared to Fireworks, I would even choose HTML mockups over Photoshop. It just isn’t a good program for creating GUI designs.
Mesut Karakoç said 115 days ago:
Really interessting, thank you very much for everything.
Brad said 115 days ago:
37signals point his harder to make vs. Fireworks, but valid all the same.
That magical, mystical “point” is made possible via your hard-won understanding of HTML/CSS. Even while in Fireworks, you are pre-processing the CSS in your head. Hence, you skip Fireworks.
Stop letting psd/flash jockeys think they’ve got an easy out from HTML/CSS.
Jauhari said 115 days ago:
I use both ;)
Rick Lecoat said 114 days ago:
I’ve only had a copy of Fireworks since upgrading to CS3, and up till now have been using photoshop for graphic mockups of web work. A few months back I thought “I should try and get to grips with Fireworks, figure out how it works”, so I went looking for a ‘get started with fireworks cs3’ -type book — you know, a Visual QuickStart type thing, or similar. Couldn’t find anything. You can’t move without tripping over books on Photoshop, but Fireworks is sorely in need of some beginners guides. Don’t get me wrong, I’m not a computer novice — I’ve been Photoshopping for over 15 years — but I want something to help me get my head around how Fireworks is different from pshop.
Of course the obvious answer is “just dive in and start experimenting”, but that can be a slow road of trial and error and I’m just too busy with work right now. I want a book that I can read on the train, in the bath, in bed.
Even the web was surprisingly spartan in this regard, though not as bad as the book shops.
I have now just pre-ordered Adobe Fireworks CS3 How Tos: 100 Essential Techniques which will hopefully help me get on the horse.
Just seemed odd that there are so few books out there devoted to Fireworks.
Chris said 114 days ago:
I’m so glad to see that a web designer I respect prefers Fireworks over Photoshop for design mock-ups. For me as a qualified designer, there is no contest. Photoshop does seem to be the more common, but I’m guessing this is down to the high volume of part-time bedroom web designers out there.
Paul Annett said 107 days ago:
I’m currently making the transition from Photoshop to Fireworks. It has all the benefits you mention, plus massively smaller filesizes since its vector based. It’s been a slow process to let go of Photoshop, as I’m so used to it and therefore a lot faster in Photoshop than Fireworks, so it’s just a case of finding a project with a long deadline to complete to transition.
I’ve also previously experimented with screenshotting browser-text for mockups, but its all too time-consuming if you decide to change the dimensions of a block of text.