What do you guys design your websites with?

[richimgd]

Hi Guys and Girls,

I have been designing sites for a few years and normally use Adobe Illustrator CS4 myself, but sometimes find it a bit too fiddley when it comes to some design. I like the speed of InDesign CS4 but it doesn't support multiple size pages within the same document, so its a bit annoying for website design since you often need multiple size pages. Fireworks is something I have never really got into. Photoshop is nice for more finalised designs, but the typography tools are horrible to use. Its good in combination with illustrator though (using smart objects).

I know InDesign CS5 now supports multiple size pages within one document, so I might start using that for various stages of the project.

So, if I list a few various stages of a project (I might have missed some, feel free to add), I welcome your suggestions of what you use. I will give a brief bit of info of what I use.

A) SiteMap: Omnigraffle (for mac) or InDesign
B) Wireframe: Omnigraffle (for mac) or Illustrator
C) Initial Design: Illustrator
D) Final Design Stage: Illustrator, Photoshop + Illustrator

What do you guys think?

[Katedesign]

(x)html & css

I have a copy of Dreamweaver. . . but have never got on with it.

[richimgd]

(x)html & css

I have a copy of Dreamweaver. . . but have never got on with it.

I'm talking more about the visual design / layout stage rather than coding.. unless you go straight into code?!

[JohnRoss]

Odd choices. You're doing whole projects yourself, start to finish? We're talking about small sites, then, and at that scale, a priori site maps are best done with paper and pencil, anything more is faffing about. Site maps for larger, dynamic sites are best generated a postiori by the software you're using to do the dynamic stuff with, and I can't imagine why a designer should have much to do with that. Wireframes have more to do with development (and marketing) than design, I can think of no good reason why a designer should ever have to produce a wireframe, either. Illustrator? Fair enough if you're in the kind of production environment where you're going to pass your design on to a developer to implement, but real web designers use HTML and CSS.

[JMCDesigner]

Layout Design I go straight to Photoshop, sometimes before this I sketch out some wire frames using a good old paper and pen.

[sthomas]

Personally I think that you're using far too many stages (and apps) to create a website.

For me, it's pencil & paper to sketch out the basic framework and then into Photoshop to create the visuals.

I would bypass Illustrator as it doesn't really serve any purpose in a web environment.

[richimgd]

Odd choices. You're doing whole projects yourself, start to finish? We're talking about small sites, then, and at that scale, a priori site maps are best done with paper and pencil, anything more is faffing about. Site maps for larger, dynamic sites are best generated a postiori by the software you're using to do the dynamic stuff with, and I can't imagine why a designer should have much to do with that. Wireframes have more to do with development (and marketing) than design, I can think of no good reason why a designer should ever have to produce a wireframe, either. Illustrator? Fair enough if you're in the kind of production environment where you're going to pass your design on to a developer to implement, but real web designers use HTML and CSS.

Well I guess I am involved in a bit of a mixed role at the moment. I design sites, I also have front end development skills, so I like to plan how things works as well as how they look. So knowing where stuff goes helps hence I talk about wireframes. I think of wireframes more as to plan the information architecture of a website / app without getting too bogged down with how it looks. Once I am happy that everything is in the right and most logical place, then I begin to make it look how it need to look. Im not saying I try to do everything. Normally I will have copy provided to me and somethings concepts and creative input and occasionally some art direction along the way. Then theres the collaboration with any other developers who write the server side / database stuff. The post was really about the software / tools which are best suited for the various stages of design. I know pen / paper is good but when your sending a client a site map proposal / wireframe pen and paper doesn't always cut it if they're paying good money for the site..

[richimgd]

@ JMCDesigner and sthomas
Fair point about pen / paper and straight into photoshop.

I guess it can vary between the size and scale of the site. I know Illustrator isnt ideal which is why im looking at alternatives. I am interested in InDesign CS5, because I like the way InDesign manages pages in terms of hardware / memory management. I.e its very quick, only attempts to display one page at once, and can have high res preview switched on when needed. All of this Illustrator fails at. I know you cant beat photoshop in terms of fine tuning stuff, but its nice to see a website as a whole, in terms of seeing multiple pages at a glance. (The reason I like Illustrator). But again I am open to feedback and suggestions on my current way of thinking.

[sthomas]

One of the main points where InDesign (or Illustrator) fails for web visuals is the way it smooths fonts.

If you produced a set of web visuals that were created in InDesign and sent them to a client, they'd be in for a surprise when they view the final website and they saw the fonts had jagged edges (prompting the inevitable question 'can we have the fonts smooth as per the visuals?'.

Even though the font representation in Photoshop is not perfect, visually it's a lot closer to how the font will look on screen.

It's interesting that you mention about the client paying good money for a website. While I agree that it's sometimes difficult to sell a website to a client using only pencil sketches, the client is only going to be interested in how the final website looks & functions, not how the mock-ups and sitemaps were produced.

Obviously everyone has different ways of working but personally I always try and reduce the amount of unnecessary stages and excess clutter from any working process - 99% of the time, it has no detrimental effect of the final result.

[richimgd]

I normally explain to my clients early on that fonts are always going to vary slightly (in particular, body copy) since peoples versions of the fonts vary from user to user so text might flow differently in terms of line breaks etc. I can get titles to look right if I use a font replacement technique. So I havent had a client grill me for text not looking so smooth. I personally find apps like Illustrator faster especially since you can drop in photoshop elements pretty quick. I think I will design my next site purely in Photoshop and see how it compares with illustrator / indesign in terms of speed.