The Complete User Interface Design Bootcamp - 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.

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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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 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 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 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.

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.