You’ve probably heard about Sketch and its “supernatural powers,” in creating amazing user interfaces for mobile applications and websites, either from your designer friends, or, you’ve read about it online, and you are now curious about it.
Either way, I’m glad you’ve stopped by. I plan to introduce you to Sketch and help you get started.
Sketch template made by Facebook
A bit of a software history
My name is Radu, and I work as a Senior UI/UX Designer, and I’m spending a lot of time using Sketch. However, it wasn’t like this all the time.
I started out a long time ago, in a galaxy far, far away, as a graphic designer then moved into the digital age. Back in 2000, most of the people designing websites were called web designers, and their tool of choice was Photoshop. There was once, a tool called Fireworks, but Adobe bought the company that produced it (Macromedia), and slowly killed the product.
For a long time, there was just Photoshop. A tool that was never meant to be used to design interfaces, but because of the lack of something better, became the de facto standard in nearly everything that required a design for a screen.
What Sketch is
Sketch is a capable vector-based software program, but it comes with a limited set of vector editing tools. These are a perfect balance, however, for the goal of the program - to create interfaces. Besides these tools, there are a few distinct features that Sketch has, and that makes creating interfaces a breeze. (We’re going to talk about these features in a later article)
What Sketch does
With Sketch, one can create interfaces for various devices - from responsive websites to mobile applications, and export assets for the use of developers with ease. However, since you can create artboards with custom sizes, you can create an interface for any device you may think.
What Sketch isn’t
While Sketch has some vector editing capabilities, and some designers have ventured in creating icons, logos and a lot of other graphics, Sketch is not a full-fledged vector editing application. It works great in tandem with Adobe Illustrator or Affinity Designer (my favorite), but it's not meant to be used in creating advanced illustrations or sophisticated graphics.
Also, Sketch is not an image editing program. It will never replace Adobe Photoshop, Affinity Photo or Pixelmator for that matter. You can apply basic color adjustments to a picture, but that is as far as the application goes in image editing.
Where does Sketch fit
You may be curious then, where does Sketch fit in a designer’s workflow.
As a UX/UI Designer, most of my projects start with a User Experience step. From the UX research stage, we usually jump into the wireframe/prototype stage. I used to work with Omnigraffle to create my wireframes, but now, that Sketch has full support for symbols (plus it has some excellent third party plugins for constrains), Sketch is the perfect tool for creating wireframes.
Once the wireframes are approved, the next stage is creating the user interface - UI. Having the wireframes created in Sketch makes this step a lot easier. At this point, I usually use Sketch as a base and use Affinity Designer if I need vector illustrations or graphics for my interface, or/and Affinity Photo if I need to edit images that end up in Sketch as part of the interface.
Conclusion
Sketch came at the right time and with the right set of features for people creating interfaces - it does not replace Photoshop for image editing or Illustrator / Affinity Designer for vector editing. Sketch created its category of software applications, and we are now finally seeing some significant movement in this space.
