Looks like a good tutorial.

But for some reason, this makes me think they used the .PSD from the 960 grid system, but I haven’t read it yet. So I wouldn’t know.

nice tutorial!! status: Downloading =]

Gridmaker. Just saved someone another $9/mo. Go me!

It’ll be always better in Fireworks, I do not recommend Photoshop for wireframing, the perfomance is toooo BAD!

Or just save time and get blueprint or 960.gs.

There are a bunch of free tutorials on here that I would say “Yeah, make that a plus tutorial”. This one isn’t it, just because there are 3rd party alternatives out there that do the same thing for free, and much faster in fact. If I can find it, I have an Air app that is built to do this.

Hate to be so negative, but there are too many free, Plus-worthy tutorials, but not many non-free, plus-worthy tutorials.

I’m enjoying this tutorial.. very informative.

Nice tutorial, although I wondered why you didn’t use guides for positioning instead of dragging around stuff and turning layers on and off.

I’ve made two scripts to create any grid I want in Photoshop CS3. I don’t have CS4 and I’m not a programmer so no support for that, but if you want the scripts you can download them from here: http://www.paulbaarn.nl/gridmakercs3.zip

thanks for sharing great information here. Another Good One from Net.tuts
Surely help in my forthcoming projects.

Is it me or does there seem to be a big push on wireframing?
There’s 3 tuts here on the subject in the last week.
Web designer depot (sponsor) has a “why wireframe” article.

Is WF the latest fad?

When I see ‘tutorials’ like this pop up here, with people saying things like “false” in response to “use Fireworks instead of Photoshop”, I’m so very, very glad that I’m not a paid up member of this site.

Garbage.

Nice tutorial, I only wish that you would of spent less time explaining the basic English definitions of every single word and more time on how to use the grid system, I really enjoyed the instructional part just try to realize that the listeners are not 1st graders

I just wasted an hour and a half watching this with the hopes of learning how to use the grid system to make websites, unfortunately this tutorial just shows how to make a photoshop image that looks like a website or a wireframe but never shows how to convert the wireframe into a website. If anyone out there knows how to and would like to make a tutorial it would be very very useful for a wireframe tutorial that shows how to make a wireframe into css/html. I would of skipped this if I had known that it was only on how to make a graphic and then it stops there, you have to find out how to do the HARD part on your own

So, while you can use any tool you’d like for Wireframing, the purpose of wireframes are not to focus on layout but to document the screens of a site/system and the functionality/features.

I find Fireworks and Photoshop focus me too much on the precise placement of elements on the screen. It consumes too much time ensuring formatting and layout not to mention having to make revisions with the client. Wireframing to me is a rapid development that works out the overall architecture of the site and helps validate the right functionality is on the right screens, then I dive into the polishing of design in Photoshop.

A tool I’ve had great success with is Axure. It’s not meant to design in, but to Wireframe. It also has the benefit of outputting a Clickable Wireframe which is great for getting preliminary user input and rapidly improving your site/application. Check it out: http://www.axure.com

I’m sorry, just my personal opinion, but some a nice chunk of the stuff leading up could have been cut. Too much fluff. Seems like the author was trying a little too hard.. Maybe it’s just me.. ? I got bored with the video and quit watching because there was too much fluff info thrown in.

Maybe I’ll go back and one it one day.. It just isn’t holding my attention at all for now though

Nice tutorial Tylor..i like the way you take your time and explain things. Some other screencast have people talking in light speed because their in a rush. I realise that you can never please everyone. Would be great if there is another tutorial to take this wireframe and come up with a design.

I can download screencast but not actual .zip file. And problem is link address: “http://tutsplus.com/s3.php?file=”. As you can see there isn’t file in address. So please fix that.

Great, I’ve been looking forward to a plus tutorial that isn’t about some vague jQuery function that I won’t use – the quality has been poor lately (by poor I mean not to my taste not poor as in crap lol).

Someone on here wrote about Fireworks – while i agree with them in principal, in practice it’s quite expensive to have Photoshop AND Fireworks, though I have to admit it made my life so much easier in Fireworks!!

I really appreciated this tutorial. I have just started a new website design for a client and really wanted to try using a grid system of some sort. I just didn’t understand what to do with it. I’m a visual learner, so this tutorial really helped!

I couldn’t for the life of me create horizontal lines and have them distribute evenly (vertically), so I am using a combo of the 960 16-column grid plus the grid in Photoshop customized to be 20 pixels apart.

This is working great! Thank you!!

i just watched this – 1 hour 30 mins and it was way too long. Sorry to be so rude but come on, this was pretty poor for a paid tutorial. I hope this doesn’t sound too harsh but what I’m getting at is this could have been crammed down to 20 mins easily.

Thanks for all the comments, guys. I really enjoy hearing what people like and don’t like about the tutorial. It’s very informative for me, as the author.

As to the Fireworks vs. Photoshop debate, I would definitely recommend people try out using both and seeing what works best for their individual workflow. I know for me personally, I like to use Photoshop but I understand completely that others will use Fireworks.

Is there any tutorial that shows you how to take a wireframe and turn it into a design? Thanks

I am new into Web Design and Development and i really liked the tut. I got it why I should use wireframes and why to better plan an website. Thanks a lot!

hi, there seems to be a problem with my subscription, i can’t see anything

Hmmm Wireframes ehh. The type of wireframes I use are for interactive early prototyping and not positioning of layout elements,

Did this term get all muddied up and become something it is not. I know grids look like wireframes but er…

– thinking as a dummy user —

Hmm… wireframe, right?

Afterall, what’s the difference between the actual final design and a pretty grid-based wireframe? Nice colors and typography? A big logo? Why is my site black/white when I asked for high use of colors??

— /thinking as a dummy user —

I can understand if you say you want to show your client the idea in a ‘professional looking’ way, but I honestly think this approach is an attempt to overcharge the client. Who is going to pay for all this nicely designed wireframes? Or you want to make them for free?

Wireframes are definitely not a deliverable for a typical client – which is in general more interested in having a website and not in reading/having access to extensive documentation; it’s just too abstract for them to understand what it means. I’d only deliver this kind of blueprint if another team of developers/designers would join the project I’m involved.

There’s no need to make it pretty. It has to work. It has to be quick. It has to communicate the proposed interaction among your team.

And even a napkin can do that: http://www.alistapart.com/articles/paperprototyping/

I just watched this tutorial. Great work. I can see that a newbie can learn a lot from this video, because Tylor made a great effort in giving an in depth introduction to the subject of wireframing. Another great point about it is that it’s not so fast that you have to pause and go back a lot to understand, because explanations are given at a nice, calm pace.

Anyway, the point I’m trying to make is that this is a great tutorial for beginners.

Jeff: Wouldn’t it be useful to tag tutorials using something like “beginner”, “intermediate”, “advanced” so a visitor can know what to expect before watching them?

http://960.gs/
That’s all, what you need.