Rapid Prototyping Tools
Rapid prototyping is the ability to create a prototype, or a wireframe, quickly. There are a lot of different tools out there that can help you get started wireframing, and some of them are even free. Of course, you can always start your wireframes with some paper and a pencil, but these tools are to help you create a high-fidelity wireframe that's professional and presentable to your client.
Here are a few prototyping tools you might want to check out. There are a lot more available, however. This is just a small list to help you get started.
Also, your wireframes might be a little more difficult to update and make iterations on the fly since both software are so giant. If you'd like your client to see your work, you'll have to create PDFs or JPGs that they can see since you can't rely on all clients to have Photoshop or Illustrator on their systems. Also, these software make it impossible to create a clickable prototype unless you import them into something like Marvel.
However, if you already have Photoshop and have been using it for quite awhile with confidence, then using a tool like Marvel can really help sell your designs since you'll be able to show something other than a static comp.
When creating a first wireframe, you shouldn't worry about making everything absolutely perfect. Balsamiq says that they "really shine during the early stages of designing a new interface. Mockups offers the same speed and rough feel as sketching with a pencil, with the advantage of the digital medium. You can drag and drop or resize or rearrange without having to bring out your giant pink eraser or start all the way over.
According to Balsamiq's site, "Mockups intentionally make your wireframes scream both 'This is not final!' and 'I just threw this together,' eliciting honest feedback, which results in better wireframes, easier-to-use features, and happier users of your product."
If Balsamiq Mockups sounds like something that could solve some of your wireframing woes, then go ahead and sign up for a free 30-day trial. All the different versions have the same free trial.
The most popular option is Mockups 3 for Desktop which is an application that you'll install on your computer and is priced by user, not machine. Mockups 3 for Desktop starts at $89.
There's also an app version of Balsamiq called myBalsamiq. The app version is priced per project and starts at $12 a month for personal use.
You can drag and drop what are called "widgets" to customize your design. It's also possible to change the look of all widgets and save them for reuse. Items like headers and navigation will be available on all pages of your site, so you can save them as such.
You can try Macaw free for 30 days. They have two different prices, $179 for Professionals and $99 for Learners. They're working on the honor system and ask that professionals not use the Learners pricing. Macaw is available for Mac and PC.
Photoshop and Illustrator
A popular way for web designers to wireframe is in Photoshop and Illustrator. While both of these programs have a lot of diverse tools to create spectacular looking prototypes, they weren't created solely to make wireframes. You'll run into issues that you won't have if you're using something that was created with prototyping in mind.
Also, your wireframes might be a little more difficult to update and make iterations on the fly since both software are so giant. If you'd like your client to see your work, you'll have to create PDFs or JPGs that they can see since you can't rely on all clients to have Photoshop or Illustrator on their systems. Also, these software make it impossible to create a clickable prototype unless you import them into something like Marvel.
However, if you already have Photoshop and have been using it for quite awhile with confidence, then using a tool like Marvel can really help sell your designs since you'll be able to show something other than a static comp.
Balsamiq Mockups
Balsamiq is a paid app that's available as a desktop download or through the web app. What's great about Balsamiq is that you can use their UI library to add elements quickly. In something like Photoshop you'll have to actually create the square for a button and then add text to it. With Balsamiq, they've already created a bunch of buttons so you can just drag one to where you want it to be and then edit it.
When creating a first wireframe, you shouldn't worry about making everything absolutely perfect. Balsamiq says that they "really shine during the early stages of designing a new interface. Mockups offers the same speed and rough feel as sketching with a pencil, with the advantage of the digital medium. You can drag and drop or resize or rearrange without having to bring out your giant pink eraser or start all the way over.
According to Balsamiq's site, "Mockups intentionally make your wireframes scream both 'This is not final!' and 'I just threw this together,' eliciting honest feedback, which results in better wireframes, easier-to-use features, and happier users of your product."
If Balsamiq Mockups sounds like something that could solve some of your wireframing woes, then go ahead and sign up for a free 30-day trial. All the different versions have the same free trial.
The most popular option is Mockups 3 for Desktop which is an application that you'll install on your computer and is priced by user, not machine. Mockups 3 for Desktop starts at $89.
There's also an app version of Balsamiq called myBalsamiq. The app version is priced per project and starts at $12 a month for personal use.
Axure
If you're looking to spend money on a tool that has a lot of features, Axure might be for you. Axure is paid prototyping tool that starts at $289 per license. Axure also has a free trial available. Something that's great about a paid tool is that you'll be able to get support to help you troubleshoot issues from the company. Axure includes a cloud hosting system called axureShare so that you can upload your work and someone else can view it in any browser, which is helpful for sharing your ideas with your clients.
You can drag and drop what are called "widgets" to customize your design. It's also possible to change the look of all widgets and save them for reuse. Items like headers and navigation will be available on all pages of your site, so you can save them as such.
Macaw
I wanted to still include Macaw in this list, even though it's much more than just a prototyping tool. While Macaw may look like just an image editor, it has a higher functionality. The layouts that you create are turned into semantic HTML and CSS. Macaw has a layout engine called Stream, which, according to Macaw.com, "calculates all of the properties necessary (floats, clears, margins, etc) to place the elements into a static document flow just as a seasoned developer would." Alchemy is the name of the design-to-code engine that Macaw utilizes to, you guessed it, turn your designs into code. While it may seem like Macaw can replace development, you shouldn't let it do all of the work for you. Let Macaw help you, but still develop on your own.
You can try Macaw free for 30 days. They have two different prices, $179 for Professionals and $99 for Learners. They're working on the honor system and ask that professionals not use the Learners pricing. Macaw is available for Mac and PC.
