The Complete Sketch 5 Course - Design Apps & Websites 2021

Explore sketch university's crash course by installing sketch, getting familiar with the interface, and mastering the tools to build a solid foundation for designing almost anything.

Edit shapes by manipulating points, adjusting curvature with straight, mirrored, disconnected, and asymmetric modes, and apply a default blue fill as you create and modify rectangles and vectors.

Sketch now supports pasting SVG code directly: copy an SVG from the web, paste into Sketch with Command V, and it automatically creates a grouped shape with individual paths.

Explore how to insert and style text in Sketch, using text boxes, wrapping, fonts, colors, and alignment, and adjust line, character, and paragraph spacing for polished UI typography.

Explore how sketch's text layers update across versions, adjusting font, line height, and alignment, with new appearance options and svg export via outlines.

Learn to use textiles to create consistent headers and subtext across websites and apps, by building a template, applying h1 and h3 typography, and updating global colors for on-brand design.

Explore the new text styles in Sketch, using a components page to consolidate textiles and symbols, create named textiles like first name and city, and apply them to your design.

Master sketch styling by applying fills and borders, adjusting opacity, and using color picks, gradients, patterns, and noise. Practice with multiple fills and border positions to control shape appearance.

Explore shadows and blurs in styling part 2, including regular and inner shadows with color, offset, blur, and spread, inner-hole creation, and gaussian, motion, zoom, and background blur.

Learn to manage colors in Sketch with the color picker, eyedropper, hue-saturation-brightness, and alpha, explore gradients, and apply shared layer styles for efficient, cohesive designs.

Recreate header background shapes in sketch by drawing rounded rectangles, adjusting border radius, picking colors, duplicating, arranging layers, and masking to fit the artboard.

design a center motivation box in sketch by building shapes, applying masks, and using vector paths and borders. align layers, pick colors, and style text for a headspace app redesign.

Preview designs in real time with Sketch Mirror, using local sharing and a web browser view. Download the app and view across iPhone models for consistent, responsive layouts.

Learn how to create color style guides to strengthen brand consistency across all projects, using a signature color like Coca-Cola red for future design work.

Develop a grayscale color system in Sketch by creating five background gray swatches, styling headers, and building fill and border styles, including a dotted border, for consistent reuse.

Develop and organize the style guide's color system by defining purple and pink accent colors, adding an angular gradient, and creating shared styles for consistent accents across the design.

Create and customize input styles and shadows for a color style guide, covering base, selected, filled, and error states, with layered shadows and named shared styles.

Rename the artboard to typography, group H1 with text, adjust font sizes and line heights for H1–H4, and create shared text styles for a downloadable typography guide.

Use Sketch to design a standout logo from scratch, showing how a great logo differentiates your business from competitors.

Explore wireframes, also known as page schematics or screen blueprints, as visual guides for the skeletal framework of a website and an outline for what you're going to build.

Learn the essentials of wireframing for mobile apps, and design basic low-fidelity layouts and login screens using sketch and reusable wireframe kits.

Design your mobile app based on the wireframes from the previous section. Explore how businesses adapt by offering tools and content on iOS and Android.

Design the iOS login screen by importing wireframes into a master file, detaching symbols to avoid clutter, and building reusable inputs with the style guide.

Turn a ready-made icon pack into a scalable Sketch workflow by converting 32-pixel icons into symbols, organizing them in an icons page with subfolders for menu and expense categories.

Complete the bottom navigation by designing six item boxes with icons and labels, using symbols within symbols to speed workflow, and refining shadows, spacing, and style guide consistency.

Create your first expense symbol in Sketch by assembling a transaction card with logo, date, time, category, and amount, then swap logos for Uber, Slack, and Starbucks.

Design the my cards screen by populating expenses, hiding the search symbol, and using symbols to swap icons, preparing a handoff to development with varied data and logos.

Design web app layout in sketch for an admin dashboard with a left navigation bar, top bar, and main content area to manage users and monitor spending on 1440x1024 desktop.

Learn to organize sketch projects by naming layers, grouping the side menu, and applying consistent styles, shadows, and gradients. Align logos and use a style guide to craft a header.

Design a side menu header with a subtle bottom wave pattern by grouping content, masking layers, and shaping vector paths to create a refined background for the six-page menu.

Refine the top menu by shaping the active item, background, and shadows, and align the top bar with the page title, profile, and notifications for a polished web app layout.

Design a mobile transaction card by duplicating layers, adding time, date, and the transaction user, including icons for amount and admin actions, and turning the layout into a reusable symbol.

Create a transaction symbol in a web app with a bottom divider and 18-pixel spacing for consistent layout, then populate with data and add pagination.

Learn how to add pagination to a transaction ledger in Sketch, with icons like credit card, camera, and recurring indicators, and implement bottom-page controls, page numbers, and items-per-page options.

Finish the page by adding categories, labels, a search bar, and grouping into sidebar, top bar, and content, then preview and export a retina jpeg for the marketing landing page.

Rename the transaction page to team and design a grid of four team-member cards with a plus add-new button, using 16-pixel spacing and precise width adjustments.