Ask questions via twitter! Message any question to @answers on twitter. We'll publish the question and send you a reply each time there's a new answer.
Next Question

Answered Question

 
M$10 December 15, 2008 05:35 PM

Best tools for designing web: 1) sitemaps, 2) wireframes, 3) flow charts (for interaction & software design)?

The answer is probably going to be more than one tool. I know this is a fuzzy topic, and there is not *one* answer because *it depends* on many variables. So this question is for your opinion/recommendation and rationale. Thanks!
Interesting Question?  Yes (0)   No (0)   
RSS
 
 

Best Answer  Chosen by Asker

 
December 15, 2008 06:17 PM
For very graphic, design-oriented sites, I recommend Adobe Illustrator (www.adobe.com/products/illustrator/), but you could do similar design using open source application Inkscape (www.inkscape.org).

For very functional (application) sites, I recommend Axure (www.axure.com) but a nice lower end wireframing tool is Balsamiq (www.balsamiq.com).
Source(s):
Personal experience.

Asker's Rating:
• Great answer initial answer and great follow-up, thank you! There were actually a number of great answers and helpful people on here, and I thank them all. I wish I could have picked a few winners and split the tip -- not to take away from toddwh50, but to share it with what I consider other Bests.


Helpful Answer?  (0)   (0)    Tip toddwh50 for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 01:10 PM
Thanks for answer. That http://inkscape.org is new to me. The http://axure.com looks interesting, but relatively expensive. The Balsamiq has been getting a lot of fluff on the Web. He sure did a great demo, but it seems more like it should be freeware or $10 or something, not $80. Cheers!

Report
 
 
 
December 16, 2008 01:33 PM
Although the Axure option is pricey, when I've used it in the past it paid for itself. It is able to take sitemaps and wireframes and make a clickable/navigable demonstration that makes it very easy to demonstrate. I used it in the past to get funding and to sell concepts to customers with great success. It easily paid for itself on the first use.

Report
 
 
 
December 17, 2008 11:50 AM
Thanks for that additional endorsement. Jut to make sure, you don't have any potential conflict of interest with Axure, do you? I'm sure you would have disclosed if you did, but this will just make it explicit for me and anyone else reading this thread. Thanks again. BTW, if you're ok with it, ping me at http://buzzpal.com/contact I would be interested to learn more about you, what you do, if there might be any potential project work now or in the future. Thanks, Chris

Report
 
 
 
December 17, 2008 05:05 PM
I have no affiliation with Axure, was just a user at a prior job with a business services company. We were developing a business system for processing of tax HR files and used Axure to help sell the idea.

Report
 
 
 
December 17, 2008 05:10 PM
Also, it's worth checking out the website http://www.boxesandarrows.com/ for more ideas.

Report
 
 
 
December 17, 2008 08:35 PM
Thanks for the additional info. It's funny you should mention http://boxesandarrows.com as I was actually on the site earlier today.

Well, I guess I better select a "Best Answer" now. It's kind of hard because you, msrocket, and most others, added a LOT of value. Thank you all :) I really can't figure out who to award the "Best Answer" to. Mahalo should have a way for the tip to be split. Oh well, here goes.

Thanks again for taking the time to read, think about, and answer my question.

Happy holidays!

Report
 
 

Other Answers (19)

Sort By
 
December 15, 2008 05:42 PM
I personally like Microsoft Visio, and I also use it for my database schemas in addition to flowcharts and sitemaps. For wireframes, I have always preferred receiving these from a presentation software like PowerPoint or Keynote. Of course, comps (compositions) are the best from Photoshop.

Helpful Answer?  (0)   (0)    Tip jdstraughan for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:35 AM
Thank you. Visio is one of the ones I hear mentioned most often.

Report
 
 
 
December 15, 2008 05:45 PM
Personally, I would argue that it's not necessarily the case that this requires multiple tools. Omnigraffle, software for Mac OS X by the Omni Group, does an excellent job at all 3 of those tasks. I like it because it's (a) quite flexible, (b) smart about connecting objects, (c) makes beautiful diagrams, and (d) is simpler than Illustrator, allowing you to focus on the content without getting too caught up in graphical details.

Helpful Answer?  (0)   (0)    Tip pricklypete for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:34 AM
I've heard a lot of good things about Omnigraffle. You're the first to mention it here. And to provide a rationale.

Report
 
 
 
December 15, 2008 05:53 PM
On Mac, 1) OmniGraffle 2) OmniGraffle 3) OmniGraffle. The Pro version has a lot of nice extras.

I would say if you do a lot of any of those, it may be worth your time to move to a Mac if you're not already on one.
Source(s):
http://www.omnigroup.com/applications/OmniGraffle/


Helpful Answer?  (0)   (0)    Tip codyf for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:37 AM
Thanks. I am in the process of switching to Mac and expect OmniGraffle will be one of the first apps I purchase. Also Adobe CS4.

Report
 
 
 
December 15, 2008 05:53 PM
Agreed. Microsoft Visio is a pretty straight forward, easy to use program. Also it's nice to be able and download templates as well actual pictures of the specific model Server, workstation, switch, etc. to import into Visio.

Helpful Answer?  (0)   (0)    Tip thatruejoker for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:36 AM
Thanks for the adding to the conversation by mentioning the template downloads. I assume the others offer similar downloads, plus I guess some individual ones people are sharing through their blogs, etc.

Report
 
 
 
December 15, 2008 05:58 PM
I prefer the stickies+whiteboard combination and i am not even joking. They come in multiple colors, already in squares, easy to move around, easy to show interaction.

M!
Source(s):
http://www.alistapart.com/articles/paperprototyping


Helpful Answer?  (0)   (0)    Tip verymickey for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:40 AM
Thank you. There's a lot to be said for pen/paper and/or whiteboard/marker. And if we need to share or store, I guess it's scan or take a picture. Interested to try http://evernote.com with that type of workflow (could get messy, though).

Report
 
 
 
December 15, 2008 06:01 PM
Microsoft Visio is good but it's not if you need one RIGHT NOW because you have to go get a license. It's a professional program and the learning curve isn't steep at all.


A free alternative is DIA http://dia-installer.de/index_en.html
(the installer is the first link to the exe file in the downloads section)
It can handle a wide spectrum of charts. I use it to make functional charts for my own personal projects.

You could use any graphics program but that's the same as using a piece of paper.

Helpful Answer?  (0)   (0)    Tip cygnus for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 11:43 AM
Thanks for the answer and link to DIA, which is new to me.

Report
 
 
 
December 15, 2008 06:33 PM
Hello,
Having much experience in this area, I am comfortable suggesting these items:

1. Sitemaps
If the intention is to let the customer create their a sitemap for you to integrate, they need to use their own tools. That means pen and paper most likely. If you are creating the sitemap based on sparse data you collected during requirements gathering, I suggest a simple collaborative document - Google word doc.

2. Wireframes
Assuming you are creating the wireframes, and they are collaborating on them with you, Google presenter is the top choice. Another professional option, which looks promising, but slightly bulky, is balsamiq.com . It's interesting enough for me to try an another project

3. Flow charts
Interaction design
Still my favorite way to collaborate on interaction design is mind-map (http://comapping.com/)
Software flow charts
If we are talking about software development charts (state diagram, use case, object and class diagrams and the like) Violet Uml is a neat tool. If you need more robust tools you should stick with Dia or Visio.

Good luck,
Adam Temple, Bixly.com
Source(s):
http://comapping.com/
http://bixly.com
http://docs.google.com
http://balsamiq.com


Helpful Answer?  (0)   (0)    Tip adambix for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 01:25 PM
Thanks, Adam. Nice answer. And some new tools to me: http://www.horstmann.com/violet/ looks especially interesting. So does http://www.comapping.com Also good to hear the endorsement of Google Docs and Presenter (have tried Docs, but not convinced, will try Presenter).

Report
 
 
 
December 15, 2008 06:38 PM
I like to keep things simple and use an Outliner like Omni Outliner to block out how things are going to work, I can also add notes and webclips to flesh things out.
Source(s):
http://www.omnigroup.com/applications/omnioutliner/


Helpful Answer?  (0)   (0)    Tip rslakinski for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 01:33 PM
Hi rslakinski, Thanks for your answer, that looks like a neat tool :)

Report
 
 
 
December 15, 2008 06:43 PM
As a free lance designer for nearly 10 years i still often use just notepad and Flash Professional (any edition) to make it pretty. I've also found a software dev. suite called ZendStudio-very nice piece, validates code, offers default variables and objects too.

For the 'non-coder', Microsoft offers a newer option called Web Expressions or there's always the old standby, Adobe Dreamweaver: nice too as it displays your HTML code as you go for detailed editing.

Google 'CSS web templates', 'flash templates', 'DHTML tutorials' and you'll be amazed at the wealth of information and pre-designed layouts you can use. They're like pre-built containers you just fill with your own custom content.

Good luck and Cheers!
BB
Cylink Studios

Helpful Answer?  (0)   (0)    Tip bbronstein5 for this answer
Permalink | Report
   Reply  
 
 
 
December 16, 2008 01:53 PM
Thanks for the answer :)

Report
 
 
 
December 15, 2008 06:48 PM
1. flowcharts and sitemaps- Microsoft Visio
2. wireframes -PowerPoint / Keynote. / Photoshop
3. Flow -charts- mind-map (http://comapping.com/)

Helpful Answer?  (0)   (0)    Tip kenford for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 08:45 PM
Thanks for your answer. That comapping looks nice, but it's a subscription service, which is a problem for me because I will not be anyone's recurring revenue! Best one-time-cost alternative?

Report
 
 
 
December 15, 2008 07:02 PM
This software rocks for UI Design. It's called "Balsamiq Mockups". Check out the video they've produced on creating an itunes interface.
Source(s):
http://www.balsamiq.com/


Helpful Answer?  (0)   (0)    Tip dotnetallday for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 11:49 AM
Thanks :)

Report
 
 
 
December 15, 2008 07:24 PM
Use Dreamweaver from Adobe ... it work great for me.

Helpful Answer?  (0)   (0)    Tip onlinejt for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 11:51 AM
Thanks. I'm thinking it might be great for HTML (text-only) wireframes. Wondering about how to communicate JavaScript and AJAX, though. With written notes, I guess. Cheers.

Report
 
 
 
December 15, 2008 07:34 PM
What is your platform? If you are going into Graphic Design, I suggest a MAC.
Adobe Creative Suite 4 contains most of the programs you want and work on Windows and Mac. It sounds like you need Fireworks or and or Dreamweaver.

There are some free things out there, but probably not worthwhile.
Source(s):
Personal experience


Helpful Answer?  (0)   (0)    Tip vicoa for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 11:56 AM
Thanks. I'm Windows, but I'm Mac curious. Expect will get a MacBook after Christmas. Will outfit it with some Adobe apps, which I've used before (novice).

Report
 
 
 
December 15, 2008 07:41 PM
After nearly 20 years in the GUI design business, there are several approaches to this answer. We have abandoned the PC for designing and use Macs in our studio. We design for the PC and have PC QA machines, but our team is not fond of the platform or the software as a design tool.

1) Sitemaps and Flowcharts: OmniGraffle - it's easy to use and very flexible and reasonably priced.

2) Wireframes: This is totally based on the UI designers preference. The two tools that are most popular with our team are Fireworks and Keynote. Fireworks makes very attractive wireframes. The use of frames and layers allows for building an entire app in one file. Templates are easily created too, which can be used to start new projects. Also, by creating the UI wireframes in Fireworks, the visual design team can easily begin their designs using the already defined screen structures and naming conventions. This saves time and helps with consistency. Keynote is used also used by some of our UI designers. It makes for very nice presentations of the UI wireframe designs to the client. It takes more time for the visual designers to translate the UI into their structure, but it is very fast and flexible.

Hope this was helpful!
Source(s):
Source was many, many, years of experience.


Helpful Answer?  (0)   (0)    Tip msrocket for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 12:02 PM
Thanks for your answer. I've been checking out the links below and Fireworks looks very robust, actually best suited for after rough and dirty work. Your answer has me curious. If you're ok with it, ping me at http://buzzpal.com/contact I would be interested to learn more about you, what you do, if there might be any potential project work now or in the future. Thanks, Chris

Some Fireworks links:

Adobe Fireworks Development Center
http://www.adobe.com/devnet/fireworks/

Adobe TV: Learn Fireworks CS4: Creating Interactive Prototypes for Reviews
http://tv.adobe.com/#vi+f1594v1015

Adobe TV: Fireworks Tips and Tricks: The Complete Design Process
http://tv.adobe.com/#vi+f1498v1658

Adobe TV: Fireworks Tips and Tricks: Information and Interaction Design
http://tv.adobe.com/#vi+f1498v1661

Adobe TV: Fireworks Tips and Tricks: Rapid Prototyping
http://tv.adobe.com/#vi+f1498v1659

FireworksZone.com
http://www.fireworkszone.com/

Some Other Links (thanks to those of you for submitting):

Comapping: An online mind mapping tool
http://www.comapping.com/

Violet: A free, easy, cross-platform UML editor
http://www.horstmann.com/violet/

OmniOutliner: A program for creating, collecting, and organizing information
http://www.omnigroup.com/applications/omnioutliner/

Report
 
 
 
December 15, 2008 08:17 PM
Microsoft Visio 2007. I use it all the time at work to make flow charts. It allows you to choose different industries and provides custom icons for your industry. It's a great tool

Helpful Answer?  (0)   (0)    Tip achristopher for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 12:02 PM
Thanks :)

Report
 
 
 
December 15, 2008 08:21 PM
1 - Dreamweaver
2 - XML sitemaps (dot) org
3 - Dreamweaver
4 - Dreamweaver

Helpful Answer?  (0)   (0)    Tip bpfrank80 for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 12:03 PM
Thanks :)

Report
 
 
 
December 15, 2008 09:03 PM
If you are going for quick and easy, Microsoft Visio is okay. If you want to design a great site that is not only functional, easy to navigate, and good looking then you need a new Macbook with IWeb.

Helpful Answer?  (0)   (0)    Tip logancale for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 12:02 PM
Thank you :)

Report
 
 
 
December 17, 2008 06:54 PM
If it is just a static web design, then you can start out with sitemap - how many pages the site will have, and how they will be structured. After which you can draw up wireframes - defining different elements for each page.

If it's a dynamic website that has database connectivity, then flowcharts are good for defining process flow (e.g member logs in -> goes directly inbox etc).

Check out this tool http://www.balsamiq.com

Helpful Answer?  (0)   (0)    Tip abdylas for this answer
Permalink | Report
   Reply  
 
 
 
December 17, 2008 09:31 PM
Personally, I use Adobe Illustrator for all of the above because it allows me a lot of flexibility and customization. Then I page them together with Acrobat. However, I'd imagine a similar ability with better pagination options with Adobe InDesign.

I've noticed that some people also tend toward Microsoft tools like Visio, but coming from a graphic design background Visio is not my preference.

Helpful Answer?  (0)   (0)    Tip au1981 for this answer
Permalink | Report
   Reply  
 
 

Answer this Question

How tips and payments work

This question has already been resolved. You may add an answer to it but you will not be eligible to win best answer or any associated tips.

Related Questions

No questions found.

Ask a Question


140 characters left
Top of Page
Buy Mahalo Dollars with Credit Card or PayPal

Top Members

This Week All Time
  • buddawiggi
    buddawiggi
    2nd Degree Black Belt
    26427 Points
    M$771.39 Earned
  • kty2777
    kty2777
    Purple Belt with a Brown Tip
    5138 Points
    M$193.66 Earned
  • opher
    opher
    Purple Belt
    3659 Points
    M$149.42 Earned
   See All
 

Most Popular Tags

mahalo(1549)
iphone(459)
music(453)
google(345)
food(307)
online(284)
beer(275)
money(261)
movies(247)
apple(247)
aotd(235)
health(210)
video(202)
free(201)
dog(200)
   See All
 

Categories

Welcome New Members


 
 
Mahalo Dollars are the currency of Mahalo Answers.

Each Mahalo Dollar costs $1.

Once you earn more than 40 Mahalo Dollars, you can request to be paid via PayPal. Each Mahalo Dollar is currently worth $0.75 when paid out via PayPal. Learn More

 
 

Please log in to use this function.