By: Michael Todd
If you’re a web/UI/UX designer, work with one, or would like to become one, this article is for you.
Earlier this year, I decided to check out this app called Sketch, which seemed to be an indie design tool that was getting more and more attention. I hadn’t thought much of anything that wasn’t an Adobe product to use for design. I assumed that newer tools, often found on the App Store for around $99, would be sub-par and probably a waste of money to try. Well, as it turns out, one of these newer inexpensive indie apps is actually one of the best design tools you can buy and absolutely fantastic for web and UI design. Here’s why it’s quickly become my new best friend:
Let pages set you free.
Let’s first assume you’ve at least moved on from Photoshop to Illustrator; and if you haven’t, I HIGHLY recommend researching the advantages of vector-based design and how these tools also tend to be better for responsive web design. It will change your life. If you do use Illustrator, then you know how useful it is to have multiple artboards to design with in a single file. And you also know that it can be annoying that:
- There’s really no way of organizing your artboards other than grouping them together, visually.
- The limited canvas size means you only have so much room for artboards before you don’t have any more room to place them.
- The 100 artboard limit is also pretty restrictive for larger projects.
- Larger files tend to be sluggish and occasionally crash.
Enter Pages in Sketch. Pages are essentially the equivalent of having multiple (and unlimited) canvases in Illustrator. Here’s why that’s awesome:
- Group artboards together just like you group layers.
- Make as many as you want. Pages and artboards are unlimited and don’t slow down Sketch as your project grows.
- Smart alignment (like Smart Guides in Illustrator) helps your maintain equal spacing and alignment between your artboards. So if you’re a little obsessive about that sort of thing, Sketch understands you.
How I use pages:
I tend to use pages to separate my different design templates. For example, one page is usually dedicated to the homepage and each artboard on that page is a design variation or a different state, and includes the desktop, tablet, and mobile designs all in one place where I can see them all together and easily move design elements from one to another. I also keep a page for my style guide, where I keep examples of styled text, button styles, or other UI elements that I’ll use throughout (read on to hear about Layer & Text Styles). I also keep a page reserved for responsive grid settings (see the next section) that I can duplicate for new pages so that I always start out with the same artboard sizes with the same grid settings.
With Illustrator, I used to try using separate files to organize my designs because keeping too many in 1 file made it slow, but that method had it’s own problems. Sketch’s performance and pages feature fixes all of this and does it well.
Responsive grid guides, built-in.
Sketch understands that it’s 2015 and responsive web design is a standard that heavily influences the way we design and build websites and web-based apps alike. That’s why it’s got built-in grid guidlines that intelligently calculate sizes for you so you can set custom grid sizes without having to do the math yourself or manually draw guidelines. Sketch calls it Layout and you can turn it on/off as needed, per artboard.
Layout Settings allows you to set variables that grid dimensions, but I usually specify only 2 things and let it calculate the rest accordingly: Total Width and Gutter Width. You can also switch between the guides being filled versus outlined, depending on your preference. If you use the same settings often, you can set them as the default so that every new artboard you create inherits those same settings.
Tip: Apply grid settings to multiple artboards or all artboards within a page all at once by selecting them before bringing up the Layout Settings menu.
Sure, there are Photoshop and Illustrator templates you can download with grid guides already drawn, but a) you might want tighter gutters or a wider row width; b) they’re usually made 1 screen size (desktop) and don’t include smaller versions for tablet and mobile; c) you still have to copy/paste them onto every artboard you make that needs the grid guidelines overlaid on them, which is pretty much all of them; and what if you decide to change them during the project? If you want to calculate grid sizes for a custom grid or different screen widths, have fun doing the math…You’ll wind up using an online grid tool for that, but then you’re still stuck with problem c).
This is what my page for responsive artboard sizes typically looks like with the grid layout turned on:
Speed things up with Layer and Text Styles.
You’re familiar with text styles. You know, defined styles for headlines, body copy or paragraph text, things like that. Illustrator and InD