Project Description

Project Description


Sketch has become the industry standard for wire framing digital product design. Simpler than Photoshop or illustrator to learn, Sketch has a lot going for it as a principal UX tool.

What it is.

Sketch is an application the was built specifically for UX designers to create wire frames quickly and easily.

How it’s used.

Many product designers have switched from Photoshop and Illustrator to Sketch for ease of use and faster onboarding. We use it to create the wireframes, and with the right plug-ins, we can do some pretty awesome annotations in Sketch too.


Once upon a time, Photoshop was the only application we used. It was expensive, complicated, and some of the worst user experience ever, but it was really all there was. And we all felt pretty good about ourselves for mastering it.

But then a little upstart application came along called Sketch. It really only did one thing, helped you create wireframes. But it did that with built in templates, symbols, and plugins that made the process as painless as possible.

Suddenly, anyone could learn to make wireframes, and it didn’t cost them $50 a month to have the software on standby.

I like to use the Web Design templates in Sketch, because they let me see all my breakpoints for different screen sizes at once. I design all of them at the same time, and can plan and think through the UIs for everything. It’s handy!



sketch templates

I recommend you get the freemium version of Sketch and play around with it. Try replicating your hand-drawn wires in the application. Then add the Notebook plugin and go at the annotations.


  • Know when to move your designs onto Sketch

  • Learn some plugins for annotations

  • Practice building wireframes with the tool

Tips & Tricks

Many engineering teams prefer designs are handed off via a plugin like Zeplin, which allows designers to include all the assets and automatically provide the specifications. You might still want to annotate the functionality of some design patters, however. I do that by including an annotated version of the wires with functions explained along with the individual screens.


Your Assignment

Take those low-fidelity wireframes and move them onto Sketch

Use Sketch to turn your low fidelity wires into high fidelity.

  • Write annotations using Notebook
  • Use the Website template to make your wires for desktop, tablet and mobile


Create a pdf and share your wires in the comments and/or on Dribbble and Twitter #100daysdesign.