Quick take on Sketch for UI/UX Design

Keno Leon
Keno Leon
Jul 28, 2017 · 4 min read
Image for post
Image for post

I keep hearing about sketch and how awesome it is for UI Design, so let’s see what the fuss is all about.

The blind test…

Open Sketch and try to build an app or webpages UI without reading the manual before my coffee gets cold…go !

And the result:

Image for post
Image for post

First Impressions:

  • It feels like a mix of Illustrator and Photoshop with a focus on web/app development.
  • Fairly intuitive if you have used any graphics software with layers, inserts,groupings etc it takes no time to feel at home.
  • Obviously has it’s own quirks (every software has them), I struggled with text manipulation and other small issues.

UI SPECIFC TOOLS ?

Image for post
Image for post

Art Boards

The first time saver are art boards, what’s an art board ? well it is a space where you lay down your design to suit a certain form factor, page or event, in this case a responsive design for mobile, tablet and desktop. what’s also a welcome feature is the export feature, in this case sketch exports the following:

Image for post
Image for post

Export CSS Styles & SVGs…

Image for post
Image for post

Reusable Components :

Image for post
Image for post

Reusable components are perhaps the biggest time saver if you are doing traditional iOS, Android or Web Development, for instance, let’s try making a quick mock up of both an Android (with Material Design) and iOS app screen.

Image for post
Image for post

The above were simply made by dragging, dropping and modifying included iOS,Android and Material Design symbols, you could presumably make your own and reuse them across your designs…neat.

Plugins :

There are hundreds of available plugins for sketch, some are more like macros that provide small conveniences, while others are bigger in scope and functionality, here’s a small sample so you get an idea.

Image for post
Image for post

Integrations:

Designing the UI or UX as a nice graphic or slice for further processing is just the start, thanks to newer tools, you can create clickable prototypes, or quasi ready code that plays nice with front and back end developers, sketch has you covered by providing different levels of integration with the following prototyping tools: (basically these apps can open and use sketch art boards as part of their workflow)

Conclusion:

While you are perfectly fine using Photoshop/Illustrator or just pen and paper for your UI/UX designs, after working with sketch for little over a week I can see the appeal, it is super convenient if all you do is UI/UX design, has a ton of expansion and customization options and in general makes designing UI/UX elements and experiences more eficient and productive. The downside is that you might still need photoshop and other programs to create your content, so depending on your situation it might be considered an addon rather than your main design program. Price wise it sits at a very reasonable $100, highly recommended.

About the Author :

Born Eugenio Noyola Leon (Keno) I am a Designer,Web Developer/programmer, Artist and Inventor, currently living in Mexico City, you can find some of my work at www.k3no.com … I like big bevels and I cannot lie !

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store