Mobile App Design: From Beginner to Intermediate

Learn how wireframing guides product flow by sketching screens on paper, then converting ideas into sketches, using a block-based approach for a news reader app.

Wireframe a news reader app using paper and pen, outlining header, article page, comments, and a news feed, then transition rough designs into sketches for detailed UI exploration.

Duplicate and assemble UI components to build a polished news reader app with a header, image background, and menu, then translate sketches into high-fidelity screens.

Design a login wireframe for Iowa's application by sketching blocks on paper, refining into a detailed design with components, and sharing the finished result in the discussion board.

Master version control basics with git using iterm and github. View history, track commits, manage master and settings branches, merge changes, and push updates to remote.

Explore a git cheat sheet covering init, status, add, commit, log, push, branch, checkout, merge, and delete to build solid version control skills.

Test your Git skills with a GitHub quiz, covering checkout of an existing branch, pushing to remote for the first time, and deleting a merged branch.

Master essential git commands to manage branches and push changes, including checkout, push to origin master, and delete merged branches.

Identify objects as elements you bring onto the design canvas, see how folders group items on the left, and learn to select and use grouped objects.

Learn to combine and intersect shapes using union, subtract, intersect, and difference in sketch, and apply these operations to create unique icons and logos for mobile app design.

Master sketch layers by creating, duplicating, and arranging shapes; group and lock layers, hide or show items, and use scale and resize for precise UI alignment.

Drag a shape from the toolbar, remove borders, and zoom in; double-click to edit four points using straight, mirrored, asymmetric, or connected/disconnected types to design objects.

Learn how to rotate and transform Sketch shapes, align objects to an iPhone 7 artboard, and modify points to create unique, precise designs.

Learn how to use sketch masking to reveal one layer through another, creating card-like visuals by masking images into rectangular frames, grouping layers, and exploring restriction and alpha masks.

Use scissors to cut shape edges and rotate copies to form a spinner around a center, adjusting radius and spacing for mobile and web design.

Explore using the pencil tool in sketch to create unique, hand-drawn designs, then modify colors, borders, blending, and thickness to refine your mobile app visuals.

Watch sketch 101 quiz #1 to learn how subtracting shapes merges layers, how to edit rectangle vertices with four point types, and what happens when a layer is locked.

Create and save shared layer styles, such as a Facebook style, then reuse them to update color schemes, borders, shadows, blur, and blending across multiple objects for consistent design.

Explore how dynamic blur creates depth by applying zoom blur, motion blur, and backlit effects to images. Learn to layer elements, adjust opacity, and mask backgrounds for polished app designs.

Practice quiz two in Sketch covers algebra operations, four blurred modes, and how the color picker in the inspector fills section outputs color values for UI reuse.

Recreate Nomad app login screen as Sketch 101, challenge 1, and wireframe a single screen. Watch next video for a completed version to guide your sketching and design practice.

Learn to create and manage reusable symbols in Sketch, including table view cells, override data, and organize a symbols library with grids to streamline wireframes and mockups.

Organize symbols by naming conventions, create pink and yellow buttons, and use the inspect view to swap or insert symbols for easy drag-and-drop design.

Apply text on a path by snapping text to shapes such as circles, rectangles, or ovals, using type and context settings to place and rotate text inside the shape.

Discover grid tools for pixel-perfect layouts, with rulers, snap-to-pixel precision, and adjustable layout settings—columns, gutters, and rows—for precise web and app design.

Customize the sketch ui toolbar by right-clicking to move items and add spaces, tailoring the default layout. Add tools for shapes, text, images, scaling, rotating, and symbols.

Use the labeling convention for symbols: name/name/name with slashes, and a pattern like button/next. Double-click an image to enter editor mode and use the magic wand to crop or fill.

discover how slices let you cut, save, and export parts of your design, view export options, and manage visible slices on the canvas.

Export the selected screen by dragging it from the app to the desktop, using the left side handle, then release to preserve its current dimensions.

Explore ready-made mobile app templates for iOS and Android, study user interface sketches, icons, and control center elements, and practice by remixing free templates to design realistic apps.

Explore icon templates and libraries in Sketch for inspiration, import icons into Sketch, and learn to recreate curves from scratch, with a future logo design module.

Take on the final Sketch challenge: recreate the Nomad app's main screen, applying gradients and a search bar. Practice grouping, symbols, and a bottom navigation for popular cities.

Create a social media news view by importing assets, designing the status and bottom bars, and refining the search and upcoming events with precise spacing and symbols.

Design the videos view for a social media app by refining the search area, icons, and profile previews, then build the video section with titles, layout, and a background pattern.

Group and organize interface elements to design the favorites view, naming sections like search bar and favorite articles, and align colors and layout for a cohesive social media UI.

Design the activity view for a social media app by building a two-tab segmented header, placing avatars and icons, and refining borders, colors, and post previews for realism.

Develop a weather icons logo by building sun and cloud shapes from rounded rectangles, applying a yellow color and borders, and grouping components for a cohesive design.

Create weather icons using vector art by drawing a thunderstorm, rain, lightning, clouds, night sky, fog, and snow; learn grouping, transforming, and combining shapes to compose a cohesive icon set.

Design a calculator iOS app icon by building a branded template in Builder, adjusting colors, creating separators, and composing plus, equal sign, and multiplication symbols with precise centering and masking.

Build the polly iOS app icon by arranging triangles from a template, applying fills and borders, and using vector inserts, then duplicate, transform, center, and group elements while adjusting spacing.

Create a fiery compass logo for the Safari iOS icon by layering circles, blending light and dark fills, removing borders, and rotating 21 white ticks around a centered compass.

Apply logo design techniques by recreating iOS app icons with gradients, analyze color details, and obtain hex codes to craft a two-tone gradient.

Explore how Invision enables prototyping of sketch designs and Photoshop mockups. Export designs from sketch into Invision and learn its interface and dynamics for innovation.

Create and organize your first InVision project by building desktop folders for travel and blog, then sign in, start a mobile prototype for a travel app, and explore adding screens.

Export screens from your sketch travel app, including login with email and password fields and upcoming trips, then import into InVision to prototype.

Explore how Invision UI handles imported designs, prototypes, assets, and comments, then preview and build hotspots and animations while adjusting display settings.

Leverage hotspot templates to reuse navigation links across screens, and anchor fixed header and footer to prevent layout shifts, enabling faster design and consistent transitions.

Explore how to read, leave, and manage comments on specific screens in the Comet app, including ownership-based editing, deletion, and resolution for collaborative review with testers.

Demonstrates live share in invision for real-time collaboration, conference calls, and on-screen editing with the team and clients, including group chat and quick feedback cycles.

Import blog app screens in envision on mac, sync profiles, and organize stories, story details, saved stories, following, help, settings, and the menu to build an interactive prototype.

Add animations to the blog app by configuring hotspots and transitions for menu and stories, including slide-right, slide-left, and dissolve effects. Prototype and test the hotspot-driven navigation.

Explore Zeplin screen layout by inspecting single and multiple wireframes, adjusting view scale, and capturing precise x, y, width, and height measurements for clean handoff.

Create exportable slices in Zeplin and export assets for Android. Manage team feedback with comments and notes while building and syncing a shared style guide with colors and fonts.

Export the intermediate sketch design to the Zetland platform, build multiple slices or icons in scratch before import, and compile a comprehensive style guide with colors and fonts for developers.

Design and prototype a pay app interface by detailing the icon, splash and loading screens, balance activity, sending or requesting money, ordering ahead, payments in stores, loyalty cards, and settings.

Design an iOS PayPal app icon and splash screen for iPhone 7, using a blue gradient, centered logo, and rounded corners. Preview next video on loading and touch ID integration.

Create the PayPal iOS app homepage by building a three-rectangle gradient header with balance and avatar, add settings, activity, and request money sections, and integrate icons and labels.

Design a balance wireframe for the PayPal iOS app with a gradient background, status icon, centered balance text, and input fields for transfer and available balance.

Develop the PayPal iOS app activity screen by arranging icons, color, text fields, and calendar elements with precise spacing and borders to support send money and request money flows.

Prototype a PayPal iOS app's order ahead feature, detailing in-store payment flow and loyalty cards, with UI cloning, color updates, and header refinements.

Design a PayPal-style iOS settings screen with a gradient header and profile info, then map the app flow from splash to main page and settings.

Recreate a chosen app design using a full design process: sketch a mockup, choose a color palette, draw vector icons, organize layers, group elements, and export to your portfolio.

Learn to use chrome extensions like enter and rocket reach to find emails. Compose outreach in Gmail to connect with targeted LinkedIn contacts.

Learn to use job boards effectively by analyzing a product manager description on LinkedIn, identifying the road map and responsibilities, and turning insights into a notes document for outreach.

Craft your first outreach email script to recruiters, detailing your background and target role, then apply a 3-email, five-day strategy to build dialogue and secure a 15-minute call.

Learn to start a prep project as a product management growth candidate, run a 3–4 day usability and ab testing project, and gather user feedback to measure growth metrics.

Learn how Silicon Valley referrals work as a process where employees refer friends for roles with lump-sum rewards, and how to obtain LinkedIn referrals via email or by adding value.

Learn to craft email scripts for recruiters and product managers, ask project questions, share a product spec, and sustain dialogue to showcase your value.