Skip to content
academia.sh
tr
Log in

Course Beginner

Fundamentals of Interface Design

By the end of this course

Start course

01

Visual Principles

The perceptual foundations of hierarchy, grouping, contrast, alignment, and repetition; what distinction each visual decision produces, and at what cost.

  1. 01 Visual Hierarchy Hierarchy as an ordering of attention; the measurable contribution of the size, weight, contrast, and position channels, and how the distinction between levels is audited.
  2. 02 Proximity and Grouping How relationship is declared through space; grouping is established by spacing ratio rather than absolute space, and nested grouping levels are audited numerically.
  3. 03 Contrast and Emphasis Separating contrast as a perceptual principle from the contrast ratio as a measured quantity; computing visual weight from area and luminance difference, and auditing emphasis shares as a budget.
  4. 04 Balance and Alignment Defining alignment as a shared invisible axis; computing the number of alignment axes and area-weighted horizontal balance, and measuring optical alignment and the ragged right edge.
  5. 05 Repetition and Consistency How repetition produces learnability; extracting a decision inventory, measuring value variety below the just-noticeable-difference threshold, and the cost of snapping to a scale.

02

Layout and Spacing

Grid systems, the spacing scale, density decisions, responsive and adaptive layout, and how input type affects sizing.

  1. 01 Grid Systems The arithmetic relationship among container, grid margin, column count, and gutter; deriving column width, computing span widths, and testing the grid against content criteria.
  2. 02 Spacing Scale Deriving spacing values instead of choosing them; comparing linear, geometric, and hybrid scales by step count, distinguishability, and grouping ratio.
  3. 03 Density Decisions Deriving information density from the task; computing records per screen, scan cost, and spacing ratio from row height.
  4. 04 Responsive and Adaptive Layout The difference between continuous and discrete layout approaches; deriving a breakpoint from content criteria and computing the widths that need testing in a continuous grid.
  5. 05 Screen Size and Input Type Input type as a variable independent of screen width; auditing target size criteria, the spacing exception, and hit area expansion by computation.

03

Typography and Color

Typeface selection, typographic scale, line length and spacing, color roles, semantic colors, contrast thresholds, and the dark theme transformation.

  1. 01 Typeface Selection The distinction between legibility and readability, what each typeface class promises, computing apparent size from x-height, and auditing a typeface candidate for alphabet coverage and character distinguishability.
  2. 02 Typographic Scale Deriving size steps from a base and a ratio, how rounding distorts the neighboring-step ratio, computing the step budget, and placing interface levels onto scale steps.
  3. 03 Line Length and Spacing Computing line length in characters from column width, tying leading to line length, the return-sweep-angle criterion, and the lower bound on paragraph spacing.
  4. 04 Color System Defining color as role, generating a ramp from a single hue along the lightness axis, binding roles to steps, and auditing matches through relative luminance.
  5. 05 Semantic Colors Binding success, warning, error, and info meanings to color families, why the same step produces different contrast across families, auditing the notification triad against its own ground, and why color cannot be a single channel.
  6. 06 Contrast and Accessibility The definition and limits of the contrast ratio formula, working backward from threshold to color, the discontinuity of the large-text boundary, and a bulk audit of the whole catalog interface.
  7. 07 Dark Theme Why mirroring steps distorts the hierarchy ratio, deriving the dark theme through a contrast-preservation condition, why saturation is free while lightness is dependent, and how elevation consumes the contrast budget.

04

Component States

Interaction states, loading and empty states, error presentation, icon usage, and interface text as part of the design.

  1. 01 Interaction States Definition of the five interaction states, tying state change to a measurable threshold, the channel conflict between hover and selected, and the area and contrast calculation of the focus indicator.
  2. 02 Loading and Empty States Splitting waiting time into feedback classes, the effect of indicator delay on flash rate, justifying the skeleton view with the layout shift score, and the three types of empty state.
  3. 03 Error and Warning States Classifying errors by source and recoverability, computing the number of messages produced by the moment of validation, filtering out preventable errors, and placing the message with the proximity rule.
  4. 04 Icon Usage The distinction between semantic and decorative icons, computing an accessible name with a small model, checking an icon set for polysemy, and consistency between scale and stroke thickness.
  5. 05 Microcopy Computing interface text as a layout constraint, the width budget of action labels, the prefix collisions produced by title truncation, and the three parts of an error message.

Start typing to search.

↑↓ ↵ Esc navigate · open · close