Sketch vs. InDesign: Another day, another program

As more and more design programs are released, how do you know which one is right for you? At Sanger & Eby we are constantly keeping our eyes out for new technologies that will help our team produce their best work for our clients.

Sketch App logo vs. Adobe InDesign logo.

If you’re a web designer, then you know that there are tons of options when it comes to picking a program to build your mockups in, and more seem to pop up each day. It’s great to have a plethora of options, but let’s be honest – it gets overwhelming when the list of trendy new programs continues to grow and you’re just trying to focus on meeting your next deadline. You want to pick a program that will work for you intuitively, quickly and still produce a pixel perfect product that can seamlessly be handed off to your developers.

At Sanger & Eby, InDesign has actually been the program of choice amongst the design team for quite a while.

Some of the key reasons we use InDesign:

  • You can utilize paragraph styles to quickly update your typography across multiple pages
  • Master pages help you keep top navigation and headers consistent across the board
  • Perhaps most importantly, you can set up grids to accurately produce a bootstrap template

InDesign has been a tried and true companion to our design process, but we’re always looking to see what’s new on the market. So in the past year or so we've been dabbling in Sketch App to see what the program has to offer. After a handful of tutorials and articles, we were ready to use Sketch exclusively on a project from start to finish. It has some great bells and whistles, and it continues to evolve its features and functionality.

The biggest appeal of Sketch that prompted us to explore the program in the first place was its exporting capabilities – cutting assets and pulling small chunks of CSS directly from our art boards – prompting a faster and easier handoff to the development team. Whereas with InDesign, we still have to manually bring each asset into Photoshop and save it for the web individually. We also write up all of our CSS attributes from scratch when using InDesign.

Sketch has great features such as text styles, layer styles and symbols. You can easily make updates to text, buttons, headers or footers, and with the click of a button those changes will apply to all instances of those symbols and styles. You can also easily export a batch of assets or full pages. The “mirror” feature is pretty cool because it lets you preview your designs in real time on an actual device. We hope they continue to build upon this feature as it would be ideal for sharing designs with clients. Right now, it seems like you can only share preview links locally.

 

Screen capture of the Sketch App program

 

Coming from InDesign, we had to get back into the habit of organizing our layers religiously when using Sketch. This did slow my process down initially, but when it came time to export my assets in Sketch, it was all worth it because they exported into organized folders according to their layer names. 

One hiccup with Sketch was its lack of gradient support when exporting pages as a PDF. When exporting all of the mockup pages, none of the created gradients were rendering correctly. To solve the problem we had to first export our pages as jpegs and then pull them into the PDF file. So that got a little tedious, but a lot of designers keep their files as jpegs anyway, so maybe there’s something to be said for that.

We were delighted to find out about the Sketch plug-in, Craft. It allows you to import and create libraries of photos, style guides and content. You can generate and duplicate content or even pull content directly from the web. The creators of Craft are currently in the works of adding a new prototype feature that’s sure to be a game changer for Sketch once it’s released.

For now, we’ve been using Invision App for our prototypes, but we're excited to see what comes of the new prototype plug-in for Sketch. We’ve also been keeping our eyes on Adobe XD, which has a strong prototyping feature, but it still doesn’t compare to Sketch when it comes to symbols, styles and exporting options.

Overall, we're a big fan of Sketch and the targeted, UI specific features that it has over InDesign. While InDesign has been our go-to design program, we’re looking forward to exploring Sketch further and Adobe XD as it continues to evolve.