Creating A Pattern Library With Evernote And Fireworks

Advertisement

A well-functioning pattern library is a beautiful thing. It is a powerful resource that you and your entire team can use to efficiently create consistent user experiences for your website or service. It cuts out repetitive design work, allowing you to focus your energy on creating new user experiences; and it creates a common UI language for your team, reducing communication issues and keeping everyone on the same page.

But to many designers, creating a pattern library can feel like a daunting academic pursuit, or simply useless overhead documentation. To make matters worse, getting consensus on which technology to use and how to get started is hard.

After experimenting with various options, our team has found that using Evernote1 to house our pattern library of Adobe Fireworks PNG design files has proven to be a winning combination. We’ll outline how you can use Evernote and Fireworks to easily build your own pattern library and reap the benefits mentioned above.

Creating A Pattern Library With Evernote And Fireworks

Patterns With Benefits

To get fueled for the journey ahead, let’s dig a little deeper into what makes pattern libraries so awesome. Here are some of the top reasons why a library is worth the investment:

  • Consistency
    A pattern library spreads consistency across your products. As they say, “the interface is the brand2,” and creating an interface that is consistently good is critical to creating a great brand. This benefit is not trivial.
  • Efficiency
    A pattern library frees designers from the heavy lifting of repetitive design work and allows them to focus on building new interactions and improving existing patterns.
  • Speed
    A pattern library gives designers and developers the building blocks to quickly build complex interactions. Which also facilitates rapid prototyping of new ideas.
  • Vocabulary
    A pattern library gives team members a shared understanding of the product’s primary building blocks, and it gets new team members ramped up quickly on how the product is built.
  • Evolution
    A great pattern or component library helps your website evolve. The nature of components is such that if you make a change to one component, it is updated across all instances in the product. This helps you respond quickly to customer needs and iteratively refine the user experience.

If They’re So Great, Why Don’t You Marry Them?

In light of all the benefits, why doesn’t everyone have a pattern library? From my experience, two of the main factors that hamper the creation of a pattern library are lack of knowledge and lack of tools. Learning about patterns, components and frameworks can feel like a daunting academic pursuit, and there doesn’t seem to be solid consensus on what technology to use.

In addition, if a pattern library is hard to maintain or hard to use, it won’t gain any traction. Updating the library with new patterns and modifying existing patterns have to be easy, because as soon as the library gets out of date or becomes cumbersome to use, it will be useless. We have found that using Evernote and Fireworks together makes for a system that’s easy to manage and easy to use and that overcomes these obstacles very well.

Evernote + Fireworks = Winning Combination

Numerous websites and services have sprung up to help companies build their own pattern libraries, but after experimenting with Quince3, Patternry4 and a few others, our design team landed on using Evernote5 and Fireworks6. Here are the reasons why they are the best fit for us.

(Unique) Fireworks Features

While Evernote will get a lot of attention in this article, the pattern library we have created would not be possible without some of the excellent features in Fireworks:

  • Fireworks uses the PNG format as its source file type. This means that Evernote (and any Web browser) is able to display Fireworks PNG files natively, while still retaining all of the data from Fireworks vectors, bitmaps, layers and effects inside the files. This is not possible with PSD, AI, INDD or any other proprietary file type.
  • Because the PNG file format is open, Evernote is also able to “read” and index text inside every Fireworks PNG in the library, and this gives you the ability to search for text strings that appear in the individual components. Again, this is something that would not be possible with any other “closed” file type.
  • Another awesome feature of Fireworks is that it allows you to drop a PNG file directly into any other PNG file that is open. This allows you to seamlessly drag and drop patterns from Evernote into Fireworks without missing a beat. Combining this with the rich symbols7 feature in Fireworks makes for a powerful workflow.
  • Fireworks’ editable PNG files are typically very small in size, which makes opening and syncing files extremely fast and easy.

Fireworks is the only app that has all of these features, making it a critical component to this workflow.

Organization

In addition to being able to display PNG files natively, Evernote has robust tagging and search capabilities, which have allowed us to relax about organization. Even without tagging, finding the pattern you are looking for is quick and easy. Because Evernote is able to index text inside Fireworks PNG files, you can search for text within the patterns, which makes finding most things lightning quick, with zero organizational overhead.

Syncing and Accessibility

A final distinction between Evernote and most other pattern library services is that Evernote is an app that runs locally, which makes it much quicker and easier to use than any Web-based service. With Evernote, no uploading or downloading of files through a browser is involved — just drag and drop from Evernote to Fireworks. Evernote works across multiple platforms, so no matter where you are, you can access it (and even when offline, you can still access local copies of your assets). Any changes to existing patterns are near-instantly synchronized for everyone else, so it really is the best of both worlds.

Pattern Recognition

Hopefully, you’re sold on the benefits of creating a pattern library, and on why Evernote and Fireworks are great tools for the job. But before jumping into how to implement the pattern library, we should understand what exactly patterns are. A good definition from Erin Malone8 is:

[A pattern is] an optimal solution to a common problem within a specific context.

Tabs, pagination, table data, breadcrumbs — these are all solutions to common problems in specific contexts (our very definition of patterns!). Patterns are the fundamental interactions that make up a user experience. Combined, they can create rich, complex user experiences. Any given YouTube page shows multiple patterns in use:

YouTube Patterns9
Some patterns that YouTube employs to create a rich user experience. (large view10)

Patterns vs. Components

A quick note on patterns versus components. In general, patterns describe the overarching concept behind an interaction. They typically don’t call out a particular visual design or code.

A component, on the other hand, is a specific skinned implementation of a pattern. Also known as a widget, chunk or module, it typically consists of a visual design asset and a code snippet that renders the component. In other words, components are how patterns become real. Looking again at YouTube, here is the same page, this time with components highlighted:

YouTube Components11
Calling out some of the many components that make up a YouTube page. (large view12)

The library we’re focusing on in this article is actually a pattern and component hybrid. Here’s how Nathan Curtis13 describes this type of library in his excellent article “So, You Wanna Build a Library, Eh?14”:

Choosing between patterns and components may not be an either/or question… [Teams] have hedged their bets by embedding aspects of one approach into the guidelines and spirit of the other, most commonly via pattern-like guidelines incorporated into the more specific component definitions.

Embedding pattern-like guidelines into a component library is the exact approach we have taken, and it has served us well. If you already have a product and are looking to build a library, this approach is a great way to get started because it yields the immediate benefit of components (reusable visual design assets and code), while enabling you to invest in adding pattern-like guidelines over time.

The Library In Action

Here’s how we have set up our pattern/component library. In Evernote, we have a shared notebook named “Pattern Library.” I own the notebook and share it (read only) with all members of the UX and Web development team. Each pattern/component has these sections defined:

  1. What the pattern is;
  2. When and why you would use it;
  3. A visual example (Fireworks vector PNG);
  4. Basic functionality (describing the component’s behaviors);
  5. An example in context (to show alignment, etc.);
  6. A link to the Web development component (live example and HTML snippet).

Here’s what that looks like in Evernote:

Evernote Anatomy15
In the shared notebook, each pattern/component contains all of the information needed to understand when, why and how to use it. (large view16)

A key to making components work is to have available the corresponding code snippets and CSS needed to bring them to life. Each component in the library has a link to an internal Web development page where we keep live working examples, as well as the code snippets required to generate the component. This way, our developers can easily find the code they need to implement the components that they see in the mockups.

Web Development Page17
Each component has a corresponding page that our Web Development team uses to implement each component. It documents the behavior of the component and allows developers to copy and paste the code. (large view18)

Drag, Drop And Roll

So, what does using this type of a pattern/component library on a daily basis look like? Here’s what our process looks like in practice:

  1. When a UX designer needs to use a component in their Fireworks mockup, they find the pattern in Evernote by searching or by visually browsing to the one they want.
  2. The designer then drags and drops the Fireworks PNG image from Evernote into their layout in Fireworks, places it where it needs to go, and makes any necessary adjustments.
  3. Once the mockup has been finalized, the designer hands it over to the Web developers for implementation.
  4. The Web developers implement the mockup by visiting the Web development page for each pattern being used, copying the component’s code to their project and hooking it up to the back end. Done!

The easiest way to describe the design process is to see it in action. Here’s a screencast (should open in a new tab or browser window; .SWF, requires Flash19):

Screencast on Fireworks and Evernote20

One Final Note(book)

Once we started using Evernote for our pattern library, we realized we could apply the concept to other useful areas. We have since created several other shared notebooks, which come in really handy for the design team:

  • “Design Resources”
    This notebook contains everything that might help designers make mockups quickly: browser chrome, cursors, icons, scroll bars, company logos, templates, etc. Designers just drag and drop them into their mockups.
  • “Design Inspiration”
    This notebook (which anyone can add to) is full of screenshots of inspiring designs. Evernote allows you to search text inside images, which works beautifully when you want to research how other websites handle interactions (for example, we can search screenshots for “Sign up” or “Buy now”).

I hope this article has shed a little light on how pattern/component libraries can be useful and on how combining Adobe Fireworks and Evernote makes for a simple, fast and flexible solution. Hopefully, you feel more comfortable now creating your own pattern library and reaping the benefits it offers.

Further Reading

(mb) (al)

↑ Back to topShare on Twitter

  1. 1

    Thanks for the great article and the screencast.

    I love the dynamic aspect of the library. Updating the .png and seeing Evernote sync the image is very handy. The same thing goes on with the code references i believe.

    Design libraries that are prone to staleness are practically useless imho.

    5
    • 2

      Kalen – agreed – as soon as a pattern library is even slightly stale, the team stops using it because it isn’t trustworthy. That’s why I love Evernote – so easy to keep everything up to date!

      2
  2. 3

    We use Podio + Fireworks for this :)

    4
    • 4

      Not used Podio before, looks good. Thanks for the heads up :)

      0
    • 5

      Pete – I have used Podio a bit myself. It has some great collaboration features. We landed on using Evernote just because it’s so fast to search for patterns and drop them into Fireworks. But I do wish Evernote’s sharing / social features were as advanced as Podio’s!

      2
  3. 6

    Nice one, good to see Fireworks gaining popularity again and for the right reasons. I’ve used it since the first Macromedia ( remember them>? ) version and have consistently created interfaces and web designs faster than my Photoshop counterparts (although Photoshop has its uses too). I would be lost without my Fireworks toolkit, but I never thought of combining it with Evernote to share… Might have to get the old subscription going again! Cheers…

    1
  4. 7

    This may be a reason to redownload evernote… I used it for a while and didn’t find any REAL advantage to doing it but I think keeping track of the enormous amount of little things I have been gathering that I build my websites with will be an advantage.

    2
    • 8

      Andrew – Absolutely. Even if you aren’t building a formal pattern library right now, using Evernote to hold PNG design snippets, stock icons, and other common odds and ends has saved me a ton of re-work. That’s where I started, and over time, those snippets evolved into the pattern library that the entire team now uses.

      2
  5. 9

    Thank you so much for writing this article! I’ve been wanting to develop patterns for my job for a long time, but I could never get everyone on board/I didn’t even know where to begin the process. Now at least I have some tools to explore and will hopefully be able to use this to explain to my co. what the benefits of patterns are. :) Thanks again!

    3
    • 10

      Megan – I hope that this technique can help get your team started! Once you have begun to use patterns and components in your workflow, it’s very hard to imagine life without them. My experience has been that co-workers jump on board pretty fast once they see how easy and quick it is to use Evernote with Fireworks PNGs. And definitely read Nathan Curtis’ article I referenced – it’s a great starting point. Good luck!

      1
  6. 11

    Vincent van Scherpenseel

    September 14, 2012 4:16 am

    Interesting approach, but doesn’t the fact that the Evernote notebook is only shared read-only hurt the goal of having an easily maintainable pattern library? Until what team size would you recommend using this approach?

    0
    • 12

      Vincent – Good question! The pattern library is read-only for the team because I believe that there must be a single source for making changes to the library (i.e. a librarian). Any new patterns, or changes to a pattern should be treated very carefully because they can have far-reaching implications that an individual team member might not know about (internationalization, CSS implementation, consistency/conflicts with other patterns, etc.). The bigger the team / product is, the bigger the ramifications can be, so it’s very important that changes are thought through holistically beforehand.

      Our process is such that if a team member is using a pattern and decides that it needs to be changed or improved, they contact me (the librarian), and we discuss the changes. If it makes sense to change the pattern, or create a new one, I update it and inform the team about it. This does not happen very frequently, so it is a very manageable process. Patterns should only be in the library if they are reasonably solid, and thought through. This also helps the team to trust the content of the library.

      Even with a team of 2-3, I think it makes sense to designate a librarian. Having a single person that knows the library inside and out and can see the possible ramifications of any given change is critical.

      4
  7. 13

    Fireworks is simply the best.

    2
  8. 14

    Anyone think it would be possible to use Google Docs + Fireworks for this? I’m trying to get a solution that is free for everyone on my team…

    0
    • 15

      Evernote must have a free plan as well, I think?…

      Not sure if Google Docs (Google Drive) would work in the same way, or could provide the same features as Evernote — for example, text indexing in Fireworks PNG editable files, seems quite a unique feature…

      Perhaps someone else, with more GDocs/Drive experience, could share his knowledge?… :)

      1
    • 16

      With a free Evernote account you can still do all of this. The only limitation is that the people you share your notebooks with cannot edit them. Not a big deal if you have a single librarian who owns the notebooks and makes changes to the pattern library (recommended approach!). There are a few other benefits of a paid Evernote account though as well (monthly quota, faster OCR recognition, etc).

      0
    • 17

      But to answer your question, I’m not sure Google Docs works – I think it compresses images on upload, deleting all of Fireworks’ meta data. I could be wrong, though.

      0
      • 18

        For sharing and making it editable by all what if you used a central Dropbox? Each user would have a different Evernote account but the same Dropbox for the local Evernote storage. Depending how Evernote handles enforcing read-only it could work?

        0
        • 19

          Simon – I love Dropbox, so this is something I have thought a lot about. Dropbox can work relatively well – but I think Evernote works better: The ability to organize PNGs in notes / notebooks, add additional supporting text, and most importantly search the notes makes it better suited for this type of activity than Dropbox, in my opinion.

          0
  9. 20

    Thank you very much for the tutorial, your workflow has given me the tools to handle shared resources with our Ux team in a dynamic and useful way. As a frequent user of both evernote and fireworks this process fits perfectly in my daily routine :-)

    1
  10. 21

    Brilliant! Our team is comprised of developers who are offsite and designers who are not as familiar with web application world. I am the sole UX member of our team but have been thinking about implementing some sort of system that would enable our team to maintain consistency across our products. While I have talked about the concept of building patterns libraries, it hasn’t really sunken in yet. This will allow me to build out a ‘proof of concept’ and I know it will be accepted and highly valued.

    Thanks for the great article,
    Mike

    1
    • 22

      Mike – Give it a go! For a single UX person, building a system like this could change your life. Pattern libraries can give you a huge amount of leverage, and free you up to work on higher priority, forward-looking design!

      0
  11. 23

    Hi there!
    I like the use of both. But do have to first build pattern in fireworks and then move it over to evernote? What if i find a great pattern online – i cannot simply move png files to evernote library?

    0
    • 24

      Mati – sure, you can drag any PNG you want into Evernote. I use Evernote to house PNG resources I find on the web (templates, stencils, etc).

      0
  12. 25

    Kris!

    Amazing. I never thought about using Evernote in that way. This will really make a HUGE difference in my productivity. SO many great uses.

    Quick question. What app did you use to create those screen shots with orange arrows as well as marking up that YouTube page with those overlays on each sections..

    That’s a GREAT slick layout that I would love to use for my classes.

    Thanks again. Great Tutorial.

    1
  13. 27

    Kris –

    Great article, and our UI/UX and dev teams are considering this as an option to building out a better pattern library. It’s a great work flow and an overall plus to making our library as succinct as possible. However, we are an enterprise company, and our one hang up to using evernote is that it’s outside of our firewall. Do you have any suggestions, solutions, or maybe alternatives to this?

    1
    • 28

      Good question. Yes, this system relies on Evernote – a service that is not under your control, and is outside your firewall. If this is a concern for your company, than it will be a tough problem to get around. It is hard to do anything nowadays without using third party services. For us, the possible downsides just can’t compare to the boost in productivity we get.

      1
  14. 29

    Wilbert Gutierrez

    October 6, 2012 6:59 am

    Thanks for the article, very helpful and actually got me to start using Evernote again. I tried it when it first launched, but never found a real use for it, but if it can be used for a library, then great. I am just starting to build a library and ask, do you have the notebooks you mention in the article available to download? Or do you know of a service where some can be purchased? Starting from scratch just seems like such a daunting task. Thanks again.

    WG

    0
  15. 30

    Thanks for this guys.

    For the last couple of projects that I’ve worked on, I’ve had to produce a Pattern Library and each time I’ve completed the library I’ve never been fully happy with the end product (although the client has).

    This could be the solution I’ve been looking for.

    0
  16. 31

    Sorry… one question. Is this exclusively for use with Fireworks and not Photoshop?

    Thanks

    0
    • 32

      The reason that Fireworks is ideal is because Evernote can preview the PNG images and index the text inside of them. Since Photoshop uses a proprietary image format, Evernote can not preview the images (On a mac, you can “quick look” them, which is nice). However, with a little extra work, you could make Photoshop files work – for every PSD image you have, you would just need to export a JPG or PNG version of that file, and include it in the pattern. That way, you could “preview” the image easily, and Evernote could index the text. It just adds an additional step of updating the preview image each time you modify the pattern.

      0
  17. 33

    Use PDFs and you can do the same w/ Illustrator, no?

    0
  18. 34

    Kris, this is great information and I feel my team will find immediate value with this solution. I’m having a problem transferring PNGs between Evernote and Fireworks, though. Is a specific version of Fireworks needed? I’m using CS5, and can’t drag PNGs between the two programs although I can drag PNGs from Windows Explorer directly into Fireworks.

    3
  19. 35

    Alex VanLaningham

    October 26, 2012 10:47 am

    This is super great idea. I tried it on a PC / Windows 7 / Fireworks CS5 / latest evernote and the drag and drop does not work. I can save from evernote and drag to FW but not as convenient as the direct drag you have on the mac, I know buy a mac :) … I am one of those few UX guys that likes a PC… Old school :)

    0
  20. 36

    Interested in knowing if the new Evernote Professional would work even better for this?

    0
  21. 37

    Nice article, read it a year ago. Didn’t need to create a pattern library back then. However now it is becoming more useful to start creating one, but since Adobe is dropping Fireworks, what is the best alternative for this workflow ?

    0
  22. 38

    Great article! :)

    I miss symbols here. Do you use symbols to build a common library with your team? I know is difficult to do it because of the way Fireworks handles the symbols folder so I’m really curious about it. If I had to tell anybody the top 5 reasons I still use on a daily basis a discontinued product as Fireworks, symbols would be for sure one of them :)

    Thanks for sharing!

    Hec

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top