How to use Sketch for your own app development!
Sketch is a Mac app developed by Bohemian Coding used to create professional digital designs. It can be used for a lot of different things, but it really shines when creating high fidelity UI designs for your web or mobile application.
I've spoken a lot about Sketch throughout my website and in LAUNCH: A complete guide to building your first app. I use to for everything in my business from creating one-to-one renders of this site, client applications, and even my personal resume.
Now, I know what you're thinking... "I'm not a designer! I don't need to or want to waste my precious time to learn another piece of software that I will only use once!". Here's the reality of things... Coding is fucking expensive, and coders generally suck at design. So, if you just tell your developer the features you want, you'll probably get a UI that looks like a 1990's search engine, or worse... At this point, you'll spend a-many weekends telling them things to change on the front-end without ever actually delivering an experience that your customers want! Sigh... :(
It's okay though, there is hope! Sketch is easier to use than the classic Microsoft Paint and you can be up and running with a beautiful UI and UX that your customers will love.
Now, before jumping into Sketch, I always recommend having a mid-fidelity sketch to base your designs off of while working on your high-fidelity version. Take a look at this process in the video I created below.
Okay! Now lets get down to business. The purpose of this post is to show you the key components of the Sketch application and how to go from a blank canvas to a design you and your customers will love :D
When you first open sketch, you'll be staring at a window that is comprised of four major sections. The top tool bar, the left objects bar, the right properties bar and the center canvas window. In the upper left corer of this window, you will see a little icon that says "View" under it. This will give you the ability to hide/show a grid and ruler.
Usually, the first thing you'll do when starting a new sketch file, or designing anything new- is decide on what size artboard does the design need. You can think of artboards like a painters canvas. Without a canvas the artist would be painting on air, or an endless wall... We live in a world of bounds :P.
To select a new artboard go to the top left corner of the Sketch application and click Insert > Artboards.
You'll notice the right column of the application changed with several default options such as, iOS devices, Responsive Web Design, Mac Icons, etc. Each of these is a dropdown that contains artboards specific to that kind of medium.
Select an artboard that relates to the application you are building. I usually go with iPhone 7 Plus, or Desktop HD under Responsive Web Design. If none of these work for you- there is always the option at the bottom of the sidebar to create a custom artboard with whatever dimensions you would like. I have created a few such as 5x7 Print, Moo Mini Business Card, Diploma, etc.
One useful tip... If you want to convert inches to pixels, the magic number is 72px for each inch. Thus, a standard 8.5x11 inch piece of paper gets converted to, 612x792 px.
Think of pages as rooms in a house. Artboards sit inside, hung on the rooms walls. If you created an artboard earlier, you'll notice it was automatically added to the page you were on in Sketch. Pages live in the left bar of your application. You probably see 'Page 1' with a dropdown arrow next to it, that shows/hides the artboards and objects it contains. Move your eyeballs over to the right a bit and you'll see a window with an arrow inside, click that and it will allow you to manage your pages. This is where you can add a new page, reorder pages, or delete a page and its contents.
For Apollo Studios, I have a single Sketch file for everything related to my business. I have many pages such as, Website Final, Website Proto, Marketing, Social Media, Podcast, Shirts, Blog Posts, Business Cards, etc. Each of the pages contains many artboards of varying sizes.
When I develop web and mobile applications with my clients, I usually have just two pages, one for development and one for final drafts.
Hit 'Command =' to zoom into your page and 'Command -" to zoom out.
Anything that sits on an pages artboard is an object. Objects can be shapes, images, fonts, lines, etc.
To create a new object, click on 'Insert > Shape' or 'Text', 'Image', 'Vector', etc. Lets just start off by selecting 'Insert > Shape > Oval'. Now hover over an artboard and you'll see your cursor is now a '+' sign. If you click and drag to another part of the canvas, you'll see you are creating an oval! Whoop whoop! Nice job. Release and you're oval will be set on the canvas. You can resize it anytime by clicking and dragging any of the corners and you can move it around the canvas by clicking and dragging anywhere in the center.
Creating an oval is great, but what about a circle? Well a circle has equal width as it does height. Sketch has a great shortcut to make sure we create the perfect circle using the oval tool. When creating an oval, hold 'Shift' and you'll notice the dimensions always stay the same, creating a circle! You can apply this trick to any other shape as well.
Objects can be positioned on any artboard. A very handy tip to position things perfectly is to select an object, and then hold 'option' down, and then take your cursor and hover it over another object to see how many pixels your object is away from it. This will help you position things just right!
Objects also have a Z position on the canvas. This is not a number in the properties tab, rather it refers to the position of the object in the objects tab on the left window. The higher 'up' an object is in the tab the more 'ontop' the object will be. You might have to do some rearranging to bring some objects infant of others & if you just created a object but can't find it- check to see if its hidden beneath another object.
Every object in sketch has properties. We've already seen a few of these already such as position X and Y (The X/Y position on the screen) and Size width and height.
You'll see all the properties are in the window on the right side of Sketch. You have to select an object before viewing its properties. The most important properties I use is the Size, Fills, Borders, Shadows and Opacity.
Font has different properties from shapes, such as Alignment, Spacing, Typeface and Weight.
The best way to understand what each of these do is to play around with them for a bit. To create a bunch of objects to play around with, select an object and copy is using the shortcut 'Command c' and paste it with 'Command v'. The new object will be directly overtop of your older one. Just click and drag it away and position it where you'd like.
One other notable property specific to objects with edges is the 'Radius' slider. This will take sharp edges and apply a smooth rounded edge to them. You can see this applied at the 0:28 second mark in the video above.
Groupings of objects are VERY important in Sketch. Groupings allow you to associate objects together. These groupings let you keep the spacing of the elements inside the group, while still being able to move and position the group as a whole.
To create a group, select multiple objects using 'Command Shift' and clicking on an object. Continue to hold 'Command shift' down and continue to click on objects that you want to add. The selected objects will get highlighted in blue. After selecting all the objects you want, go to the top-utilities bar in sketch and the first option (all the way on the left, next to 'insert') is 'Group'. This will create a folder called 'Group n' and place all the objects inside. Always name your groups! It helps with exporting, and understanding your objects later. Groups can be placed inside other groups, so it is important to name them appropriately. You can think of groups like files on your computer.
Now that you have grouped some items together, you can select the group under the objects bar on the left side, and move them around all together. If you want to select an item in the group you can either use the objects bar on the side and select the object, or you can hold 'Command' and select the object on the canvas. As an alternative, you can also double click a object to go one level into its grouping- keep double clicking to traverse its groupings tree.
I'm not going to go into too much depth with these today, but Sketch has a lot of other powerful features that allow you to not only create UI designs, but logos and other complex objects.
One of the most important tools in creating logos are the 'Combine' tools, Union, Subtract, Intersect and Difference. It took me a while to understand the difference between them, but they are easier than they sound! I recommend just playing around with two circles to get a better understanding of how they work.
Symbols are a sketch feature that would allow you to create a single object, and then import that object across all your artboards without creating individual instances. This is really cool because if you change the original object, it will change all the associated symbols throughout your entire design. It is useful for navigation, headers, and footers!
Mirroring: after you've created your beautiful designs, Sketch has a built in way for you to view them on another device. Connect your other device to the same network as the computer running Sketch and hit 'Mirror' in the top-toolbar. Navigate to the IP address provided and see a realtime rendering of your app on the device.
Sketch allows for plugins to be installed in the application to help automate and simplify common processes.
That's it! Well, for this tutorial. Sketch has a much smaller learning curve than Photoshop or any of the Adobe products. If you got through this entire post, then you've learned all the key features needed to design your own application! Sketch is a tool for you to use, but do not forget the design process. It may be tempting just to jump into creating high-fidelity prototypes right from the get-go, but remember, you will save time and money starting with low-fidelity wireframes and slowly working up to Sketch designs as your designs get validated by your customer :)
What do you think? Did I miss something? I'd love to hear your thoughts at firstname.lastname@example.org