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.

Explore the principle of alignment to improve readability, compare left, right, and center alignment in forms, and follow a beginner rule to avoid overusing center alignment.

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.

Master how proximity uses white space to reveal relationships by grouping related elements and separating unrelated ones. See a web page example that clarifies groups and improves readability.

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.

Learn to use a base color and its accent to build contrast in color relationships. Explore complementary, triadic, analogous, and monochromatic schemes for balanced mobile app design.

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.

Practice color theory by selecting three sites and recording their color schemes in Excel. Apply these schemes to a simple login page in Adobe XD to explore color relationships.

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.

Explore how proximity defines relationships by measuring the distance between elements to improve horizontal and vertical alignment and contrast using Adobe X, laying the groundwork for layouts.

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.

Define the branding and design goals the brand should invoke, clarify the home page's purpose to convert new users, and show social proof through testimonials to build trust.

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.

Begin the workflow for fundamentals of user interface design by focusing on core design principles, creating three black-and-white drafts that evolve with typography and color to deliver a professional UI.

Import and place a large background image, apply a dark overlay for contrast, align left, adjust spacing, and highlight the value proposition for the Dream Agency.

design the who are you section by arranging the image, header, paragraph, and a learn more button, applying typography contrast and alignment rules.

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.

Choose a blue color scheme to evoke trust and pair it with green for contrast in your practice project, exploring complementary and monochromatic palettes.