Designing Gliffy with Gliffy

By Clint Dickson on Aug 19, 2008 in Latest & Greatest

Lately, I've been working on implementing a new symbol library, our BPMN symbols. We've been using a graphic designer in Brazil, and Gliffy has played a big part in making the communication process to get the symbol assets developed a snap (which is kind of unfortunate because I'd really love to have a reason to go to Brazil on business).

To start the symbol design process, we give our designer a list of symbols we want done, some inspirational mock-ups or examples and ideas on style, and he then gives us a single image of his design. Once we approve the design, I let him know how we want them delivered (various .swf and .svg files). For our more complicated symbols, I need to give him a guide on how certain assets are cut. For instance certain parts of a symbol may "stretch", while other parts may not. So I'll need the asset cut into those parts. This is where Gliffy has sped up the process. I'll create a guide of how these symbol assets should be cut and organized in Gliffy and share the diagram with the designer. Below are some snippets from these diagrams.

As with the Horizontal Scrollbar above from our user interface library, after our designer gave us a design image of the complete symbol, I was able to bring that into Gliffy using the image import feature. I then laid out how the symbol is cut into multiple assets. The nice thing is that I don't need to bring the symbol image into photoshop or anything to cut it up. I just use Gliffy's "visual magic" by overlaying a white rectangle to cover up any areas I don't want shown. (so asset #2 is the same as asset #1 with a white rectangle over the right). This makes producing the design so much faster. And the added bonus is, its easy to make revisions or revert in Gliffy, and our designer always has the latest revision.