Turning Visual Observations into Reusable UI Design Rules

Requirement Goal

The exercise aims to reproduce and improve a production release card, turning title line height, group spacing, shadows, and operation hierarchy into reusable rules. The focus is on breaking observed visual gaps into explainable variables and validating them through reproduction and real content.

Initial Implementation

The first version of the release card displays service, version, description, and actions. It uses 20px card padding, a title line height of 1.45, and a solid blue background for secondary actions.

Figure 1: Initial release card with content and actions.

Method Analysis

Observation Focus

Vague judgments like "overall good" or "not polished" cannot guide next steps. Instead, observe specific decisions that differ from your own habits: multi-line titles set tighter, trace information naturally grouped, secondary actions using a more restrained appearance. Writing these observations as concrete relationships makes them transferable to other content.

Learning Method

Pick a reference interface worth studying, reproduce it independently without looking at the implementation first. Then compare your result, breaking differences into line height, spacing, color, shadow, and operation hierarchy. Adjust a few variables at a time and record their effects to judge the source of each change. Reproduction is for learning design decisions; branding, copy, and business information should be reorganized for your own project.

Method Application

Variable Breakdown

This example compares title line height, group spacing, floating shadow, and secondary action weight separately before forming a combined solution. When multiple properties change simultaneously, the final screenshot only shows the combined result and cannot prove each variable independently improved the outcome.

Style Example (CSS)

.release-card { padding: 24px; box-shadow: 0 12px 30px #1834431c, 0 2px 5px #18344319; } .release-title { line-height: 1.25; } .release-copy { margin: 0 0 24px; color: #687783; } .release-secondary { background: none; color: #687783; }

These parameters serve the combined demo. Effective rules must also document their purpose — such as group spacing, auxiliary text, and secondary actions — not just store code.

Content Validation

Replace with long service names, long versions, failure states, and narrow screens to observe where the original rules still hold and where they need adaptation. After validation, organize into shared components with limited parameters and record exception conditions. Screenshot similarity helps spot details but cannot replace functional and state correctness.

Result Verification

Figure 2: A comparable card composed of multiple visual decisions.

This example shows the combined changes; the step-by-step checks during reproduction need separate recording.

☐ Each change maps to a specific variable and content relationship.

☐ Primary action, description, and source information hierarchy are clear.

☐ Rules have explicit adaptation methods for long content, different states, and narrow screens.

Application & Practice

Choose a release validation card and reproduce it independently. Record the three biggest gaps, then adjust them one by one. Deliver the initial version, the adjusted version, and a change log explaining which variable had the most visible impact and which rules must be kept or revised when real long content is applied.