visual-hierarchy

Defines visual hierarchy principles for UI using F-pattern/Z-pattern and CTA design.

28|3|Updated Feb 22, 2026

Search Tags:#UX design #design principles #information architecture #UI design #visual hierarchy #scannability

Ready to run

npx skills add https://github.com/oborchers/fractional-cto --skill visual-hierarchy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-hierarchy
Source: https://github.com/oborchers/fractional-cto/tree/main/visual-design-principles/skills/visual-hierarchy
Command: npx skills add https://github.com/oborchers/fractional-cto --skill visual-hierarchy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually organized and scannable interfaces where users can quickly understand the most important information and actions. It prevents user confusion and decision paralysis by ensuring a clear visual flow.

Core Features & Use Cases

Establish Dominant Elements: Ensures one primary element stands out on each screen or section.
Implement Scanning Patterns: Guides users through content using F-pattern and Z-pattern principles.
Design Clear CTAs: Differentiates primary and secondary calls to action through visual weight.
Optimize Label-Data Relationships: Ensures labels are subordinate to the data they describe.
Use Case: When designing a dashboard, this skill helps ensure the key performance indicators (KPIs) are immediately obvious, while secondary metrics and labels are less prominent, allowing users to grasp the essential information at a glance.

Quick Start

Apply the three-tier visual hierarchy to the main heading and body text of the current page.

Frequently Asked Questions about visual-hierarchy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I establish visual hierarchy in UI design to improve scannability?▼

To establish visual hierarchy in UI design, this Skill guides the arrangement of elements using size, weight, and color. It ensures one primary element stands out, reducing cognitive load and helping users quickly grasp essential information.

What is the best way to design clear Calls to Action (CTAs) using visual weight?▼

Designing clear CTAs requires differentiating primary and secondary actions through visual weight. This Skill enforces visual hierarchy principles to ensure your primary CTAs stand out, preventing user confusion and decision paralysis.

How do scanning patterns like F-pattern and Z-pattern optimize user interface comprehension?▼

Scanning patterns like F-pattern and Z-pattern optimize user interface comprehension by guiding users naturally through content. This Skill applies these principles to dictate element arrangement, ensuring users follow a clear visual flow.

How do I optimize label-data relationships in a dashboard layout?▼

To optimize label-data relationships in a dashboard, this Skill ensures labels remain subordinate to the data they describe. This visual hierarchy approach makes key performance indicators immediately obvious while keeping secondary metrics less prominent.

Can I apply a three-tier visual hierarchy to existing web page elements?▼

Yes, you can apply a three-tier visual hierarchy to existing elements. The Quick Start suggests applying this hierarchy to your main heading and body text to immediately enforce clear visual importance on the current page.