Wireframing

[krakestraw]

What tool's do you guys use for wireframes? At the moment i am drawing on notebook paper.

I was just wondering if there is recommended tools for this?

[Wickham]

Here's a tutorial:-

http://sixrevisions.com/user-interface/website-wireframing/

You might also consider a 960px grid system:-

http://www.designinfluences.com/fluid960gs/

or a 970px grid system which many people prefer as it creates equal gutters:-

http://www.gridsystemgenerator.com/gs02.php?GridWidth=970&GridColumns=12&GridMarginLeft=10

[falkencreative]

I think you go with whatever you find easiest/quickest. Here's a good rundown: http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/

 

I personally tend to use Illustrator.

[krakestraw]

Here's a tutorial:-

http://sixrevisions.com/user-interface/website-wireframing/

You might also consider a 960px grid system:-

http://www.designinfluences.com/fluid960gs/

or a 970px grid system which many people prefer as it creates equal gutters:-

http://www.gridsystemgenerator.com/gs02.php?GridWidth=970&GridColumns=12&GridMarginLeft=10

 

Thanks! I have a 960 grid, but i really like the 970 grid. thanks for the links.

[krakestraw]

I think you go with whatever you find easiest/quickest. Here's a good rundown: http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/

 

I personally tend to use Illustrator.

 

Thanks! I'll try illustrator. I know in photoshop you can't specify pixels, you have to use the info tab. And if i'm not mistaking, illustrator is the same way. I could be wrong though.

I'm gonna take the time to read you guy's links. I appreciate them!

[falkencreative]

Thanks! I'll try illustrator. I know in photoshop you can't specify pixels, you have to use the info tab. And if i'm not mistaking, illustrator is the same way. I could be wrong though.

I'm gonna take the time to read you guy's links. I appreciate them!

At least when I do wireframing, I'm not creating pixel-perfect layouts. The goal of a wireframe - in my view at least - is to indicate general placement and size and to think about user interaction, not necessarily to decide on exact dimensions for things.

[dannolan]

I agree that when creating a wire frame you are best using whatever you are comfortable with. Illustrator is a good tool with demonstration the general size and layout. However, I have also found that some clients can get confused by this and sometimes using a pen and sketch pad in front of them can be the easiest way to get your ideas across.

[krakestraw]

I agree that when creating a wire frame you are best using whatever you are comfortable with. Illustrator is a good tool with demonstration the general size and layout. However, I have also found that some clients can get confused by this and sometimes using a pen and sketch pad in front of them can be the easiest way to get your ideas across.

 

Alright, thanks for the tip! I'll keep that in mind as I'm relatively new and won't establish clients for a little bit.