The Complete User Interface Design Bootcamp - Sketch UI/UX

Master core UI design basics by exploring layouts, iconography, typography, colors, and composition to build professional, visually appealing interfaces in Sketch UI/UX.

Explore layouts in UI UX design, emphasizing consistent spacing for clarity across platforms. Fixed distances, like 50 pixels between elements, create a clear and understandable composition.

Put yourself in the user's shoes to reveal hierarchy in design. Use size, color, alignment, contrast, proximity, repetition, and whitespace to guide attention and header priorities from h1 to h6.

Eliminate visual noise in UI design by simplifying screens and reducing unnecessary elements. Seek user feedback to ensure clear layout and adequate white space between items.

Master typography by using two fonts at most—one for headers and one for bodies—while considering licenses, weights, baseline, and the serif versus sans serif distinction.

Learn to balance readability and legibility with color contrast in ui design, using vibrant colors for emphasis. Use contrast ratio tools to verify readability, and place creativity after ensuring accessibility.

Learn how to create a color palette and color scheme using primary, secondary, accent, neutrals, and semantic colors, and apply complementary, monochromatic, and analogous palette combinations from the color wheel.

Apply consistent spacing patterns in UI design by measuring elements and standardizing pixel gaps, ensuring a clear, cohesive layout throughout the project.

Apply composition in design using the golden ratio, a mathematically pleasing proportion used in architecture, paintings, photography, and web design to guide attention to the right place.

Design guide creates a system to keep your interface design consistent and accelerate your work. It covers UI elements, typography, iconography, sizing and spacing, color palettes, and more.

Choose and apply fonts with care, using at most two font families to keep the UI simple. San Francisco and Roboto suit modern web apps, minimal and content-centric designs.

Apply color consistency across your UI by standardizing colors for titles and buttons. Create a design guide to ensure the same colors appear on every page.

Design consistent icons by testing scalability at small sizes, ensuring 7–10 mm touch targets, adding padding to prevent taps, and maintaining internal consistency in color, styling, and alignment.

Explore consistency of UI elements and learn common elements such as cards, text fields, sliders, dialogues, charts, steps, tables, selection controls, menus, and snack bars in the UI elements chapter.

Discover font resources for design projects by exploring Google Fonts, MyFonts, and Adobe Fonts, with tips for font pairing and using Typewolf to find paid or free options.

Discover essential color resources for UI design, including color hot, Adobe color, and web gradients, and learn how to assemble the best possible color palettes for your projects.

Intro to Sketch presents Sketch as a professional vector editor for turning ideas into products, offering a trial and annual license, ideal for UI/UX and not for raster graphics.

Explore the sketch environment by mastering the four main sections: toolbar, layer list, inspector, and canvas, and learn to navigate tools, manage layers, and customize properties.

Learn layer basics, including managing the layer list, adding pages, and recognizing layers by their icons. Name and organize layers to preserve hierarchy and control top-layer order.

Explore the Sketch toolbar, customize it, and use its insert menu, editing controls, zoom, grouping, boolean operations, visual aids, preview, cloud sharing, and export features.

Learn how shapes function as common layers in Sketch, insert and drag shapes from the insert menu, resize on the fly, and customize polygons using inspector options.

Combine basic shapes to create complex vectors using boolean operations such as union, subtract, intersect, and difference, enabling seamless cloud-like designs in sketch.

Learn how to add and edit text in Sketch: insert with the text tool or T, wrap text in boxes, and adjust typeface, size, bold, and ligatures.

Explore the text inspector to customize text properties such as typeface, font size, and alignment. Use the line height formula: line height equals font size times 1.5.

Learn to manage typography across Sketch projects by creating reusable text styles that apply to multiple layers. Update fonts by editing a text style in the inspector's appearance section.

Explore the inspector in Sketch to apply fills, click add to apply solid color, linear gradient, radial gradient, angular gradient, or image fill, stacking fills from bottom to top.

Learn to add and style borders on Sketch layers, adjust thickness and color, position borders inside, center, or outside, and customize ends, joins, arrowheads, dash and gap options.

Learn how to create and apply a shared layer style, reuse presets across layers, and keep appearances consistent while updating, resetting, or detaching changes across your project.

Master masking in sketch ui/ux by clipping shape layers with the mask button in the toolbar, masking images to circles, and using gradient masks via the layer menu.

Master the infinite canvas, pan with spacebar, scroll wheel, or arrow keys, and zoom from 1% to 256,000% using the toolbar or the command key while scrolling.

Install third party plugins to extend sketch's functionality, accessible from plugins menu. When updates cause incompatibility, disable plugins by holding shift during launch or manage them in the plugins preference pane.

Learn to export designs in Sketch by marking exportable layers, configuring export settings and scales, choosing formats, and even copying CFS attributes or SPG code for web use.

Explore essential UI elements—text fields, buttons, sliders, cards, dialogues, steppers, and charts—and learn how they shape user interface design.

Explore the anatomy and states of text fields, including label, input text, trailing icons, activation indicators, and validation colors across platforms for mobile apps and websites.

Learn how sliders provide a full range of choices with icons on both sides, support all states, deliver immediate feedback, and distinguish continuous and discrete modes for accessibility.

Design tool tips that display concise, informative text when users hover, focus, or tap elements, pairing each tip near its related element. Ensure tool tips disappear after about 1.5 seconds.

Explore how selection controls empower users to choose options in UI design, using switches, radio buttons, and checkboxes, while emphasizing familiarity, efficiency, and visual distinction between selected and unselected items.

Learn how chips serve as dynamic, interactive elements that trigger actions, with attention to states, relevancy, and compact presentation using icons, images, or text.

Design cards as standalone containers that display content and actions with hierarchy. Include media such as images, icons, tags, buttons, or thumbnails while ensuring the card remains indivisible and scan-friendly.

Explore lists as groups of images or texts with items offering primary and secondary actions through icons and text, and apply consistency and logical classification to keep them scannable.

Explore data tables in ui design, using headers, sortable rows, and scrollable layouts. Implement expandable rows, pagination, and fixed headers to maintain context while browsing records like products and prices.

Navigate between screens to complete tasks, including lateral, forward, and reverse patterns. Move from explorer to profile pages and access all top-level hierarchy levels.

Learn about menus in user interface design, which display a list of options on a provisional surface triggered by a control. Design for easy scanning, quick open, and front placement.

Explain how steppers display progress through a sequence, enable navigation, and show transient feedback after a step is saved, guiding horizontal or vertical layouts and editable versus non editable steps.

Provide brief, bottom-of-screen feedback with a single-line message and optional button, auto dismiss, and avoid multiple buttons or icons; use dialogs for important actions that block the app.

Explore wireframing as a low fidelity, structural blueprint for layouts and functionalities focused on user needs and experiences, and distinguish it from high fidelity prototypes.

Define the user flow as the path from entry to final action, guiding users through a series of phases toward a purchase or message.

Learn to craft high fidelity interactive prototypes that clearly convey design messages and interactions, helping designers and developers translate ideas into code using sketch, vision studio, principle, and proto pi.

Learn to craft a low-fidelity wireframe in sketch using a premade UI kit, creating a landing page with headers, footers, images, paragraphs, buttons, and a video player.

Define a color style and build a style guide that aligns your brand colors, using examples like Twitter blue to guide your design process.

Create a starter style guide in Sketch by defining primary, accent, and semantic colors, and applying named layer styles for a scalable, cohesive UI.

Create and organize grey background colors and two gradients, build a reusable style guide with shared layer styles, and enable easy global updates across the UI design.

Create shared input layer styles for text fields used in registration and login forms, applying borders and a primary color, with a warning state and corner radius of 20.

Develop and apply typography guidelines by creating multiple header and body styles (H1–H4, body text), setting font sizes, line heights, and alignments to build consistent UI typography.

Design Instagram’s app from sign-up variants to a home feed with posts and stories, then build profile forms, camera, explorer, messages, settings, athletic page, onboarding pages, and a resources file.

Create sign-up page in Sketch, set up the artboard with fonts and Apple UI kit, add email and password fields, password strength indicators, and Facebook and Google Plus options.

Create a personal data page with a centered 120 by 120 profile circle and camera icon, name fields, a bottom purple complete button, and a completed page with a tick.

Design three login pages by adapting a sign-up layout and presenting an iOS light alphabetic keyboard, with aligned padding, updated icons, and a typing indicator.

Design and polish a social feed home page with a custom bottom tab bar and an add button. Build post units with images, captions, hashtags, likes, comments, and author info.

Design stories by arranging circular avatars with padding, borders, and gradients, populate them from the sketch data faces database, and add a plus button.

Design the camera page and settings in a Sketch UI/UX project by building artboards, adding a photo background, a shutter button, status bar and home indicator, with icons and padding.

Design the explore page by duplicating the profile page, detaching and updating the search bar, and creating places, trending, and popular sections with styled headings, images, and shadows.

Design a messages page with three reusable message cards showing avatars, names, previews, and timestamps with arrows, using a symbol for quick, consistent updates.

Design a chat page with a customizable navigation bar, chat bubbles, avatar, timestamps, and a typing area with a send button for a complete Sketch UI/UX chat interface.

Design a settings page in sketch ui/ux with two sections on cards, including notifications and general options like language, night mode, auto lock, passcode, face id, user agreement, and privacy.

Design onboarding pages as the app’s first impression by selecting free illustrations, adjusting color and typography, and adding page indicators and a get started button.

Explore seven logo design types, including monograms, word marks, abstract marks, pictorial marks, mascots, combination marks, and emblem logos, with examples and hands-on logo creation guidance.

Design your first logo in Sketch for a finance app called money by combining basic shapes, using difference and union, and applying gradients and bold typography.

Create the second logo, a moon, by combining circles, adjusting borders, and adding a light inner shadow. Add the text moon, convert to outlines, and center-align with 16 pixel padding.

Design the third logo, amazed, by shaping a rounded triangle with a gradient, filling white, centering the forms, and outlining the word amazed in yellow with eight padding.

Design a rabbit logo by composing simple shapes, rounded corners, ears, and eyes, apply a two-tone pink gradient, and add Monserrate text, achieving a polished 3-D look.

Explore the Adobe Photoshop environment and the basics of Photoshop for preparing and editing images, while noting that Photoshop is not ideal for user interface design.

Explore the Adobe Photoshop environment, focusing on the tools panel, the layers panel, and color adjustments, while noting that the basics stay consistent across versions.

Learn the basics of adobe photoshop, set up a 1920 by 1080 pixel rgb canvas at 72 dpi, and explore essential tools like move, selection, brush, pen, and layers.

Learn how to use Adobe Photoshop for UI/UX design—separate objects from backgrounds, edit colors with hue/saturation and color blend modes, and export as PNG for easy import into Sketch.