Loading...
Day 23: Using Sketch2017-11-07T11:36:27+00:00

Project Description

Project Description

USING SKETCH

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.

Discussion.

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.

Objectives

  • Know when to move your designs onto Sketch
  • Learn some plugins for annotations
  • Practice building wireframes with the tool

Tips & Tricks

I like the plugins that allow me to easily annotate them. At the time of this writing, Notebook is my plugin of choice for annotations. It automatically adds the sidebar to your wires (so you don’t have to resize the artboard and manually draw a sidebar). It will number each annotation, with a corresponding number in the side bar. And it’s easy to edit.
It’s crazy cheap, too. About $7 for the Cadillac version of the plug in. Really, I would have paid a lot more for this utility.

Resources

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

Deliverables

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

Leave A Comment