Sketch5 + Prototyping: Mobile App Design

Design a music player UI by recreating background blur and building the top section. Learn text layers and opacity, image fills and alignment, and how to download icons.

Set up a new Sketch document, insert iPhone 8 boards, duplicate and rename pages Spotify and icons, and import assets or icons from the included Sketch files.

Create a background blur layer over the album cover by applying a background blur and a dark color fill, adjust opacity, center, group, and lock layers to preserve the design.

Insert header text in Sketch, choose the font (Avenir), color, size, and character spacing; adjust weight, align with guides, and group layers for consistent header design.

Draw perfect squares with the rectangle tool, holding shift to lock aspect ratio, then center them with line-to-center alignment. Apply pattern fills from artwork folder and adjust opacity for cohesion.

Learn to design a mobile app interface in Sketch by creating text layers, icons, and shapes, adjusting typography, and building a timeline with timestamps.

Design action buttons for a mobile app interface by creating a bordered outer circle, adding white icons from the Noun Project, and arranging play, shuffle, and loop controls.

Design and prototype a 15-screen mobile app from scratch, starting with the home page, nav bar, and tab bar feed, then detailing the details view, favorites, profile, and sign-up flow.

Create a new sketch document on an iPhone 8 artboard, rename the home and icons pages, and import traverse source material with images and the sketch file.

Learn to design a 375 by 60 navigation bar in Sketch, add the status bar, choose light or dark backgrounds with shadows, and group and rename the I-Bar.

Design a three-content photo feed in sketch prototyping by adjusting board height, adding image overlays for readability, and quickly duplicating content blocks to speed up workflow.

Learn to design a bottom tab bar for a mobile app by creating three equal tabs, sizing and aligning icons, and configuring active and inactive states.

Sketch a mobile detail screen with image, overlay, status bar, back arrows, image dots, and heart and share actions. Show state-driven heart fill and a share sheet for interactions.

Duplicate the home page to build a favorites page, add content cards with precise spacing, implement a heart favorite, and design empty states and unfavorite alerts with overlays.

Design a profile view with an activated tab bar and reusable cells for email, password, settings, using lines and shapes, and add a logout alert.

Create a splash screen that appears on first launch, centers an image or logo, and loads quickly before routing to the initial site page with sign-up and login flows.

Duplicate the splash screen to build the welcome screen with the logo, tagline, and sign up and sign in buttons, then use Facebook color and icon for social sign up.

Design a two-state sign up flow in Sketch, moving from an empty to an active filled state, with fields, placeholders, back navigation, and interactive prototyping.

Master prototyping with InVision by exporting sketches with Craft, creating hotspots, linking screens, and applying gestures and transitions to test navigation on device.

Export the splash screen to the desktop, create a 120 by 120 icon artboard, convert text to outlines, and mirror the prototype on your phone to test the loading splash.

Design the home view and a slide-out left sidebar for a mobile app, using a menu icon and prototyping two screens with principle to animate the interaction.

Set up a Sketch document by naming pages, importing icons and assets, and arranging a home and sidebar layout using Uber colors and a styled map from Snazzy Maps.

Create a where-to modal for a mobile app, building a top bar with a menu icon, a two-part panel with rounded bottom, plus masks, shadows, and addresses.

Design a locator with a circle and a triangle, using exact hex colors and vector editing. Place car assets on a road with grouping and subtle shadows for depth.

Design the home screen budget with Uber by styling text, adjusting color and corner radius, aligning and grouping layers, and preparing icons and arrows before prototyping the sidebar.

Design a mobile app sidebar featuring a profile card, avatar, gradient panel, and navigation menu; duplicate, align, and group elements, then prototype a slide-out interaction.

Explore how Principle enables advanced animations and interactions across desktop and mobile, using scene layers, two boards, and identical naming to drive timing and spring dynamics.

Import designs from sketch to principle, set the artboard to 750 by 1334, scale assets to 200 percent, and keep layers organized for a simple, clickable prototype.

Learn to prototype a sliding sidebar by linking two screens, using the overlay and animation timelines to animate the left side panel with controllable timing and opacity.

Design the tinder-style home screen with a navigation bar, a profile card, bottom action buttons, and two swipe states for like and nope.

Set up documents by creating two pages named Tinder and icons. Import icons from the noun project and insert them on the board, then label the home page.

Design a centered nav bar by inserting a status bar, placing a left profile icon, a middle logo, and a right chat icon, and aligning them precisely.

Create a profile card in a rounded rectangle, mask the image for crop flexibility, add a gradient overlay, and display name, mutual friends, and university.

Design circular action buttons in two sizes (40 and 60) with white fill and subtle shadows, align icons like rewind, x, like, and boost, then prototype home screen swipe interactions.

Duplicate profile cards, update photos and names, and design a bold green like badge with a border; rotate and layer cards for like/nope swipe prototypes.

Import a sketch design into Principle, scale boards to 200 percent for 750 by 1334, paste assets into a prototype page, and label layers while arranging card order.

Master on-screen drag interactions with drivers: set horizontal drag, apply keyframes for angle changes, and fade in like and nope icons while guiding cards off screen.

Prototype a draggable swipe across multiple boards, duplicating cards and looping back to the start, using drag end, keyframes, and optional opacity to simulate Tinder-style swipes.

Prototype a tinder-style swipe flow by using the heart and no buttons, duplicating boards, and configuring timed transitions with opacity changes to navigate between screens.

Design the Instagram home page, including the photo feed, stories, and like and action buttons, and prototype the layout using Vision and Principle.

Set up the document for mobile app design by organizing reveal page labels, icons page, avatars, and screenshots, and by importing the Instagram source material and finished sketch.

Design a mobile nav bar and stories section in Sketch, starting with a full-width top bar, status bar, and Instagram-style icons, avatars, and gradient-bordered story cards.

Design a mobile photo feed UI with a header, avatar, caption, a 375×375 photo grid, like, comment, and bookmark actions, using Crafter's type photos to speed content.

Design a five-tab bottom tab bar for a mobile app, with 375px width divided into five 75px tabs and centered icons, enabling horizontal and vertical scrolling in envision and principle.

Import designs into principal by creating pages, duplicating boards, scaling to 2x, labeling content, exporting assets, and prototyping a horizontal scroll of stories with a vertical feed.

Label and organize layers, create a scroll window for stories, apply horizontal and vertical scroll to the feed, ensure edge-to-edge snapping, and prototype Instagram.