User Experience Design Essentials - Adobe XD UI UX Design

Learn to start with lo-fi wireframes in Adobe XD to test core task flow quickly, then advance to hi-fi designs for portfolio-ready visuals.

Create four mobile-first artboards in Adobe XD using presets or custom sizes, naming them homepage, product details, checkout, and confirmation to map the task flow.

Learn the basics of typography in Adobe XD wireframes, using the type tool, text boxes, auto height vs fixed width, one font, and simple color-free accessible designs.

Draw rectangles and ellipses in Adobe XD, add rounded corners, and create buttons with precise sizes, using layer order and alignment shortcuts.

Explore adding color in Adobe XD using the hue slider, RGB/HEX values, and the eyedropper, while managing transparency and borders; as you build wireframes, aim for a single color accent.

Master adding and editing strokes in Adobe XD, including borders, dash styles, and line weight, with copy-and-paste appearance shortcuts to apply across elements.

Build a four-page wireframe in your own design from the random project generator, customize color and font, capture progress with a screenshot, and learn XD polygon tool for arrows.

Discover free icons for Adobe XD wireframes, compare PNG and SVG formats, and review licensing basics like commercial use and no-backlink requirements under Creative Commons.

Explore how to find and use existing UI kits in Adobe XD, including UI kits, sticker sheets, and design systems, to borrow icons and other prebuilt elements for your wireframes.

Learn common Adobe XD quirks like pasteboard and artboards; master grouping, ungrouping, components, and outlining strokes to edit icons accurately and keep them scalable.

Create four top icons and three bottom icons, including user login, cart, and menu, with matched strokes and social icons; then align, group, and distribute for a cohesive UI.

Learn to add interactions to a mobile prototype in Adobe XD by wiring artboards, configuring tap triggers, and previewing transitions to navigate home, product details, and checkout pages.

Explore prototyping in Adobe XD using animation types and easing. Name artboards, set transitions like slide left or push left, compare dissolve and anticipation, and coordinate with developers on feasibility.

Test your XD designs on iPhone or Android by viewing them in the Adobe XD app, using live USB updates or cloud-based preview, and share with clients for user testing.

Test your adobe xd prototype on your phone, adjust clickable areas and font sizes, and verify navigation before finalizing. Capture screenshots and adjust viewport to fit your device.

Learn to create auto animate transitions in Adobe XD by duplicating artboards, naming elements the same, and using auto animate in prototype mode to move and fade objects.

Master advanced Adobe XD animations by sequencing elements with auto animate, adjusting timing and easing, and starting objects off screen to reveal the tick after the arrow.

Create your first animation in Adobe XD, either recreating the video or innovating with new directions and icons. Preview, record, export as mp4, and share for feedback with #xd.

Share wireframes with clients using a link from the share tab, enable comments and pins for precise feedback, and update the link as designs evolve.

Create mood boards to spark high-fidelity UI in Adobe XD and share early with clients to align with the Zoe Owl persona, using Dribbble, Behance, Awwwards, and screenshots.

Create mood boards in Adobe XD, from simple caveman layouts to curated client-ready boards, learning to arrange images, crop, use colors, and communicate to stakeholders.

Create a mood board by importing images and sharing a screenshot for submission, using stock visuals to guide design when a brand lacks a logo.

Explore the 12-column grid in Adobe XD and why twelve is standard for responsive web design. Learn how to adapt columns for desktop and mobile breakpoints, including gutters and margins.

The dotted line is the viewport used to preview your design. Drag or set its height, toggle the layout grid, and use preview to see how pages scroll across viewports.

Master adding, moving, and deleting guides in Adobe XD by dragging from the page edge, toggling show/hide in view guides, and copying, pasting, or locking guides across projects.

Explore color inspiration in XD using hex codes, HSB values, and the eyedropper to create a starter palette from Color Hunt and Adobe Color, refining with mood boards.

Create a practical color palette in Adobe XD by defining primary, secondary, and accent swatches, plus grayscale and off-white options, with darker and lighter variants for contrast.

Create and fine-tune gradients in Adobe XD by using linear and angular options, adjusting color stops, and applying gradients to shapes and artboards with eyedropper and hex values.

Save and reuse colors in Adobe XD by adding swatches to a bottom saved list, then quickly apply and reorder or remove them to maintain brand colors and streamline design.

Create four high-fidelity pages for desktop and mobile with columns, including homepage, product, checkout, and confirmation, and build a primary, secondary, accent palette with grays and a gradient, saving swatches.

Explore how to choose web and app fonts for Adobe XD, source fonts from Adobe Fonts and Google Fonts, verify web licensing, and pair fonts effectively.

Learn to identify fonts used on websites by inspecting elements and checking the computed font-family. Discover fonts with Google Fonts, Adobe Fonts, and visual search or Adobe Capture.

Explore practical font sizing guidelines for web design, including heading scales (72, 48, 32, 24, 18) and 16-point body text, with accessibility and mobile testing on devices using Adobe XD.

Create and update character styles in Adobe XD, including headings and body copy, and apply a four-column layout with margins and padding for a consistent card design.

Install your first plug-in in Adobe XD and learn to browse, install, and manage plugins using the Creative Cloud app, including lorem ipsum placeholder text.

Create a branded logo and marketing message on your homepage, build and organize ui assets, research ui cards, and install plugins while preparing placeholders and sharing designs for feedback.