Practical UI Design through Learn UI Design and Design Hacks

Based on Erik Kennedy's public method. Not affiliated with or endorsed by Erik Kennedy.

When to use

Use this skill to design a concrete web or mobile screen, improve an existing interface, explain a visual problem, or practice a specific UI technique. It is especially useful when a developer or UX designer needs actionable decisions about attention, layout, controls, typography, color, and component coherence. Work with the actual content and task rather than delivering an abstract aesthetics lecture. [S1][S5]

Choose the output that matches the request: an implemented screen, an annotated design specification, a prioritized critique, or a controlled practice exercise. Preserve the user's platform, brand constraints, existing component system, and intended scope. For practice, reproduce a reference to study its decisions; for production, apply the learned relationships to the user's own interface. [S6][S7]

This package synthesizes Kennedy's public essays. It does not reproduce his paid curriculum. The cited heuristics inform judgment; the package's evidence recording, state coverage, and delivery format are operational additions. Read the relevant sections of the method as decisions arise. Use the examples to understand application, not as universal token sets.

Procedure

1. Frame the task. Identify the screen, user goal, frequent actions, constraints, available artifacts, and requested deliverable. Record assumptions in templates/output-template.md. For critique, ground each finding in an observable element; for practice, define one capability to improve. See the scope rules in references/method.md.

2. Rank attention. Write the intended first, second, and third things a user should notice. Use action frequency as an initial proxy for importance, then account for essential information. Squint at or blur the existing screen and compare its actual emphasis. Follow references/method.md. [S5]

3. Study a targeted reference when needed. Choose a strong example of the specific element causing trouble. In practice mode, recreate and compare it; in production, extract transferable relationships without importing unrelated interaction assumptions. Use references/method.md. [S2][S6]