Ditch Photoshop. Design for the web using Sketch.

A cheaper and solid alternative to bloated, outdated software.

Intro

I’ve been tweeting a lot lately about Sketch, along with touting it to some of my design friends so I’ve decided to put together an overview for anyone interested in trying it out.

Let’s be honest, Photoshop is an amazing tool (and my go to for over 12+ years) but it’s bloated and the tools aren’t centered around designing for the web. Oh and of course, it crashes way too much.

Don’t even get me started about designing for retina displays. My current setup is a 13" MBP with retina display, along with an Apple cinema display as my main screen. I found myself doubling the size of my files just so I could have a clear, non pixelated view of everything that I was working on. It was frustrating that there was no easy answer. (besides wait for apple to come out with a retina display!)

Then I was introduced to Sketch. This was my answer! Vector graphics, infinitely scalable, oh my. Yes, Sketch is a professional vector graphics app with a beautiful interface and powerful tools.

Learning Curve?

There really isn’t one.

I spent the weekend getting to know the application and you can too. I really think all it takes is 3-4 hours to get comfortable with the interface. Diving in and learning is the only way to find out! By the end of the weekend I had recreated 4 main psd files into Sketch that I use almost every day at work.

Just a few highlights

Scalable vector graphics. Go ahead, zoom in to 400%.

cmd and +/- to zoom in and out.

Need to change the size of something quickly? Select the element and type in a new size.

Quick tip: use the up/down arrow keys to also control dimensions.

Did someone say CSS? All styles translate properly into CSS. Yes they really do.

Just right click on element in your document, then Copy CSS Attributes.

Linked styles. Set up a few styles when you start your project, this will help speed up your workflow.

Quickly change text by selecting a paragraph, then choosing a style in the right hand panel.

Multiple artboards. Easily duplicate an artboard to create versions to work on.

Rearrange them anyway you’d like.

Designing for mobile? No problem, they’ve got you covered — grab this little iOS app called Mirror. Works flawlessly.

What Sketch is not

Image editing. I won’t be getting rid of Photoshop anytime soon, if ever. Though there are cheaper alternatives to Photoshop. For image editing you can try Pixelmator —full featured image editing software. With an entry point of $29.99 on the mac app store, it sounds like a win/win.

Resources to get you started

1. Sketch Plugins — Plugins hosted on github.
2. Keyboard shortcuts — Well ya know, shortcuts.
3. Sketchmine— Sketch files from the design community. A great place to grab some resources and start learning.
4. Sketch tips and tricks blog
5. Follow Sketch App on Twitter
6. Buy on the Mac App Store

Further reading

1. Discovering Sketch
2. Supercharge your workflow with Sketch

Free trial

You can download the free trial and test it out for 15 days.

Thoughts?

I’m interested to know what you think. Will this catch on in the design industry? Will there be problems handing off projects without the beloved .psd?