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.

Learn to import designs into Sketch, set up a new document, and build three news reader screens using rectangles, symbols, grids, and basic layout tools.

Learn to build a news reader app prototype in sketch by grouping selections, duplicating elements, and layering backgrounds to create a cohesive content feed with headers, icons, and components.

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 with git, iTerm, and GitHub by initializing a design course repo, creating a readme, adding and committing files, and pushing to origin master.

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.

Explore Sketch 101 basics, including the interface, precision, inspector, tools, exporting designs, and secondary features, illustrated with a nomad app sample project from Dribbble.

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 how snap to grid keeps objects pixel-perfect in Sketch, using pixel view to verify sharpness and edge alignment with the red line.

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.

Distribute spacing using horizontal and vertical options to create evenly spaced, aligned elements, then build grids with margins like 30 pixels.

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.

Explore multi-select editing of sketch shapes, duplicate shapes, and modify points to adjust movements like straight, disconnected, asymmetric, or mirrored edges.

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.

Explore the inspector to adjust dynamic properties—position, size, and transform—across groups and objects, using stepper precision, aspect ratio lock, rotation, flipping, and inline math for position changes.

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.

Master fills, borders, and opacity to craft layered visuals with gradients and transparency. Use blending modes such as multiply and screen, and manage colors for cohesive designs.

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 how to design a complete login screen from start to finish, with username and password fields, login buttons, and social options, organized by grouping and alignment.

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.

Explore how to customize fonts in a text field by selecting a typeface such as Arial Black, adjusting weight, color, and size, and applying decorations like underline and bullets.

Learn how pages and ports relate, explore artboards, symbols, and the archive page, and create a new page with a canvas, choosing devices, responsive web design, or material design options.

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.

Master bitmap editing by selecting image areas with a magic wand, double-clicking to choose, and filling or cropping selections to isolate details in Sketch.

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 your design by selecting the full board, applying a background color, and saving at 1x, 2x, and 3x with consistent suffixes and naming for icons and screens.

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.

Sketch mirror lets you preview designs on a mobile device in real time by wireless transfer via Bluetooth and Wi-Fi, enabling quick UI layout and touch interaction testing.

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.

Recreate a complete intermediate sketch app: a social network featuring upcoming events, videos, favorite articles, activity, and a profile page, using Jackson Almeda's Dribbble template to practice mobile app design.

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.

Recreate a social media profile wireframe from scratch, building icons and the settings bar, then customize it with your name, location, and a profile description, and share on discussion board.

Publish your finished mobile app designs on Behance by exporting assets, uploading your project with proper credits and licensing notes to build a discoverable portfolio.

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 by building a cloud from two ovals and a rectangle, then add a moon with stars and rain, grouping elements for day and night icons.

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.

Design a Safari iOS app icon with a triangle-based composition of two nested triangles, rotations, and a transparent color scheme with borders and subtle shadows.

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.

Learn to create hotspots in a prototype by building in edit mode, linking taps to logon and transitions, and using templates to speed design.

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 creating animations that feel native to the iPhone for a travel companion prototype, including left and right slide transitions between screens, hotspot behavior, and UI-aligned color and transparency considerations.

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.

Organize your design projects in Invision by creating sections, such as onboarding. Switch to list view to see thumbnails, revisions, and contributors, and use alphabetical sorting to manage many designs.

Import your designs from a MacBook into envision using the Invision sync plugin, download the tool, log in, and access a shared envision folder containing project assets.

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.

Organize hotspots in a blog app prototype by mapping the home, story, saved stories, and menu flows. Implement the plus and save actions, and essential transitions to demonstrate navigation.

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 an Invision quiz that covers saving multiple hotspots, real-time collaboration with live sharing, and organizing designs into easy sections.

Create a prototype from your earlier sketches and export them to Invision. Design the app animation and flow to demonstrate interactive mobile app design from beginner to intermediate.

Discover Zeplin introduction and importing screens to streamline design hand-off, generate style guides automatically, and export Android and iOS boards for developer-ready assets.

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.

Design an iOS Touch ID and loading screen for the PayPal app, featuring a gradient splash, a profile avatar, status bar alignment, and a clean, centered loading sequence.

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.

Design the send money and request money screens for a PayPal iOS app, using consistent colors, typography, and layout. Copy elements, adjust spacing, and finalize a clear money transfer flow.

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.

Create a job strategy document in an Excel file within Google Drive, using green, orange, and red statuses to track product manager outreach, include company links and contact emails.

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.

Execute a focused life cycle strategy by researching 20–30 companies, emailing for chats, emulating the role with a publishable project, and pursuing new targets after interviews.