YouYex

Overview

YouYex turns a web experience into a premium-feeling product by applying three psychology levers: first impressions, cognitive fluency, and micro-interactions. Treat premium design as respect for the visitor's time, attention, intelligence, and emotional response.

For deeper theory and examples, read references/psychology-principles.md only when you need rationale, audit language, or brand pattern examples.

Operating Loop

1. Identify the target feeling for the first 50 milliseconds: calm, confidence, excitement, exclusivity, trust, precision, or momentum.
2. Engineer the first viewport around one dominant promise, one clear visual signal, one primary action, and one obvious path forward.
3. Reduce cognitive load by removing ambiguity, duplicate choices, decorative clutter, unclear hierarchy, and competing section goals.
4. Add purposeful micro-interactions where users act, wait, transition, complete, or recover from errors.
5. Verify the page with a first-glance test, a scan test, a responsive test, and a motion/accessibility test.

First Impression

Make the hero and top navigation create a positive halo:

• Put the product, place, person, offer, or core outcome in the first viewport.
• Use a single visual anchor: strong product image, live interface, real venue/object photo, generated bitmap scene, data snapshot, or immersive interactive surface.
• Keep navigation short and predictable. Hide secondary links behind menus only when the product complexity justifies it.
• Write one specific headline, one supporting line, and one primary action. Avoid stacking multiple competing CTAs.
• Remove cheapness signals: generic gradients, busy badges, cluttered nav, stock-like imagery, decorative blobs, vague claims, tiny product signals, and hero cards that make the first viewport feel like a template.

Cognitive Fluency

Make the experience easy to parse:

• Give each section one job. If a section has two primary goals, split it.
• Use clear visual hierarchy: primary headline, supporting copy, structured details, action.
• Prefer dense clarity over empty decoration. Whitespace should group and emphasize; it should not hide weak information.
• Replace vague labels with concrete ones. Users should know what happens before they click.
• Align layout, labels, controls, and states with the domain. Operational tools should be calm and efficient; luxury sites can be quieter and more spacious; software pages should make complexity feel legible.

Micro-Interactions

Add small moments that prove craft without slowing the user:

• Buttons need hover, focus, active, disabled, and loading states.
• Inputs need clear validation, error, success, and recovery states.
• Navigation and tab changes should feel responsive and spatially coherent.
• Scroll effects should clarify progression or reveal meaning, not decorate emptiness.
• Completion moments should end cleanly: saved, sent, copied, added, deployed, booked, or purchased.
• Respect prefers-reduced-motion; never depend on animation for comprehension.

Peak-End Rule

Design one memorable peak and one satisfying end:

• Peak examples: a smooth product reveal, an elegant pricing comparison, a live preview, an instantly useful calculator, a polished onboarding success moment.
• End examples: a clear confirmation state, a receipt-like summary, a next best action, a quiet success animation, or a useful saved/exported artifact.
• Do not create peaks with noise. Create them with control, timing, contrast, and usefulness.

Implementation Rules

When modifying an existing project:

• Inspect the current framework, component system, tokens, and layout patterns before editing.
• Preserve working behavior and local conventions unless they are the source of the design problem.
• Prefer existing components, icons, animation utilities, and design tokens.
• Add only the interaction states required by the surface being changed.
• Verify at desktop and mobile widths. Text must not overlap, controls must not jump, and primary actions must remain reachable.

When creating a new page or app:

• Build the real first-screen experience, not a marketing explainer about the experience.
• Use visual assets or product/interface visuals unless the project is purely text-native.
• Avoid one-note palettes. Use restrained contrast, material changes, and purposeful accent color.
• Keep hero-scale typography only for true hero areas. Compact surfaces need compact type.
• Ship complete states for the expected workflow, including loading, empty, error, success, hover, focus, and disabled where relevant.

Audit Output

For a design audit, lead with actionable findings:

1. First-impression risks
2. Cognitive-load risks
3. Missing or weak micro-interactions
4. Suggested priority fixes
5. Verification checklist

Tie every recommendation to the visitor feeling or behavior it improves.