Blueprints For Web And Print: Specctr, A Free Adobe Illustrator Plugin

Advertisement

Have you ever submitted design files to a development team for production and a few weeks later gotten something back that looks nothing like your original work? Many designers and design teams make the mistake of thinking that their work is done once they’ve completed the visual design stage.

A design is more than a simple drawing on a canvas in Illustrator, Fireworks or Photoshop; it is a representation of function. “Form follows function” is a well-known principle, first coined1 in 1896 by the architect Louis Sullivan. How will the website work? How will that section fold? What happens when you hover over this button? How does that menu function?

Designers also know that the details will make or break a product’s usability. But designers are also responsible for not letting those details fall through the cracks in production. Yes, those 5 pixels do matter! The development or production team also needs to understand how the product will work and what it will look like in every scenario and variation of the product’s use. Annotating all of these scenarios can be a nightmare, but this is where Specctr can help.

Specctr is a plugin for Adobe applications. (Currently, versions are available for Fireworks, Illustrator and Photoshop, the first of which you can read about in “Blueprints for the Web: Specctr Adobe Fireworks Plugin2”.) Specctr transitions a visual design to production by enabling you to specify form (spacing, width and height, colors, fonts, etc.) and function (hover states, transitions, user flows, etc.). It automatically generates a specification and creates a blueprint for the design, which saves time.

Specctr logo

Note: The Specctr plugin for Adobe Illustrator has two versions, Lite and Pro. The Lite version is free for everyone3 but has some limitations. The Pro version is more powerful, is paid and has an “Expand Canvas” feature, and you can change the font in which the specification is displayed. Specctr Pro has other advanced settings that can be configured in the “Spec Options” tab in the panel, including options for the colors in the three types of specifications, the color mode (RGB, CMYK, HSL, HSB), etc.

Overview Of Specctr For Illustrator

Adobe Illustrator is a favorite tool of many designers because of its flexibility and versatility. Whether you use Illustrator for Web, print, identity or packaging design, Specctr may be useful to you, and in this article we’ll show you how. This plugin includes:

  • the width and height of elements;
  • text specifications (font family, font size, font color).

4
The main tab of the panel, the “Select Details” panel tab and the “Spec Options” panel tab in the Specctr Lite version. (see larger preview5)

The width and height of elements as well as the text-specification abilities are most common to a designer’s workflow, which is why we included them in the free version. These two features alone should save you a lot of time. Additionally, the free version has the “Expand Canvas” feature and the option to change a specification’s font.

Requirements and Installation

Specctr Lite can be downloaded for free6 from our website (search for “Try Specctr Lite”). To use Specctr for Illustrator, you will need:

  • a Mac or Windows machine;
  • a copy of Adobe Illustrator CS5, CS5.1, CS6 or CC (Creative Cloud version).

The installation process is pretty straightforward:

  1. Download the Specctr installer.
  2. Double-click the downloaded ZXP file. The Adobe Extension Manager will open. Click on “Install.”
  3. Restart Illustrator.
  4. In Illustrator, go to Window → Extensions → Specctr in the menu to open the Specctr panel.

Note: If you are using Windows Vista+, you might need to launch the Adobe Extension Manager as an administrator, or else the extension could fail to install (this is a known limitation of the Adobe Extension Manager).

A Quick How-To Guide

After you install Specctr, you can spec a document in a few easy steps:

  1. Adjust your settings in the “Spec Options” tab.
  2. Select the options you want to display.
  3. Make room for your specifications (optional).
  4. Spec away!

The process of working with Specctr Lite and Pro is quite similar. The only difference is in functionality (Lite has fewer features).

1. Adjust Settings in “Spec Options” Tab

First, it’s a good idea to customize how the specifications will look. You can do this in the “Spec Options” tab in the Specctr panel. There, you can do the following:

  • Control how your specifications will look by adjusting font, color, size and line weight.
  • Set the color mode in which you want to spec: RGB (both rgb() and HEX modes are available), CMYK, HSL or HSB.
  • Assign different colors based on the type of specification: type object, shape object, and spacing and dimensions.

2. Select the Options to Display

In the “Select Details” tab in the panel, you can define (using simple checkboxes) which properties of objects to spec.

For example (as mentioned earlier), for shape objects, the following properties (or specification) can be generated by Specctr: fill color, fill style, stroke color, stroke size, opacity. And for text objects, the following properties (or specification) can be generated: font family, font size, font color, font style, text align, line height, letter spacing, opacity.

3. Make Room for Your Specifications

Optionally, you can expand the size of the artboard (or canvas) to make more room for the generated specifications. Use the numeric field next to the “Expand” button to increase the size (in pixels).

4. Spec Away!

Simply select any object(s) on the artboard, and then use one of the specification buttons: “Shape / Text,” “Width & Height” or “Spacing.” Specifications will be generated automatically for the elements selected on the artboard.

You can select two objects (by holding down the Shift key) to spec the space in between them. If only one object is selected and you press the “Spacing” button, then the distance from the object to the artboard’s edges will be displayed.

Here’s a brief screencast of this workflow:

Other Features

For maximum time-saving, you can spec multiple text and shape objects with one click. Simply select multiple (or all) objects and hit the spec button.

For better readability, line endings in Specctr will change depending on what you are spec’ing: a filled dot for text, an outlined circle for shape, and brackets for distance.

Spec line ends
Line endings automatically adjust based on shape, text and distance.

Your specifications are automatically organized and grouped into layers so that you can quickly turn their visibility off or delete them.

Specs in layers panel
Specifications organized into layers.

If many objects are close to each other, then there is a chance that specifications might overlap. To fix this issue, simply move and spread the specifications out. The arm that connects them to their object will always remain connected to the object, no matter where you move them on the artboard.

Please note that if you update an object after you’ve spec’d it, then the specification won’t update automatically; you must spec the object again. You don’t have to delete the old specification, though, because it will update with the new properties and remain in its current position.

A Note About Units

Specctr will use distance-based units based on the user’s settings in Illustrator (Edit → Preferences → Units). For Web documents, Specctr will always use pixels.

Illustrator preferences.7
Illustrator’s “Preferences” dialog: Units.

Different Specification Scenarios

Web Design

There are plenty of reasons to use Illustrator for Web design. (Read Vincent Le Moign’s article “Productive Web Design With… Adobe Illustrator?8” to hear some of the arguments.) Illustrator is fast, reliable, reusable and especially useful for designers who create both wireframes and final designs.

Specctr was created with Web designers in mind because of the myriad of screens flows that have to be created and spec’d. Although spec’ing is usually a process that only large design teams do, I’ve found the plugin to be helpful on small teams as well. With technology advancing and our capability to create more complex graphics, transitions and animations growing, there is an increasing demand for designers to spec their work. Interactions, responsive design and hover states should become clearer with a few notes and annotations attached.

Here follows an example of a one-page Web design made in Illustrator and spec’ed using the Specctr plugin. The first screenshot shows the large-screen version, and the second shows the mobile-screen version.

Example of a web site design spec'ed with Specctr9
Example of a Web page spec’d with Specctr. The artboard contains the large-screen version; below it are shown three states of the same button (normal, :hover and :focus, and pressed). (View larger version10)

responsive design spec'd example.11
Example of a Web page spec’d with Specctr. The artboard contains the small-screen (i.e. mobile) version. (View larger version12)

Note: In Illustrator, you can use multiple artboards to create variants of the same Web page for different screen types; for example, desktop, tablet, mobile, etc.

Make sure to set up your document correctly for Web design work. Create Web documents with the “Align new objects to the pixel grid” option activated; always use whole pixel sizes for all objects; and select the RGB color mode. The “Align new objects to the pixel grid” option is especially important13.

Web settings14
My recommended settings for Web documents in Illustrator. (View larger version15)

Print and Packaging Specification

Unique print pieces (die cuts, special folds, etc.) require detailed instructions. Here is an example of a custom folder that was spec’d using Specctr for Illustrator.

Packaging spec example16
A print design example. (View larger version17)

Setting up your document correctly for print design is important, too. Here are the settings that I often use:

Print settings18
My recommended settings for print documents in Illustrator (View larger version19)

Branding Guideline Book

A brand is the public face of the company. It conveys the mood and tone of the company and covers every detail of its communication with the public. A branding book is a vital step in a branding project because it establishes the rules and teaches collaborators how to use the new visual language; a rebranding campaign is only successful if it is used consistently and widely.

A brand book usually includes the logo, fonts, colors, textures and patterns, photographic and image styles, language and tone. The guidelines can get quite detailed and long.

Here is an example of a very brief brand book that uses Specctr for the nitty-gritty details:

Brand Guidlines20
Specctr for Illustrator can help you create a brand book.

Here are a few brand guidelines:

To learn more about branding, I recommend Kat Neville’s article “Designing Style Guidelines for Brands and Websites27.”

Conclusion

Being a successful designer takes not only creativity and design skills but the follow-through to see a project come alive just as you imagined it. A designer may create a well-crafted website or a beautiful logo or an elegantly packaged product, but chances are they won’t be the one bringing it to life.

Communicating and explaining your design both verbally and visually is a requirement for precise and successful results. This is especially true for large teams spread out over the globe. We hope the Specctr plugin for Illustrator28 helps you with this important task.

Plans for the Future?

Here’s what the Specctr team is working on next:

  • CSS exporting (the objects you spec will be the ones that are added to your CSS export);
  • Relative (i.e. percentage-based) spacing, to help you with responsive design tasks;
  • More options for iOS and Android design specs.

Please let us know29 which features you would like to see added to the next version of Specctr’s panels! You can also leave a comment here. We’d appreciate your feedback.

(mb, al, il)

Footnotes

  1. 1 https://en.wikipedia.org/wiki/Form_follows_function
  2. 2 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  3. 3 http://specctr.com/products.php
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ai-specctr-lite-preview.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ai-specctr-lite-preview-500px.png
  6. 6 http://specctr.com/products.php
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/08/ai-preferences-large.png
  8. 8 http://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ExampleWebsiteSpecctr-02.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ExampleWebsiteSpecctr-02.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ExampleWebsiteSpecctr-041.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/11/ExampleWebsiteSpecctr-041.png
  13. 13 http://help.adobe.com/en_US/illustrator/cs/using/WSf01dbd23413dda0e1e23acb6124476da654-7fea.html
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/10/websettings3.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2013/10/websettings3.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/10/SmashingMagAi-14.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/10/SmashingMagAi-14.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2013/10/printsettings.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2013/10/printsettings.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2013/11/BrandGuidlinesExample.png
  21. 21 http://www.admin.cam.ac.uk/offices/communications/services/identityguidelines/
  22. 22 http://mailchimp.com/about/brand-assets/
  23. 23 http://issuu.com/logobr/docs/brandbook_nikefootball
  24. 24 http://www.umb.edu/editor_uploads/images/creative_services/UMassBostonbrandmanual1-10.pdf
  25. 25 http://brandcenterdl.adobe.com/Corpmktg/Brandmktg/Campaign_Assets/guidelines/corporate/corporate_brand_guidelines.pdf
  26. 26 http://www.barbican.org.uk/branding/Barbican_Guidelines.pdf
  27. 27 http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/
  28. 28 http://www.specctr.com/products.php/
  29. 29 http://specctr.com/support.php

↑ Back to topShare on Twitter

Chen Blume is a graphic and interactive designer. She co-founded Specctr with Dmitriy Fabrikant. Together they aim to bridge the communication gap between designers and developers though innovative process design and software solutions.

Advertising
  1. 1

    The upcoming relative spacing sounds ideal. This seems like a really cool plugin, can’t wait to check it out! Thanks.

    0
  2. 2

    Aurelien Foutoyet

    November 15, 2013 5:19 pm

    Any plans to develop the same plugin for Photoshop ?

    0
    • 3

      You should check PNG Express, a plugin that does all this and more in Photoshop.
      http://www.pngexpress.com/

      1
    • 4

      Hi Aurelien, we do have one for Photoshop! Check out our website http://www.specctr.com/

      0
      • 5

        Thanks everyone ! I didn’t know png express :)
        Concerning Specctr I’m not sure if I’m ready to pay $49 for such a tool but I have to try the lite free version. thanks for the feedback ;)

        1
    • 6

      It’s also available for Photoshop. I’m using it already :) However it’s not capable of drawing lines from text to description like in Illustrator – it places a numbered bullet by the text and then places a numbered, corresponding description in the margin of the document.

      I’m not 100% satisfied though. It’s not possible to tell it want to describe spacing/distance from bottom-right of an element rather than top-left, and sometime the measurements are either inaccurate or based on some strange conception of where a paragraph elements stops/starts, also it doesn’t work with layer groups yet. I expect it’s coming and it will be free for current paying customers when it does.

      0
  3. 7

    this is great… this tool can save me years!
    Thank you so much!

    0
  4. 9

    Great article Chen!

    I do have a question though, If I send my files over to another designer, and they do not have Specctr installed, will they still be able to view the measurements?

    0
    • 10

      Hi Marc,
      Thank you for the kind words. That is a great question. If someone does not have Specctr installed they should be able to see the specs- but they wont be able to edit them. Also you can always export the design into a PDF or flat.

      0
  5. 11

    I recently discovered that I prefer to do interaction design mockups in InDesign instead of Illustrator. This mark up is a huge time saver and it would be nice to be able to use it in both programs.

    Thanks!

    1
  6. 12

    InDesign Plugin? Pretty Please!

    1
  7. 17

    Sorry. It is not a web design tool if the output isn’t HTML… I love Illustrator for other purposes though.

    0
  8. 18

    Amazing tool and time saver, will definitely be buying these! found this in my morning Reddit! reddit.com/r/graphic_design/comments/1qr621/blueprints_for_web_and_print_specctr_a_free_adobe/ Wonderbar!!!

    0
  9. 19

    Fancy stuff. This could be the difference between sitting bored and prepping for the coder and a good half hour extra on the football field. Should check this out. Cheers!

    0
  10. 20

    Are you sure that defining this level of specification and throw it beside the wall (where developers living) and then go to the pub to celebrate si the best way to designing web things?

    In mi opinion, nothing works better than a multidisciplinary team working colse together – sketching, talking, studing and changing things. In this way, there’s no need of wireframes, mockups, and this mid-fi artifacts. all ideas goes from heads to paper and directly to code – the real ‘matter’ of the web.

    Say no to documentation – hello comunication

    1
    • 21

      Hi Matteo,
      I agree that working in small multidisciplinary teams is ideal and best solution. And it sounds like you are of a lucky group that is able to work that way. Some companies are too large and too dispersed and documentation is needed especially if different languages and cultures are involved. Throwing it over the wall and thinking that your work is done is the opposite of what I’m saying here. I’m advocating more collaboration and more effort on the designers end in making sure dev or production get’s it right!

      0
    • 22

      No thanks. Alcohol is very bad for you and plus I don’t drink.

      0
  11. 23

    I can install the Specctur Lite extension for Fireworks, but the Ai and Ps ones give me a:
    ‘The extension ‘Specctr Lite’ does not contain valid signature. The extension will not be installed’
    error message, with CS5′s extension manager on my mac refusing to install these. Any tips?

    (Looks fantastic by the way, I love seeing these kind of things on Smashing)

    0
  12. 26

    It”s a nice tool, just my suggestion instead of specifying the difference between the two objects cant we specify the X & Y co-ordinates of each object? That will be easy to work with for the developers, wouldn’t it? If you can export the details to a xml or html format then it will be even more easier. I guess. Thanks a lot for the tool :)

    0
  13. 28

    This is gold, and I will definitely get to use it in Illustrator. But, as others have mentioned, I would love a version for InDesign. I would pay for that! Hope you will consider making it!

    1
  14. 29

    I agree with all advocating for InDesign as the number one tool for web design mockups. That would truly be a plugin worth paying for! Please!?

    1
  15. 31

    My biggest issue are the units. Sure, we can use a preprocessor mixin like Bootstrap’s Remify, but we’re still stuck in desktop-specific pixel world.

    I would be more interested if the plugin supported type-friendly units like em and rem. And maybe even percentages as an option. It’s looking like a good start, but not worth a real web developer’s time yet.

    1
  16. 32

    This is really useful. I downloaded them and applied Lite Ver.. It works really well on Photoshop. and I am sure I can save lots of time of making guideline. and my team will do the same.

    0
  17. 33

    Disappointing…. the parameters are fighting each other… :-(

    0
  18. 34

    I show it to my Boss and he said: “Looks cool but not really since they aren’t using pixels or fixed width. with responsive design you’re using percentages and fluid grids”

    And this is true … I wish you guys will work on this

    Best,
    Abdulhameid

    1
  19. 36

    The plugin «specctrAi-Lite-1.4.2.zxp» isn’t installable under the actual Adobe Extension Manager v 7.1.1.32 and Illustrator CC v 17.0.2:

    «This extension can not be installed, it requires Illustrator version in range of inclusively between 15.0 and 15.9»

    0
    • 37

      Hi Yoram,
      Thank you for bringing this to our attention. We have an updated version up on our website Specctr Lite 1.5.0 that fixes this install bug. Let us know if you have any further questions and it the problem persists. Thanks!

      0
  20. 38

    It Works nicely..I tried it..

    0
  21. 39

    these types of Plug-ins raise a few questions. Do you really need to spec out all these parameters for the coder?

    This puts the onus completely on the part of the designer with the coder having no responsibility for quality assurance whatsoever.

    In my opinion a developer can use this plug-in just as easily as a designer. I’m not convinced it’s the designers responsibility.

    Let me know your thoughts (i’m easily swayed)

    so it goes…

    -dp

    1
  22. 40

    +1 on the InDesign plug-in, that would be my savior!

    0
  23. 41

    I think this is one of the most significant info for me. And i am glad reading your article. But should remark on some general things, The web site style is wonderful, the articles is really nice : D. Good job, cheers

    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