If you liked this article, listen to Dialexa’s Head of Design Research, Sarah Reid, and Design Architect, James Utley, on Custom Made talk using lean design research to get to the ‘the why’ of your product:
Listen to all episodes of Custom Made for insights and perspectives from industry disruptors and technology leaders.
Its small file size, gentle learning curve, and time-saving techniques make it a no-brainer to buy and keep. Here are seven tips to help you fall in love with this app and help your design workflow:
1. Use Artboards and grids and go, go, go!
With Sketch App’s predefined Artboards for various screen sizes at hand, and the ability to easily define your grid settings, you’ll have the foundation set up for your designs in seconds.
"A" for a New Artboard pulls up the Artboard panel.
Command + 1 to zoom out see all Artboards on canvas.
Control + l to toggle the layout guide.
2. Get mathematical.
Sketch’s inspector sidebar can handle some pretty intense math thanks to its position and size dimension tools (and by intense I mean basic algebra). Use it to reposition your content exactly where you need, while dividing it into halves or thirds faster and more accurately than you can click and drag it.
Hold down shift while your mouse is in the size dimension tool to adjust the size by 10, giving you the perfectly even margin size you are looking for.
3. Manage color quickly and easily.
- Sketch makes it easy to modify colors by adding layers. Simply click the plus icon next to "Fills" and choose a gradient, texture, or solid color. Adjust the opacity and overlays like you would in Adobe Photoshop to get just the right effect.
- Quickly access your most frequently used colors in the document by clicking on the "current color" swatch above the Alpha channel in the color inspector.
- To customize your palette by project, add colors to the document swatches. Colors you use in multiple documents can be added to the global swatches.
Control + C for the color picker.
4. Styles rock.
They are especially handy for keeping consistent H1, H2, H3, and paragraph texts. When the text box is selected, you can click on the text style in the inspector to create or apply a text style. To change the text style, make sure the text in the text box is selected (highlighted in blue); when you apply a text style, it will update the text with the selected design.
5. Embrace symbols.
Symbols can save a lot of time. You can use them to quickly move from wireframes to full design. Updating one symbol used for navigation updates them all. Design certain sections once, then breeze through tedious updates with precision and patience.
6. Combine Sketch with other apps.
Zeplin is a collaboration app for UI designers and frontend developers. Sketch App combined with Zeplin eases documentation nightmares and makes it easy to create and share handoffs and style guides.
Sketch can also be used together with InVision, a free prototyping, collaboration and design workflow app. Both are simple to pick up, allowing you to quickly create working prototypes for clients.
- "This text box is driving me crazy!" Text may disappear from the screen while you are editing copy, but when you exit the text box, it comes back. Other times the text may jump around or otherwise act up. This may be a sign that you're working too hard -- but a hack that sometimes works is to start over and try not to alter the line height too much. Another tip is to break up text if it’s in long blocks of text; if the text jumps around when you try to adjust the line height, that may be your problem.
- Keep your sanity when scaling groups of items by using the scale function.
- Pulling in symbols from other docs and keeping them in their own page helps you keep a consistent style. Please note that if you pull a symbol into your document that has the same name as another symbol, it will replace and update your old symbol everywhere. Thumbs up if that was what you intended -- Control + Z if you did it by accident and want to change it back.
To learn more about how Dialexa converts ideas into functionality, including our approach to the new product development process for software, click the image below.