Not too long ago, we used to carry around bulky cameras, video cameras, audio recorders, calculators and photo albums. Now, we’ve got the iPhone, a device that’s adept enough that we can leave all of that gear at home, letting us travel lighter. If we needed to solve the double-integral of a function, we would still have to get the result on a graphing calculator, but for most day-to-day tasks, the iPhone is sufficient. Luckily, the design team has been using a program named Sketch that does the same thing: it streamlines building for web without the extra weight.

So, what is Sketch?

If you’re an Adobe fan, it’s the master pages of InDesign, the artboards of Illustrator and the pixel-perfection of Photoshop. More simply, it’s a program that’s reshaping the digital design community, allowing designers to create, iterate and prototype at breakneck speeds without having to start at square one after every iteration. It takes the high points of the Adobe products and combines them into a web-centric platform—without lugging along some of the more complex features. (And when you do need those, they’ll be right around the corner, embracing you with open arms).

What does it have to offer?

  1. Have your cake and eat it too! Different “pages” mean that you can have different layers of different artboards, so you can keep old versions and still overwrite copies. This allows us to create wireframes, keep them and skin the design, while keeping everything neatly bundled in a single Sketch file.
  2. Never miss a beat with symbols. Say you’re making a footer for every webpage you design—you copy-paste it on every page, and you realize you made a typo. In Photoshop, this could take several minutes to fix every instance of the typo. In Sketch, instead of fixing where it says “Fcaebook” on every footer (and kicking yourself for not proof-reading more carefully), you only fix it once, and it’ll auto-update in every footer since they’re all copies of the same symbol. If that sounds too good to be true, ride alongside us in the Sketch bandwagon.
  3. Take your font for a test-drive. Another key feature is type styles, where you can create categories of type, like a H1 Header, and those H1s can auto-update as well. If you’re trying to find the right font for your site, this is an easy way to test-drive the styles without having to overhaul everything and meticulously change every text box. Again, these change every text box set in the type style—so every P2 can be a size 18, left-aligned Lato, if that floats your boat. If not, keep updating fonts for the entire document in as little as two clicks.
  4. Drag, drop, and design! Moving from wireframes to skinning a design is as simple as replacing images in image masks and updating type styles. There’s no major overhaul, and we can reference wireframes as we move from one step in the process to the next; since the wireframes are also in Sketch, it’s often as simple as re-skinning the wireframes and customizing the look and feel of the site.

Will Sketch be our multi-tool of choice forever? Probably not. The market of competitive products is heating up quickly, and as creatives, our eyes are always on the horizon for the latest and greatest. For now, however, this is our Sketchy best friend, and we look forward to the memories we have yet to make.