Skip navigation
Currently Being Moderated

Fireworks CS4 as Wireframe Tool

Jun 1, 2009 12:54 PM

In the past I have used OmniGraffle for creating wireframes but soon realized some of its limitation. I work extensively with Photoshop and Dreamweaver CS4 so I thought it was only appropriate to use a tool from the same family for creating wireframes.

 

Fireworks CS4 is missing (or I'm not finding) a few key features that I really need.

 

  1. Bulleted Lists - I need the ability to input bulleted lists. I could cheat and create graphics for the bullets but this isn't what I want. If I modify the bulleted item's text, the images won't align if the text shrinks or expands in height.
  2. Tables - I don't mean tables for page layout. I need the ability to input a table to hold data. As an example, I am creating a wireframe for a local college that is displaying course information. Information such as Course Name, Course Number, and Credits need to be included. Laying this data in a table with the headers mentioned above is what I'm searching to do.

 

If anyone know how to go about doing the above, please let me know. Under a tight deadline on this one.

 

Thanks,

Grant Novey

 
Replies
  • Currently Being Moderated
    Jun 1, 2009 3:30 PM   in reply to gdnovey

    Obviously, you can't do things like lists or data tables in Fireworks as you would in Microsoft Office. But Fireworks is not made for such tasks. It's a graphics design program.

     

    The best way to make a bulleted list is to use a special bullet character. Open the special characters panel, and you will find it as a text add and not graphic. Of course if you want a list, you will have to copy and paste it wherever you need it.

     

    As for the table, you could either create it by drawing rectangles and lines, or open the shapes panel and add the calendar shape which is practically a table (ungroup it if you want to edit it further).

     

    To tell you the truth gdnovey, Fireworks makes it really that easy to create vector images and shapes, that i wouldn't count the bullet list or table absence as a minus. It's quite easy to create your own. And, you could also create a symbol like your own table and save it to common library, so that you can use it again in another document.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2009 4:05 PM   in reply to gdnovey

    A tip, if you are going to create a table:

     

    Create your table with rectangles or lines and press F8 to convert it to a symbol.(important: tick the 'enable 9-slice guides box')

     

    Double click on your symbol and see those dashed blue guides. Move them all close to the center of your table so as to create a rectangle, and go back to page. If you use the scale tool on your table, you can resize it but the area included inside the rectangle area will not change.

     

    Use that guides to other rows and columns of you table you want or don't want to resize.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2009 6:51 PM   in reply to gdnovey

    These are two features which are sorely missing from Fireworks (especially the data table).

     

    Bulleted lists you kind of have to wrangle on your own, but Aaron Beall has created a Grid Autoshape which could be used to mock up a table structure. You would still have to put in the data manually. but as this is a wireframe, maybe all you need is the table structure and the table headings?

     

    Here's the link to the auto shape:

     

    http://fireworks.abeall.com/extensions/autoshapes/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2009 2:16 PM   in reply to gdnovey

    I found this set of Yahoo Stencils for Fireworks that has a decent looking Data Table symbol with alternating row colors and a scrollbar:

    http://developer.yahoo.com/ypatterns/about/stencils/fireworks.html

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2009 2:55 PM   in reply to Jim_Babbage

    How does one alter the rows & columns in Aaron Bealls Grid autoshape?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2009 8:58 AM   in reply to oic.now

    Select the autoshape with the Pointer tool.

    Change the fill color in the Property inspector.

    The alternating row color is really just the same fill color at a 

    lower opacity.

    If you want a completely different color, use the subslection tool to 

    select all the cells in the alternating row and pick a new color 

    from the Property inspector.

    When you add additional rows, the autoshape will recognize the new 

    color and repeat it for the necessary rows.

     

    HTH!

     

    Jim Babbage

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 13, 2009 9:06 PM   in reply to gdnovey

    There is another extension from Mayur placed at http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail& loc=en_us&extid=1703551 which let you create lists in different formats.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2009 9:32 AM   in reply to Jim_Babbage

    Hi, the link seems not to be working. Is there another place to get the autoshapes.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2009 8:25 PM   in reply to osheet

    Link works now -- maybe server was down for a short period?  http://fireworks.abeall.com/extensions/autoshapes/  Please re-check! :)

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2009 5:31 AM   in reply to Michel Bozgounov

    Thanks a lot for your response but unfortunately it's still not working i have tried all day. Is there some other link to get the grid auto shape or can someone please send it to me by mail if possible. I need it urgently!

     

    Thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2009 7:04 AM   in reply to osheet

    This is very strange!

     

    http://fireworks.abeall.com/extensions/autoshapes/

     

    Link really works for me, perfectly! I just tried! Does your ISP maybe use some filtering?? Try again, please...

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 9, 2009 1:26 AM   in reply to Michel Bozgounov

    Really really strange indeed. Surprisingly, this is the only site i have had this problem with. Could it be that my country's (Nigeria) IP address is being blocked or something cos i still can't get through. I tried using another ISP still nothing.

    What could be the problem? Thanks a lot Michel for all your response! I guess i'll just keep trying till i get through.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 9, 2009 2:13 AM   in reply to osheet

    You may try to use some proxy server, to check?

     

    Meanwhile, I hope I can help:

     

    I will copy the Grid Autoshape here (Aaron won't mind, I am sure;-) so that you can download and use it!

     

    "" GRID 1.2

     

    Grid.jpg

     

    This AutoShape allows you to create a grid of rectangles, with padding and alternating fill/stroke styles – useful for mocking up tables.

    Update: Minor bug fix that caused breakage after restarting Fireworks. ""

     

    http://fireworks.abeall.com/extensions/autoshapes/

     

    In the attached ZIP are all files that Aaron has posted on his website, and above I have quoted his original description of the auto shape.

     

    Hope this works for you this way!

     

    Cheers,

    --Michel

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 9, 2009 2:33 AM   in reply to Michel Bozgounov

    I used a proxy server and finally got through. Thanks a lot michel for all your help.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points