GuideGuide 4

May 12, 2016

Screenshot of the GuideGuide panel

GuideGuide is a Photoshop extension that I’ve been designing and developing since 2010 that provides a quick interface to generate grids and add guides to documents. According to my contacts at Adobe, it is the most installed third-party Photoshop extension. In 2015, I launched the fourth major version, which was a complete rewrite of the extension for Adobe’s new extension platform. If you’re interested in the history of GuideGuide, I suggest you check out this blog post on the GuideGuide website.

GuideGuide is an exercise in figuring out how to pack a complex interface into a small space in as friendly a way as possible. The most common interactions people have with GuideGuide are making grids, placing midpoint and edge guides, and clearing guides. I chose to make the quickest actions always accessible at the bottom of the interface, and the form, lean heavily on text labels, preferring to save icons for actions that are clear without a label.

Screenshot of the GuideGuide panel

Over the years GuideGuide users have suggested numerous features for the grid form. My goal has always been to keep GuideGuide as simple as possible, so I took a unique approach to providing deeper functionality for power users: I wrote a grid language called “grid notation” that allows users to give GuideGuide commands, much like writing code for software. GuideGuide’s fields use a limited version of this notation to allow a simple column-width field to support things like margins and midpoints. It also includes a “custom” tab where users can write complete grid notation grids to really customize their experience.

Adobe’s extension system is built on top of Webkit with Node.js built in. This setup means that extensions are built with HTML, CSS, and JavaScript. For the nerdy and interested, GuideGuide is a Thorax/Backbone application which is compiled using Grunt. For tests, I use Travis CI to run tests with Mocha every time I push to GitHub.

I’ve always planed to expand GuideGuide into other applications. In preparation for that, GuideGuide is built as an API that handles everything from the panel’s user interface to the calculation of grids. I then use a bridge written for each application that contains code which handles converting data and actions to and from GuideGuide into the format that the specific applications understand. This particular architecture and the fact that the panel is built with web languages has a cool side effect.

Diagram of how the GuideGuide model works

The first interaction most people have is with the website. The first time you use GuideGuide is a “woah” type of moment. To bring that moment to people as quickly as possible, I embed a live version of GuideGuide right into the marketing site.

I built a fake Photoshop environment—obviously called Fauxtoshop—into the site which connects to GuideGuide via a bridge written specifically for it. The fully functional demo gets updated by the publishing pipeline automatically so it’s stays up to date whenever I update the extension. Because the demo is an actual instance of GuideGuide, any grids saved in the demo persist between sessions and can be exported and used in a real install of GuideGuide.

I sell GuideGuide through multiple online marketplaces, maintain the GuideGuide site and documentation, the panel, and the Twitter account. I’ve refined the messaging over the years and have worked to create consistent, helpful copy between the mediums. Between all of these try to strike a balance of humble-yet-self-aware confident, helpfully informative, with just a hint of told-you-so snark.

I’ve designed GuideGuide as an extension of my own brand to signify its place in my life. It’s my testing area for best practices, worst practices, and new ideas. I’m really proud of what it has become.

Year: 2010–2015 Role: design, development, copywriting, marketing, support