The New Tools for Web Designers Update: SketchWeb Design & Development
A couple of months back, I wrote a post about some tools we use in our web design and frontend process. At Papercut, we love to embrace the browser as the true medium for seeing the design of our web projects, but a big part of the process is still invested in opening a design program, starting with a blank canvas, and coming up with design ideas. Over the past few months, we have transitioned to using Sketch as our main design program.
What Is Sketch?
Sketch has been out for a couple of years now. It is an application you can download from the iTunes App Store. Here’s the app description:
Sketch is a designer’s dream tool box, combining a beautifully simple interface with powerful tools. Sketch supports multiple fills, borders, and shadows per layer, has powerful non-destructive boolean operations and makes exporting a breeze with easy to use slices and automatic @2x export. Making beautiful graphics isn’t challenging anymore. We set to build a better app for graphics designers. Not to copy – rather to improve.
Sketch is essentially the perfect mix of Adobe Photoshop, Adobe Illustrator, and Adobe Fireworks.
From the start, I could tell that Sketch isn’t joking when it boasts about its simple interface. It looks so clean and lightweight that it hardly feels like you have a powerful vector editing tool open. The interface is very intuitive and simple to customize.
The left side is where you can build your layers and even create pages—I absolutely love this. Using pages to keep my design documents clean and organized was one of the reasons I enjoyed designing with Adobe Fireworks. The top is where you can select which tools you would like to see at all times. The right side is the properties panel. This is where you can adjust the attributes of elements you create, such as shapes, text, and the artboard you are using. The interface is really that simple. If you have ever used Adobe programs, you probably understand how bulky and frustrating the interface can feel sometimes. I really like how Sketch gives me full control over what I do or do not want to see.
Benefits for Frontend
Sketch is also powerful because the attributes you apply to an element are realistic values that relate directly to CSS output. For example, when editing a square, I can adjust the border radius, opacity, width, height, fill color, border color, and shadows. These are all CSS values any frontend developer understands. Also, if you edit the fill color or border color, a screen slides in which again gives you the ability to alter the color using both HEX values and RGB values and opacity—this comes in very handy when then bringing any design ideas or styles over to the browser. And do you know what the best part is? Once I am done styling that element, I can simply right click on it and choose “Copy CSS Attributes,” and it’s ready to be pasted into your preferred text editing program. That is pretty boss, y’all.
Vector Work Made Easy
Probably the most significant feature of Sketch is that it is a vector-based editing program. I can use Sketch to create illustrations that rely on vector points. This is so important because it means whatever I designed can then be applied to any resolution and retain its visual quality. This is pretty awesome. In the past, if I had to do any vector work, I would crack open Adobe Illustrator, create all my vectors in that program, and THEN bring that into Adobe Fireworks or Photoshop. Once it was in Adobe Fireworks or Photoshop, I would never attempt to play with the vectors, as doing so would almost always mess up any smooth curves or lines. Sketch is an awesome vector editing tool which is great, but it is not a image editing tool at all, so that means we definitely still need Adobe Photoshop around to help when we want to do complex image editing for photographs.
A few other important benefits for designers are:
- Exporting: This took me some time to master, mainly because I am so used to how I would export using Adobe Fireworks or Adobe Photoshop. The exporting is powerful and really simple to use. You can easily create slices, name them and choose from a list of selections on what you want to be sliced. Play around with this for a bit, and you will find your groove and realize it is so much easier to use and is not visually obtrusive like other programs can be.
- Easy-to-use and powerful gradient tool: Many programs have made attempts at gradient tools and all are pretty different. Sketch’s tool is easy to use and, as I mentioned, you can copy the CSS attributes from what you created (so cool).
- Endless canvas: this is a very interesting concept used in Sketch. I can create a page and put multiple artboards, and that page will retain an endless canvas. I have found this REALLY useful when sketching ideas and comparing them to each other.
- Masking tool: It is so simple to understand and use – thumbs up on the way Sketch created this tool.
Using Sketch has definitely benefitted my design process. In a way, I feel kind of liberated—it is so easy to use, lightweight, and clean. It’s safe to say that the tool’s developers have really thought about why a web designer needs a design program and what features are the most useful. I’ll say they delivered.
To my web designer friends out there, have you used Sketch? Do you have another favorite design tool that I should try?