Fundamentals of User Interface Design

Explore four design principles—contrast, repetition, alignment, and proximity—and see how typography, color, and spacing guide attention on the Commerce kids page.

Learn how contrast prioritizes user attention by making buttons and text stand out, using overlays and background darkening to improve readability and navigation cues.

Explore how repetition unifies elements by pairing the logo and offers through consistent alignment and visual cues; identify mistakes and how contrast reinforces the best offer on a pricing page.

Explore color theory fundamentals and practical tips for designers. Learn to set a base, background, main, and accent color, and apply color relationships and psychology to interfaces.

Explore the color wheel by mixing primary colors yellow, blue, and red to derive secondary colors green, orange, and purple, and practice with an online tool to master color relationships.

Explore color psychology in user interfaces and how blue signals stability, red signals desire, and green signals health. Learn to choose colors that convey your brand’s one-word message.

Explore color practice in UI design through simple color schemes and color psychology, then use color zilla and Excel to build a monochromatic login page with an orange accent.

Beginner-friendly overview of Adobe XD basics, focusing on a single page design, artboards, shapes, and image imports to practice core design principles.

Learn how rectangles, circles, and triangles form the three fundamental UI elements in Adobe XP, enabling buttons, overlays, sliders, an arrow, and styled text with alignment, color, and borders.

Learn how to use layouts in Adobe XD to achieve better alignment and positioning, and translate your designs into HTML/CSS with a focus on column-based grids and collaboration with developers.

Export your finished design by using file export, choosing all outputs or selected labels, naming the export, selecting a format (png or jpeg), and saving to the desktop.

Import images and create overlays in adobe ICS to balance a background with a translucent overlay, enabling readable text and basic navigation on the artboard.

Create your first UI design project for a dream agency in Adobe XP, applying typography, color relationships, and alignment; start your own project to build a practical workflow.

Design a website navigation by prioritizing typography, alignment, and white space before color, planning a two-column or three-column layout with developer-friendly structure for an agency site.

Apply repetition, alignment, and proximity to structure headers and paragraphs in a practice UI, group elements, and plan color separation to distinguish who are you from what do you do.

Design the past work password section by applying repetition-based headers, left and center alignments, and a contrast-enhanced image with overlaid typography, plus a three-circle slider for password options.

Learn to design the quote section as social proof, using repetition for spacing, left alignment, grouping, and typography considerations to create a cohesive testimonials area.

Learn typography in UI design through hands-on drafting, choosing two font families, balancing headers and body text for readability, and refining spacing and proximity across drafts.