Fireworks: Accelerating the Web Design Process?
Apr 26 2011
At the recent "DrupalCon":http://chicago2011.drupal.org/ event in Chicago, "Adobe Fireworks":http://www.adobe.com/products/fireworks/ showed evidence of tiptoeing further into the web design field. But how does it measure up? While some supporting evidence exists for using Fireworks for web design (see "previous post":http://imagexmedia.com/blog/2010/5/considerations-about-photoshop-vs-fireworks-web-design), there are additional time saving benefits that boost its awesomeness factor. h3. FIREWORKS FOR WIREFRAMES Fireworks demands a bit of a learning curve when using it for wireframes, certainly a steeper one than other popular software like "OmniGraffle":http://www.omnigroup.com/products/omnigraffle/ and "Balsamiq":http://balsamiq.com/. But wireframing with Fireworks is much more practical if you’re also using it for web design. You don’t have to copy and paste text from a pdf file —all text, titles, icons and image placeholders are already there. This adds a time saving element, especially when combined with the library approach. 
Since Fireworks is a pixel-perfect rendering tool where the dimensions are easy to change and edit, and assuming you use grid 960 guidelines, all your work on size adjusting for the website will already be in place, allowing you to shave even more time off your record. While it’s usually a good idea to not allow technical or detail-oriented elements to interfere with your wireframe sketches, once you get to know the program, you’ll learn how to block them. Each piece of text, image placeholder and block needs to have certain size anyway, so why not use the right size from the beginning? This way there are no surprises, and you’ll know exactly what will stand above the fold. h3. THE LIBRARY APPROACH Another great feature is the Fireworks Library, which allows you to create and save an object that can be re-used as many times as you want, or easily swapped with another symbol. When you want to change its size, color or any other property, simply go to the library or double click the object, edit it, and that symbol will be automatically updated wherever it appears in your project. You can also use this method for more than one element, for example, in the very top section of your site, which will most likely be repeated all the way through. Design it once, make it an easy-to-update library item, and voila! "Nica Lorber":http://www.chapterthree.com/nica_lorber and "Floor Van Herreweghe":http://www.chapterthree.com/floorvan shared their experience with this method at DrupaCon Chicago in their presentation "Design for Drupal: A Template Approach":http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach 
"Jeff Noyes":http://www.jeffnoyes.com/ from the "Acquia":http://acquia.com/ team took things a step further and also shared his experience with Fireworks at DrupalCon. In addition to having the document library for the project you’re working on, you can also save them in your common library, or export and send to your teammates. This can boost project consistency in design elements, and improve design performance between your whole team. Learn more about the "Fireworks Library":http://www.adobe.com/devnet/fireworks/articles/export_common_library.html. h4. Other Resources: "Fireworks Zone":http://www.fireworkszone.com/ "Orange Commands":http://orangecommands.com "Fireworks Exchange":http://www.adobe.com/cfusion/exchange/index.cfm?s=3&o=desc&exc=6&event=productHome&from=1
Since Fireworks is a pixel-perfect rendering tool where the dimensions are easy to change and edit, and assuming you use grid 960 guidelines, all your work on size adjusting for the website will already be in place, allowing you to shave even more time off your record. While it’s usually a good idea to not allow technical or detail-oriented elements to interfere with your wireframe sketches, once you get to know the program, you’ll learn how to block them. Each piece of text, image placeholder and block needs to have certain size anyway, so why not use the right size from the beginning? This way there are no surprises, and you’ll know exactly what will stand above the fold. h3. THE LIBRARY APPROACH Another great feature is the Fireworks Library, which allows you to create and save an object that can be re-used as many times as you want, or easily swapped with another symbol. When you want to change its size, color or any other property, simply go to the library or double click the object, edit it, and that symbol will be automatically updated wherever it appears in your project. You can also use this method for more than one element, for example, in the very top section of your site, which will most likely be repeated all the way through. Design it once, make it an easy-to-update library item, and voila! "Nica Lorber":http://www.chapterthree.com/nica_lorber and "Floor Van Herreweghe":http://www.chapterthree.com/floorvan shared their experience with this method at DrupaCon Chicago in their presentation "Design for Drupal: A Template Approach":http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach "Jeff Noyes":http://www.jeffnoyes.com/ from the "Acquia":http://acquia.com/ team took things a step further and also shared his experience with Fireworks at DrupalCon. In addition to having the document library for the project you’re working on, you can also save them in your common library, or export and send to your teammates. This can boost project consistency in design elements, and improve design performance between your whole team. Learn more about the "Fireworks Library":http://www.adobe.com/devnet/fireworks/articles/export_common_library.html. h4. Other Resources: "Fireworks Zone":http://www.fireworkszone.com/ "Orange Commands":http://orangecommands.com "Fireworks Exchange":http://www.adobe.com/cfusion/exchange/index.cfm?s=3&o=desc&exc=6&event=productHome&from=1 Learn from us
Sign up and receive our monthly insights directly in your inbox!
