You just whipped up an awesome website design in Photoshop and are about to forward it to your developer. But wait: while you could do this, and risk that your design isn’t the most intuitive thing ever, you could also test it without having any past HTML or CSS experience with ClickThru. ClickThru is a Mac app that allows graphic designers to import test designs and create temporary splices. These splices then turn into buttons which make the test site functional. The designer can then test a design in the web browser before sending it off to a client.
Let’s take a look and see how helpful it can be in testing your designs.
ClickThru’s a fairly basic app, designed to let you import your images and turn them into a demo site. You’ll first need to add pages to your site by importing jpg, png, or gif files, then use the Compose mode to add buttons, links, and more to your design. Finally, you can preview your site mockup and see how it works together. It’s not that much harder than making a presentation in PowerPoint, and you can even turn your results into a real demo website.
There’s a handful of tools in ClickThru to help you make a demo site. The Button creator is the most important tool, as it’ll let you link parts of your design to other pages, so your design will act like a real site. Along with this, you’ll have a Region Select button, which allow you to select a section of your website design to load different content when you click a button. This tool is great to create, say, an image gallery or Twitter widget on your site. Then, there’s the drop-down option to let you make drop-down menus, which work as buttons to click through to other pages on your design.
Finally, there’s the Inspector button, which will open the settings dialog that lets you set the background color of your document as well as add a transition when navigating between pages. The Document Settings window will also allow you to manually insert buttons, regions and other content manually with coordinates, as well as modify on-click and target settings.
Linking Pages With ClickThru
Once you’ve created a few buttons, regions and a popup menu or two, you can start to link them together. While this may sound complicated, it’s actually quite easy in ClickThru as no code is required. To link a button to another page, simply click into the Select tool and hover over a button you added previously. You should see a small chain link button in the center of the selected region. Simply click on and drag this button to another page which you’ve imported into ClickThru. You can do the same when linking buttons to regions and more. It’s that simple.
Previewing Websites With ClickThru
Now that you have your design spliced and linked, it’s time to test it. You can try out the site in ClickThru’s own Preview mode, or export it as an HTML file and try it out in your browser. If you’ve made a demo mobile site, you can now try out the site directly on your mobile device and see how it feels. For desktop websites, the demo mode in ClickThru should be enough, but the HTML export is a great option to share your design with others.
All in all, I think ClickThru is the perfect tool for anyone who would like to quickly test their web designs before sending them off to a client. However, it’s important to keep in mind that even though the created prototype webpage may look and feel like a full website, it isn’t. ClickThru will not allow you to add text boxes or other content to your website, and your website is still basically just linked static images.
That’s why I recommend ClickThru to web designers who need to quickly test designs. At $9.99, it should kill most budgets, and you can try it out for free with ClickThruLite, which lets you create a mockup with up to 5 pages with no HTML export for free.