디자인 스킬

Use shared colors, shapes, sizes, and styles to show which interface elements belong together, even across a page. Establish consistent visual rules for controls, categories, and charts, with additional cues so meaning does not depend on color alone.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Showing relationships between elements that are far apart
• Standardizing the appearance of buttons and icons
• Keeping category colors consistent across charts

Specify a single interface interaction for engineering handoff, such as a toggle or swipe action. Define its trigger, behavior, feedback, timing, repetition, and accessibility considerations so the intended response is clear.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Specifying toggle state animations
• Defining pull-to-refresh progress feedback
• Documenting inline form validation

Develop several solutions to the same problem by varying user steps, starting points, or decisions shared with the system. Keep concepts equally detailed so teams can explore meaningful alternatives before refining a single direction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Explore alternatives before refining the first idea
• Compare different sequences of user actions
• Explore how people and systems share decisions

Design the most emotionally intense moment and the ending of a user journey, which shape how people remember it. Apply this approach to purchase confirmations, first results, milestones, and recovery after errors.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Improving purchase confirmations and next-step guidance
• Ending onboarding with a meaningful first result
• Designing reassuring recovery after errors

Define a screen’s structure before visual design by organizing content priorities, component placement, and behavior notes. Create wireframe specifications that cover different screen sizes, content requirements, and states such as loading or errors.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning page structure before visual design
• Documenting button behavior and screen states
• Defining layouts for different screen sizes

Map how people move through a product to complete a task. Create diagrams covering screens, actions, decisions, error recovery, and background processes so the paths through a feature are clear.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Mapping screen paths for a new feature
• Defining error recovery paths
• Documenting branches based on user choices

Design navigation that fits a product’s structure and user tasks. Choose tabs, sidebars, menus, and breadcrumbs, then define clear labels and selected states so people understand where they are and how to move between sections.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Choosing navigation for a mobile app
• Organizing navigation in a complex desktop app
• Showing location within a deep page hierarchy

Group related interface elements with shared backgrounds, borders, or containers. Apply the Law of Common Region, a visual grouping principle, to clarify cards, forms, and panels while avoiding unnecessary borders and excessive nesting.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Clarifying groups in compact layouts
• Organizing sections within long forms
• Reviewing excessive cards and nested containers

Review menus, lists, and guided steps using the tendency to remember the first and last items best. Place important information where it is more likely to be recalled, and distinguish essential items that must remain in the middle.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reordering navigation to surface important destinations
• Arranging curated lists around priority choices
• Planning memorable openings and endings for onboarding

Design loading experiences that show users what is happening while content arrives. Choose placeholders, progress indicators, gradual content display, or immediate previews of expected results, with transitions and failure handling suited to the wait.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing placeholders for content-heavy screens
• Choosing indicators for different waiting times
• Showing an action's expected result before server confirmation

Review interfaces that work correctly but feel impersonal. Starting with the user's emotional state, it suggests changes to wording, motion, and response timing so loading, errors, onboarding, and success feel more considerate and appropriate.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Rewriting error messages with a clear next step
• Adjusting loading messages and motion
• Acknowledging small successes in an interface

Plan app interfaces around iOS and Android conventions for navigation, controls, gestures, and text sizing. Compare platform differences and decide which behaviors should follow each operating system and which visual elements can stay consistent across platforms.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Comparing iOS and Android navigation patterns
• Choosing platform-specific controls and gestures
• Deciding what to share across app designs

Build a product color system with light-to-dark scales, neutral colors, and roles for messages such as warnings or errors. Define usage rules and check foreground and background contrast to support accessible, consistent interfaces.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a color palette for a new product
• Standardizing success, warning, and error colors
• Checking contrast between text and backgrounds

Design layouts that guide the eye through aligned elements and continuous paths. Apply this visual principle to forms, timelines, carousels, and step indicators, using deliberate breaks to show boundaries and changes in hierarchy.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Aligning form fields for a consistent reading path
• Showing order in timelines and step indicators
• Clarifying carousel and scroll directions

Review forms, settings, and workflows to decide which complexity users should handle and which the product should absorb. Identify unnecessary effort, improve defaults, and check whether simpler screens create extra work elsewhere.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing unnecessary effort in forms
• Balancing defaults with user control
• Checking hidden costs of simpler screens

Adjust body text width for comfortable reading across screen sizes. Use character counts, approximate CSS widths, and real paragraphs to tune line length for articles, documentation, and interface descriptions while accounting for font choices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adjusting text width in articles and documentation
• Reviewing body text on mobile and desktop screens
• Retuning line length after changing fonts

Map what people want to accomplish with a product, including practical tasks, desired feelings, and how they want others to see them. Connect these motivations to expected outcomes, current solutions, and opportunities for design improvements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Understand motivations behind product use
• Reconsider feature decisions around user goals
• Find needs that current solutions do not meet

Design forms from field order and grouping through validation and completion. Define suitable input controls, helpful error messages, progress saving, and accessibility details so people can understand what to enter and how to correct mistakes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing field order and grouping for a new form
• Improving error messages and when they appear
• Planning progress saving for a multistep form

Write specifications for a reusable interface component, covering its parts, settings, variants, states, and behavior. Give designers and developers shared guidance on accessibility, keyboard interaction, edge cases, and appropriate use.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Specifying a new shared interface component
• Documenting component variants and states
• Defining keyboard and screen reader behavior

Design confirmations, status messages, and notifications that help users understand whether an action registered and what happens next. Choose suitable placement, timing, and feedback channels, with undo options and accessible cues where appropriate.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Design confirmation messages after saving
• Make button and toggle responses clear
• Organize upload and sync status indicators

Write clear interface text for buttons, forms, errors, empty screens, and onboarding. This skill helps explain what happened and what to do next, while keeping language consistent with the product’s voice and appropriate to each situation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Rewrite button and form labels
• Explain errors and the next action
• Guide users through empty screens

Plan and facilitate a design sprint that moves a team from a defined challenge to a tested prototype in days. Organize daily activities, roles, preparation, user interviews, and follow-up, with shorter and remote variations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning a five-day sprint from challenge to user testing
• Compressing a smaller challenge into a two- or three-day sprint
• Adapting sprint activities for a distributed team

Define rules for maintaining a shared design system across teams. Clarify ownership, contribution reviews, release numbering, and how to retire components, giving contributors and users a clear process for managing changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Clarifying ownership across design teams
• Defining component contribution and review steps
• Planning breaking changes and migration support

Structure a team design critique with shared context, clear feedback rules, and a guided discussion. Turn observations and suggestions into documented decisions and action items with owners and deadlines, grounded in project goals and user needs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning a structured team design critique
• Setting constructive feedback rules
• Turning review feedback into assigned actions