Create Interactive Prototypes With Adobe Fireworks

You are viewing: Create Interactive Prototypes With Adobe Fireworks At HTTLEN: Share Good Articles

18 min read
Fireworks, Tutorials, Prototyping
Share on Twitter, LinkedIn

While Designing for screens, including Web, Mobile, and Rich Interaction (RIA) Applications: Prototyping is often necessary to see if the application works correctly before moving to the development stage.

Prototyping is also essential in web projects. For example, when planning an online ordering process, you need to make sure that every step is correct and that no critical element is missing. Typically, you would create different screens for all pages of a website, order process, or application workflow, and then describe the connection between them. This way, you can see if the interactions are working as expected, you can test the product with different users, and your customer can review it.

What is a prototype and why should I use one?

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

To learn more about the benefits of prototyping, take a look at to “Design Better and Faster with Rapid Prototyping” in Smashing Magazine. There have also been a couple of interesting articles on Boxes and Arrows: “Integrating Prototyping Into Your Design Process” and “Defining Feature Sets Through Prototyping”.

What is a click-through prototype?

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

HTML Prototypes

Creating such a prototype in Adobe Fireworks is very easy, all you have to do is prepare the design for export as an interactive prototype: create cutouts for all interior areas eactive on the screen and create pages for all the different states of the application. Slices can also have hover states and be linked to different pages. At the end, you’ll create a click prototype (also known as an interactive prototype or click dummy) by selecting “Export as HTML and images” in Fireworks. Exported HTML files can be viewed locally in the browser or uploaded to a web server for review and testing.

Web prototype exported from Adobe Fireworks.

PDF files (interactive)

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 be exported with their links. The advantage is that you can email the PDF to the customer, who can then easily provide feedback using the feedback tools in Acrobat or Adobe Reader. Note, however, that Fireworks does not generate a comment-enabled PDF file; you must open the PDF in Acrobat Pro, enable comments, and then save the PDF before sending it to the client. (Enabling comments in Acrobat Pro makes it possible for anyone with the free Acrobat Reader to add comments.) Of course, if Acrobat Pro isn’t an option, feedback can be sent in any of the usual ways, such as email.

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

Benefits of Prototyping

Get feedback at a very early stage.
Increase the effectiveness of your communication. Get more detailed feedback from customers.
The prototype can be used for usability and A/B testing.
Find bugs early on. Fewer mistakes are made later in the development process.
Find errors in the interaction flow or user interface before development begins.
Exported prototype graphics can be used for development.
The developer or team will understand what needs to be done without the need for a detailed explanation.
Total development time will be reduced.
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 As a team for the first time, you might not be as impressed with having access to a click prototype early in the design process, because you wouldn’t know any different. But if you’ve been through the process in the past, you’ll probably be very impressed to see a live preview of the website right on your screen, with lots of interaction, rather than just a static image. preview or collection of image files.

I have personally used Adobe Fireworks Click Prototypes for over 10 years, with much success and enthusiasm from my clients.

Every client who had experience with web design was impressed to see a working prototype of the website directly in the browser. My clients always appreciate this, and once their clients have used one, they’ll prefer to work that way too.

Caution, though. Please note that this is just a prototype and still needs to be turned into a real app, which will happen once the prototype is approved. If not, the customer can expect a working website to appear simply by copying the prototype to their domain root folder.

How to Prototype Clicks in Fireworks

The Click -through the prototype that Fireworks creates consists of simple HTML files (that is, 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 with the development phase of the website, with semantic HTML and CSS. Fireworks is only useful 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 access points. Let’s discuss each one in more detail.

Pages and Master Pages

To create a target prototype, you must first set up multiple pages in your document. Each state of an application or each page of a website will need a separate page in Fireworks. To create a single page, you can use the Pages panel. When all pages in a layout share common elements, such as a header, logo, and main navigation, you can use a master page.

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

Set a master page in Fireworks.

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

The Pages panel in Fireworks.

When it comes to export, Fireworks automatically names these two pages index.html and shop_detail.html. Now, we can fill each of the six pages with their unique design elements (ie not the common elements, which will go on the master page).

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

Please note: All master page elements will appear in the same locations on all individual pages and cannot be moved page by page. Therefore, if a page needs to be different than the master page, you will need to overlay the new elements on the master page elements or use another Fireworks file.

States

To To give the customer more interactive feedback, you may also want to create hover states for your navigation elements. To do this, open 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 directly on the master page (thus saving a few clicks), and it will then be used on the individual pages. Now, in the new state, you only need to put the elements that should change on hover, such as navigation, links, dropdowns, tooltips, etc.

The Fireworks States Panel states in Fireworks

To display 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 shadow applied to a text object. Hovering over the second state (the mouse state) in the States panel would change all of this.

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

The “Add States” Option in the States Panel

After all the floating states have been created, you can reuse them for all pages. If you have a master page, simply create a second state for all pages by right-clicking in 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 the floats from the second state of the master page. If you don’t have a master page, you’ll need to copy and paste all the floating elements in the second state to all the individual pages.

With slices, you can define the regions that should change on mouse over.

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

Slices and hotspots

Segments in Adobe Fireworks

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

Create slices in Fireworks

To make a slice state, select the tool Slice (step 1 in the image above), and then outline the entire area of the float (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 precise than using the Slice tool. If you select multiple objects, right-click, and then insert a slice, Fireworks displays a dialog box with the option to insert multiple slices (one for each object) or a large slice covering all selected objects.

After you have defined all the areas, you can use the target in the middle of each slice to create the hover effect (step 3) To do this, click and drag the target in the middle of the slice back to the same slice. In most cases, it will be the same location, so you need to point to the same slice (step 4). If you want to display another image on hover, the target should point to the slice with the image, but in most cases it will point to itself Fireworks will then ask you which state to choose for image swapping (step 5).Here is where I would choose the state with the floating image (for example, “State2”).

Preview layout in Adobe Fireworks

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

For scrolling elements that appear on each page, such as the main navigation, you can save time by creating the slices on the master page.

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

Please note: when using states for rollovers, it is sometimes necessary to copy or share background elements with other states; otherwise, blank areas may appear in the rollover. For example, if a slice is larger than the object that will change on hover, then the background behind the object should also appear in the rollover state (state 2). I recommend using “Share to States” for elements that will be the same across all states to maintain a consistent appearance across rollovers (or on hover). “Share to States” can be accessed in the Layers panel (right-click the layer to be shared with the state on hover).

Linked Pages

Now that all the interactive elements have slices, the pages can be linked together. To generate hyperlinks, you would typically click on a segment (or a hotspot, if a hover effect is not needed) and enter a URL in the “Link” field in the Properties panel. For an external URL, you would enter, for example, https://www.google.com; for an internal link, you must enter the name of the page from the Pages panel. All page names in the Pages panel are also available in the dropdown menu, preventing typos.

Linking pages in Fireworks

The names of the pages in the Pages panel must be web-friendly (ie no spaces or special characters). You can view the demo prototype you just created, complete with all the hyperlinks and interactive areas, by clicking File → Preview in Browser → Preview All Pages.

Add real interactivity to your prototype </h2

Many Fireworks users are unaware of HTML slices. For each slice, there are three different options in the Properties panel (Foreground Image, Background Image, and HTML). With the foreground and background image, you can specify the export mode for images if you export HTML and CSS from Fireworks.

Fireworks slice types

For target prototypes, which are based on HTML and images, the default “Foreground Image” option works best. If you want to put different types of interaction in your prototype, the HTML portion is a good option. You can put any HTML code in an HTML chunk, which is very efficient if some elements already exist, such as interactions. Thanks to the HTML sections, you can easily insert Google Maps, videos, animations, etc. directly into the prototype to show the client how the elements will work.

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 directly on the prototype.

Using HTML slices in Fireworks

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

Next, go to Google Maps, locate the office of the client on the map, copy the HTML iframe code to embed it, and then paste it into the HTML portion.

HTML Slice in Fireworks

The width and height of the iframe must be the same dimensions in pixels that cut. Review the map embedded in the prototype by going to File → Preview in Browser → Preview in…

Google Map embedded in Fireworks prototype

See an example of Google Maps embedded in a prototype of a Fireworks website.

Embedding video

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

Please note: The embed code will set the width and the height of the video. .The HTML segment in Fireworks must have exactly the same dimensions to maintain the correct proportions.

Integrating Flash animation and more

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

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

Export HTML click prototype for review

The final step in the process is to export the prototype for review. Before you do this, you can do a quick preview in your 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 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 Browser Preview

Test everything before exporting the live prototype. If everything works correctly, you can export the clickable prototype by going to File → Export…. In the dialog, select “HTML and images”, “Export slices”, “All pages”, “Include areas without slices”, and “Images in subfolder”.

Options to export your prototype in Fireworks

A couple of live demos

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

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

A word about the new mobile web and Fireworks</h3

While interactive prototyping with Adobe Fireworks can be quick and easy, they are not specifically responsive or adapted to the modern mobile environment. Fortunately, Export Responsive Prototypes with the Adobe Fireworks Extension by Matt Stow and Touch Application Prototypes (TAP) for Adobe Fireworks are here to help. Both extensions are free and will help you create responsive web prototypes or iOS prototypes in Fireworks more easily.

Act on customer feedback

Finally, what do you do when the customer provide feedback? about the prototype and interactions?

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

Fireworks fits perfectly into the workflow of a web or mobile app designer. You can do all of the design in Fireworks, or you can import artwork from Photoshop or Illustrator and continue in Fireworks. The layout of all website pages can be easily created using the Pages panel, in combination with the master page feature. To add interactivity, you can configure all the different states of the website, with the help of the States panel. This entire process is fast because Fireworks is optimized for this type of workflow. Sections and hotspots allow you to easily link all pages together.

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

Everything else