pencil and paper works great!
I can use photoshop or illustrator as well, but it gets a bit slow. As in I feel like something specifically dedicated to wire-framing websites could save me a lot of time by indicating that things are menus, present on all pages, automatically making bodytext or images or what have you.
Anyway just wondering what you guys use most?
I do not believe in wireframing… Drawing some goofy pretty picture before you have semantic markup of the content is putting the cart before the horse, and usually just results in shoe-horning content into a layout it wasn’t designed for. “wireframes” are just as broken as the garbage vomited up by the PSD jockeys and are responsible for just as many broken websites as tools like Frontpage and Dreamweaver.
My approach is to write up the content going on the page (or a reasonable facsimile) as plaintext, mark up the content using semantics with ZERO concern for the end layout, create the layout for screen using CSS (the step you are talking about), and only then start up the silly paint program to make graphics to hang on the layout.
One thing about this approach is that SCREEN is not the only target for a website – starting out with a wireframe JUST for screen can often shoot yourself in the foot when it comes time to deal with PRINT, HANDHELD, etc… or even just how the page behaves when all the fancy technologies like CSS and Javascript are unavailable!
Though you’re looking for tools – and as Dan Schulz used to say the only thing thing about many of the larger softwares that can be considered professional grade tools are the people promoting their use. He directed most of that at Adobe tools like Fireworks and Dreamweaver, but it applies across the board for WYSIWYGS, wireframing, and all the other nonsense people barf up pages using.
Frankly, if you’re at the layout stage and need anything more complex than a flat text editor and browsers to test in, IMHO “yer doing it all wrong!”
As evidenced by the millions of websites out there with code to content ratios of 20:1 or higher, broken layouts, accessibility failures on things like color contrasts, font sizes and fixed widths, and hosting costs that have to be bankrupting the poor people actually paying for the sites.
While I agree somewhat with what deathshadow60 is saying, I think wireframing is important to help determine conceptually, what information needs to go on a page.
The site I’m working on now is based on statistics for a lot of different things relating to a sport, and imagining how certain statistics relating together on a particular page would be useful for me as a user, via the use of wireframes, I think is an essential step.
eg. a player in said sport - what information do I want to know about them? How would that information, which can be widely varying, be displayed best for the user? A graph, a table, what? That gets done in the wireframe, and then the semantic HTML goes from there.
I can agree with Karpie’s approach to a degree too - though really with data like that I’d be asking “is this a list or a table” and then marking it up as appropriate without resorting to any sort of ‘drawing’ to figure that out. But then if presenting it as a graph I’d probably build the table and use scripting to turn the data in the table into a graph – that way people with no scripting or images disabled can still get useful content. (I’m SO looking forward to CANVAS being real world deployable)
It’s kind-of the key to good site development IMHO, is having the content dictate the layout and not the other way around. That’s really the gist of what I was trying to say… Content FIRST – have the content tell you what to make for a layout instead of shoving content into a layout that it may or may not fit.
Rather than drill a round hole in cement brick for the square peg and then sit there for an hour with a file to make it square, mold the cement around the peg.
that’s great. but my clients don’t like looking at html. and i don’t like coding html before i know and they know what they want on the site. and i don’t want to discuss what’s going to be on which pages without having an idea of how it’s going to look.
content is very important. and form should follow content. but form and style are extremely important for people wanting to be on a website. I never for a second said we should draw up a wireframe before we know what content is going to be. Also, sometimes it really, really does matter where it is. Maybe there ought to be a summary with a click-through instead of just pitching a wall of text at a user and scaring them away. Wireframe would help with that.
Anyway i’m not looking at getting into some debate on its merits, i was just wondering if people can recommend some very quick wireframing tools. very quick because i don’t want to waste a lot of time on it, but wireframing tools because that’s what clients want to see, and that’s what i want to see because it helps me figure out where things should go and how much can/should fit.
It all depends on how you work. I suspect DS60 designs the way I do, in the browser, and leaves the wireframing and PSD for others. But it’s a valid option if that’s the way your mind works or what your clients want. There are a ton of wireframing programs out there; as far as I know, all the good ones cost $$, so I don’t use them. This site gives gobs of options, including some free and/or online choices:
http://www.cssgalleries.com/2009/11/the-big-list-of-wireframe-software/
Like deathshadow60, I let my structure do the talking, although I prefer to have all the content available to me before I start thinking about a design. In my eyes, tools like wireframing and Lorem Ipsum result in a poor design because on the average website a user will come for the content, and as such the design should be built to accommodate the content.
I have been known to use a small grid at times, just to make sure that my designs fit their constraints (e.g. 400px columns, a 10px space between groups of text, etc), but outside of that I’ve never found a use for it.
I see no problem using lorem ipsum placeholder text, IF you know that a particular kind of content is coming that will go in the “blanks.” Or you could have my current client, who has a raft of content and absolutely no idea how to present it (or, apparently, any interest in giving me any thoughts on the subject).
I feel your pain, although I’m often designing pages for content that hasn’t even been written yet…
10 Free Wireframing Tools for Designers
I use GIMP to create a few comps for clients. They choose the one they like, sometimes with with aspects of the ones they didn’t choose. CSS the rest. What’s the big deal? Oh, and check out http://www.duckisland.com/greekmachine.asp for a great greeking machine. It gives you different options for your greeking, including different ‘languages’ from which to choose.
Black Max put it well:
it’s a valid option if that’s the way your mind works
My guess is Deathshadow is a left brainer and his way is perfectly valid for someone so oriented. But if your a front-end focused GUI guy its wise to do wireframing-at least a quick sketch on paper. Thats not some “goofy pretty drawing” its a quick sketch which is usually not pretty at all, and its more of a thinking tool, a right-brain thinking tool.
You might be on to something there, though I was always taught that right brain use doesn’t actually qualify as “thinking” 
For drawing,I prefer illustrator
& for editing I use Photoshop.
not much familiar with Wireframing Tools.