Even though I learned about designing for the web in what most would consider the modern era, I still learned (what I would consider) the old way of doing things. No, I’ve never made a table-based site, but I learned how to build a site without all of today’s CSS techniques. I remember slicing gradient images into repeatable, 1-pixel-wide background images, I remember how annoying it was to make a scalable container with rounded corners, and I remember adding classes of even and odd to list items and table rows.
I learned the ways of Photoshop, Illustrator, and other Creative Suite applications, but I had no set processes or preferences early on—I was bias-free, and nothing was sacred. There’s no arguing that the Creative Suite applications are powerful, feature-rich, and have the intangible value of being industry standards—the PSD format is almost as universal as PDF—but, they just didn’t feel like the right tool for the job, especially to someone who was new to it all.
As browsers became more advanced and rendering shifted from images to native CSS, the old, established applications fell out of step. A weird divide grew between how things were done in Photoshop and how they were implemented in code. The time was ripe for an application that was built, from the ground up, focused on the new era of interface design. And that’s when I found Sketch.
I was drawn to Sketch for its interface—it’s a truly native Mac application, not just an application packaged up to be compatible. It’s vector-based, yet pixel friendly, which makes a huge difference in a world filled with displays of varying pixel density.
The thing I love most about Sketch’s interface is that it’s consolidated and focused. All of an object’s properties can be tweaked directly in the inspector. No more traversing through menu after menu, or toolbar after toolbar, to get to important things.
Navigating around Sketch is a breeze, and it doesn’t stop at the interface. Documents are broken down into pages, and pages are broken down into artboards. With an unlimited number of each, there’s a lot of flexibility to be had. There’s no right or wrong way to use pages and artboards, so bend them to fit your process.
I’ve created Sketch pages to match each site page, with artboards to show responsive states. I’ve created pattern library pages, with artboards for things like type styles, control elements, and other general styles. I’ve made pages for icon sets, with an artboard for each individual icon. I find navigating through pages and artboards is a lot easier than opening multiple files and dealing with somewhat strange naming conventions.
Back in the days of slicing designs, one size and format of each image would do just fine. But today, it’s not uncommon to have multiple sizes and formats of each image asset to support different viewport sizes and display pixel densities. Though we’re using images for less, exporting has become much more complex, tedious, and important.
Sketch is built with a modern workflow in mind. Every single object and artboard in a document can be made exportable, and configured with multiple export rules. For each rule you can set a specific size, filename suffix, and image format.
Exporting assets is generally time-intensive, and future updates require a complete re-export. Once export rules have been set up in Sketch, all assets (or a chosen subset of assets) can be exported, formatted, and renamed with one click.
There are a ton of workflow improvements to be discovered in Sketch—things like global text and layer styles, reusable elements, square and layout grids, iOS mirroring, and a powerful third-party plugin system (my favorite of which is this content generator plugin).
Sketch isn’t without its flaws and pain points. Being focused on interface design, there aren’t many fine-tuned controls for image editing or manipulation, which often has me jumping between Photoshop and Sketch. Brush tool fans: you’ll still be using Creative Suite for the time being, because Sketch has nothing to offer on that front. It’s not the best tool for things outside of interface design, and I’ve heard many people who do photorealistic or heavily-detailed icon work say that they still prefer Adobe’s offerings.
While this can be seen as a positive or a negative, the Sketch team is just four people. Small teams like that obviously can’t move as fast as a team like Adobe, but their support is top notch and personal. It’s still a young tool, so there are some funny bugs that pop up every now and then, but Sketch is maturing really well, and version 3 has been an incredibly solid release.
The prospect of changing design applications is intimidating, especially in fast-moving environments. It slowed me down at first, but ultimately led to a better, smoother design-to-development workflow. If you’ve got a small or internal project coming up, maybe take advantage of their free trial and see if it works for you.
I’ve been using Sketch for about a month and it’s been a great experience. The work flow is a breath of fresh air. I love being able to see all of my pages / art boards in front of me as I design.
We are slowly transitioning to using sketch on all of our client’s projects.
It’s very true that the outcome of a design really depends on the tools you are using. Sketch allows you to concentrate on the core elements, without getting distracted or pushed in a certain direction based on the features of an application.
Now if I can just stop hitting the “V” shortcut as I did in Photoshop for all those years.
@John: In the past, were you handing over PSDs to clients? Has that changed at all? Have you run into any situations in which you need to hand over assets, and the Sketch files are an issue?
Also, I used to hit “V” all the time!
I love Sketch for mobile interface design (iOS and Android) , but I’m not much of a fan of it for web design. It just feels dirty to me.
While Sketch is a proper successor to what Fireworks was for mobile interface design, can you speak more on how much different it is from PSD in the sense it ultimately can bring up the wrong ideas about the final product and be as hard to transition the static work to actual markup?
The common problems I see with designing websites this way is the following that I’m having a hard time understanding how Sketch eliminates these problems compared to PSD despite being a vector and bitmap app (like Fireworks) that’s far better suited initially for interface work:
– Deliverables that give off the wrong idea that the web site should look the same on every browser
– Not much that can be translated to the actual medium the web site will be in (HTML or broken down further via a partial strategy)
– Pixel perfectionalism and taking time away from the work being made in actual html w/ few tools to expedite the process of transferring it .
Can you briefly touch on these things, Anthony?
I just finished using Sketch for a larger web design project and have mixed feelings. On the one hand it seems much more appropriate for design for the web, simplifying the toolset down to the essentials, and giving you quick access to panels for easy edits. On the other hand, as my most recent design became more polished with photo and vector assets, I found myself needing to revert to Photoshop and Illustrator anyway.
Designing icons in Sketch was so troublesome and buggy, that I had to them import them into Sketch from Illustrator. Also, as the file gathers more and more assets, the performance deteriorates significantly. I’ve enjoyed working with Sketch, but I’m not sure if it’s at a professional quality yet. But definitely looking forward to where v4 takes it.
I noticed you design at retina size and export in 0.5× and 1×. With the export set available, I am designing in natural size and export in 1× and 2×. This gives me the sizes a web/iOS developer would use.
Is there a special reason (graphically or technically) to design at retina size?
@Kevin: I think a lot of that comes back to process and client education. Mock ups aren’t the only tool in our toolbox, and they shouldn’t be doing the work on their own. At Happy Cog (and personally), we do all of our wireframing in HTML, and that’s where we work out things like layout, responsive states, and interactions. Those prototypes are the things that get our native web thinking communicated.
Our mock ups are where we establish the graphical side of things. We don’t make mock ups for every page or state—just enough to communicate the graphic style of what we’re building. So as our process has changed, we started using different tools to communicate different things. We do a lot to educate our clients on what purpose each deliverable serves, and that’s one of the most important things to establish with your clients early on.
@Anthony: I don’t agree with the statement that the Sketch team can’t move as fast as the Adobe team. It’s quite the opposite, in a year, they’ve done more than Adobe in 4 or more years.
@Kevin: It seems that you enjoy and find it better to design directly in the browser, go for it. Sketch can aid with that on the first mockups or with exporting graphic assets in SVG.
@Johannes: Designing in retina size allows for 1px details, where if you design it on “normal” size, you’ll have to change that to 0.5px which is not ideal.
@Johannes: Most of the design work I do is for iOS applications, so I’m often using iOS mirror. That said, I design at 2x sizes so that things look crisp when mirroring to retina or non-retina screens (specifically if I have pixel images like avatars or photos in my designs).
@Juan: I can see both sides of that coin. I do think their small team enables them to be a lot more nimble and flexible, which goes a long way in such a fast-moving environment.
@Matthew: I definitely had some performance issues previously, but I will say that v3 has been much more stable and I haven’t run into too many rendering bugs.
With the greatest respect I came here to read an article called “Design Tools for Today’s Web”, and all I got was evangelism for a single Mac-only app. I suggest you re-title this article to reflect the fact it is about one tool in particular, a tool that is available only on one platform. I’m sure Sketch is great but the title is misleading.
Thanks for another gentle nudge towards Sketch from someone who has known hardly anything but the Creative Suite.
I dig Sketch for all the reasons pointed out in this article. But to really get adoption on most teams, developers will have to pick this tool up.
That it’s a fairly priced app with a lot of time and efficiency benefits, it worth giving it a test drive during project discoveries, early wireframing and concepting; just to give people the opportunity to try it out.
Hopefully clients and teams will embrace it once they see just how much more easier it is.
I thought this article was about design TOOLS – it reads more like a Sketch content advertising play.
Sketch is pretty cool. I like it. The exportables are a huge thing. But it still blows me away that they have such an insular, Apple-centric view of the world. Macs are cool, too… but not everybody has one.
Our Creative team standardized on Sketch last year, and it was an immediate bottleneck because many of our developers and QA members have Windows boxes. Assets aren’t the only things you export, and although the CSS rule feature is a neat trick, it’s not “done code” – you still have to code it against real CSS targets, deal with cross-browser rules, etc.
Being OS X-only meant only a few “bridge” people in our organization ended up being the facilitators here. This bottleneck greatly decreased the value of the product This plus the lack of the kinds of more pixel-oriented measurement and manipulation tools found in things like Photoshop (and let’s face it, pixels are still very important in browsers no matter how much work you do in ems and rems) make Sketch more of a “neat tool” in my view rather than a Photoshop-killer.
@Chad: Like everything in our line of work, being pragmatic is a requirement. Sketch, nor any tool, is going to be the perfect solution in every situation. It’s up to us to choose the right tool for ourselves, our teams, our clients, and our projects. I don’t use Sketch on every single project, because sometimes it isn’t the right fit, and that’s totally fine.
I’ve read lots of articles about Sketch and though I tried using it I still don’t feel completely comfortable with it.
How do you guys handle deliverables with agencies or developers that don’t use it?
@Chad: At least the CSS stuff gets blown away if you use Autoprefixer (which is available right within Codekit – another OSX-exclusive app, or as a grunt extension), and I recommend doing this all the time. The css you write gets a lot cleaner and the output just fits for every browser.
To the OSX only part yes… that’s true, the web is not OSX only, but with retina screens and software like Sketch, Codekit and Layervault it does get back to this OS again. There are alternatives to everything, but I rather use a small software like Sketch for a very specific task, than opening up the 1.5gb Photoshop beast which grew old. The last big changes in Photoshop were done in CS2. CS4 brought content aware scale which might be useful and smart objects which are great. But the rest? I do like getting away from Photoshop (and all other Adobe Apps), and I’m glad that I work in a small team of 5 where 3 of us switched to Sketch already.
If Sketch was reliable I’d ditch Illustrator today. But I’ve been using it for a pretty small (16 page) iPhone app and good god, it’s incredibly frustrating. I spent most of today trying really hard not to put my fist through my iMac screen as Sketch came up with new and creative ways to break.
A small sampling:
By far the worst: Undo/Redo breaks constantly. I can’t tell you how many times I had to re-draw stuff because undo decided not to work. This drove me insane all day.
I would specify x/y locations for lines, and later the x/y locations would shift randomly by fractions of px (so a straight line would end up off by a few 10ths of a px)
I stretched a rectangle to make it wider, but as I did the left half turned transparent. Quitting/restarting Sketch didn’t even fix that one.
I would resize text, and later come back and the text would be 1px smaller
Masking is buggy… sometimes randomly everything above a mask layer will decide to be masked, even though you specified not to
Generally laggy performance on my core i5 iMac with 8GB RAM…
I was disappointed that only Sketch was mentioned in a post titled Design ToolS for todays web. :/
Coming from the Photoshop/Illustrator world, opening up Sketch for the first time was a rush of fresh air. Oddly, the feeling I do get on some level is that there just isn’t enough “stuff” yet.
Though Sketch is a big tool but I still think there is gap existed that needs to be filled by more tools like Sketch.
Yeah you are right Stacey there is gap existed that need to be filled.
http://www.bigtechideas.com
I always do my Webdesign with the Adobe Creative Suite. But noticing Photoshop is not always getting the best out of me. Maybe Adobe should look at the current webdesigners workflow and try to make this availible in the software. Starting with Photoshop, jumping to Fireworks and so on..