Day 23: 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!
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.
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.
Originally published at 100days.design on November 7, 2017.
