Welcome!

Welcome!

Class Agenda

1. What is Sketch?
2. Tour of the Interface
3. Basic Features of Sketch
4. Exporting Designs
5. Plugins
6. Design a Mobile App

What is Sketch?

Sketch is an native Mac app intended to create web and mobile app designs.

• 😃 Native app
• 😃 Vector based tool
• 😃 Plugins = Magic
• 😃 Integrates well with Prototyping tools


• ☹️ Only available on Macs

Tour of the Interface

Toolbar

Tour of the Interface

Infinite Canvas

Tour of the Interface

Layer List

Tour of the Interface

Inspector

Basic Features of Sketch:

1. Framing your project with Artboards
2. Moving Around the Project
3. Creating, Editing, Grouping Layers
4. Fast & Easy Alignments
5. Styles! Shadows, Borders, and more
6. Text and Layer Style
7. Making Reusable symbols (buttons, etc)

Framing your project with Artboards

• Preset Options
• Landscape or Portrait
• Resize Options
• Multiple Boards
  (option + click to duplicate)

Framing your project with Artboards

Find the Responsive Wireframe Kit at:

File > New From Template... > Web Design

Moving Around the Project

• CMD + 1 to see entire project
• CMD + 2 to zoom in on selection
• CMD + and CMD - to zoom in and out
• CMD + . is Present mode

Let's Develop It! 💻

Go to Workspace Page. Create an artboard or two and rename to "Practice Artboard" and "Practice Arboard 2". Practice zooming in and out of your artboards.

Creating, Editing, Grouping Layers

• CMD + Click to select layers
• Shift + Option to scale
• Option + Click to drag
• CMD + G to group layers

Creating, Editing, Grouping Layers

• "T" = adds text
• Auto vs. Fixed text
• Text Options

Fast & Easy Alignments

Let's Develop It! 💻

Add some shapes and text to your artboard. Group and rename layers appropriately. Try using the keyboard commands in the previous slides.

Suggestion: Go to your favorite website and try to recreate the header or another UI component from that site.

Styles! Shadows, Borders, and more

• Multiple Fills & Borders
• Shadows
• Edit > Set as Default

Let's Develop It! 💻

Have some fun adding colors, borders and other styles to your current artboards.

Suggestion: Try adding different fills including an image with a gradient overlay, try adding fills to text layers including image, add some drop shadows to your design.

Text and Layer Styles

• Reusable styles for layers and text
• Update Across the Project
• Use "/" to create folders

Making Reusable Symbols

• Start by making a group of layers you want to repeat
• Use "/" to create folders
• Symbols Page - Artboard sizes matter
• Overrides are your friend
• Nested Symbols

Let's Develop It! 💻

Let's start with a basic button symbol.

Create a button style with text. Create multiple colors and styles to switch between in your project.

Exporting Designs: Layers and Artboards

• Multple formats and sizes
• Insert Slices
• Apply background color
• Set presets

Exporting Designs: Mirror

• View design in iOS app or browser
• Live updates
• Great for user testing or presenting designs

Exporting Designs: Sketch Cloud

• Need an account
• Share link with team
• Anyone can comment
• Great for collaboration

Break time!

Plugins

• Use Sketch Packs - a Plugin Manager for auto updates.
• Explore the List of Plugins and check github to see how maintained they are.
• Gamechanger: Craft plugin

Design a Mobile App

Design a Mobile App

Step 1: Download: Project Files

Step 2: Duplicate Wireframe Page and name "High Fidelity"

Step 3: Work some sketch magic with Craft!

Design a Mobile App

Use Craft Data to fill in blank placeholders with text and images

Design a Mobile App

Use Craft Duplicate to copy sections to fill artboards

Let's Develop It! 💻

Play around with Craft to start filling in the wireframes.

Let's add some text styles and layer styles.

Make some symbols that you can reuse in your project. Bonus points if they are organized into folders 😃

Useful References

Questions?

Survey

http://bit.ly/GDI-NYC