Migrating from Adobe Fireworks earlier this year all projects of mine at Google have been exclusively designed in Sketch and after daily use for many months, I am sharing my workflow, features I love, and some feedback for the amazing developers. Bohemian Coding are working their socks off and I tip my hat to their for expedient responses to all bugs filed from users.
We live in a multiscreen world where designing mobile first (or at least with mobile in mind) is crucial. Sketch is perfectly suited to this. In Fireworks, users would have to create multiple pages in silos or simply have a single giant canvas on which to place all of their interfaces. Sketch handles this a lot more elegantly by presenting the concept of ‘art boards’. Dedicated regions for different designs allow you organise and segregate elements while providing a holistic view of your entire project. Want to design for multiple platforms such as iOS and Android? Creating a new page for each is my preferred method, confining all art boards for one platform into a single view that is easy to switch between.
Projects start with the creation of art boards to define the flow of a website or application. If the project requires a grid system, add that too. Thankfully, there is no need for extra grid systems to be added. Grids are built in by default with enough customisation to satisfy 95% of your projects.
Unlike other design tools, when resizing images, Sketch retains the full quality of all pictures. This lets you to export at a high resolution for HiDPI screens without the lossy issues you may encounter elsewhere. Because of this, I still design everything at the traditional 100% size.
Coupled with built in double resolution exporting and it makes designing for HiDPI screens a breeze.
Initially wireframing happens with basic shapes and text within a standalone page. For each advance in fidelity I create a new page. It can often help to have a page dedicated as a mood board before wireframing which hopefully sparks new ideas and clarifies your direction while creating the initial wireframes.
Not testing on mobile devices during the design phase can lead to a disconnect in UX and unexpected issues with type rendering or white space. Bohemian Coding knows this and created the Sketch Mirror app that permits users to preview their designs on iOS devices while including easy to use gestures that let you navigate around your art boards so you never have to export and preview images again. It’s a $5 add-on which I think is fantastic value considering the entire package combined costs you one fifth of the price of Fireworks. Not having an iOS device I am unable to make use of this feature but Skala does the job for now.
The Sketch interface is also extremely customisable and allows for as much, or as little screen space to be given to your canvas. My preference is a text only bar in full screen mode with only the properties pane visible. Shortcut keys are extremely intuitive and negate the need to use a great deal of the menus.
A pixel perfect view is available to make sure you get every detail in your icons and typography spot-on.
I prefer to create icons little by little while using the fantastic ‘snap to nearest pixel’ feature to ensure a crisp clean quality to each component. No more fiddling with nodes until it snaps into place; Sketch has a 1 click button to solve all your woes.
Typographic manipulation is extremely good also with decent live font previews, stackable outlines and gradients, fill effects for outlines along with the ability to have linked styles affecting all paragraphs of the same style across the document.
Font rendering also uses the default OS X rendering engine which is great for honestly rendered type, and although seeing how it would render on other systems would be beneficial, I believe it would be feature bloat to add right now given the move toward higher pixel density devices. Furthermore, typophiles may allow or remove ligatures on typefaces that support it. When working on heavily typographic pieces, you may also make sure of the text styles that allow you to cascade all modifications to a certain style across the document.
If you ever decide that you wish to revert to a previous version of your work, Sketch also ties in perfectly with OS X versions, letting revisions roll back little by little.
This post shall be continually updated to reflect my method of working and to further flesh out more of the details. If you want more detail on other features of Sketch or would like me to delve deeper into a particular feature mentioned above, feel free to tweet @joshcollie.
Sketch is still in active development and there are a few features that arise time and time again from discussions with fellow Sketch users.
A smattering more bitmap editing features would be sorely loved. Fireworks always had a good ration of bitmap to vector features and it much appreciates to see some of these employed into Sketch.
Symbols shall be implemented in version three so you shall not have to wait much longer.
Some feedback I have already provided the team with concerns the lack of other exporting options such as PNG 8 or 24 formats.
Sketch includes the ability to create and use plugins in order to further enhance its abilities. Plugins such as Framer (brought to my attention by @botalpha), which is still in development, heralds great prosperity for a vibrant plugin community in the future.
Overall, many users are contributing useful feedback on the Sketch discussion board. Unlike the Adobe boards, the majority of these queries are answered or solved in little time, giving me hope for the future of the Sketch community.
Every designer has their own tools to accomplish their job whether it be Photoshop, Fireworks or Illustrator. My intent is to not convince people to drop their tools and move to Sketch, but I do encourage you to download the Sketch demo and try using it for just one project. Step outside your comfort zone. The best things are those yet to be discovered.