curiositech/native-app-designer

Native App Designer

Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.

Decision Points

Content Type → Animation Timing Decision Tree

User Action Type:
├── Immediate Feedback (button press, tap)
│   ├── Success: 0.1s spring (response: 0.3, damping: 0.7)
│   └── Error: 0.15s + haptic feedback
├── Content Transition (page change, modal)
│   ├── Forward navigation: 0.25s slide-right
│   ├── Back navigation: 0.2s slide-left (faster return)
│   └── Modal present/dismiss: 0.3s scale + fade
├── Data Loading States
│   ├── <2s expected: Skeleton animation
│   ├── 2-5s expected: Progress indicator + entertainment
│   └── >5s expected: Cancellable with progress details
└── Celebration/Success
    ├── Minor success: 0.4s gentle bounce
    ├── Major success: 0.8s confetti + sound
    └── Achievement: 1.2s dramatic scale + particle effects

User Mood → Visual Personality Selection

IF user context = "work/productivity"
  → Use Professional personality (crisp, confident, muted colors)
ELSE IF user context = "entertainment/social"
  → Use Playful personality (bouncy springs, warm colors)
ELSE IF user context = "wellness/meditation"
  → Use Natural personality (organic motion, earthy colors)
ELSE IF user context = "finance/serious"
  → Use Minimal personality (subtle motion, limited palette)
ELSE
  → Default to Vibrant personality (energetic, bold colors)

Platform Constraints → Implementation Strategy

Target Platform:
├── iOS Native
│   ├── Use SwiftUI for iOS 14+ → spring animations, SF Symbols
│   ├── Use UIKit for iOS 13- → Core Animation, manual spring curves
│   └── Add haptic feedback for all key interactions
├── Web Progressive
│   ├── Use Framer Motion for React → physics-based animations
│   ├── Use GSAP for vanilla JS → 60fps performance
│   └── Implement reduced motion support
└── Cross-platform
    ├── Use Lottie for complex animations → After Effects export
    ├── Focus on transform/opacity → hardware acceleration
    └── Fallback to CSS transitions for low-end devices

Failure Modes

"Generic Card Syndrome"

Detection: If every component is a white/gray card with identical shadows and spacing Symptoms: UI feels monotonous, looks AI-generated, lacks visual hierarchy Fix: Mix component types (cards, lists, overlays, inline elements), vary corner radius (8px-24px), use purposeful asymmetry

"Linear Animation Death"

Detection: If animations use .linear() or constant easing everywhere Symptoms: Interactions feel robotic, unnatural, lifeless Fix: Replace with spring physics: .spring(response: 0.3-0.8, dampingFraction: 0.5-0.8), match animation personality to app context

"Rainbow Vomit Overload"

Detection: If using >5 colors with no restraint or hierarchy Symptoms: Overwhelming interface, no focal points, visual chaos Fix: Limit to 3-4 colors max, use 60/30/10 rule (60% neutral, 30% primary, 10% accent), semantic color usage only

"Animation Overload Syndrome"

Detection: If every element animates simultaneously or constantly Symptoms: User can't focus, feels dizzy, performance issues Fix: Animate max 2-3 elements per interaction, stagger timing by 50-100ms, use animation sparingly for feedback only

"Inconsistent Spacing Chaos"

Detection: If margins/padding use random values (7px, 13px, 19px) Symptoms: Interface feels unpolished, chaotic, amateur Fix: Adopt 4pt or 8pt grid system (4, 8, 12, 16, 24, 32px), create spacing tokens, use systematic spacing scale

Worked Examples

Example 1: E-commerce Product Card Redesign

Before: Generic white card with linear transitions

// Anti-pattern: Generic, lifeless
VStack {
    AsyncImage(url: product.imageURL)
    Text(product.name)
    Text("$\(product.price)")
}
.background(.white)
.cornerRadius(8)
.shadow(radius: 2)
.animation(.linear(duration: 0.2)) // WRONG

Decision Process:

1. Content Type: Product showcase → needs visual appeal
2. User Mood: Shopping → playful/energetic personality
3. Platform: iOS → use SwiftUI springs + haptics

After: Organic, delightful interaction

struct DelightfulProductCard: View {
    @State private var isPressed = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            AsyncImage(url: product.imageURL)
                .frame(height: 200)
                .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                .scaleEffect(isPressed ? 0.95 : 1.0)
            
            VStack(alignment: .leading, spacing: 4) {
                Text(product.name)
                    .font(.system(.title3, design: .rounded, weight: .bold))
                Text("$\(product.price)")
                    .font(.title2)
                    .foregroundStyle(.green)
            }
        }
        .padding(16)
        .background(.ultraThinMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
        .scaleEffect(isPressed ? 0.98 : 1.0)
        .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isPressed)
        .onTapGesture {
            // Haptic feedback for premium feel
            let impact = UIImpactFeedbackGenerator(style: .medium)
            impact.impactOccurred()
        }
        .pressEvents {
            onPress: { isPressed = true }
            onRelease: { isPressed = false }
        }
    }
}

Expert insights caught:

• Spring physics instead of linear timing
• Asymmetric spacing (12px, 4px) creates rhythm
• Material background feels premium vs flat white
• Haptic feedback adds polish
• Continuous corner radius feels more organic

Example 2: Loading State Animation Strategy

Decision Process:

1. Expected duration: API call ~3 seconds → needs entertainment
2. User context: Banking app → professional personality
3. Content type: Financial data → build trust, not anxiety

Implementation:

const ProfessionalLoader = ({ duration = 3000 }) => {
  const [progress, setProgress] = useState(0);
  
  // Smooth progress curve (not linear)
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => Math.min(prev + (100 / (duration / 100)), 100));
    }, 100);
    return () => clearInterval(interval);
  }, [duration]);

  return (
    <motion.div 
      className="loader-container"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      <motion.div 
        className="progress-bar"
        style={{ width: `${progress}%` }}
        transition={{ type: "spring", stiffness: 100 }}
      />
      <motion.p
        animate={{ opacity: [0.6, 1, 0.6] }}
        transition={{ duration: 1.5, repeat: Infinity }}
      >
        Securing your data...
      </motion.p>
    </motion.div>
  );
};

Trade-off Analysis:

• Progress bar vs spinner: Progress shows control, builds trust
• Spring vs linear: Spring feels more natural, less robotic
• Copy choice: "Securing" emphasizes safety over speed
• Opacity pulse: Subtle life without being distracting

Quality Gates

Pre-Launch Validation Checklist

Animation Quality:

• [ ] All animations use spring physics or eased curves (no linear)
• [ ] Animation duration matches content importance (0.1s feedback, 0.3s transitions, 0.8s celebrations)
• [ ] Maximum 3 elements animate simultaneously per interaction
• [ ] Reduced motion is supported for accessibility
• [ ] 60fps performance maintained on target devices

Visual Hierarchy:

• [ ] Clear focal point on every screen (one primary action)
• [ ] Color usage follows semantic meaning (red=error, green=success)
• [ ] Typography has clear hierarchy (max 4 font sizes/weights)
• [ ] Spacing follows consistent grid system (4pt or 8pt)
• [ ] Interactive elements are minimum 44px touch targets

Platform Integration:

• [ ] iOS: Uses SF Symbols, system materials, supports Dynamic Type
• [ ] Web: Implements proper focus states, works with screen readers
• [ ] Cross-platform: Consistent brand feel across platforms
• [ ] Haptic feedback implemented for key iOS interactions
• [ ] Dark mode support with semantic colors

Brand Consistency:

• [ ] Personality choice is consistent across all interactions
• [ ] Color palette limited to 3-4 colors maximum
• [ ] Animation timing reflects brand character
• [ ] Micro-copy matches brand voice
• [ ] Empty/error states maintain brand personality

Not-For Boundaries

Do NOT use this skill for:

• Backend API architecture → Use backend-architect instead
• Database schema design → Use backend-architect instead
• SEO optimization → Use web-design-expert instead
• Brand identity creation → Use design-system-creator instead
• Accessibility-first design → Use adhd-design-expert instead
• Static marketing sites → Use web-design-expert instead
• Design system tokens → Use design-system-creator instead

Delegate to other skills when:

• User mentions "server", "database", "API endpoints" → backend-architect
• Focus is on accessibility, ADHD, cognitive load → adhd-design-expert
• Need retro/vaporwave/glassmorphic aesthetic → vaporwave-glassomorphic-ui-designer
• Building component libraries without interface → design-system-creator
• GPU shaders, Metal, WebGL complexity → metal-shader-expert