Review of 5 Website Wireframe Tools

I recently decided to review our website wireframing/prototyping techniques to see where we could be more efficient in getting from concept to code. We currently use Dreamweaver’s Site tool and/or Fireworks or Illustrator for mockups.

The follow survey highlights some new wireframing and mockup tools. My main criteria was having the tool export the wireframe to html so that we could upload to our own servers for testing and client review.


Their description: Drag and drop UI elements to the page, then rearrange and resize. Go from idea to mockup in minutes. Link multiple mockups together and preview them interactively to get a feel for the flow of your application. Share a link and your clients and teammates can edit with you in real time. No more emailing images back and forth.

Price: $9/month Basic to $99/month Expert plans.

Cons: does not export to actual html for a true click-through web schematic.


Their description: A GUI Design Software for clickable Wireframes. Fast and easy like Rapid Paper Prototyping, but completely web-based and with many more features. Advantages: Clickable Wireframes; Fast and easy Prototyping; Easy Remote Usability Testing; No Software Installation. Products & Features: Interface Prototyping; Prototype Reviewer; Remote Usability Tests; Realtime Collaboration.

Price: $9/month Personal to $85/month Unlimited plans.

Pros: has versioning. Online review tools with user commenting. Usability testing built in!

Cons: does not export to actual html to load a click-through web schematic to your own server or the client’s.


Their description: An Informal Tool For Early Stage Web Site and UI Design.

Price:  free

Pros: standalone program for desktop PCs. Exports as HTML.

Cons: does not look to be current (last mod date 2008). Uses our own handwriting to make the mockups.


Their description: The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Top features:  * Built-in stencils for diagraming and prototyping * Multi-page document with background page * Inter-page linkings! * On-screen text editing with rich-text supports  * Exporting to HTML, PNG, document, Word document and PDF. * Undo/redo supports * Installing user-defined stencils and templates * Standard drawing operations: aligning, z-ordering, scaling, rotating… * Cross-platforms * Adding external objects * Personal Collection * Clipart Browser * Object snapping * Sketchy Stencil

Price:  free

Pros: Firefox plugin and standalone program (via XULRunner, but not for Mac). Sketchy-like look and feel.  Exports site as HTML.

Cons: Unintuitive initial screens; hyperlink fields have no obvious URL field until a new “page” is created within the document. No site-wide export as HTML without arcane steps to install a so-called “template” of some kind. Not ready for prime time.

Wireframe Sketcher

Their description: WireframeSketcher is a software tool that helps you quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a plugin for your Eclipse-based IDE and a standalone application. * Create wireframes and mockups * Get quality feedback fast * Build better software * All using your favorite Eclipse IDE * 45+ built-in UI controls * rough, unfinished, hand-drawn look for your mockups

Price: Trial (watermark on exports), $75 one-time buy.

Pros: standalone program and plug-in for many IDEs. Very cool sketch look. Nice toolset.

Cons: No HTML export. Complicated to begin; following the tutorial is essential.

How to speed up your website

We discovered a useful social media website called Store Crowd

From their description: StoreCrowd is a Social Engine for sharing your favorite deals. Built lovingly in Melbourne, Australia we are trying to change the way people share great bargains with friends.

See what steps they took to minimize page load time… advanced strategies like:

Speed up the Application / Server

  • Use Fragment Caching on elements that change less frequently
  • Memcache & CacheMoney
  • MYSQL Indexes & Query Optimization
  • Dedicated Database Servers

Reduce Number of Queries

  • Combine Javascript & CSS into a single file & minimize
  • Use CSS Sprites

Reduce the load time elements

  • Make sure Gzip is Enabled on your Server
  • Move 3rd party scripts to the bottom of the page
  • Move all static content to a CDN
  • Compress all images with Smusher


Google Browser Size Lab

Google has a helpful tool to visualize what different visitors to your site see in their particular choice of browser. From Google’s project About page:

Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the “90%” contour means that 90% of people visiting Google have their browser window open to at least this size or larger. This is useful for ensuring that important parts of a page’s user interface are visible by a wide audience.

Check it out!

Why HTML5 can’t replace Flash

The best analysis for why HTML5 can’t replace Flash – Apple is being “disruptive” in the worst way.

HTML5 Vs. Flash. What You Haven’t Heard — a guest post by Carlos Nazareno, an interactive media artist… in sum, “HTML5 is just as bad, if not worse than Flash.”

And besides, just use CloudBrowse, an app for your smartphone that browses for you.

Why HTML 5 is not a Flash Killer

Why HTML 5 is not a Flash Killer… or, said another way, why Flash is not going to die.

If you’ve been wondering if Adobe’s multimedia format Flash is in jeopardy (more importantly, whether you should still use it on your website) because of the lack of support from Apple (on the iPhone and iPad), read this good Wired article.

HTML 5’s video embed capability is not ready to replace the Flash swf format. More reading here.

HTML 5 vs Flash — the Shoot-out

HTML 5 vs Flash — the Shoot-out

Readwriteweb talks about how Flash and HTML5 both have performance issues in browsers (mobile and desktop); so why then is Apple so deadset against Flash on the iphone? It frankly annoys us to death here.

Jan Ozer is an expert in video encoding technologies, has worked in digital video since 1990 and is the author of 13 books related to the subject. Recently, he put HTML5 up against Flash in a series of tests that pitted the two technologies against each other on both the Mac and PC and in different web browsers including Internet Explorer 8, Google Chrome, Apple Safari and Mozilla Firefox.