Hands on Sketch Training - Learn Mobile App Design

Overview of a workout timer ui, duplicating an iPhone app design from Pinterest inspiration, focusing on a gear settings icon, hamburger menu, boolean shapes, ovals, and two large bottom buttons.

design a workout timer settings UI by constructing a 320 wide header rectangle, three circles, centered time and repeats labels, then group into the workout settings section for future steps.

Develop a workout countdown timer UI in Sketch by composing concentric ovals into a ring, applying fills, borders, opacity, and a cutaway via subtract and grouping for clean layering.

Design a workout timer interface by building a repeat button and two bottom controls in Sketch, detailing shape creation, color fills, text, alignment, and export-ready assets.

Learn to duplicate a Nike app screen in Sketch by assembling images, icons, and a gradient button, using supplied resources and credited designers.

Learn to duplicate a header screen in sketch, resize and align Nike icons using smart guides, and build a precise header with status bar and separators.

duplicate the Nike app screen in Sketch, create a header with a title and gradient button, apply shadows, and mask an image using smart guides for precise layout.

Design the Nike app bottom images in sketch by arranging Jordan, the swoosh, and the Jordan logo with precise spacing, a mask, and gradient accents.

Learn to duplicate a login screen with a textured background, a top logo, and sunken text fields. Apply subtle shadows, three-point gradient flags, and inner shadows on buttons.

Learn to design the belongings login screen logo in sketch by importing the screenshot and the key icon, building a textured background, and assembling triangles into the logo.

Learn to design the belongings login screen buttons in Sketch, refining the logo, username and password fields, borders, gradients, shadows, and precise alignment for a polished mobile UI.

This overview introduces the Steller login screens, showing two screens with a transparent background and guidance on selecting matching images and Noun Project icons for the username field.

Create a left-side Steller login screen in Sketch by layering a gradient overlay, cropped background, and vector shapes with white text and a sign-in button.

Design an Avengers inspired chat interface by building a chat bubble with masking, cutouts, borders, and a Tony Stark image, then apply color, shadows, and layout.

Explore a profile and stats screen for blog posts, showing post counts, word counts, and rewards, with charts, icons, and a customizable logo.

Explore designing a rewards tracker that includes a scrolling track, color layers, shadowed inner effects, and a moving ball that marks each new entry.

Design a circle graph in sketch by building concentric shapes and using union, intersect, and masking. Align labels and lines with color sections for a clear, editable infographic.

Create a grid-based blog profile layout in Sketch by placing lines and a graph, using color picker and blur effects, and organizing with layers and smart guides.

Master creating a vector graph in Sketch by placing points, shaping curves, and applying multi-point gradients. Refine with smart guides, border section settings, blur, shadows, and precise text alignment.

Design a Facebook header in Sketch by building a layered header with search, status bar, messenger, and settings icons, using smart guides and boolean operations.

Duplicate icons to build a Facebook-style main menu, align feed, friend requests, globe, and profile with smart guides, color fills, borders, and grouping in Sketch.

Explore building a Facebook-style status composer in Sketch by masking a profile photo, aligning text and icons with smart guides, and refining color, spacing, and typography.

Practice a hands-on sketch session to design a Facebook suggested post for a mobile app layout, using text, images, icons, colors, borders, and smart guides.

Design app logos and icons in Sketch by building shapes and applying gradients. Refine with shadows and guides, then group and align inner and outer shapes for a polished icon.

Learn to design a Facebook Messenger logo using vector shapes, gradients, and precise alignment in a step-by-step sketch training session.

Learn to recreate the Yahoo Weather icon in Sketch using basic shapes, boolean operations, and rotate copies, while importing a Yahoo font and organizing layers.

Learn to design a 320 by 320 app icon in Sketch, with a colored background, centered white text and a proportional circle, adjusting opacity for emphasis.

Create two dumb ways to die icons by sketching vector shapes, applying fills and strokes, and using layers to align eyes, mouth, and tooth.

Learn to design the App Store logo in Sketch by assembling vector shapes, applying gradients, white fills, and importing icons with credits, plus alignment with smart guides.

Create the Fandango logo in Sketch by combining rectangles and ovals, using subtract and union to form cutaways, then refine fills, opacity, and layer order.

Recreate the Google Cardboard logo in Sketch by building the front shape with rectangles and rounded corners, carving oval cutouts with a subtract mask, and applying shadows and brown tones.

Design a Safari compass emblem by building ovals, circles, ticks, and triangles with gradients, shadows, and precise alignment, using rotate copies and boolean subtract for clean cuts.

Explore how to use intersect to slice shapes in sketch, duplicate and align shapes, apply vector path, gradients, and color pickers to recreate the Google Play logo.

Learn to create a metallic button in Sketch by using angular gradients, borders, inner shadows, and layered shapes like circles, ovals, and a ring.

Duplicate Captain America's shield in Sketch, build concentric rings with colors and gradients, align shapes, and apply inner shadows and highlights for a metallic look.