Designers were talking about Sketch App by Bohemian Coding since its release in late 2010. Almost five years later, the program is becoming more and more ubiquitous amongst designers and developers, both in offices and amongst freelancers, due in part to the rise of seemingly endless screen sizes combined with multiple pixel densities. Sketch has unparalleled agility in handling pixel-friendly, vector-based files. Its multiple export options allow designers to quickly create assets and mockups at every stage of the design process.
These are only a few of the benefits to Sketch App. If you’re still using Photoshop and you aren’t sure if you want to switch to Sketch, here are 12 compelling reasons to make the jump.
1. Sketch is 100% Vector-Based
Everything you create in Sketch is 100% vector-based. This means your artwork can be 5px square or 5000px square or anywhere in between, and your work won’t lose quality. In Photoshop, if you create something small like an icon and you’re not using Smart Objects, the object will be horrible looking when scaled up. Having to consciously make shapes as Smart Objects in Photoshop is one extra step to take. Because Photoshop isn’t built specifically for vector graphics, the experience is a little clunky and can be frustrating.
In Sketch, the vector-based drawing allows you to create anything at any size and scale it up or down to any size you need. Plus, you’ll always be viewing crisp lines and clean shapes no matter how far zoomed-in you are. This includes text shapes alike — no more pixelated text when you’re zoomed in!
2. Draw Once, Export At As Many Resolutions as Needed
Because a lot of screens now have a high pixel-density, it can be frustrating to create a 1x and 2x version of a website in Photoshop. How many times have you created a website in Photoshop at a regular resolution, then realized you needed to go back and make your design look good in a 2x environment, or even a 3x one? If you just scale-up your work in Photoshop, you’re left with jagged edges and ugly pixelated raster graphics.
In Sketch, you draw your design once, then export it into as many resolutions as you need.
Need a logo exported at 10px wide, 500px wide, or even 1000px wide? Simply draw your logo once and create multiple export sizes in Sketch. You don’t even need to draw your logo at one of the desired export sizes! Draw now and figure out your necessary export dimensions later.
3. Pixel Snapping and Alignment
Photoshop and Illustrator recently added Smart Guides, which show you when you’re lined up with another object or at the edge of the canvas. But it can be messy and confusing. For example, in order to center something in the middle of the canvas, you have to pull in a guide and then move your objects to snap to the center. But it doesn’t always work; sometimes you end up 1 or 2px off-center!
Sketch will allow you to align any object to the center of an Artboard, horizontally or vertically. The snapping works similarly to Photoshop and Illustrator but feels significantly less buggy. Plus because Sketch was created for web and UI design, it’s geared towards pixel units. While you can end up with partial-pixel dimensions, you can easily fix them in the inspector panel.
4. Multiple Pages
Much like artboards, Pages exist in Sketch so you can organize your work the way you want. Let’s say you’re working on that responsive blog design project. If you wanted to, you could create each design on one Page so it’s organized a little more. On your first page, you could have all of the mobile and desktop versions of the homepage. Then on the second page, you could have all of your responsive versions of the blog index page. Basically, you can organize your files and artboards the way you want, and it’s as simple as dragging things around.
A great use for multiple pages is to have exportable assets on one page (or, “Slices” in Sketch). By having these all isolated on a separate page, you can easily see and organize the slices for your project.
Finally, it helps to have your Style Guide on a separate page so you can create all of your text styles, colors, and other styles in one place.
5. Text Styles and Other Styles
What? You want to have repeatable text styles within your software so you can create one type of body copy, use it multiple places, and only update it in one place if you need to make a change? Oh right. Sketch can do that for you.
Or, want to have a repeating button with a certain fill color, border, shadow etc? Do this easily by drawing your shape and then adding a Shared Style to it. The next time you need to apply this style, just draw any old shape and then apply a Shared Style to it, and it will magically morph into your Shared Style.
6. Sharing Your Work
Sharing your work and progress is simple in Sketch. Let’s say you’re working on a billboard design in Photoshop and you need to keep sending JPEGs to the client to get it approved. Because this is such a large format file, you will need to work in a slow and laggy file. When you save it to share progress of your work, you need to down-sample the size manually or save for web every time. And every time, Photoshop will work hard to compress your file.
In Sketch, you can work at any size, and then export into multiple sizes. If you have a 4000px wide artboard and want to share it as 500px wide in emails so you don’t break peoples’ inboxes, you can easily add a Slice to the artboard, set it to export as “500w” and “JPG” and your file will export at that size and format without a problem. Then when you’re ready to export the final, switch the slice back to 4000px wide. Easy peasy.
7. Exporting to SVG is Simple
Exporting to SVG from Photoshop or Illustrator is nearly impossible. It doesn’t even work correctly sometimes. I was working with an icon font in Illustrator and the files would repeatedly show up blank. As soon as I moved the project into Sketch, all of the issues were fixed, and exporting to SVG was as simple as exporting to any other type of file.
Sketch is set up to be future-friendly, and SVG’s are the way to go for responsive and high resolution web.
8. Sketch Knows CSS
Sketch is a web designer and front-end developer’s best friend. Make anything in Sketch (and I mean anything) and you’ll be able to grab the CSS for it. And it’s not hard to do so. Just right-click on your thing (text, shape, gradient, whatever), and click Copy CSS Attributes. Paste it in your text editor. Boom. This is especially helpful for complicated gradients or other CSS that you can’t remember.
9. Pull Color From Anywhere
Eyedropper tools exist in Photoshop and Illustrator, but you’re limited to what’s already open in the program. With Sketch, you can choose the eyedropper, and point anywhere on your screen to choose a color. Easily pull in colors from an existing webpage. Pop open an image in Preview and sample colors from it.
Being able to pick colors from anywhere on your screen is powerful and extremely useful.
10. Mirror Your Designs onto Mobile Devices and Tablets
The Sketch Mirror app is an add-on purchase that’s worth the money (it’s only $5 after all). Sketch Mirror allows you to send an artboard to a device that has Sketch Mirror installed, including your iPhone and iPad. Being able to see a mobile site on your phone is powerful for you as the designer, but also helps with presentations so a client can visualize what the design is going to look like on a mobile device.
11. More Intuitive Slicing
Slicing in Photoshop is antiquated. It’s based off of when websites would be fully designed in Photoshop, then literally sliced into grids so a designer could upload the pieces and then reassemble them in tables (yuck). Slicing in Photoshop is complicated and bloated.
In comes Sketch. You can easily slice any asset from an icon to a logo to an entire artboard. To create a slice in Sketch, you select the Slice tool (S) and draw a box around your object or asset. If you need to slice an entire artboard, the slice tool will snap beautifully to the edges, leaving you with a clean export. For smaller assets, you can choose to include the background color or leave it out.
And let’s not forget that since Sketch is entirely vector-based, you can export your slices in any size desired without losing quality. You no longer have to create an icon at 1x, 2x and 3x; simply create it at 1x and then set multiple slices to export. You can even choose your suffix so the file will be exported and marked to your liking. Vector-based intuitive slicing is an awesome, time-saving feature of Sketch.
12. Speed Up Your Workflow
Because Sketch is a niche app that was created specifically for UI, UX and web design, you can create designs a whole lot faster than in Photoshop. Designers also argue that Sketch’s interface is much more intuitive and easier to learn than Photoshop, some even saying they mastered the program within 2 days of working with it!
Not sold yet? The best reason to try Sketch is it’s much more affordable than Creative Cloud. You even get a free 30 day trial. There’s really no reason NOT to try it. Make the switch, dive into your free trial by spending a couple of days following along with tutorials, and you’ll be hooked.
Have you or your coworkers switched to Sketch? What are your favorite features?
Jenn Coyle is a Philadelphia-based Designer and illustrator who loves to create fonts and resources on Creative Market. She also shares tutorials and inspiration for designers and creative entrepreneurs at Hello Brio Studio. Take her Skillshare class to learn how to make your own hand drawn font.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Lettering artist, writer, mama, minimalist. Likes iPad stuff. Pays extra for guac. Target makes me 12% basic.
View More Posts
57 Comments