Hi, I’m Grace Smith

Great recommendations/list of resources… very valuable.

“Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.”

Very true… wireframing has become a truly integral part of our development process at my work. It definitely helps with work flow, and team understanding of the project before the actual design/mock-up phase begins.

Grace, very nice tools and articles! thanks for sharing! sometimes wireframing seems useless… but having a read of those articles can change your mind.

Hi Grace, great post. I put together a couple of the tools you mentioned above a while back. Just incase its of interest.

http://blog.webdistortion.com/2009/02/22/useful-online-tools-for-easier-website-planning-and-prototyping/

This is SOOOO helpful. I am just starting to work on our own server’s file structure and wireframing will most certainly be the next step. No one has ever done it strategically for our website, so my hope is that I will have the time to do this to make everything run more smoothly. Serendipitous that you were working on this today just as I’m getting started on this project!

Hi Grace, wonderful resources thanks.

I’ve only recently started including wireframing is my design process, more on larger text heavy projects. By building up a library i have a good starting point to determine layout and get the creative juices flowing, though i mainly sketch (pen and paper).

But the client very rarely gets to see them, mainly due to budgetary constraints and also because i find the majority of clients like to see something more polished and visual from the outset.

The wireframes allow me to do the quick planning and prototyping behind the scenes.

@Aaron Thanks! It’s absolutely essential for me, it helps define layout and also forces you to think of functionality.

@Adrian Thanks for stopping by Adrian. I hope its given you a few tips/pointers and maybe changed your mind

@Paul Thanks for the link to those tools, with a few i hadn’t seen before.

@SaraKate My pleasure, i hope it helps. I have been working on it on and off for about a week as im a little obsessed with wireframing, i kept finding more resources to add to the list!

@Chris Hi Chris, thanks for leaving a comment. Having a good library of elements is a great thing to have, i have one for photoshop when im wireframing, it saves alot of time. I understand your point about clients wanting to see polished designs, however i usually explain that the wireframe is devoid of styling and is purely concentrated on layout, which has worked really well.

Thank you!!

This is a great resource you’ve put together! Personally I wouldn’t recommend Illustrator for building wireframes because it won’t work well for larger projects. I would then switch to Adobe InDesign which will allow you to create masters, pages, reusable elements and so on.

Together with a colleague of mine we gave a workshop on wireframing in InDesign, and he created an instructional PDF on it as well – you might find it interesting:

http://www.peterpixel.nl/writings/wireframing-using-indesign/

Kind regards from Holland

Joel Laumans (@piksels)

Brilliant resource, thanks!

Great list of resources. Thanks for sharing

Great list ,Grace. Thanks for assembling it, but don’t forget that Adobe Fireworks is also positioned as a wireframing tool – we use it daily for all of our wireframing and rapid-prototyping.

Another very powerful mind-mapping tool not mentioned is The Brain:

http://www.thebrain.com/

I use it and love it in the free edition. No, I’m not related to the company at all, other than happiness in having found them.

Dom

@Joel Personally i don’t use Illustrator but i know alot of designers who do so i thought it would be a nice write up to include. I would agree InDesign is an excellent tool for wireframing and thanks for the link, thats a fantastic resource!

@James and @PatternHead My pleasure, i hope it proves useful

@Dave Good point i have used Fireworks in the past, i just couldn’t find any good tutorials or techniques using Fireworks for wireframing which was a pity.

@DominusOminous Thanks for stopping by and commenting, i have to admit i hadn’t heard of The Brain before so thanks for linking that up to check out.

@Joel @grace Any mention of InDesign can not be made without highlighting Nathan Curtis of EightShapes and their Unify system for creating design deliverables.

http://unify.eightshapes.com/

The complete system will be available for download this weekend, and is using this week’s IA Summit as the launchpad. http://iasummit.org/2009/program/pre-con/components-organizing-design-documentation-for-better-user-experience/

@France I actually saw that this afternoon and thought what an awesome resource it was! Thanks again for reminding me and linking up both of those for others to check out.

Thanks for linking to our blog post on wireframes for web design. You have a great list of links put together here for others to use as a resource. Worth a bookmark for sure! Thanks again!

A great resource list Grace. I appreciate the time you took to piece it together. Wireframes have made my life much easier and I expect they will only continue to do so moving forward.

Between moves to agile development, grids and wireframing as integral parts of the web design/development process in the last few years I think our web design culture has only improved as a whole. I hope we keep this pace.

Again, kudos for sharing this. Definitely worth the time and attention to explore the list.

-BH

@France

Unify looks very interesting! I’m afraid the website is still a bit vague on what it actually is, but it definitely looks promising =)

I will be checking out their site (http://unify.eightshapes.com/) tomorrow!

Another online wireframe tool:
https://rapidrabb.it/

it also offers collaboration options as well as testing and commenting features. Its offered as a commercial service, but there is a free trial period and the pricing is based on one-month subscription (reduced rates if you choose 6 or 12 month plans)

You can meet the guys behind rapidrabb.it at the UXcamp in Berlin on May 23-24 and probably some other barcamps as well as IA and UX conferences.

Another wireframe tool missing from the list is WireframeSketcher:
http://wireframesketcher.com

It’s an Eclipse plugin for creating quick UI mockups and prototypes.

Wow… great list Grace. We’ve got a private beta running for http://creately.com – Online Diagramming & Designs. You can put together mockups, brainstorm on ideas collaboratively and share online with your team and customers. Would love your readers to give it a go and tell us how we can make it better.

Keep those resources coming!

@Aaron No problem, it was a great post on the process of wireframing, thanks for dropping by!

@Brandon The time it took was completely worth it, i’ve had great feedback and hopefully it proves useful to anyone not sure how to get started wireframing or prototyping. I completely agree agile development has been a major plus for the industry, allowing for quick deployment of websites and applications with minimal overhead, without wireframing i don’t think the process would work quite as well.

@Henning, @Peter and @Charan Thanks for linking up your apps, it always good to find other apps you weren’t aware of.

Great resources! Thanks.

Only getting around to reading this now. Great list of resources there Grace. Good work

Amazing list. Thank you for sharing. Great work!

Grace, great list of wireframing tools. And thanks for the shout-out of ProtoShare! Not sure if you’ve had a chance to try it yet, but since you created this post, we have released a new version that incorporates some rich Internet functionality to allow more interactivity during these early stages.

Something we have learned is that some people only need low-fidelity prototypes (or wireframes) to get internal feedback, but others need high-fidelity prototypes on complicated projects or with high-end clients to gain better understanding before building the site. It’s our goal to provide a tool that can accomplish both.

I look forward to future topics that you share!

Andrea

@Rod and @Eugenio Happy to share, glad you enjoyed the post.

@Lee Thanks for stopping by Lee, cheers for the compliment.

@Andrea Thanks for stopping by, i’m sure people will check out the new and improved Protoshare.

Good stuff! I have been getting more into the IA and wireframing of webdesign. great list.

DENIM: An Informal Tool For Early Stage Web Site and UI Design
http://dub.washington.edu:2007/denim/

I have recently collected a list of prototyping tools you may find interesting.

ForeUI (www.foreui.com) is a handy tool to create runnable wireframe.

Another online wireframe tool:
https://hello.hotgloo.com

Flickr has alot of wire framing sets too and surprisingly, there are also extremely creative sets. If there’s some time, anyone should check them out And yes, your right, thousands of sets there i assume

Wow! This is quite an awesome list! Thanks for making it up for us.

Also, I’m launching a wireframe to psd service: http://www.wireframetopsd.com
that converts anyones wireframe into a design psd ready to be coded.

Grace, great list of wireframing materials! We are conducting wireframing marathon on CIO Happy Hour, and it might fit into your list as well.

Hi Grace!

Nice overview about all that Wireframing stuff! Thanks!

But we miss our web-based Wireframing and Testing Suite here in that list::

http://www.pidoco.com

The interesting thing about our tool is, that you can create clickable wireframes, but also test them either by an expert review or a qualitative remote usability test (shared screen and phoneline).

We would appreciate to get feedback. Thanks!

Cheers – michael

Thanks for this list. I’ve only recently started using wireframing as my projects start to grow. Very useful, very time consuming. It’s sometimes difficult to budget in the time to create the wireframe when the client sees no real value in it, preferring to see ’something close to the real thing, please’.

Anybody got any ideas for how to get round this?

Just heard about a new online wireframing tool called Mockingbird (http://gomockingbird.com) from the Boagworld podcast (http://boagworld.com/podcast/192).

I tried Balsamiq but it seemed a bit limited, though I love the simple concept. I typically use OmniGraffle, and it’s great, but I often feel like I’m hammering in a nail with a wrench. Looking forward to trying out Mockingbird.