Using Fireworks to Create Website Wireframes

Fireworks just got better

Or at least my understanding of it did. I found some time this weekend to go through some old bookmarks I’ve been meaning to get back to. One was this video demo by Adobe’s Paul Dorian on using Fireworks not only to create website visual designs, but also to create wireframes. I’ve never used Fireworks for creating wireframes – and almost always use Visio. My process is a bit outdated at this point as I work almost exclusively in Photoshop for Web design. I then take the cut up (I don’t slice… I cut) images directly to Dreamweaver. Works for me. Keeping it “old school” I guess.

Unfortunately I don’t get much time to experiment with new design and IA approaches anymore. Not much time between meetings, status reports, analyzing budgets, client calls, etc. However, this video has peeked my interest in exploring Fireworks for creating wireframes. I’m inspired to revisit my approach on the next site design I get my hands on.

Video tutorial on using Adobe Fireworks for wireframes

Here’s my initial impressions on using Fireworks for website wireframes.

  • Master pages are a big step in the right direction. When I create wireframes in Visio I’ll generally use a series of cascading background files to display common page elements across the wireframes. I’m not sure that Fireworks’ master pages will be quite as robust – but they may.
  • Using the document library will replicate the way I use stencils in Visio. One of my favorite things about Visio is that I have a custom stencil library with common sitemap and wireframe elements that I use on every project.
  • Element scaling is really cool. I often run into issues working in Visio when one of my stencil elements distorts when the size is increased.
  • Paul shows how the wireframes can be easily exported to PDF. This is important to me because I always deliver wireframes to clients as PDFs.  Having a format that everyone can view and print uniformly is a big advantage.
  • The ability to add links on the wireframes that export to PDF is cool, but potentially problematic. “If one link is clickable, why aren’t they all?” “How do I know which links work without hovering over them all?” I can see the client confusion already.  But in reality these links within the PDF are a bonus but certainly not a necessity.
  • What’s lacking for me is a clear method to create notes and page details information. For examples here’s how I structure a wireframe page (pdf). I assume it’s possible to just create another section within the Fireworks page outside of the actual web page.
  • I also wish there was an easy way to tie the wireframes to a site map diagram.

Looking forward to testing out the process in Fireworks and reporting back. Is anyone else using this application for wireframes? What other software solutions are you using?

Follow Discussion

4 Responses to “Using Fireworks to Create Website Wireframes”

  1. Cristian Pascu

    Hey Glen,

    Have you every got the chance to try FlairBuilder? It seems to be doing most of what you ask from Fireworks. Documenting your wireframes is not possible with simple callouts, but will get much better soon. Site-maps are also on the way.

    Give it a try and let me know what you think.

    Cheers,
    Cristian

  2. Glen

    Christian – Thanks for the link. I hadn’t seen FlairBuilder before and I’ll definitely add it to my list to check out.

  3. Velma

    ……That is amazing…

  4. Giselle

    thanks for your post. Extremely helpful! I am now in the midst of using fireworks to create a wireframe for my website.

Leave a Reply