Moving to Sketch

Design has always been an important part of our projects and this year we have invested some time and energy into refining and streamlining this process.
Having a solid and comprehensive design is vital for projects where the visual impact and user interface is key to the project’s success. These days we seldom start a project without going through some kind of wireframing or design process. It allows us to get the buy in of stakeholders, to troubleshoot and collaborate with our clients, to establish visual consistency and it enables us to get designers, developers and clients onto the same page before we head into development.

One of the key areas of our process refresh was the introduction of Sketch as our primary tool for designing wireframes and full scale mock ups. Prior to this we were using Photoshop and Illustrator for design and Balsamiq for wireframes. Now don’t get me wrong, Photoshop, in combination with Illustrator is perfectly capable of delivering the goods in the hands of a skilled designer. Designers will always have their preferred method of working and their preferred tools, and whatever works best for you… is what works best for you. But there is a growing trend and move towards Sketch and we have definitely benefited from making the switch and can understand why so many others are making the move.

Sketch is by no means the “42” to the ultimate question. There are some design tasks that Photoshop and Illustrator are just better at. For example Sketch does not have any serious image manipulation tools and for this, Photoshop will always be tops! And when it comes to a full power vector based design package, Illustrator is exactly that. To be honest I still use Illustrator for certain tasks where I need more control and precision. However both of these packages were not specifically created for interface design. Sure, there have been plugins, updates and addons that have been included over the years that aim to accommodate web and interface design, but somehow this always felt like an afterthought.  Sketch on the other hand, was made for UI design from the start and focuses on the needs of the UI, web and icon designer. The Interface is stripped down and focused, without the clutter of unnecessary  tools. The tool bar and inspector bar is refreshingly simple but undeniable powerful. There are certain tasks and functions that Sketch really excels at. I’m just going to mention a few that I use on daily bases that have really improved my workflow.

Shared text and layer styles

Shared text and layer styles are not unique to Sketch. Photoshop has layer styles but they are not really synced to the layer and if you have to change a layer style in Photoshop you’ll need to manually apply this to every element that shares a particular style. However in Sketch the layer or text style you create, remains linked to the element to which it’s applied. so you can edit the shared style, update it with one click and it is automatically applied to every instance or element that shares the style. This has been invaluable for big projects containing multiple artboards and screens which utilize common icons, navigation and UI elements. It’s also a great way to manage font styles – Set up your heading and body text styles and then easily manage, change and update this across multiple screens and designs.

Measuring distances between elements

Sketch has smart guides, which trigger when you drag elements, which works…but they are not always 100% accurate and are a bit buggy. But manually measuring distances between elements in sketch is just so easy! You simply select an element, hold down the alt key and hover over the next element. More time for drinking coffee!

Something that I’ve been using a lot lately is the numerical control. You can manually input dimensions for the size of objects as well as controlling the X:Y position on the art board. You can also control properties with some simple Maths in the property’s input field in the inspector panel. I can scale a rectangular object by typing something like 12/4 or 2+2. You can control X:Y coordinates in the same way. Very useful when spacing out a page and ensuring that white space and padding around elements is consistent.

Interactive prototyping directly in Sketch

With the craft plugin for Sketch you can create interactive prototypes directly in Sketch and sync to Invision. This can be also be done with screens generated in Photoshop but you need to use the build mode in Invision to link screens and add interactions which can get a bet clumsy. In sketch this can be done directly on your artboard by simply dragging arrows to link elements and screens to create awesome functional prototypes from your app or web designs.  

Symbols

Symbols in Sketch are similar to Smart objects in Photoshop. In Photoshop every instance of your smart object is the same. And that’s the problem! In Sketch however every instance within a symbol is variable via the overrides panel in the inspector bar. This is great for adding dynamic content to your design I have come across some methods of replicating this in photoshop but it just seemed to be so overly complicated and convoluted. In Sketch the process is intuitive, simple and most importantly FAST! Switching out or replacing symbols is also really easy in Sketch. You can simply right click on a symbol and choose to replace it with another…that simple!

InVision Inspect

We share all our designs via InVision and the inspect mode is something we are using more and more in collaboration between development and design. Inspect mode allows developers to see the important information that they need such as fonts, padding, colours and even generate working code and CSS styles. Although this is more a function of InVision than being unique to Sketch, its still a very useful feature and re enforces our decision to use Sketch as it integrates so effortlessly with InVision.

Sketch Community

There is a fantastic community of designers using Sketch and 3rd party plugins can be found for just about anything extra that may not be included in the out of the box package. Templates, mockups, icons, style sheets and  many more resources are freely available. That exclusivity that Adobe seem to covert so intensely seems to be missing from the Sketch community, which I really enjoy. There’s an openness and ease of sharing that seems to gel with with our open source design philosophy.  

Conclusion

Sketch has certainly improved my workflow and made certain mundane tasks a breeze. It’s helped us as a team reduce the gap between design and development and assisted in speeding up our design response time by enabling us to process feedback and changes quickly. In hindsight the move from Illustrator and Photoshop now seems like a foregone conclusion. Check out the many other articles online discussing this topic, it’s a debate that’s been going for a while and there are some compelling arguments from both camps. As Sketch evolves and strengthens its focus on UI design I can only see it becoming more entrenched. I certainly won’t be looking back.