A new program called Sketch has been making waves in the UX and web design community. I had not heard of Sketch until one of my colleagues suggested that I try it. With a new project in my queue and the determination to learn, I made the decision to leave my comfort zone – Adobe Photoshop – to give this new program a try.
I quickly gained an affinity for Sketch, as I ventured through all the ins and outs of the
program and swiftly created a mock-up.
Here are some of my findings, and why I now prefer to work in Sketch for UX and web
design:
1. Easy to Learn – After an hour of browsing through and experimenting with the fairly
simple interface, I was able to learn the basics of the program.
2. Intuitive Features – Sketch is an intuitive combination of my favorite elements from different Adobe programs. It has Illustrator’s ability to click and draw shapes within art boards, InDesign’s feature to create styles, and Photoshop’s ability to create filters and image effects, such as background blurs. Sketch has a multitude of great features.
3. Easy to Use – I came to appreciate the simplicity of the interface, as I was able to
quickly find what I needed. The program contains the necessities needed as a
UX designer without having to navigate through unnecessary clutter.
4. One File for Multiple Screens – In Sketch, you only need one document with multiple art
boards for all the different screen sizes. The days of toggling between multiple PSD screens, documents, and having to keep track of multiple files are in the past! You can also create multiple iterations of a design by simply duplicating an art board within the document and tweaking the elements.
5. Responsive Templates (with Retina) – Sketch provides multiple screen sizes and
device templates (including Retina sizes) to quickly set up mock-ups and wireframes.
6. Agile and Scalable – This vector-based program allows the elements within the art boards to scale for responsive design. Even though they’re vector-based, objects snap to the nearest pixel in the design. Sketch files, being vector-based, are smaller and easier to transfer than multiple pixel-based PSD files.
7. Adjustable Grids – Each art board contains a predetermined, yet adjustable grid. These grids help keep the placement and spacing of elements in a design proportional and consistent across the different screen sizes. These grids can be quickly toggled on or off for reference.
8. CSS & Slice Export – Sketch has the unique ability to export CSS styles and
individual elements within the design, or “slices.” This speeds up the process for the
front-end developer by providing CSS code and slices.
9. CSS Styles & Symbols – Sketch can save time by allowing a designer to establish
different text styles and symbols – such as buttons – that flow throughout all of the art
boards to create a streamlined process for quickly designing multiple mock-ups.
10. Color Panel & Picker – With the Sketch color picker, you’re able to quickly create a
color palette or panel, which is easily accessible, to pull from when creating a mockup
with the exact hex numbers for web color.
Being a newer program, Sketch has room for improvement, as there are existing bugs that need to be worked out. It will not be the only tool in my box for UX design. There are still functions Adobe Suite can do (advanced photo effects, advanced masking, drawing complex vectors, etc.) that Sketch cannot. However, after trying this program, I will continue to use it as my main tool for composing UX designs and mock-ups with the hopes that it will continue to improve and evolve.
Will you be giving this program a try in your own design process? What are your
thoughts on your experiences with Sketch?
