From Adobe to Sketch: One Designer’s Perspective (Part 2)

Pages, Artboards and Layers oh my!


Well a few more days have passed with a few more tricks learned, and I thought it was time to make good on my promise from the first post; time to continue this series by taking a more in depth look at some of the specific functions and features included in Sketch.

I chose to focus on the combination of Pages, Artboards and Layers in this post for two reasons.

  1. Because while they all have very different and specific functions, they all deal with helping you organize and set up your work flow. These three combined have actually really changed up the way I approach projects in terms of organization, so it makes sense to group them together.
  2. These three features really showcase something that I’ve touched on in Part 1, the idea that Sketch cherry picks some of the most useful features from a variety of programs in the Adobe Suite and brings them together.

While the use of layers and groups is pretty universal across the entire Adobe ecosystem, Artboards are a unique feature to Illustrator and Pages are unique to InDesign and Fireworks. (Admittedly I haven’t spent too much time with the Edge series of apps, so I can’t comment on those). But let’s start with something most likely everyone is familiar with.

Layers

Before I even drew my first shape on the canvas, I started exploring the program’s UI and this was one of the first things that struck me.

Wait… what?…. Why is the layers panel on the left? It’s in the wrong place….

Traditionally, Adobe places their layers panel on the right (Video and Audio editing apps not withstanding), while the good folks at Bohemian Coding (the rebels they are) have decided to put it on the left. This takes a bit of getting used to, but since you do use the layers panel so often, the transition doesn’t take long to set in.

Each of your shapes, objects, type elements and raster assets get their own layer in the panel. Speaking of vector vs raster assets, Sketch is primarily a vector based app with a handy Show Pixels [Ctrl+P] option that temporarily maps your vectors out as rastered shapes. This comes in really hand when you’re working with font scaling and trying to account for anti-aliasing etc… It allows you to keep everything sharp and scalable while allowing you to still get “pixel perfect” designs. It might not seem like such a big deal, but one pixel here, another there and all of a sudden your spacing is completely off and nothing lines up to your neat little grid anymore. Also this is totally not a personal anecdote that I’ve learned the hard way…

Just as in Photoshop you have a variety of Blending Modes you can choose from. You can find these options under the Fills section of the Properties panel on the right.

While the list is not quite as extensive as it is in let’s say PS, your most used options such as Multiply, Overlay and Colour/Hue/Sat are all there.

In fact you’ll probably hear me repeat some version of the above statement throughout the course of this series, since it rings true for quiet a few features.

To be honest the layers here function primarily the same as they do in any Adobe App. (With a few small distinctions). Since Sketch is mostly vector based, you can’t really “merge” or flatten layers together the way you would in PS. You can of course combine shapes and a lot of the same actions that you’re probably used to from Illustrator (such as combine, subtract and intersect) are present. But we’ll touch on shape manipulations in more detail in a later post.

Selecting group or a layer in the panel will highlight that item on your canvas. Vice versa, if you hover over an item on your canvas, the corresponding layer or group is highlighted in the layers panel.

Interacting with objects on your Artboard will feel familiar to any Illustrator or Fireworks vets. Hovering over an object will highlight that object to show you what you’re about to interact with. Holding Cmd also allows you to select specific subsections and objects within groups. Speaking of groups…

As in most Adobe apps, layers can be further organized by grouping and ungrouping them as you go along. You can also have nested groups and each group can be renamed and moved around as expected. From what I can tell there is no limit as to how far down you can nest groups. I went as far as 10 just to test and really, if you’re hitting nested levels anywhere near double digits, you’re probably better off rethinking your project’s layer structure. (I’m sure some exceptions apply, but personally I don’t think I’ve ever hit nested levels that far down.) Groups and objects can also be converted into symbols; another super handy feature that’ll make FireWorks users and dare I say it — Flash veterans — squee with joy. Though just as the shapes feature, Symbols merit their own post.

My one gripe with the layers system so far is that some parts of the UI aren’t as intuitive as they should be. You can hide layers by hovering your mouse of the desired layer in the panel, and a previously invisible eye icon appears that’ll allow you to hide and unhide layers and groups. Not a big deal and something you come across pretty quickly while using the app anyway. But I spent a solid 5 minutes looking for a lock toggle somewhere, before giving up and resorting to Google. Turns out you can lock layers by hitting CMD+Shift+L, at which point a little lock icon appears in place of the hide icon that now shows if your layer is locked. Once again, not a huge deal once you know the shortcut, but I do wish this feature was implemented a bit differently.

Artboards

Familiar to anyone coming from Illustrator, if you haven’t had much experience with artboards before, they will quickly become your best friends when doing mock ups and wireframing for responsive designs.

Even for IL vets however, there are a few new tricks that the Sketch Artboards have up their sleeves. Once created, Artboards show up as top level items in your Layers panel on the left. This by itself takes some getting used to but it’s actually a pretty clever integration of two traditionally separate features in Illustrator.

Artboards also act as clipping masks for the objects nested within them. While they’re all part of the same Page (more on those in a sec), each Artboard is totally independent. You can move and resize them as you want, and each board comes with it’s own grid and set of guides, which you can toggle on and off independently. Kudos to the guys and girls behind Sketch on this. Working and moving between Artboards and layers is a much more fluid and seamless experience in Sketch than it is in any of Adobe’s apps, and it makes the entire process of designing for multiple viewport sizes much more enjoyable.

Speaking of mobile/responsive design, another one of Sketch’s really useful features is the ability to “mirror” your artboard on a connected Apple device. I just wish it wasn’t limited to iDevices. There are technically workarounds you can employ to get a similar effect going on Android, but it’s nowhere near as elegant, and frankly this is an example of the Sketch team being a victim of their own success. This is so cool that I want this feature on Android too, and not having it feels like there is something missing. Funnily enough, if they had left the mirroring feature out all together no one would complain. It’s like seeing browser tabs for the first time in the mid 2000s, or the inspect element tool in Chrome. You didn’t know you needed it till you did, and once you’ve tried it, you wish it was platform agnostic.

Pages

Pages are much the same. When I first transition from Photoshop to InDesign for doing print work, I didn’t realize I wanted pages till I went back to Photoshop… and then wondered how the hell I ever lived without them in the first place. They make organizing projects much easier, and it’s one feature I always missed in PS, so it’s good to see it in Sketch.

Pages are basically your topmost level containers. They hold your Artboards, which in turn contain all your groups and symbols, which organize all your layers. No more sea of photoshop files; one for each viewport size, with a different folder for each page of content for your mock ups. I’ve also seen people organize projects by having a different folder for each viewport size, with a different .PSD file for each page that had to be mocked up. You can try to keep some semblance of consistency by trying to hack your way around having common elements such as Menus and Footers live in Smart Objects that then link to their own PSD files… but let’s be honest; trying to do any kind of extensive UI design work in Photoshop quickly turns into a dumpsterfire.

With Sketch, it’s easy. Everyone has their own workflow, but this is how I do it.

Workflow

Let’s say I was designing a corporate site that also has a Blog.

I’d set up my Sketch project so that the pages of my file mirror the top level pages of the Site. Then within each page I set up artboards for every screen size I want to target and lay out the design at each size accordingly. Sketch allows you to move and cluster artboards as you please, so I just have the visual hierarchy of my artboards reflect the hierarchy of the sitemap for any nested pages. For example in addition to the main Blogroll, my blog page in Sketch would also contain the mock ups of the Post page, Archived Posts, Author Profile and any other nested or blog related pages.

Common elements such as menus and footers are turned into symbols so they’re easy to keep consistent and I have to just focus on the unique content of each page. For Apps or certain sites I might have a separate page dedicated to just the “chrome” or any consistent UI elements that serve as a a general framework for the rest of the site. This is also a good page to show different states for these elements such as button hover states, or open/closed menu states on mobile.

When I start a project I usually date the files with the creation date. Once a set of mock ups are done and sent off to the client for review, I archive that file away. If any revisions or changes are needed, I make a copy of the latest iteration, replace the date and continue working. Never ever call anything FINAL or MASTER. Version numbers are for showing different options a client can choose from during a single iteration and they remain restricted to single digits. Being somewhat anal about proper labeling and organization is something I carried over from my days in audio work. Even if all you’re doing is tracking drums with a band for a day, if you’re not properly set up from the get-go, once it comes to mixing and mastering, you’re gonna have a bad time.

That being said, this is just what I’ve found works for me and how I do things. This post was a bit overdue, and hopefully the follow up doesn’t take nearly as long. If I missed anything, or if you guys have a different workflow, I’d love to hear about it, (any feedback is always appreciated!)

Like what you read? Give Lehel Babos a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.