Thread

That’s exactly what I do, though sometimes I use a small white board instead of paper.

I do all of my early prototyping and concept diagrams on a HUGE white board.  I try to be as accurate as possible by using GUIMagnets where applicable.

Adobe has a cheap product?

No, he said “cheapest”, which is relative.

Once everything is in place I’ll use Fireworks (sometimes Photoshop, depending on the image requirements) to set up the graphics to size using the 960 grid system. Then I’ll slice graphic components, upload, and work on the CSS.

I’m getting ready to buy Fireworks CS4 and was wondering: does it really export ‘compliant-production-ready’ xhtml and css?

I’m remembering a bad experience I had with Dreamweaver’s html in wysiwyg-mode some years back.

Thanks.

I’m getting ready to buy Fireworks CS4 and was wondering: does it really export ‘compliant-production-ready’ xhtml and css?
I’m remembering a bad experience I had with Dreamweaver’s html in wysiwyg-mode some years back.

Yes, and no. It’s XHTML and it’s CSS. I prefer my own, but in some cases what comes out is acceptable. Except with Dreamweaver. It’s sooooo 1999.

So it sounds like the xhtml and css is pretty good to jump start the process? Is that a fair interpretation? That’s about what I need. My css is improving quite a bit, but I suffer productivity-wise if I have to start with a blank page.

My hope is to be able to prototype in Fireworks and get the added BENEFIT of having it generate some decent foundational code.

I’m going to buy Fireworks, was just hoping that its code was way better than Dreamweaver ... which it sounds like it is ... thankfully. (And by the way: my abysmal experience with DW code was in 1999; do you also guess ages and weights on ‘the boardwalk.’  ; )

So it sounds like the xhtml and css is pretty good to jump start the process?

Definitely sufficient to start, though you’ll dump it as your own CSS improves. There’s a pinnacle somewhere along the XHTML/CSS process where there’s very little XHTML code, and most of the layout is CSS.

My css is improving quite a bit, but I suffer productivity-wise if I have to start with a blank page.

In retrospect, it’s not what I call pretty code, but you need a place to start that’s ahead of a blank page.

My hope is to be able to prototype in Fireworks and get the added BENEFIT of having it generate some decent foundational code.

I prototype and finish graphics in Fireworks, especially handy for slices, logos, backgrounds, and other elements, but seldom use the code anymore.

my abysmal experience with DW code was in 1999; do you also guess ages and weights on ‘the boardwalk.’

DW’s CSS is improved over 1999, of course.

As to guessing ages and weights on the boardwalk, I was around when it was built.

+1 for Fireworks
Just started using WeBuilder 2008

Just started using WeBuilder 2008

What an excellent choice! I’ll second WeBuilder 😊

Fireworks is good. And it certainly has its advantages over Photoshop… But letting it produce HTML and CSS is not for me!!! I cannot see how it could produce CSS with names and labels that mean something to the end developer…
Would i choose style01, style 02, style03, over smalltext, largetext, greentext, etc.

But for cutting, slicing, optimising, it does how some handy features. I also quite liked it for animated gifs.

Fireworks is good. And it certainly has its advantages over Photoshop… But letting it produce HTML and CSS is not for me ...

But for cutting, slicing, optimising, it does how some handy features. I also quite liked it for animated gifs.

Fireworks can do so much.
I used to visit here often.
Its amazing what some people can create, eh?

I really take advantage of the slicing. So simple.
A quick edit to the master file and export a jpg/gif/png quickly + FTP it = happy client

1) What tools do you use to create a new layout/design for a webpage? Omnigraffle?

Omnigraffle is aimed at wireframing, I use my moleskin (paper) or Illustrator for this. For the graphical side of things I use Photoshop cs4.

2) I have noticed a lot of site featuring css style-sheet names that feature version numbers such as “style.v.1222793342”. What tools are being used to keep a version history of CSS files?

I use Espresso for this but dont use any SVN or use EE to handle my stylesheets.

Just checked out Omnigraffle.
Looks like something I could definitely use.

Anyone have a Windows comparable product to Omnigraffle?

We typically start on paper, then a round of Photoshop for concept and initial options. Once we decide on a direction I start in TextMate (the best text editor out there!) and our designer(s) do more in Photoshop. Then eventually the design is implemented into the wireframe that was created in TextMate. From there it goes into EE

Third vote for WeBuilder 2008 ...actually I think one of the forum posts from bluedreamer is what got me turned towards it. It has a few flaws that should be taken care of in a new version. Great tool.
Fireworks has apparently improved over last years and some nice work out there…but I still don’t like the ‘vector’ feel it produces. Illustrators seems to like it.

I don’t believe a good layout/design tool yet exists for web dev.

Photoshop - Way to bloated. Tries to be everything to everybody. Originally designed to edit photos… now were using it to do 3d work, video editing and site design? Menus upon menus and thousands of options. Wow! I’m just trying to layout a web page.

While I’m ranting on PS… why doesn’t repeating ctrl + z mean I keep stepping back in my history like every other piece of software on planet earth. Not in photoshop… you need to hit alt + ctrl + z. Thanks Adobe!

Fireworks - Things that should be simple are sometimes fairly difficult or impossible. Does it allow for using an image as a background on a stroke? (I haven’t tested this with the most recent version… so I don’t know… but in the past this was not possible.)

I also hate the way gradients are controlled/modified in Fireworks.

Illustrator - This would probably be my favorite tool if I knew more about it. Admittedly… I don’t know enough to be too critical. However, it also doesn’t seem to sell itself as a web layout tool either.

Coreldraw feels clunky to me. Never really used it much beyond just testing stuff out in it.

Imagestyler - Yep… One Adobe product I do use for a fair amount of layout work is a product most people never heard of. Originally sold as a quick and easy web graphic creator for non-techy people… I find it extremely useful for drawing quickly and doing mock ups. The product is extemely feature limited but for drawing boxes, creating basic shapes, moving stuff around on a ‘whiteboard’, changing colors and getting ideas on what might look good… it really shines. You can’t find it anymore except ‘maybe’ on eBay. I don’t know if it works in Vista… it does work on XP.

Once I get a layout I like mocked up in Imagestyler… I export a few graphics that can’t be produced in css. Then open up Fireworks to create any graphics that contain text. Imagestyler is terrible with text. Export the remaining graphics from Fireworks and build everything with Dreamweaver CS3 and CSS. (DW CS4 is too unstable on my system for some reason.)

Other tools I use regularly are…

WinSCP - The best imho free ftp/scp tool.
ColorCop - Free and awesome color sampling tool.
Firefox with WebDev, Firebug and CSSViewer extensions.
Beyond Compare - Awesome file comparison tool
Notepad++ (Crimson Editor is good too)
Screen Ruler

Also all major browsers for testing purposes.

When I finally make the switch to Mac… I’m sure this list will change and perhaps I’ll be more content. 😉