Sketch

###Goal: The goal of this week is learning how to use Sketch as a layout tool for showing different screens and states.

###Outcomes:

• Understand Interface
• Be able to create basic UI Elements
• Understand Basic Color controls, Grid, Artboards
• Create Multiple Screens
• Export
• How to present user flow

###Before the class:

• Install the Sketch.app trial (Link: https://www.sketchapp.com/)
• Install Plugins
  • SketchToolbox(http://sketchtoolbox.com)
  • Craft from Invision (https://www.invisionapp.com/craft)
  • Nudg.it (Link: http://nudg.it/)
  • Sketch Runner (Link:http://sketchrunner.com/)
  • Scala Color( https://bjango.com/mac/skalacolor/)
• Read through the below topics as well as Meng To's Quick Intro To Sketch

What is Sketch?

Professional digital design for the Mac.

• Primarily, a UI design tool
• Mac only

Pro:

• Lightweight: It barely hits 41MB in disk space, compared to Photoshop's 1.6GB.
• Supports raster and vector, regardless it is based on pixel or points
• Designed for UI Design
  • Grids, Layouts, Symbols, Styles.
  • Easy to export (supports 1x, 2x, SVG, etc.)

Con:

• Not for pure raster (can edit photos, but not well)
• Only for Mac
• Pen tool is limited, illustration or icon is easier to be done in Adobe Illustrator 🎨

Introduction:

1. Environment

- Toolbar- common controls for the interface - Navigator - allows you to navigate between pages and control layers - Inspector- provides controls for the selected object.

###2. Element:

• Page: A group of artboards, can use to save different versions, such as when you create one app, you have 3 pages: iOS, Android and assets
• Artboard: Each artboard is a screen of your app
• Layer: Each layer is stored an object.

###3. Objects:

Objects are used to build a mockup. You can use a combination of elements to create a composition- most of the common ones can be found in the toolbar.

• Shape: Such as banner, button, navigation bar
• Text
• Image

Walkthrough:

1. Create a new file

(Learn more about workspace: https://www.youtube.com/watch?v=fndq5vWZTy8&index=2&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS)

###2. Using Plugin Sketch Runner: Command + ’ (single quote)

Sketch Runner (https://vimeo.com/163330657) is a plugin that allows for quick keyboard commands- similar to Alfred or Spotlight for OS X. If you are having trouble finding a command or configuration, most of them are available in the Sketch Runner Input box.

###3. Set Up

• Create a new file: Command+N

• Create a new Artboard: A

• Make grid

  • Plugins > Sketch Runner > Grid Setting
  • Control+G to show/hide grid

4. Status bar Copy from a template - Sketch includes many basic UI templates (iOS apps, for example) that allow you to copy and paste basic buttons and widgets into your document.

5. Banner

• Create Shape or R

• Apply Color

Add Text ('Insert' Toolbar Button or T )

6. list

• Create Shape

• Group Object: Cmd + G

• Duplicate Object: Opt + Drag

7. Nav

• Create Shape
• Create Text
• Align Object

• Place Image with Craft

Extras

8. Using Masks

• Mask with Shape
• Alpha Masks Sketch Mask

9. Measure & Specs

Sketch is very helpful in measuring objects for implementation.

• Sketch Measure

Sketch Measure

• Zeplin is an app that allows you to upload sketch files to a separate private repo to share with your team. Also allows for quick and easy inspection of elements.

Zeplin

10. Mirror

Sketch Mirror

11. Symbol

Create Symbol

Insert Symbol

Edit Item from Symbol

12. Export