---
name: ui-ux-pro-max
description: Deep UX/UI decision framework for conversion-first pages built through this plugin's Elementor tools. Read on demand when a layout decision, information hierarchy, or conversion problem needs resolving beyond the auto-loaded design-intelligence skill.
version: 1.0.0
auto-load: false
tags: [ux, ui, conversion, layout, hierarchy, cro]
---

# UI/UX Pro Max — Conversion-First Decision Framework

## When to use this skill

Load this when you are past "which color" and into "why is this page not converting" — information architecture, scroll psychology, decision load, or a layout that technically works but feels wrong. `design-intelligence` (auto-loaded) covers the visual grammar; this covers the *decisions*.

---

## The one question every screen must answer

> What is the single next action, and is it the most obvious thing on screen?

If a visitor cannot answer that in under one second on any viewport, the screen has failed. One primary action per view. Everything else is secondary (ghost button, text link) or removed.

---

## Scroll psychology — the five zones

A long page is read in zones, not as one surface. Build for the zone, not the pixel.

1. **Above the fold (0–100vh)** — Promise + proof of relevance + primary CTA. The visitor decides to stay or leave here. No menus to explore, no "learn more" maze. State the value, show one CTA.
2. **Trust layer (100–150vh)** — Logos, numbers, a one-line credibility claim. This is where skepticism is answered before it's voiced.
3. **Desire build (150–400vh)** — Problem → solution → features → proof. Alternate rhythm (see design-intelligence). Each section earns the next scroll.
4. **Objection handling (400–550vh)** — FAQ, guarantees, pricing transparency. Remove the last reasons to not act.
5. **Commitment (bottom)** — Final CTA strip. Bigger, louder, zero distraction. This is the second-best converting zone after the hero.

---

## Decision load — cut it ruthlessly

Every choice you add costs conversion. Audit each section:

- More than one primary CTA style on a page → collapse to one.
- A nav bar with 7+ items on a landing page → cut to 3–4 or remove entirely.
- A pricing table with 4+ tiers → most convert on 3. Highlight one ("Most popular").
- A form with more than the fields you truly need → every extra field drops completion.

When in doubt, remove. A page that does one thing beats a page that offers five.

---

## Visual hierarchy — the squint test

Squint at the rendered page (call `elementor_get_page_outline` to review structure, then look at the live URL). You should see, in order: the headline, then the CTA, then section anchors. If a decorative image or a secondary button wins the squint test, the hierarchy is inverted — fix size, weight, and contrast, not position.

Hierarchy levers, in order of power: **size → weight → color/contrast → whitespace → position**. Reach for whitespace before you reach for a brighter color.

---

## Mobile is the default, not the afterthought

Most traffic is mobile. Decide the mobile layout first, then expand to desktop.

- Hero text that is 72px desktop is often 34–40px mobile — set responsive typography on the widget, don't let it scale blindly.
- Containers need their own mobile padding (`elementor_update_element` / container settings). Desktop 120px vertical is suffocating at 40px mobile — drop to 60–72px.
- Multi-column feature rows stack on mobile — check the stack order reads logically top to bottom.
- The primary CTA must be reachable without hunting. A sticky CTA on mobile is often worth it.

---

## Applying it through the plugin

- Review current structure: `elementor_get_page_outline`, `elementor_get_page`.
- Fix hierarchy: `elementor_update_element` / `elementor_update_widget` for size/weight; `elementor_update_container` for spacing.
- Global consistency: `elementor_get_global_colors` / `elementor_get_global_fonts` so every fix uses the system, never a one-off hex.
- Motion to guide the eye, never to decorate: `motion_set_entrance` on the headline and CTA only (see `impeccable` for restraint rules).
- After structural changes: `elementor_regenerate_css`, then purge with `cache_purge_all` so the visitor sees the new version.

---

## Anti-patterns that kill conversion

- **Carousel heroes** — visitors see slide one and scroll. Pick the best message, commit.
- **"Welcome to our website"** headlines — say what you do for whom, not that you exist.
- **Every section the same height and rhythm** — the eye glazes. Vary density (see design-intelligence).
- **CTA that only appears once** — the hero CTA and the final CTA are the minimum; repeat the action at natural decision points.
- **Decoration mistaken for design** — if an element doesn't move the visitor toward the action or reduce an objection, it's noise.