Create Interactive Prototypes With Adobe Fireworks

Advertisement

Whilst designing for screens—including Web, mobile and rich interaction applications1 (RIAs)—you often need to create a prototype to see whether the application works properly before moving onto the development stage.

Prototypes are also essential in Web projects. For example, when you plan an online ordering process, you have to be sure that every step is correct and that no critical elements are missing. Usually, you would create different screens for all pages of a website, ordering process or application workflow, and then describe the connection between them. This way you can see whether the interactions work as expected, you can test the product with different users, and your client can review it.

However, a static prototype is much harder to review and test—usually it is just a bunch of images (with some explanatory notes here and there), and grasping the connection between them may be hard. Why not make things more dynamic, and easier for the client, with the help of Adobe Fireworks?

What Is A Prototype, And Why Should I Use One?

“A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” — Wikipedia2

Using an interactive prototype brings a lot of benefits. The main benefit is that you are able to easily find errors in the interaction flow or the user interface (UI) at a very early stage, before development has even started. Your client can also provide detailed feedback early in the design process. The client will get a functioning demo with many interactions displayed right on the screen, instead of a collection of images with no interaction.

To learn more about the advantages of prototyping, have a look at “Design Better and Faster With Rapid Prototyping313” on Smashing Magazine. A couple of interesting articles have also been published on Boxes and Arrows: “Integrating Prototyping Into Your Design Process324,” and “Defining Feature Sets Through Prototyping335.”

What Is A Click-Through Prototype?

A click-through prototype is an interactive mockup of a website or application that allows you to click through different pages and states and is packed with key interactions.

HTML Prototypes

Creating such a prototype in Adobe Fireworks is very easy. All you have to do is prepare the design for exporting as an interactive prototype: create slices for all interactive areas on the screen, and make pages for all of the different states of the application. Slices can also have hover states and be linked to the various pages. At the end you will create a click-through prototype (also known as an interactive prototype or click-through dummy) by selecting “Export as HTML & Images” in Fireworks. The exported HTML files can be viewed locally in the browser or uploaded to a Web server for reviewing and testing.

Fireworks Web Prototype6
Web prototype exported from Adobe Fireworks.

(Interactive) PDF Files

Another option is “Export as Adobe PDF.” The difference here is that interactive PDFs have a somewhat reduced feature set: rollovers won’t work, and only rectangular hotspots will export with their links. The advantage is that you can email the PDF to the client, who can then easily give feedback using the comment tools in Acrobat or Adobe Reader. Keep in mind, though, that Fireworks does not generate a comment-enabled PDF file; you must open the PDF in Acrobat Pro, enable commenting, and then save the PDF before sending it to the client. (Enabling commenting in Acrobat Pro makes it possible for anyone with the free Acrobat Reader to add comments.) Of course, if Acrobat Pro is not an option, then feedback can be provided in any of the usual ways, such as email.

In my opinion, HTML prototypes are a better option. In this article we will show how effective this kind of workflow is in Fireworks. But before diving in, let’s quickly review the main benefits that the “live” prototyping phase brings to a project.

Advantages Of Prototyping

  • Get feedback at a very early stage.
  • Increase the effectiveness of your communication. Get more detailed client feedback.
  • The prototype can be used for usability and A/B testing7.
  • Find errors early on. Fewer mistakes are made later in the development process.
  • Find errors in the interaction flow or UI before development has begun.
  • The exported graphics from the prototype can be used for development.
  • The developer or team will understand what needs to be done without needing detailed explanation.
  • Overall development time will be decreased.
  • Minimize the need for development changes
  • Your client will be impressed.

How To Impress Your Client

If your client is working with a Web designer or team for the first time, he might not be so impressed by having access to a click-through prototype early in the design process, because he wouldn’t know any different. But if they have gone through the process in the past, then they will probably be very impressed by seeing a live preview of the website right on the screen, with a lot of interaction, instead of a simple static preview or collection of image files.

Personally, I have used click-through prototypes from Adobe Fireworks for over 10 years, with much success and enthusiasm from my clients.

Every client who had experience with Web design was impressed with seeing a working prototype of the website right in the browser. My clients always appreciate this, and once your clients have used one, they will prefer to work that way, too.

A word of warning, though. Be clear that this is just a prototype and that it has yet to be developed into a real application, which will happen once the prototype is approved. Otherwise, the client might expect a functioning website to appear simply by you copying the prototype to the root folder of their domain.

How To Create Click-Through Prototypes In Fireworks

The click-through prototype that Fireworks creates consists of simple HTML files (i.e. HTML with tables and images). But this is not important because the prototype is used only in the early stages of the design process. Once the prototype has been approved and tested by the client, you can continue to the development phase of the website, with semantic HTML and CSS. Fireworks is helpful only for transferring the design to the development stage.

What are the key elements of an interactive prototype? Basically, a prototype consists of pages (and, optionally, a master page), states, slices and hotspots. Let’s review each in more detail.

Pages and Master Pages

To create a click-through prototype, you first need to set up multiple pages in your document. Every state of an application or every page of a website will need a separate page in Fireworks. To create an individual page, you can use the Pages panel. When all pages in a design share common elements—such as a header, logo and main navigation—you can use a master page.

In our example website, we will need six pages (home, products, shop, shop detail, support and contact). They will all have the same header area, with a logo, image and navigation, so creating a master page makes sense. To do so, create a page with only those elements on it, and then (just as in InDesign), right-click on the page in the Pages panel, and select “Set as Master Page,” Alternatively, you can use the options menu on the right side of the Pages panel. Now, every element that is placed on the master page will automatically appear on all pages, which will save us a lot of development time.

Fireworks Set as a Master Page8
Set a master page in Fireworks.

Based on the master page, we can now build all of the pages. Go to the Pages panel and click on the new page icon several times until you have six pages (plus the master page). Then give each a meaningful name. The home page should be named index in the Pages panel, and “Shop Detail” can be shop_detail.

Fireworks Pages Panel9
The Pages panel in Fireworks.

When it comes to exporting, Fireworks will automatically name these two pages index.html and shop_detail.html. Now, we can fill each of the six pages with its unique design elements (i.e. not the common elements, which will go in the master page).

All pages created in the Pages panel can later be linked to each other via hotspots and slices (more on that later).

Please note: All elements on the master page will appear in the same locations across all of the individual pages and cannot be moved on a page-by-page basis. So, if one page needs to be different than the master page, you will have to overlay the new elements on the master page’s elements, or use another Fireworks file.

States

To give the client more interactive feedback, you might also want to create hover states for the navigation elements. To do so, open up the States panel, and add a new state by clicking “New/Duplicate State.” If you are using a master page, you can create the second state right on the master page (thus saving a few clicks), and then it will be used on the individual pages. Now in the new state, you only need to place the elements that should change on hover, such as the navigation, links, drop-down menus, tooltips and so on.

Fireworks States panel10
The States panel in Fireworks

To show a hover effect for a navigation element, you simply need to place the graphic for the hover effect in this second state. You can change the color of the navigation background or a drop-shadow applied to a text object. All of these would change on hover in the second state (the hover state) in the States panel.

Please note: Fireworks does not use CSS :hover pseudo-classes. Instead, it uses JavaScript to swap the images in the prototype (a traditional JavaScript-based rollover or mouseover). This JavaScript behavior is rather old and should be used only during the rapid prototyping phase. During the development stage, it should be done with CSS pseudo-classes.

Fireworks Add States11
The “Add States” option in the States panel

After all hover states have been created, you can reuse them for all pages. If you have a master page, you only have to create a second state for all pages by right-clicking on the States panel, or by clicking “Add States” in the options menu to the right of the panel.

The new state will automatically include all hover elements from the second state of the master page. If you don’t have a master page, you’ll have to copy and paste all hover elements to the second state on all individual pages.

With slices, you are able to define the regions that should change on hover.

Please note: When multiple states are used on the master page for rollovers and image swaps, you need to manually add additional states to all of the other pages.

Slices and Hotspots

Slices in Adobe Fireworks12
Slices in Adobe Fireworks

Slices can be used to define regions that are interactive and that will be linked to different pages on the same website or that even point to external URLs. Hotspots can only be used to generate areas for hyperlinks (internal or external).

Create Slices in Fireworks13
Create Slices in Fireworks

To make a hover state, select the Slice tool (step 1 in the image above), and then outline the whole area of the hover element (step 2).

You can also create a slice by selecting an object on the canvas, right-clicking and choosing “Insert Rectangular Slice.” This is often easier, faster and more accurate than using the Slice tool. If you select multiple objects, right-click and then insert a slice, Fireworks will show a dialog box with the option to insert multiple slices (one for each object) or one big slice that covers all of the selected objects.

After you have defined all of the areas, you can use the target in the middle of each slice to create the hover effect (step 3). To do so, click and drag out the target in the middle of the slice back into the same slice. In most cases, it will be the same location, so it has to be pointed to the same slice (step 4). If you want to show another image on hover, then the target must point to the slice with the image; but in the most cases it will be pointed to itself. Then Fireworks will ask you which state to choose for the image swap (step 5). Here is where you would pick the state with the hover image (for example, “State2”).

Preview in Adobe Fireworks14
Preview the design in Adobe Fireworks

After repeating this step for all hover areas, you can look at the result by clicking the “Preview” button in the top-left of the Fireworks PNG document.

For hover elements that appear on every single page, such as the main navigation, you can save time by creating the slices in the master page.

To help you, Fireworks provides some visual associations for slices (green) and hotspots (blue); and the Property Inspector panel (or Properties panel) will also show the slice or hotspot type. Standard slices and hotspots are semi-transparent, but HTML slices are opaque. You can also assign custom colors to slices and hotspots—useful if you want to differentiate the types of code that have been placed in them (HTML, JavaScript, embedded Flash objects and so on).

Please note: When using states for rollovers, copying or sharing background elements to the other states is sometimes necessary, otherwise blank areas might appear on rollover. For example, if a slice is larger than the object that will change on rollover, then the background behind the object will also need to appear in the rollover state (state 2). I recommend using “Share to states” for elements that will be the same in all states to maintain a consistent appearance during rollovers (or on hover). “Share to states” is accessible in the Layers panel (right-click on the layer that needs to be shared to the mouseover state).

Linking Pages

Now that all interactive elements have slices, the pages can be linked to each other. To generate hyperlinks, you would typically click on a slice (or on a hotspot, if no hover effect is needed) and enter a URL in the “Link” field in the Properties panel. For an external URL, you would enter, for example, http://www.google.com; for an internal link, you have to enter the name of the page from the Pages panel. All page names from the Pages panel are also available in the drop-down menu there, which prevents typos.

Linking Pages in Fireworks15
Linking pages in Fireworks

The names of the pages in the Pages panel should be Web-friendly (i.e. no spaces or special characters). You can check out the demo prototype you have just created, with all of the hyperlinks and interactive areas, by clicking on File → Preview in Browser → Preview All Pages.

Add Real Interactivity To Your Prototype

Many Fireworks users do not know about HTML slices. For every slice, there are three different options in the Properties panel (foreground image, background image and HTML). With foreground and background image, you can specify the exporting mode for images if you are exporting HTML and CSS out of Fireworks.

Fireworks Slice Types16
Slice types in Fireworks

For click-through prototypes, which are based on HTML and images, the default “Foreground image” option works best. If you want to place different types of interaction in your prototype, the HTML slice is a good choice. You can place any HTML code in an HTML slice, which is very efficient if some elements already exist, such as interactions. Thanks to HTML slices, you can easily insert Google Maps, videos, animations and so on right in the prototype to show the client how the elements will function.

Embed Google Maps

What if we wanted the “Contact” page to have an embedded Google Map? You don’t need to take a screenshot of a map area to indicate the presence of Google Maps. In Fireworks, you can place the actual map itself right in the prototype.

Use of HTML Slices17
Using HTML slices in Fireworks

To do so, select the Slice tool (step 1 above), and draw a slice over the area where you want to show the map (step 2). Next, change the type to “HTML” in the Properties panel (step 3). Now an “Edit” button will be available (step 4) that opens up a dialog box where you can paste the HTML code into the slice (step 5).

Next, go to Google Maps18, locate the client’s office on the map, copy the iframe HTML code for embedding, and then paste it into the HTML slice.

Fireworks HTML Slice19
The HTML slice in Fireworks

The width and height of the iframe should have the same pixel dimensions as the slice. Review the embedded map in the prototype by going to File → Preview in Browser → Preview in…

Fireworks Google Maps Include20
Embedded Google Map in the Fireworks prototype

See an example of Google Maps21 embedded in a prototype of a website made with Fireworks.

Embed Video

Video can be easily embedded in the prototype, similar to maps. Go to the video that you want to embed (whether on YouTube, Vimeo, etc), and copy the embed code of the video. To see a live preview of the video, go again to File → Preview in Browser → Preview in…

Please note: The embed code will set the width and height of the video. The HTML slice in Fireworks should have the exact same dimensions in order to keep the proportions correct.

Embed Flash Animation And More

With an iframe, you can embed everything in a live prototype. Just place the element you want to embed in an iframe, and paste the code in the HTML slice. So even Flash animation, video and other elements stored on your own Web server can be easily embedded.

Of course, HTML slices are not limited to Google Maps and Flash video. Anything that can be wrapped in an iframe can be put in an HTML slice, including JavaScript and AJAX elements, JavaScript animation, HTML5 and CSS3 animations and much more. For example, with Adobe Edge22, you can create animation and interactivity based on HTML5, CSS3 and JavaScript. Even Adobe Edge animations and interactions can be included in a Fireworks prototype. Alternatively, you could make your own HTML5 and CSS3 animation, and paste the code directly in the HTML slice. So many possibilities!

Export The Click-Through HTML Prototype For Review

The final step of the process is to export the prototype for review. Before doing this, you can do a quick preview in the browser to make sure everything works as expected; go to File → Preview in Browser → Preview all Pages in Browser. Remember to select “Preview all Pages…”; if you select “Preview in…,” you will only see a preview of the actual page, and the links to other pages will not work. If you choose “Preview all Pages…,” you will be able to see all pages, with all interactions and internal links working.

Fireworks Preview in Browser23
Fireworks preview in the browser

Try everything out before exporting the live prototype. If everything is functioning properly, you can then export the click-through prototype by going to File → Export…. In the dialogue box, select “HTML & Images,” “Export Slices,” “All Pages,” “Include Areas Without Slices” and “Images in Subfolder.“

Fireworks Export24
Options for exporting your prototype in Fireworks

A Couple Of Live Demos

See an example of a prototype25 with very basic interactions—such as mouseover states, linked pages and an embedded Google Map—exported right away from a Fireworks PNG file. (Feel free to explore the pages and available interactivity.)

Another method is to export an interactive PDF by going to File → Export… and selecting “Adobe PDF” as the exporting format. The PDF can then be sent to the client, who will be able to review the website and interactions offline and then provide you with feedback. See also an example of an interactive PDF26 (an HTML live prototype is a more elegant solution, but it’s good to know that there are other options).

A Word On The New Mobile Web And Fireworks

While preparing interactive prototypes with Adobe Fireworks can be fast and easy, they are not responsive or adapted specifically to the modern mobile environment. Luckily, the Export Responsive Prototypes with Adobe Fireworks27 extension by Matt Stow28 and Touch Application Prototypes (TAP) for Adobe Fireworks29, are here to help! Both extensions are free and will help you build responsive Web prototypes or iOS prototypes in Fireworks with greater ease.

Acting On Client Feedback

Finally, what do you do when the client provides feedback on the prototype and the interactions?

In Fireworks, acting on the client’s feedback is very easy. All you have to do is to make some adjustments to the design (based on the client’s notes and comments), re-export a new version of the prototype for review, and upload it to a test server. The whole process can be done in minutes, and you can make as many design changes and iterations as needed.

Fireworks fits perfectly in the workflow of a Web or mobile app designer. You can do the whole design in Fireworks, or you can import artwork from Photoshop or Illustrator and continue in Fireworks. The layout for all of the pages of the website can be easily created with the Pages panel, in combination with the master page feature. To add interactivity, you can set all of the different states of the website, with the help of the States panel. This whole process is fast because Fireworks is optimized for this type of workflow. Slices and hotspots enable you to link all pages to each other with ease.

Both the designer and client benefit from an interactive prototype. While preparing an interactive prototype certainly takes some time, it will more than pay off during the development process.

Further Reading

(al) (mb)

↑ Back to topShare on Twitter

André is a web designer, and he and his team are doing everything that is interactive: web development, search engine optimization and mobile apps design. André starts all his designs in his favorite tool – Fireworks. His own agency works for both small and big companies and often collaborates with other agencies.

  1. 1

    Excellent article, I rarely use Fireworks for prototypes but after reading your tips I’ll definitely give it a shot. Thanks!

    0
  2. 2

    Great Tip for prototyping sites.
    One question about using Fireworks: Can you use different height of pages in the template? For example, homepage and contact page heights can be in different. Can you set pages separately?

    Thanks for the article!

    0
    • 3

      Yes, you can set different page sizes in fireworks.

      0
    • 4

      You set the master page height to the maximum height, and the child pages to the height you wish them to have, and it will just cut off the bottom of the page in the child viewport.

      0
  3. 5

    Thanks for sharing a very informative and great article in prototyping using Adobe Fireworks.

    0
  4. 6

    Nice article!

    We need more Fireworks articles and tutorials =D

    0
  5. 7

    And slowly but surely web designers will realise why they should stop using Photoshop for anything other than editing images.

    0
  6. 8

    Stefan Hiienurm

    June 25, 2012 4:47 pm

    As a big Adobe Fireworks fan i glad to see that Smashing Magazine shares FW tips and tricks. Keep up the category!

    0
  7. 9

    J Cole Morrison

    June 25, 2012 7:06 pm

    Awesome awesome awesome! I have used Fireworks forever but I’ve never dabbled in the live prototype creation. This article has just convinced me to quit using the Invision App. It may be a bit complicated but the prototyping potential is AWESOME. Thanks for the share!

    -J Cole Morrison

    0
    • 10

      Michel Bozgounov

      June 25, 2012 11:18 pm

      I’ve heard some good things about prototyping with the InVision app as well, you can combine Fireworks and InVision into one workflow… So you can continue to use both apps, if you’re comfortable with them. (In fact, we even considered preparing a tutorial about prototyping with InVision and Fireworks… still pondering about this idea!)

      But the advantage of using Fireworks for both the (live) prototyping phase and the design phase in your projects is that you can do everything in one program (could potentially save you some time)… So you may try this workflow as well — and if you have any questions, I am sure André would be happy to answer them here! :)

      0
  8. 11

    Why would you prototype in Fireworks when you can rapidly build prototypes in the browser nowadays.

    0
    • 12

      Michel Bozgounov

      June 26, 2012 10:17 am

      No, you can’t. And not only I think so — Andy Budd recently said the same thing: Designing (and prototyping) in the browser is not the answer.

      Prototyping should be fast and easy. You can throw away the prototype later, as well as the prototype code (and it doesn’t matter how the code looked — you’ll write your own, clean and semantic code later, anyway, when the development stage begins). Fireworks can help you make a live prototype easily, and not only this — it can help you with the design a well. :)

      0
  9. 13

    I love Fireworks! It’s such underrated tool. I use it for mock-ups aswell as complete designs. Glad to see more articles about it on SmashingMag.

    0
    • 14

      Really cool to see more articles about Fireworks. I agree with @Marlou: it’s still seen as “such underrated tool”.

      BTW:

      Cheers to Smashing Magazine!

      0
  10. 15

    “Overall development time will be decreased.”

    ^^^ This supposed benefit of prototyping is a landmine. Development time MAY be decreased but you can’t count on it. Sometimes the prototype informs how not to build the production version more than anything else. You should gain valuable knowledge that will help you during your real build but don’t count on code reuse. Prototype code is usually dirty and experimental by nature.

    0
    • 16

      Andre Reinegger

      June 26, 2012 3:53 am

      Hi Toby,
      that is correct! But the code has nothing to do here in the prototyping process.
      It is just about creating interactive prototypes, which decrease the overall development time (in the design process) by helping the client to see exactly what he will get.

      In the development of the code, Fireworks is also very helpful, because of the new CSS-properties panel (my favorite feature in the whole CS6). It makes it easy to create correct CSS rules of all elements, with all it’s CSS3 extensions. Older versions of Fireworks could use a similar extension to export very good quality CSS http://www.mattstow.com/css-professionalzr.html

      0
      • 17

        Andre,

        So what do you mean by “development” when you say this:

        “Whilst designing for screens—including Web, mobile and rich interaction applications (RIAs)—you often need to create a prototype to see whether the application works properly before moving onto the development stage.”

        To me this means software development i.e. coding.

        0
        • 18

          Michel Bozgounov

          June 26, 2012 10:10 am

          Let me chime in a bit… :)

          To me this means software development, i.e. coding.

          — Perhaps you did not understand the whole workflow with Fireworks? There is no coding throughout this process. Fireworks creates the design prototype and exports it. You don’t have to write any code. You don’t have to tweak any code. That’s the beauty of it — just make the prototype and export it and then show it to your client. Later, the prototype you’ve just made, can be transitioned into a full-featured design and then the development stage (i.e. coding) can be started.

          Yes, you can make a great static design in any tool (for example, Photoshop) and then create the prototype in another tool (Keynote, or InVision, etc.), but Fw is probably the only graphic design tool that can handle so well both the prototyping and design phases for any projects, and so save you a lot of precious time. And, there’s no coding involved.

          André, anything that I may have missed in my short explanation?… :)

          0
          • 19

            Andre Reinegger

            June 28, 2012 3:45 am

            Thanks Michel, you made it very clear!

            Coding comes in a later step when the client give us the “GO!”, after he has experienced the prototype. And even during the coding stage Fireworks can be very helpful thanks to the new CSS Properties Panel!

            0
  11. 20

    Actually Keynote is the best thing for prototypes and wire-framing. I use Keynote for practically everything XD You guys should probably look up the Keynote Ninja and watch some of those videos-Keynote is powerful, it’s fast and has a really small footprint + you can use the masters option to make multiples, it’s got bezier drawing tools and and perfect guides. And for a student like me-it’s cheap. Love it.

    0
  12. 21

    How i will show the active state? I want to show the same hover effect on Products page when i will be on Products page.

    0
    • 22

      Andre Reinegger

      June 26, 2012 7:31 am

      Hi Samir,
      only hover states are possible in the master page and the normal states panel.
      If you want to create active states there are two ways:
      1) You create a graphic for active and put it on top of the navigation in the products page
      2) You use symboles. If you create a symbol by selecting an object and press F8 (like in Flash) to create a symbol, than you can choose Button. For the button you have 4 different states (Up, Hover, Down, OverDown) which you can reach by double clicking on the symbol.
      If you select the symbol later on you can choose Down-State on loading at the bottom of the Properties panel.

      0
  13. 24

    ‘my tool is better than your tool’. :-(

    It doesn’t matter what you use as long as somebody can actually click on it and have feedback. It’s a good step to steering well clear of full page mockup PSD’s,

    You can see from this the progression to creating fast html prototypes. Whatever tool you’re most familiar with use it, this is going to miss a few spots with a lot of people, myself included.

    0
    • 25

      Michel Bozgounov

      June 26, 2012 10:20 am

      There is no such thing as “my tool is better than yours”. Use whatever works for you best: Photoshop + Keynote, or the browser + Notepad, or anything else!

      Our design community is all about sharing knowledge and smart workflows, and I am happy that André Reinegger took the time to share in detail his prototyping workflow with Adobe Fireworks! :-)

      0
  14. 26

    Thank you , thank you , thank you!
    I’ve been playing around, but this is sooo helpful and straight forward, saved me tons of time!
    Plus all the extension goodies!

    *Gratefulness*

    0
  15. 27

    Excellent article. It gives credits to Fireworks where credits should be. Thank you!!

    0
  16. 28

    Great article Andre! … love how I’m still able to pick up a few new things, even after several years of working with Fireworks. ;)

    0
  17. 29

    I worked at an agency that built all deliverables on fireworks (CS2), I hated it… masking sucks (still does) and it just seemed clunky. This is also when Photoshop smart objects was out and made module design easy. Fast forward to the CS4 package, when Adobe finally re-branded the Macromedia merge… and huge difference. Pages was the best feature ever, was shown a prototype demo and was sold. I build all layouts on fireworks now, only use Photoshop for graphics. Love that Fireworks is getting the attention it deserves, a munch better tool these day, and people need to be educated.

    PS… The thing people always associate to Fireworks features is how similar they are to Flash. The library, button objects, etc. I found this an easy way to sell it to coworkers as a go too tool

    0
  18. 30

    Yeah – indeed a nice idea so far!

    But don’t get me wrong! Which of your customers is paying this?
    Answer: No one… of course depending on the size of the project!

    And most of us is not always having such big projects… don’t we… ;)

    I always start directly building an online prototype!

    Even if the customer doesn’t like it, i can use it in the future or only a part of it!

    And i always loved FW as well…

    Hugs
    Soeren

    0
  19. 31

    Very interesting article, i really enjoyed reading all about it.

    0
  20. 32

    Great article, might have to dust off Fireworks! Lovely UI :)

    0
  21. 33

    Hope there will be more posts like this about Fireworks! This great application seems to be forgotten in the design world.

    0
  22. 34

    Dare I suggest using Muse (or something similar) for interactive protoypes? It’s quick and easy to mock things up and changes can be made fast.

    0
    • 35

      Hi Mark,
      I can not recommend Muse because it is a dead end. You can import files from other Adobe software to create a layout, make pages and so on, and then? Then comes the end of the story, because the export into HTML generates “suboptimal” source code. Muse reminds me of Flash Catalyst which also produced code which was not practicable. The code which Muse generates is not correctly separating content and design via CSS, it is not semantic, accessible, seo-optimized, …
      In Fireworks you have everything in one professional tool. You create great designs and stunning interactive prototypes and when it comes to export, the CSS properties panel is a killer!

      0
      • 36

        Hi Dave,
        I merely meant using Muse to generate interactive mock ups instead of using Fireworks. I wouldn’t suggest using it for the real thing.

        Muse requires no coding and no slicing, and I’d wager it’s faster to get a working prototype and make changes than using Fireworks.

        Surely it doesn’t matter about the messy code in the prototype because once the design has been approved, it will all need hand coding?

        0
        • 37

          Hi Mark,
          even in Muse you have to generate mouseover and links, so what is the difference or advance? I am pretty sure is is not much faster (it is limited in lots of creative points) and in the end, if you want to handcode how you want to take the assets to correct HTML & CSS? In Fireworks you got everything in one professional tool.

          0
  23. 38

    I have been using Fireworks for years and I love that more and more people are finally coming around. Photoshop has its perks but it’s what it’s title is, a Photo Shop… for photos or graphics. Prototyping is a fun and quick to get the idea across. I also love that you can mockup and test a drop down menu in them as well. Yay for this post! :)

    0
  24. 39

    Have you guys tried Adobe Muse?

    It looks pretty good for planning and implementing a rapid prototype as well.
    Maybe an insight into how we could take this tool into our workflow would also be good.

    -1
    • 40

      Forget it!
      Muse is a toy for designers who don’t have a clue and want to play in the webdesign league.
      If you want to work professional…
      Guess what the best tool is!

      0
  25. 41

    I want to throw ProtoShare into this mix. Lots of similarities with Fireworks in that you’re building using HTML, CSS and JavaScript. Interactivity uses a similar state concept. The latest release supports changing appearance properties on hover and click, so it’s easy to make really hi-fi components. Masters and templates for easy reuse. And its online so it’s quick and easy to share. IMHO fireworks has better pure graphics manipulation, but for creating interactive prototypes, use your graphics engine of choice, and use ProtoShare for building the prototype.

    0
  26. 42

    Don’t send early and primitive prototype to your clients. I learned the lesson the hard way: Just don’t do it. Why? Because 95% of your customers have very low imagination and lack the ability to distinguish betwenn important and unimportant details. If you send out too early you will get statements like: The font looks a little bit blurred. The button has to be 10 px more in the left. The logo is 10% too small. But nothing about the general structure. Or if you send out your suggestion too early you get maybe worse: Can you please redisign it completly? So: Only send out prototypes which require no or only a little additional imagination how the website will look if it is finish.

    I really considered to use Fireworks. But I reject it. Why? Because the implementation of jQuery oder CSS3 animations is very rudimental. But this is an important part of modern webdesign today. The more you integrate animations, the less is the advantage over prototyping with proper code. In the worst case you have double the work.

    0
  27. 43

    I am a big fan of Fireworks for all my design work but increasingly clients want interactive mockups and Fireworks doesn’t really cut it.
    Prototyping products such as Axure have big price tags yet are basically wysiwyg editors.
    As such I’m thinking that a wysiwyg html editor such as Serif’s Webplus or Xara’s Web Designer would make great web prototyping tools.
    Anyone used a wysiwyg html editor for prototyping?

    0
  28. 45

    Just remember to deal with the client who views an interactive prototype in the browser and says, ‘thanks, job done, don’t care if it’s just a protype, it’s great as it is.

    0
  29. 46

    how do I create an interactive design for a mobile application?

    0
  30. 47

    I use Fireworks all my life. I’ve been used for so long and I forgot how many years of it. There are a lot of Designers out there will not want to switch over because they are so stubborn. Photoshop is not a program to design web pages. For all my life being a Web Designer I did not use Photoshop to design websites. I only use it for image manipulation. I feel sorry for the ones that do not want to give it a shot.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top