First Impressions of Sketch 3
Sketch 3 was recently released and I thought I would share some of my thoughts after using it for a week.
I’ll be honest. Like Street Fighter 2 and Terminator 2, I had never heard of Sketch 1 or Sketch 2 before using Sketch 3. I just happened to wake up one morning and have my Twitter feed blasted with people squealing like kids at Disneyland that it was released and how they’ve ditched Photoshop for good this time.
If you’re looking to sharpen your Sketch 3 skills, I’d recommend this exhaustive tutorial. Otherwise, I’m going to share what I think are the key features of Sketch 3 and how they fit into the web design workflow.
It’s not Photoshop
Sketch 3 is a wonderful tool for web design because it was created specifically for it. That’s great because, up until now, the most widely used web design tool was originally created as a tool for photographers.
Photoshop has been my go-to app for sketching static web design layouts for years because, aside from a few notable exceptions (RIP Fireworks), it was the best available option. Web designers like me have been hacking it for over a decade and Adobe has only recently started integrating web design features natively into it.
That said, Sketch 3 is not the silver bullet that kills Photoshop as a web design tool. I may actually start using Sketch 3 solely for wireframes and–ahem– sketching, but I will continue to use Photoshop for what it was always design to do best: editing photos and raw assets for my web designs.
The infinite canvas
The infinite canvas is probably the smallest, yet most important, feature of Sketch 3. Where Photoshop forces you to set the dimensions of a defined space to work in, Sketch 3 gives you no such boundaries. In fact, the canvas has no boundaries by default and there is no way to set any.
Instead, Sketch 3 allows you to insert artboards on the canvas. Artboards are the containers for page layouts. Insert as many as you like and arrange them in any order to create a living sitemap of your website while you design it. That’s pretty rad. I can’t tell you how many times I’ve had to resize my Photoshop canvas because my design outgrew the dimensions. No more shuffling layers or separate source files for each page design!
One edit changes all
OK, this is another big one. Let’s say you have completed the design for a homepage, then moved on to a subpage. You clone the header of the homepage and repurpose it in the subpage design. Then you realize you used the wrong background color in the homepage header. Now you have to update it in both files. What a pain in the ass!
Unfortunately, that’s just the accepted fact in web design and the reason why many are now designing in the browser or just components instead. A small change can have major time-consuming consequences in Photoshop.
That’s changed with groups in Sketch 3. Group elements together, duplicate the group, then drop them anywhere in the design. Buttons are a great example. If you use the same “Buy Now!” button across your design, you can pop that bad boy in a hundred times with a simple drag and drop. Need to switch the color of them? Edit one of the buttons and they all change. It’s as simple as that. The same is true with styling text.
Groups makes static web designing a lot more like designing with CSS.
Slicing and Exporting
Many of the Photoshop designs we create use filters, masks, merges and other tricks that are tough to export for use on a website. Sketch 3 makes the process easy with improvements to slicing and exporting.
Slicing allows you to draw a box around any element on artboard. This box tells Sketch 3 that you want it to save as its own file when you export it for production.
Exporting is a common task, but Sketch 3 improves the process by allowing you to specify various resolution levels for your sliced components. That means you can save the same slice into several files that support different screen resolutions in one stroke.
These two related features combine to greatly streamline the web production process. I think it may be the single feature that could be responsible for making friends out of web designs and web developers again.
Preview on iOS
The last key feature I’ll cover is the ability to preview your designs in iOS. I can’t overstate the importance of testing designs on real devices. Sketch only supports testing on iOS devices at the moment, but that’s a huge step forward, especially for web designers who do not code.
The iOS Mirror feature allows you to preview designs on an iPhone, iPad, iWhatever as long as it’s connected to the same wi-fi connection as the computer your using to design. I’ve used this feature and it’s great. Not as great as previewing real code using live reload in Grunt or CodeKit 2, but still pretty sweet. Again, I think this is a serious treat for designers who don’t code, or anyone who just wants a quick and dirty idea of how a design is shaping up.
Conclusion
Is Sketch 3 the end of Photoshop? Uh, definitely not. It was honestly surprising to me how many tweets I saw from people either (1) spelling Photoshop’s demise or (2) saying they’ve trashed Photoshop after using Sketch 3 for five minutes.
I think what people are trying to say, and the same conclusion that I’ve arrived at, is that Sketch 3 is now my prototyping app of choice for static web designs. I’ll still open Photoshop often because it is still the gold standard for editing raw assets, but it might get a little less love when I need to sketch design ideas.
I also find it hard to believe that a company as huge and established as Adobe hasn’t already taken note and started figuring ways of integrating Sketch 3’s key features into its own products. Let’s hope they do!
I am still a huge proponent of prototyping in code, but Sketch 3 will be immensely helpful for getting quick ideas on the screen, as an intermediary step between paper and code. Let’s face it: not all projects require static designs and Sketch 3 does not solve that.
But for those projects that do require it, it’s worth considering Sketch 3 in your work flow.
More Resources
Google Web Designer
Google released a tool for web designers to create HTML5 designs. And wouldn’t you know it, they simply call it Web Designer. I took a few minutes to play with the app and thought I would share my initial thoughts.
And by “initial thoughts” I mean just that. I literally gave this a 5-minute demo to see if it was as easy as advertised. These are just my early impressions, so if you’re looking for a glitzy press release, you might want to head over to Gizmodo or something.
Overview
Google Web Designer is supposed to bridge the gap between web design and web development. Like Adobe Muse CC. Like Hype. Basically, like all the other programs that generate code based off designed layouts. It makes animations and 3D layouts ridiculously stupid and easy for anyone, even if they don’t know a lick of code.
The major difference between Web Designer and something like Muse is that it is free. Well, at least it is at the time of this writing, it won’t cost you a penny.
Another significant difference is the amount of control Web Designer gives you over the code it outputs. My previous experiences with Muse and Hype provided little to no flexibility with the code. In other words, what it outputs is what you get. Google Web Designer allows you to toggle between design and code views while you work. It’s kind of like Dreamweaver in that way, which is nice and familiar if you’ve worked on that platform before.
So why does Google think we need another HTML5 code generator? You probably guessed it: ad revenue. Web Designer is primarily focused on creating banner ads without using Flash. And for that, it could be very nice.
Interface
Google has gotten really great at interface design, especially on its mobile and web platforms. However, I’ve never really used a Google desktop app before, so I was eager to dive in and check it out.
The interface is clean and stark, like its flagship Android and iOS apps. The icons are intuitive and the backdrop is dark, so those who are used to Photoshop should find this very similar and will likely have a lower learning curve going in. Even the toolbars and windows are positioned a lot like Photoshop. It’s pretty uncanny how similar it all feels.
What’s different is the tool selection. Sure, we have the same ol’ circle, rectangle, pen and paint tools. But now we have a slew of new tools like 3D object rotations and tags that add new perspectives to our designs and allow us to see them from different angles. You can even toggle your canvas view to display the front, side and top of your work, showcasing your design from any angle you need.
The right panels offer more context for selected objects. For example, you can set styles and properties of your selected elements right form this pane and even choose from pre-generated components such as a carousel.
Creating Animations
This is the feature that most designers will be attracted to. Working with CSS animations can be such a pain. It’s the one thing that Flash got right and it’s been tough to match that ease of use since Flash was pummeled back in 2010.
Like Flash (or Hype for that matter), Web Designer uses keyframes to direct the motion of objects in the canvas. Place the objects where you want them positioned in one frame, then reposition in the next and Web Designer will handle the transitions in between for you.
You can see the pen I created to illustrate how this works. Basically, I positioned four circles off of the canvas in the first frame, then dragged them into the center of the canvas in the last frame, allowing them to overlap. There are only two keyframes in my demo, yet Google Web Designer was able to generate all the transitions I needed to make them animate smoothly. I never had to touch the code!
[codepen_embed height=”298″ theme_id=”279″ slug_hash=”Cyagp” default_tab=”result”]See the Pen Google Web Designer Output by Geoff Graham (@geoffgraham) on CodePen.[/codepen_embed]
I have to admit that this is so much easier than writing vanilla CSS or even using CSS preprocessors, though I still hesitate using this as a replacement for coding by hand. However, it could be a great first step for those diving into animations for the first time.
3D Objects
This is the other slick feature that will get some attention. Working with 3D objects in CSS just plain sucks. If you don’t believe me, just look at the spec for CSS transformations and come back to hear I told you so.
Google Web Designer changes that quite a bit. Using the Object and Translate tools, you can select any shape on the canvas and change their perspective, skew and position on the X, Y and Z places just by dragging them around. It’s pretty sweet.
But it’s also not unique. Tridiv is another tool that does the same thing, only I think more effectively and with a better UI. If you just need the 3D functionality, I would look there instead.
Conclusion
My honest conclusion is that Google created Web Designer, not to empower web designers, but to serve its own interests. It’s more of a tool for creating ads and banners than it is for creating production-quality websites. And doesn’t that make sense given where most of Google’s revenue comes from?
Don’t get me wrong, though. Web Designer is a nice tool and I’m never one to complain about having more options in the market. Plus, it’s encouraging to see a company like Google care about the web production process enough to provide a solution that will undoubtedly help a lot of people.
Who are those people? My guess is web designers who get design but are uncomfortable with code. The bottom line is that it has the potential to helpful to anyone, whether it be for learning or production. But please oh please, edit the generated code before moving to production and make sure it is semantic and performant.