is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Please refer to the advertising and sponsorship page for inquiries.
+
The past two days, I’ve been spending more time than usual in
You should try Freeway (http://www.softpress.com/en) or Layout Master (http://www.westciv.com/layout_master/index.html) but I still think Photoshop and a good text editor is best.
I totally agree with you. I normally don’t do layout comps because I never learned how and also I find it hard to do in Photoshop or Fireworks. If Adobe or even Macromedia would make something like InDesign but for website comps.
You should look at Macromedia Fireworks. This is exactly how I use it. I never let it generate code. I use it to comp websites. Everything is on an object level which makes it much easier to manipulate than in Photoshop layers. Once I have something I like I send a PNG or JPG to the client for approval. When they sign off, I start hacking into the Fireworks file, slicing off what is needed for the site without destroying the original layout while I code the site in Dreamweaver.
Yup, Fireworks is awsome for this. I’ve played with PS and ImageReady, and they just don’t do the “vector” thing that makes Fireworks so powerful.
Each component (box, text, line, image etc) is an “object”, and has a separate entry in the layers palette, meaning that you can move and re-order everything at any point after its creation.
It takes both best bits from the Flash editor (without the inherent annoyances), combines it with the vector powers of Illustrator/Freehand and then renders it all in Photoshop-style pixel glory.
And if you don’t want to use the code generation features (trust me – you don’t) then you don’t have to touch ’em.
I’ve tried Freeway, but not Layout Master – will give them a go.
I had a feeling that one of Adobe or Macromedia’s packages had matured in a manner similar to what I’ve been talking about, but I had completely forgotten about Fireworks. I’ll try and get my hands on a copy and give it a try, thanks, Jonathan and Judi.
Stephane, I’ll have a look at Freeway, though it seems not quite as precise as I’m accustomed to in Photoshop. I was familiar with Westciv’s Style Master, but not Layout Master — because it looks like a Windows only app, right? That kind of rules it out for me.
I’ve recently mentioned something similar to a colleague. I wish that Photoshop would integrate with a HTML rendering engine in their next version (maybe Firefox for Windows, WebKit for Mac) so that I won’t have to “fake” HTML text elements when comping. Being able to apply CSS-style formatting wouldn’t hurt either (that is, objects could use the CSS box-model).
We’ve switched our whole print design departments to InDesign — if anyone is a print designer, they know that Quark is the IE for print design. They didn’t update their program for over five years because of their dominance in the market — InDesign comes along, and by the time it matured to CS, it does some fantastic things Quark should have done long ago.
That being said, I haven’t tried GoLive (built off Opera’s browser engine), but I would imagine it has similarities. Remember, you can also export your InDesign layouts as XML data for database work:), or export some SVG graphics, same as illustrator
Quark has web features but 1) they suck 2) can only do one page at a time 3)code is horrendous
I’ve done a little in Fireworks, and I think it’s compression is better, and that it can handle 32bit PNG’s; but I was a print designer first, so I’m comfortable in photoshop — it takes me next to nothing to build it — then I trim everything out in photoshop and save for web – I find that faster and much more controlled than imageready now adays.
But, back to InDesign, alot of the big fortune companies have switched to it, so I see that as becoming a great application that challenged Quark’s lame and stagnant monopoly. If only we can get Firefox to do the same in the other industry:)
It’s unfortunate that there isn’t one app (or even two, for that matter) which works well for all comps. I also use InDesign from time to time, as it works with text and text blocks and styles much more easily than, say Illustrator or Photoshop.
GoLive, btw, is an excellent comping tool, especially because it creates a comp which can more or less work in a webbrowser and allows you to very quickly prototype several site architectures and apply design elements to various components/sections of a site.
My last project, a fairly complex web-based MMI, had me in OmniGraffle. It’s probably not mature enough yet to consider it a viable web-comping tool (its lack of pixels as a unit is perhaps a dead giveaway, although points work just as effectively), but it handled the task quite well (albeit a bit clumsily…the finished comp has over 800 elements).
I agree with you for the most part, though, Khoi. Page layout programs are the best way I’ve found to visualize multiple designs quickly.