I am currently in the development phase of a project. In the past I have relied on a pen and paper to initially map out and design a site. What are some of my other options? I am looking for something that is easy to use, focused more on functionality than design.
Tell me more
×
Answers OnStartups is a question and answer site for
entrepreneurs looking to start or run a new business. It's 100% free, no registration required.
|
Balsamiq Mockups! It was built exactly for this. http://balsamiq.com Also they are a cool startup. Bonus. |
|||
|
|
Balsamiq or SketchFlow might be an answer. Anyway, paper and pen are still efficient ! |
|||
|
|
|
Balsamiq is great as listed in a lot of posts. I also love to use OmniGraffle Professional with stencils from Graffletopia. |
|||
|
Another option is to use Mockingbird. It lets you layout the pages and have usable links between them. I haven't used it extensively but so far I've been happy with it. |
|||
|
|
|
It may be overkill, but what about trying something like Adobe Flex? Its great because you can publish it easily to share others and bounce ideas, without having to deal with any cross browser issues html might provide. Also you can add basic functionality to switch between views/forms/etc to really get that flow you are looking for. I typically use html/css or Flex myself. Find both of these provide me with the best prototyping environment since it is closest to my final product. Using Photoshop is just plain wrong for my style. |
|||
|
|
|
Personally I still prefer a moleskine and if I'm feeling ultra-agile directly jumping to Fireworks/Photoshop but as Jason pointed out balsamiq got a full package for that and everyone loves them. (there must be a good reason for that) |
|||
|
|
I saw a really interesting talk by Ryan Singer last month that covered some aspects about how he deals with mockups (in particular how important information design is vs visual design, and what point you should jump to HTML). Recommended. http://37signals.com/svn/posts/1952-i-gave-a-talk-on-ui-fundamentals-for-programmers |
|||
|
|
|
I start with a sharpie and a blank page of page. My hand drawn mockups are usually pretty simple (I try to keep my websites simple in design). I then send the mockup to my outside designer who creates a graphical mock-up. Then we trade it back and forth before settling on the layout/design of the webpage. The homepage mockup also lays out the navigation to be used throuhout the website. After I mockup the homepage the other mockups just focus on what's between the header and footer of each one. |
|||
|
|
|
I start with a few color pens and a notepad, head over to the local brewery and have what I call a "design session." :-) If I'm working with someone else I take them along too. By the second beer all the really terrible ideas have been sketched out and now it's down to the merely bad ones... Once done with the basic organization and sketches I transcribe them into Omnigraffle, Balsamiq, or more often than not Curio (a note-keeping/diagramming/mind-mapping app). There's also Oversite which I find more useful for shaking out problems with workflow and navigation between pages. On the PC side I've seen people say good thing about Visio and Axure. |
|||
|
|
|
iPlotz is pretty cool software for easily wire-framing and brainstorming websites (also supports iPhone apps). I'm not affiliated with them, but have enjoyed using their program. It's for really basic sketches though, you'd still need a designer to add some life to it. I also really like the free program XMind for brainstorming and keeping track of feature ideas. Hope this helps! |
|||
|
|
|
The tool you use is directly related to who will consume the information, and what sort of feedback you're looking for. Is it for yourself, to make your mind up? A sketch on paper might be ok, I find that mockup apps make you overtweak and lose focus. If the mockup is intended for getting feedback on an idea, keep in mind that the feedback often tends to go into the detail that you have put into it. If all you have is boxes and squiggles that's what the feedback will be about, if you have full color and fonts you might get feedback on the shade of blue or the font serifs, which might not be what you're looking for. So with that in mind, if you are good and tidy enough at hand drawing sketches I'd still go that route, otherwise something tool like Balsamiq might be best. Finally if the mockup is intended for implementation, you have already made your mind up and want it to be executed, you probably need something pixel perfect, so you have to go with an app that lets you build pixel perfect designs such as photoshop, fireworks, pixelmator, etc. |
|||
|
|
|
If you use Firefox, there is a handy plug-in: Pencil Project that allows you to draw-up screens, dialogs, etc. Hope that helps. |
|||
|
|
|
I recommend Adobe Flex. It has a very quick learning curve if you want a basic static mockup, but it also makes it incredibly easy to drive some data-driven functionality. If you get the Flex Builder (free for students btw), you can edit css of individual components in WYSIWIG. If your mock-up ends up being satisfactory, you can take and turn it into a full-fledged app. |
|||
|
|
|
Checkout DesignerVista 3.0 Software for both High-Fidelity and Low-Fidelity GUI Mockups of Desktop, Websites, Office Ribbon Style Applications. |
|||
|
|
|
I like http://balsamiq.com as well. Easy to learn and use if not design oriented. |
|||
|
|
|
Pidoco.com is another player with an easy-to-use interface and is based in Germany. |
|||
|
|
