# Sketch Bootcamp

Canonical URL: <https://www.careercenters.com/courses/sketch-bootcamp>

## Overview

In this class, you’ll thoroughly learn Sketch from beginning to advanced features for UI (user interface) and UX (user experience) design.

You’ll learn to design web layouts for mobile, tablet, and desktop (or screens for apps) using text, graphics, styles, and more. With artboards and layout guides, you can design on popular grid systems (like Bootstrap), making it easier to design responsive webpages.

Symbols are where Sketch really shines. They let you reuse design elements (such as buttons) while allowing each instance to be customized. Being able to globally update symbols will enable you to create flexible design systems that are easier to manage. You’ll learn how to share symbols (and styles) across files and computers to keep everything in sync and updated. This is useful for individual designers, but especially important when managing a team of designers to make sure everyone is using the latest design components.

Sketch is vector-based, so graphics can scale for a variety of sizes, and export as hi-res (Retina @2x) graphics for the web or apps. Exporting graphics is quick. Mark what you want to export, select the filetype and size, and you’re ready to export.

Turn your designs into clickable prototypes using Sketch’s native prototyping tools as well as using InVision and the InVision Craft plugin.

Start using Sketch plugins that add new features and save time by making things easier, using plugins that we recommend.

## What you'll learn

- Create UI (user interface) and UX (user experience) designs for websites and apps
- Build layouts using text, images, layout grids, artboards, pages, and more.
- Make responsive web designs that are optimized for mobile, tablet, and desktop screens.
- Harness the power of symbols to create reuseable design elements.
- Optimize graphics for web and app design (create hi‑res 2x graphics, SVG, JPEG, and PNG).
- Turn your designs into clickable prototypes that can be shared with others (using Sketch’s built in features, as well as InVision)
- Master Sketch’s symbols by learning how to override their content and styling to create powerful design systems.
- Update symbols and styles across multiple Sketch files (or computers) using shared Libraries.
- Use Sketch’s vector drawing tools to create icons & more.
- Learn useful plugins that can add amazing new features to Sketch.

## Curriculum

### Section 1

#### Creating New Files & Designing on a Grid System

- Creating a new file
- Inserting Artboards
- Setting up a layout grid
- Creating colored backgrounds for text
- Importing text

#### Inserting & Masking Photos

- Importing photos
- Cropping a photo (masking)
- Customizing the Amount of Rounding for Each Corner

#### Inserting Vector Graphics, Fills, Shadows, & More

- Importing & modifying vector graphics
- Making grouped objects easily selectable
- Layer opacity vs. fill opacity
- Aligning & distributing layers
- Copying & pasting appearance
- Adding a drop shadow

### Section 2

#### Color Variables & Layer Styles (Reusable Appearance)

- Creating & Using Color Variables (Color Swatches)
- Creating a layer style
- Making a style to darken full-width background photos
- Renaming, Grouping, & Deleting Styles
 , 

#### Text Styles (Reusable Appearance)

- Creating text styles
- Editing text styles
- Renaming styles & organizing into folders

#### Symbols (Reusable Components)

- Creating & editing symbols
- Customizing content inside a symbol
- Controlling the layout & resizing of symbols
- Renaming symbols
- Moving symbols between pages

#### Exporting Assets: SVG & PNG

- Exporting artboards
- Exporting for web as SVG & PNG
- Exporting into folders

#### Exporting Assets: 1x & 2x JPEG

- Exporting as JPEG
- Properly setting JPEG quality

### Section 3

#### Symbols: Overrides & Custom Data

- Controlling Symbol Overrides
- Overriding Images Within a Symbol
- Custom Data Sources
- Linked Data (with a .json file)

#### Symbols: Nested Layer Styles & Nested Symbols

- Using Layer Styles in Symbols
- Nesting Symbols

#### Smart Layout

- Using the Tidy button
- Adjusting Symbol Spacing
- Reordering Content
 , \*\*Using Smart Layout for Symbols & Groups 

#### Shared Libraries (Symbols, Styles, & Color Variables)

- Creating & Using Shared Libraries
- Color Variables

### Section 4

#### Vector Drawing & Graphics Tips & Tricks

- Drawing Custom Vector Shapes
- Borders: End & Join Options
- Multiple Borders
- Multiple Ways to Rotate
- Copying & Pasting Layer Style
- Rounding Specific Vector Corners

#### Creating a Clickable Prototype

- Creating a Prototype
- Linking between artboards
- Creating Overlays
- Fixed Position Elements

#### Sharing Prototypes & Workspace Documents

- Sharing a Prototype with Others
- Workspace Documents

## Pricing

**Tuition:** $650