Best-practice discussion: How do you wireframe?
November 7th, 2008 by Jerome DahdahHi everyone! I’m just going to throw a question at you and hope this can turn into a good discussion that everyone will benefit from. Of course, this isn’t entirely altruistic: I myself am looking for some suggestions that will help with designing a complex CMS.
How do you go about wireframing a design beforehand?
Which apps do you use? What methods do you apply? Pencil on paper? Prototyping in Fireworks/Illustrator? Old-school table-cell copy&pasting in Dreamweaver? Or do you prefer to do a quick sketch and then jump right into Photoshop? Do you create complex work flow charts and study use-cases? Share your best practices!
Any good links you may have on the topic are appreciated as well.
parasight.de
November 7th, 2008 at 3:33 pm
I used to develop my wireframes in photoshop. Allegedly it is a lot easier. But this article really opened my eyes http://www.boxesandarrows.com/view/prototyping-with
November 7th, 2008 at 5:33 pm
I think it really depends on the scope of the project and how many people are involved. If its just me doing the coding I’ll usually just sketch out a quick outline of how I want it to function and the type of functions I’ll need to write.
That gives me a quick guide on where I am going.
If you’re working with other developers and graphic designers then you’re best off writing some use cases with detailed product requirements. I will use photoshop and omnigraffle quite often to make both of those things.
December 8th, 2008 at 4:43 pm
Hi! For big projects I prefer Axure. It´s professional!
http://www.axure.com
December 12th, 2008 at 8:13 am
Hi
Wire frame really provides the skeleton of the project.With the help of them we can increase the accuracy of the project. So it’s a tool which most recently should be used by designers and programmers.
http://www.marblehost.com
December 13th, 2008 at 9:56 pm
Nowadays I am using InDesign a lot – because I am using Adobe products on a daily basis and makes my workflow a lot smoother. Otherwise I would use OmniGraffle which is also a great program.
Other reasons InDesign is great:
-because you can work with pages & masters
-because it is also great with text, when handing off wireframes to designers or developers you might need to add quite a lot of text sometimes.
December 22nd, 2008 at 12:35 pm
omnigraffle rules.
December 23rd, 2008 at 9:50 pm
I prefer Axure too, its very simple to use!
;-)
January 19th, 2009 at 6:55 pm
Axure is very easy to use.
February 1st, 2009 at 1:58 pm
It always starts with pen and paper to rough out the quick ideas. It’s so much quicker to change stuff at this stage. Then I use OmniGraffle, which I still find to be one of the most well-design applications I have come across.
In the past have also used pretty much everything – Illustration (annoying), InDesign (pretty good), Photoshop (too laborious mostly) and, shock horror, even Word once when I had no other option. The Word case was, naturally, a teeth-pulling exercise.
You can set up Masters and templates in OmniGraffle too and there are some excellent stencils out there for various GUI elements.
February 2nd, 2009 at 3:31 pm
Thank you everyone for your comments, these are very good suggestions. Keep ’em coming!
February 15th, 2009 at 8:40 pm
My wife does everything in pencil and paper first then when she likes what she has she jumps onto photoshop to work out all the details.
February 23rd, 2009 at 10:01 pm
Axure is the best way to go about it in my opinion.
June 24th, 2009 at 11:44 pm
A lot of our customers start some ideas down on pen and paper first, but then create their wireframes within ProtoShare. The beauty about this is that they can keep the wireframes to simple gray boxes or get more elaborate and create a full-on prototype. Whenever you are ready to share the the wireframe or prototype with team members or clients, just invite them into your project and they can click through and leave comments as they go.
If collaborative prototyping might be a good fit for your work, we offer a free 30-day trial. Feel free to contact me with questions.
Andrea
July 2nd, 2009 at 6:55 pm
Andy has the right idea. For most projects: notecards, sketch, then detailed wireframe/spec. I have been a past proponent of InDesign. However, the fact that InDesign has no unit of pixel measurement can be very frustrating when trying to communicate pixel dimensions in layouts. I find Omnigraffle to be much faster and more accurate, especially when accompanied by one or two “high fidelity” Photoshop mocks. InDesign is a print tool, Omnigraffle was designed to diagram.
October 15th, 2009 at 6:24 pm
I ♥ HotGloo for wireframing