Great for layouts.(Interfaces, presentations, e-mail designs, website designs…)
-layout using many assets
Sketch 101 – Demystifying the Interface
Artboards
You’ll always need an art board in your document and should be the first thing you add to your design.
Open up sketch/figma and add an artboard by pressing“a” on your keyboard. A few options appear on the side:
Observe other options in the dropdown: apple devices are also useful when designing mobile screens. We’ll worry about that later. For now, remember that digital design is always fluid and will need to work on a variety of breakpoints. Keep that in mind as you work.
The next thing i’ll do is rename my file to be something a little more useful. This is especially important as you start to have multiple screens. It’s easy to get confused and lose track of what’s what. You can name this screen“homepage_v01” by clicking the title on the left sidebar. I’ll also go ahead and name my page something more telling.
Use descriptive and clear titles to name your artboards and pages.
Set up a grid
The next thing I like to do is set up a grid. You can do that by going up to the top right dropdown and selecting“Layout settings” you can also“View Layout” here to see your grid.
Here you can set up a grid. A 12 column grid is the most common situation, but I tend to use a 14 column grid. Feel free to experiment with 12, 14 and 16 column grids. If you’re not sure where to start, you can use the settings below.
Some things to note: Total width is the total width of your grid. I usually keep it at the full width of the page, but you can also make it smaller if you’d like to have a margin on the left and the right of your document. For mobile, I typically use a 6 column grid.
Keyboard shortcut: CNTRL + L will toggle the layout
Figma users: this works a little differently. Select“Layout Grid” on the right, and choose“columns” rather than grid. Then you can adjust how you see fit. More details.
Typography
The next thing you could explore is adding type. Put some type on your screen by pressing the letter“t” on your keyboard or by clicking the insert dropdown in the top left corner.
Type System
The next thing you could explore is creating a type system. Put some type on your screen by pressing the letter“t” on your keyboard or by clicking the insert dropdown in the top left corner.
Once selected, move over to the right and select“Create New Text Style”
Use HTML structure to create a type naming system. The style names I frequently use are: H1-H6, body-large, body-small, fine-print, nav, CTA.
Most designs use a limited number of colors throughout the site. To make sure you’re always using the same color, you can save them to swatches by selecting an element using the color in your document, selecting the color tab on the right, and adding it to your document color by pressing the plus sign. Save all the colors you’re using here. Sketch also has a handy find/replace color tool under Edit / Find and Replace Color.
Typical Workflow Between Tools
Sketch 101 – Demystifying the Interface
Artboards
Set up a grid
Typography
Type System
Colors