4 Replies Latest reply on Aug 20, 2012 2:11 PM by Petros_

    Pages or States? And why.


      I am designing an interface and I currently have about 25 Pages, but the Pages palette is becoming burdensome to use (pages are too big in the palette to see many at once) and for various reasons I'm thinking States might be the better way to go. I will probably have at least 25 more static screens to present in the end, for a total somewhere between 40-70. I need to export these as individual pngs which I will show by dumping into a network folder with a php file in it which will let me click through each screen (this part is already built, I don't need Fireworks to create this interactivity).


      Which feature should I use, Pages or States? I need to show how the user will navigate through several different pages, and on each page there are various controls, and I need to show different progressions in the interface over time (for instance, when the user has been using this UI for one day, two weeks, and three years). I'm using symbols for elements like header and footer, I know about Master pages, and I'm now very comfortable using the share layer to pages feature to share layers across pages. I'm not using any hotspots or rollovers; the presentation will be a linear clickthrough of static images.


      I have read all the articles I can find (including Using Pages and States in Fireworks CS4, Industry Trends in Prototyping, Maze of Pages/States/Layers simplified) and watched several videos (including Creating Interactive Prototypes, Creating interactive prototypes for reviews, and Cooper Journal: How we use Fireworks).


      Can anyone give me a solid reason for using or not using States? My UI won't have any "animations" but I do want to show what changes when a button is pressed, for instance. Thanks!



        • 1. Re: Pages or States? And why.
          Petros_ Level 1

          Okay, it's been about five months and I have developed what I assume is common practice for interaction designers who use Fireworks to create mockups for multi-page or multi-view on-screen experiences (websites, computer software, mobile sites or apps, etc.). For anyone else who's curious, here are the steps I now take to manage assets across pages in Fireworks. Not news to the old-schoolers, but perhaps there's a newbie or two out there who has searched for but not found the info they want on how to organize a Fireworks file.


          1. Make primary page elements each into their own symbol (Header, navigation, buttons, text fields, any common page components). Don’t hesitate to combine symbols into another symbol. For instance: I often have a search field with a button and a logo that I create into separate symbols and then combine them together (not 'group', but make a new symbol with all three symbols in it) into one symbol so that whenever I update any of the individual symbols those updates get reflected across all the pages where my combined symbols appear.
          2. If those primary page elements don’t move much (x,y), put them on a master layer.
          3. If you have elements that will be reused across some pages but not all pages, put them on their own layer and share them across the pages where you want them to appear.
          4. When you duplicate a page, those layers which are shared will not literally duplicate (creating larger file size) but rather be shared as a new instance to the new page, but those elements which are not on a shared layer will be duplicated independently of the other page so that you can move them around and change them without changing the items that look the same on the page you duplicated from. If you do this a lot (duplicate pages that contain non-symboled, non-layer-shared elements) you will create files of very large size, and Fireworks will crash, repeatedly.


          Hopefully that helps someone. Please reply to this post if you have better ideas.

          • 2. Re: Pages or States? And why.
            Petros_ Level 1

            Oh, and I solved the problem of pages being too big in the pages palette by choosing "no thumbnails" from the thumbnail options within the pages palette. Right click on any page and choose "Thumbnail options."


            And I've also abandoned the idea of showing button states. Maybe someone has a better way of dealing with this, but for me showing the states became less important.

            • 3. Re: Pages or States? And why.
              Daryl Barnes Level 1

              Hi Petros.  Thanks for sharing your process.  Some of what you discovered is how we've been doing it.  I'm curious.  What made you decide to abandon showing button states?

              • 4. Re: Pages or States? And why.
                Petros_ Level 1

                I'm usually presenting a series of static images in order to win buyoff for a given idea, so I often don't need (and don't have time to include) that kind of detail.