« CSInsider|Design coming soon to Adobe.tv! | Main | Everyday Timesavers premiering on Adobe TV »

Developing Design Ideas using Creative Suite 4

Recently I came across this interesting article on Industry trends in prototyping by Dave Cronin from Cooper; the article focuses on Adobe Fireworks, but is an interesting read for any type of prototyping. This made me go down memory lane, and think about how, I, as a designer and teacher, have been approaching conceptualization.

Having been a Graphic Design teacher to college students since 1995, I have gone through multiple and turbulent eras of software development and hardware upgrades. For many years, I was the type of "evil" teacher that would insist on numerous thumbnail sketches, hand-drawn comps, and idea boards; I insisted on those because I could not bear to see my students slowly drag their mice around the desk, staring at their computer with an empty look, and wait for a good idea to miraculously appear on screen... My take was that you'd go to the computer only once your idea with fixed on paper, and then you'd produce it.
I was brought to change my mind around 2002 when Adobe came out with InDesign 2.0 and introduced the ability to import native files into the page layout and initiated the integration process between various applications. At the same time, we had machines that would finally allow us to have all of our creative applications open at one time. With integration, also came the beginning of common user interface, which meant that my students had no problems learning the basics of InDesign or Illustrator, just because the interface was so similar to Photoshop (which they had been using practically since they were born). The other factor that influenced me in this decision was that students were increasingly computer and web literate, and were able to use their computers creatively and also find useful information and inspiration online. That changed the rules of the ball game.

During the ideation phase, seeing is believing, and WYSIWG is really the only way we can start believing. Here are just a few features that help me believing and allow me to boil it down to a great design in no time:

  • Color Settings are Suite wide and give me the confidence that the color I'll see in Illustrator will be the same I see in InDesign, and on PDF, for example. No more guessing.

  • The fact that I can rapidly comp CMYK and RGB images (independently of their file type) together in InDesign, without having to go to Photoshop to normalize them, makes it so much faster to preview a layout idea.

  • The Adjustment panel in Photoshop allows for rapid creation of a variety of adjustments in a non destructive way by automatically adding Adjustment Layers, which I can then turn on and off in my InDesign layout by modifying the Object Layer Options.

  • Support for 3D objects allows for rapid positioning of realistic objects in any image. And the possibility to apply 2D graphics on any kind of 3D object allows for prototyping on any object (eg. bottles, boxes, spheres).

  • Live Trace in Illustrator, allows me to quickly transform raster images to vectors in Illustrator and start working on them and modifying them.

  • Live Color in Illustrator and menu access to the Kuler database (now also available in the other Creative Suite 4 applications) helps me get inspired chromatically and share my favorite colors with the world.

  • Illustrator files can be built in such a way that they are easily reused in Flash. Press F8 in Illustrator, and you'll create a Symbol that Flash will understand. This allows for ideation in Illustrator (for Designers) and a viable hand-off to Flash Developers.

  • Multiple Artboards in Illustrator let me quickly create iterations and variations of vector graphics in a single document, and then I can choose which one to use during placement in InDesign.

  • The new prototyping workflow that is now possible between InDesign and Flash, through the XFL interchange format, gives a whole new meaning to the designer to developer workflow.

  • I increasingly use Fireworks to create both rough and comprehensive comps for web pages or interactive designs. It's ability to create interactive PDFs and clickable Web pages, so that they can be viewed, and "experienced" by the recipients, is just such a time saver. And once I am done there, I can export the whole thing as CSS based HTML to be fine tuned in Dreamweaver

  • And so on...

Once you're done prototyping and when it comes to sharing your ideas and gather feedback on them, Adobe offers various online tools for collaboration in Acrobat (sharing or collaborating), in the Creative Suite 4 applications (Share My Screen), or on Acrobat.com (Share, Buzzword, My Files, etc...). These tools are incredibly useful for both the ideation phase and for delivering the finished product.

As a side note, Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces and interactive content without writing a single line of code, and therefore ideal for designers. These can range from interactive Ads, product guides and design portfolios to user interfaces for applications. Designers can start from static compositions created in Adobe Photoshop CS4, Illustrator CS4, or Adobe Fireworks CS4 and convert the artwork into applications and interactive content. The designer does this by visually defining events, transitions and motion. Flash Catalyst can output a finished Flash SWF or AIR application that’s ready to publish on the web. In addition designers can provide the project file to developers who can use Adobe Flex Builder to add additional functionality such as connection to back-end systems.

With Adobe Creative Suite 4 also came a lot of speed: GPU access from Photoshop, Smart Guides in InDesign, the Blob Brush Tool in Illustrator (which lets you effectively sketch vectors), just to name a few... Now, more than ever I truly believe that we can effectively brainstorm in front of a screen, because visual feedback has become instant.

I am terribly sorry for all of my students who had to suffer through long hours of sketching, but times have definitely changed. I am not saying that I will never use a pencil again, actually, I frequently do to jot down ideas on my notepad (paper version), but when it comes to showing someone else, I rely on vectors and pixels now.

Open discussion; your comments are welcome.


One of the things i always hated while visiting my niece who is studying Design at the College of Saint Rose in Albany, NY 2 weeks ago, we discussed the issue of coming up with a harmonized color scheme. While Adobe Kuler and X-Rites myPantone Pallets offer nice tools, I walked her through a Fibonacci sequence based tool - Color Composer - from Master-Colors.com. This Photoshop Plug-in not only helps the user build harmonized color libraries, it offers a very intuitive color picker based that works with HSV / Munsell. Inexpensive and a time saver.
Hope that helps !
Michael Jahn

[Thanks Michael, Color Composer looks like a great tool for creating color harmonies -Rufus]

Illustrator's live-trace still isn't that helpful for me - it's much easier (less time consuming) and more accurate to trace the object myself. The blob brush on the other hand is an amazing time saver. I usually end up working directly on the computer because of time constraints and the ability to iterate quickly. It's interesting seeing how my workflow has changed as my digital tools become easier and more natural to use.

[Thanks Ben, it all depends on what one needs to do, really. I am glad that you are finding the new Blob Brush Tool useful though. I am hearing many illustrators that previously preferred Flash for their vector art, due to the painterly effects they could achieve there, and who now have adopted Illustrator as their weapon of choice. -Rufus]

We would like to have the Preflight option in InDesign to check for doublettes. As far as I know this is not possible in CS4 either. One can of course look in the Links palette and see that there exists 2 of the same graphic, but it would be nice to have the Preflight tell me if there are 2 equal graphics. In our product we do not want to repeat any of the graphics. Is this something that you could forward as a wish to Adobe for us? Thanks!

[That's a good idea John-Arild, thanks for passing it over. However, I think that for now the only alert you'll get about that is the fact that there is a little triangle in the Links Panel; because if links are used more than once they are grouped together. That is a very simple way of being aware that a graphic has been used more than once. Cheers, -Rufus]

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)