In the physical world, no one builds anything without detailed blueprints, because people’s lives are on the line. In the digital world, the stakes just aren’t as high.
It’s called “software” for a reason: because when it hits you in the face, it doesn’t hurt as much. No one is going to die if your website goes live with the header’s left margin 4 pixels out of alignment with the image below it.
But, while the users’ lives might not be on the line, design blueprints (also called design specifications, or specs) could mean the difference between a correctly implemented design that improves the user experience and satisfies customers and a confusing and inconsistent design that corrupts the user experience and displeases customers.
For those of us who create digital products, design specs could mean the difference between efficient collaboration and a wasteful back-and-forth process with costly implementation mistakes and delivery delays. It could also mean the difference between your business making money and losing money, in which case lives might actually be on the line.
In short, specs can help us to build the right product more quickly and more efficiently.
What Are Blueprints (And Why Are They Blue)? Link
“A blueprint is a reproduction of a technical drawing, documenting an architecture or an engineering design, using a contact print process on light-sensitive sheets. Introduced in the 19th century, the process allowed rapid and accurate reproduction of documents used in construction and industry. The blue-print process was characterized by light colored lines on a blue background, a negative of the original.”
Architectural blueprints were the photocopier of the 19th century. They were the cheapest, most reliable technology available to copy technical drawings.
Blueprints were created by sending light around an ink drawing on transparent film. The light would shine through everywhere except the ink and hit a paper coated with a light-sensitive material, turning that paper blue. This outlined a white copy of the engineering drawing on a dark-blue background.
These copies were then distributed to builders who were responsible for implementing the designs in those drawings.
Today, many graphic designers also distribute design specs to the front-end developers who are responsible for implementing the designs. Design specs are no longer made with paper and light, and they are no longer blue, but, as before, they ensure that the product gets built correctly.
From Bricks To Bits And Bytes Link
For a former real estate developer, working with graphic designs without specs was like getting a set of architectural blueprints with all of the drawings and none of the numbers. Without the necessary CSS “measurements,” I was forced to hunt through layers and sublayers of shapes and text elements to figure out the right HEX value for the border around the “Buy” button or the font family used in the “Forgot Password?” field. Such a workflow was very unproductive.
I was starving for specs when my friend Chen Blume5 approached me with the idea of Specctr156, a tool that would bring the familiar benefits of architectural blueprints to the world of graphic design and front-end web development. I immediately recognized the value and potential of this idea, so we started working together right away, and soon after that, the first version of Specctr was released.
Initially, the Specctr plugin was for Adobe Fireworks users8 only, which at the time — 2012 — seemed to be the best tool for UI and web designers. Later, we expanded the range of supported apps, and today it includes Fireworks, Illustrator, Photoshop and InDesign.
A Picture (And Some Numbers) Are Worth More Than A Thousand Words Link
The phrase “A picture is worth a thousand words” means that a complex idea can be conveyed with just a single still image. It also characterizes well one of the main goals of visualization, which is to make it possible to absorb large amounts of data quickly. However, in the design and development business, a picture or a single PSD is not enough.
Developers need to know a design’s exact attributes to be able to write the HTML and CSS necessary to recreate the text and shape elements via code. If a PSD is not accompanied by detailed specs, then making approximate guesses or hunting through layers could lead either to errors or the loss of precious development time.
Developer Focus Link
When developing something, I might need several minutes to load the necessary mental models in my head before I can be productive. Any interruption could bring a wrecking ball to the intricate imaginary machinery I’ve struggled to assemble inside my head.
This is why having to look up an RGB value or turn to a teammate to ask which typeface is being used could lead to big gaps in my productivity.
And if you’re a member of a distributed or remote team, then you don’t even have the luxury of immediately getting your questions answered by a colleague — you’re off to an asynchronous communication tool like Skype, Hipchat or, worse, email. As Chris Parnin puts it11:
“The costs of interruptions have been studied in office environments. An interrupted task is estimated to take twice as long and contain twice as many errors as uninterrupted tasks. Workers have to work in a fragmented state as 57% of tasks are interrupted. For programmers, there is less evidence of the effects and prevalence of interruptions. Typically, the number that gets tossed around for getting back into the ‘zone’ is at least 15 minutes after an interruption. Interviews with programmers produce a similar number.”
A Carnival Of Errors: Developer Edition Link
Julia had been at her computer for eight straight hours and was late for dinner with her parents, but she had promised to have this CSS transition between the “product” overlay and “buy” overlay on the master branch by the end of the day. She was almost done, but the type on this “Submit” button didn’t look the same as the one that was live on the website now.
“It’s fine,” she thought. “I’ll change it tomorrow.”
Faced with short deadlines and the prospect of rummaging through Photoshop layers, some developers would take a stab in the dark with what type to use — thus, negating the hours of design research they’ve invested with one stress-fueled decision.
In the end, we’ll have to redo it anyway, but for now we’ll meet the deadline. It’s all about developer convenience.
No one in the history of forever put in extra effort to do the wrong thing. Mistakes are usually the result of following a tempting shortcut.
The record industry’s failed attempt to halt the digital distribution of music is a good example of this. Spotify’s whole business model13 is based on the fact that “people were willing to do the right thing but only if it was just as rewarding, and much less hassle, than doing the wrong thing.”
Give your front-end engineer a fully spec’ed design and then bask in the rays of gratitude emanating from their face. They’ll get all of your margins and padding exactly right; that subtle gradient will have the precise values you took so long to match; and it will all get done faster. Why would they do anything else? All of the information they need is right there in front of them!
The Triumph Of Tediousness: Designer Edition Link
Lauren took a second to appreciate her finished design. It was well-balanced and conveyed a sense of calmness, all while guiding attention towards the “Submit” button.
She was tired and ready to go home after a long day of work, but she had promised to deliver the finished design so that Julia could get a head start on developing it for tomorrow’s deadline. She sometimes created specs for the developers she worked with, but she just didn’t have it in her to type and draw out each individual annotation “by hand.”
“Julia will figure it out,” she thought to herself as she hit “Send.”
It’s all about designer convenience.
If design specs (i.e. blueprints) have so much to offer, then why aren’t they a part of every designer’s workflow? The reason I, as a developer, might skip looking up the type is the same reason many designers don’t create specs: It’s easier not to.
This is because designers are not using the right tools. They manually measure and draw each dimension, and they type each pixel value and RGB value “by hand,” using the same general-purpose drawing tools that they used to create the design.
Any time you ask an artist to stop creating and focus on process, you’re fighting an uphill battle. The hill becomes dramatically steeper when the process is slow and tedious.
With the right tools to automate the creation of specs, designers can reduce costs and enable their whole team to reap the benefits of creating and distributing design specs.
Let’s Create (And Use) Design Specs Link
The two examples above — with Julia and Lauren — are imaginary, but that doesn’t mean they don’t happen constantly in real life. Developers should not have to make any guesses that lead to errors and lose time. On the other hand, creating detailed specs manually is tedious and takes a lot of the designer’s time.
Is there a better way? I believe there is.
We should start using tools that help us to create design specs with a minimum of hassle. Such tools would save time for both designers and developers and would lead to better designer-developer workflows.
Below are some excerpts from a design document annotated with Specctr. With the help of the Specctr plugin, a designer could quickly provide the color values of any design element, along with the exact width and height, gradient values, type attributes (including font family, weight, kerning, leading, etc.), margins, padding, border properties and more. This would greatly help the developer to implement the design because they would not need to hunt through layers and sublayers or make any guesses.
As a bonus side effect, using detailed design specs will help you to avoid errors and inconsistencies in the final version of the design when it’s implemented in real life. Below is an example of the “drift” that can occur when implementation details are not made explicit and are left up to the developer’s guesswork.
Note: Specctr is not the only tool that automatically generates detailed design specs. Plugins such as PNG Express23 (designed to work with Photoshop) do similar tasks, but I’ve been mentioning Specctr because I developеd it myself and have the most experience with it. If you have tried other spec-generation tools, please, share your experience in the comments below.
Components And Style Guides Link
Developers have long been familiar with the advantages of breaking a large system down into small components through object-oriented programming24, which is currently the dominant programming paradigm, thanks to the adoption of languages such as Java25. Breaking a complex project into self-contained parts that make up the whole allows a single part to be reused in multiple places in a project and allows for greater project organization and easier maintenance.
Designers are also finding26 that breaking down a design into its atomic components allows for greater efficiency because they’re able to combine them to reuse their code and styles. Seeing the components from which a project’s entire design is derived allows for the immediate communication of style choices made across that project. Examples of the components that would be shown are the grid, buttons, forms, tables and lists.
Components combined with design specs make up a style guide32. A style guide serves as a reference both to communicate a project’s design aesthetic and to provide details of its implementation to developers. Developers no longer have to rely on designers to spec individual documents, and can instead use this reference to find the information they need. In this way, a style guide is another great tool for more efficient collaboration between designers and developers.
“Developers at all stages of projects expect and demand strong documentation.
Although documentation is never the most exciting aspect of design, it’s a critical step in ensuring smooth working relationships, timely delivery and a successful hand-off at the end. Ultimately, design documentation acts as a life-support system, ensuring that your vision is executed properly.”
Like any good business process, design specs should support the primary endeavor — in this case, to create beautiful websites and applications. Creating these products requires collaboration between designers and developers, and effective collaboration requires effective communication. Investing in the development of workflows and tooling around to make this communication easier and more efficient will pay off big with the speed and effectiveness with which products are built and, ultimately, with the success of the businesses that depend on those products.
Further Reading Link
- “Best Practices for Designer-Developer Collaboration37,” George Dean
A nice summary of the different workflows available to developers and designers
- “How to Improve Designer and Developer Workflow?38,” StackExchange
A discussion illustrating some of the concerns about designer-developer workflows
- “Blueprint39,” Wikipedia
A detailed definition (and some history) of the word “blueprint”
- “Programmer Interrupted40,” Chris Parnin
Some studies and resources on the effects of interruption on programming
- “Creating a Killer Style Guide41,” Ben Gremillion, Zurb
A tutorial on creating a style guide
- “How to Make an Effective Style Guide With Adobe Fireworks4234,” Joshua Mauldin, Smashing Magazine
An interesting read on making style guides with Fireworks
- “Blueprints for the Web: Specctr Adobe Fireworks Plugin437” and “Blueprints for Web and Print: Specctr, a Free Adobe Illustrator Plugin44,” Chen Blume, Smashing Magazine
Examples of using the Specctr plugins for Fireworks and Illustrator
(mb, al, il)
- 1 http://en.wikipedia.org/wiki/Blueprint
- 2 https://www.smashingmagazine.com/wp-content/uploads/2014/10/1-joy-oil-gas-station-blueprints-large.jpg
- 3 http://en.wikipedia.org/wiki/File:Joy_Oil_gas_station_blueprints.jpg
- 4 https://www.smashingmagazine.com/wp-content/uploads/2014/10/1-joy-oil-gas-station-blueprints-large.jpg
- 5 https://www.smashingmagazine.com/author/chen-blume/
- 6 http://specctr.com
- 7 https://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
- 8 https://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
- 9 http://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words
- 10 http://en.wikipedia.org/wiki/File:1913_Piqua_Ohio_Advertisement_-_One_Look_Is_Worth_a_Thousand_Words.jpg
- 11 http://blog.ninlabs.com/2013/01/programmer-interrupted/
- 12 http://heeris.id.au/2013/this-is-why-you-shouldnt-interrupt-a-programmer/
- 13 http://www.theguardian.com/technology/2013/nov/10/daniel-ek-spotify-streaming-music
- 14 https://www.smashingmagazine.com/wp-content/uploads/2014/10/6-specctr-top-left-spec-large.png
- 15 http://specctr.com
- 16 https://www.smashingmagazine.com/wp-content/uploads/2014/10/6-specctr-top-left-spec-large.png
- 17 https://www.smashingmagazine.com/wp-content/uploads/2014/10/7-specctr-mid-left-spec-large.png
- 18 https://www.smashingmagazine.com/wp-content/uploads/2014/10/7-specctr-mid-left-spec-large.png
- 19 https://www.smashingmagazine.com/wp-content/uploads/2014/10/8-specctr-mid-bottom-spec-large.png
- 20 https://www.smashingmagazine.com/wp-content/uploads/2014/10/8-specctr-mid-bottom-spec-large.png
- 21 https://www.smashingmagazine.com/wp-content/uploads/2014/10/9-how-a-design-can-deviate-without-documentation-example-large.png
- 22 https://www.smashingmagazine.com/wp-content/uploads/2014/10/9-how-a-design-can-deviate-without-documentation-example-large.png
- 23 http://www.pngexpress.com/
- 24 http://en.wikipedia.org/wiki/Object-oriented_programming
- 25 http://en.wikipedia.org/wiki/Java_%28programming_language%29
- 26 http://bem.info/method/
- 27 https://www.smashingmagazine.com/wp-content/uploads/2014/10/10-mozilla-grid-comp-large.png
- 28 https://www.mozilla.org/en-US/styleguide/
- 29 https://www.smashingmagazine.com/wp-content/uploads/2014/10/10-mozilla-grid-comp-large.png
- 30 https://www.smashingmagazine.com/wp-content/uploads/2014/10/11-mozilla-list-comp-large.png
- 31 https://www.smashingmagazine.com/wp-content/uploads/2014/10/11-mozilla-list-comp-large.png
- 32 http://medium.com/@bradhaynes/designing-products-that-scale-c8f3001f709b
- 33 https://www.smashingmagazine.com/wp-content/uploads/2014/10/12-style-guide-fireworks-large.png
- 34 https://www.smashingmagazine.com/2014/02/17/effective-style-guides-with-adobe-fireworks/
- 35 https://www.smashingmagazine.com/wp-content/uploads/2014/10/12-style-guide-fireworks-large.png
- 36 http://www.cooper.com/
- 37 http://pivotallabs.com/best-practices-for-designerdeveloper-collaboration/
- 38 http://programmers.stackexchange.com/questions/141624/how-to-improve-designer-and-developer-work-flow
- 39 http://en.wikipedia.org/wiki/Blueprint
- 40 http://blog.ninlabs.com/2013/01/programmer-interrupted/
- 41 http://zurb.com/university/lessons/31
- 42 https://www.smashingmagazine.com/2014/02/17/effective-style-guides-with-adobe-fireworks/
- 43 https://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
- 44 https://www.smashingmagazine.com/2013/11/15/specctr-an-adobe-illustrator-plugin-freebie/
- 45 https://www.smashingmagazine.com/author/michel-bozgounov/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.