Sketch 3 - Mobile App Design (UI & UX Design)

Explore the workspace in sketch 3, navigating the central design area, tool panel, and artboard to create layouts, add images and text, and manage shapes.

Learn to use the vector tool to create and modify shapes for prototypes, placing points, shaping curves, and applying symmetry and edge edits, then practice saving and refining your design.

Use the pencil tool to draw and modify shapes, adjust color, and move or resize elements. Double-click to activate the shape tool and refine your work.

Learn to use the shape tool to create and modify logos and icons; rectangles, circles, polygons, and custom shapes; adjust borders, fills, corners, rotation, and layering to prototype UI elements.

Use the type tool to create and style text, adjust position, size, rotation, spacing, and typeface, and apply color gradients for an Instagram clone prototype.

Learn to import an image in Sketch 3 and apply masking to reveal only a chosen shape, using the masking tool to reduce parts and keep a selective area.

Use the artboard as your canvas and template for app sizes and borders, then save and organize your work with clear naming.

Create and reuse symbols in Sketch 3 by building symbol shapes from basic forms, adjusting borders, alignment guides, and colors, then duplicate and save the template for future use.

Learn to use the blending tool to apply gradients, mix two kinds of colors, adjust angles, and create shapes with circle and square masks using darken and multiply modes.

Learn to save your files with save as, rename them, and export your work, then choose formats and background colors, and see how the background affects the exported image.

Create the Instagram clone loading screen by setting up the artboard, applying a blue–orange gradient with purple accents, and using the Billabong‑like font in Sketch 3, then save.

Learn to build an Instagram clone login screen, using a preset canvas, gradients, familiar fonts, and panel layouts to craft a smooth user experience.

Design a crisp log in screen in Sketch using grids and rulers to align elements precisely, and balance mobile emphasis with broader accessibility.

Finalize the Facebook login icon on the log in screen, adjust layout and typography, tweak colors, and export the finished screen with a white backing.

Reorganize the sign up screen by rearranging elements, swapping password to e-mail, and adjusting colors to white, ensuring clear navigation and minimal user confusion.

Build the home screen by crafting the top Instagram logo and the mail icon, using the chosen font and color emphasis for a cohesive user interface.

Develop the bottom tab section with a white backdrop for a profile picture masked in an oval and a username, echoing simple, high-contrast navigation.

Design heart and word bubble icons for a mobile app using simple shapes, color choices, and brand-consistent visuals while considering target audience.

Build heart and chat icons for a mobile app using simple shapes, color theory, and blending; tailor design to target audiences while ensuring readability and consistent branding.

Learn to build a bottom navigation bar by creating home and search icons, refining shapes and alignment, and applying the Dougall technique of random doodling to generate designs.

Build and refine the upload, activity, and profile icons by reusing templates, aligning shapes, and mastering shape and pen tools for consistent, efficient mobile UI design.

Design the search portion of the screen by adapting the home screen into a two-panel top layout for photos and people, focusing on consistency, shapes, and user-friendly structure.

Design a photo-led interface by prioritizing photos over people, using size hierarchy and color emphasis to guide navigation, and establishing a gray panel for people with a bottom navigation bar.

Design a cohesive search art screen by applying masking and templates, duplicating shapes to create a consistent collage of dog and cat imagery.

Create the search screen's people panel with a profile image and like button, then build and position rectangular panels, duplicating templates to layout the list.

Learn to create a profile picture by selecting an image, applying an oval mask, adjusting colors, and layering elements for the profiles section.

Design a search people button for the app's search screen using templates, and apply design thinking to empathize with audience, define objectives, ideate, prototype, test, and refine for customer satisfaction.

Build the activity screen by emulating an Instagram clone to learn design and practical app-building techniques, while reinforcing memory muscle, patience, and focus.

Apply finishing touches to the day activities screen in a sketch 3 ui design workflow, arranging and masking pictures, grouping and duplicating panels, and preparing assets for png export.

Practice adjusting a mobile app UI by emphasizing navigation, aligning elements, and updating icons and colors; export and save assets while organizing templates and components for efficient design.

Design the profile screen with the profile picture, edit your profile option, and posts, followers, and following counts, then prototype the layout using invasion.

Create and refine the bottom navigation icons for an Instagram clone by duplicating and sizing square dots and lines, adjusting colors and alignment, then build an interactive prototype for feedback.

Design a map icon by starting with a circle, shaping a droplet form with side dots, refining pointiness, adding a border, and finalizing color with an eyedropper tool.

Create a profile icon and arrange bottom images for an instagram-clone prototype, emphasizing precise alignment, balance, and border visibility. Save, rename, and export for sharing.

Open envision to begin prototyping in sketch 3 for mobile app design. Create an account by entering your name, address, and password to start your first app.

Open the invision web site, log in with your email and password, and explore mobile app prototypes and web apps.

Create a mobile app prototype using an iPhone layout, add interactive buttons, loading screens, and transitions to preview your Instagram-style interface.

Create interactive command buttons in Sketch 3 by configuring a single tap, transitions, and screen navigation (home, search, activity, profiles) using presets and preview mode.

Learn how to share your finished prototype via email, sms, embed, or Instagram, and download it with an upgrade plan to enable multiple prototypes.

Continue advancing your design skills with monthly tips, updates, new lessons, and notes, while staying engaged with the class and receiving ongoing support.

Explore the anatomy of great web design by mastering layout, color schemes, usability, and user experience, with attention to typography and consistent design elements.

Explore ten tried and tested web layouts, including tree box, five boxes, grid, and 3D screenshot templates. Learn to craft usable sites by applying templates with color, graphics, and fonts.

Adopt a fixed left-side vertical sidebar with a four-box layout to structure content. Explore the headline-and-gallery, featured photo, and power grid patterns, mixing layouts for flexible, creative results.

Learn how eye tracking reveals where users look on pages, follows the f-pattern, and highlights how logo placement at the top left, headlines, and button size affect engagement.