abanoub-ashraf/indie-app-design

Indie App Design Skill

UI/UX design framework for solo iOS/macOS developers. Use this skill when the user wants to design interfaces, improve user experience, ensure accessibility compliance, find design inspiration, or make their app look professional without a dedicated designer.

When to Use This Skill

Trigger on phrases like "UI design", "UX design", "make my app look better", "accessibility", "VoiceOver", "color scheme", "design inspiration", "professional looking app", "user interface", "user experience", "WCAG", or any questions about app design and accessibility.

Design Philosophy for Solo Developers

The Core Principle: Copy, Don't Create

Successful solo developers don't design from scratch—they remix proven patterns. Users prefer familiar interfaces (Jakob's Law), so using established patterns actually improves UX.

Why This Works:

• Reduces design decisions (decision fatigue is real)
• Users already know how to use familiar patterns
• Faster development time
• Lower risk of poor UX

The 80/20 of App Design

Focus your limited design time on:

1. Visual hierarchy: Guide users' eyes to important elements
2. Consistency: Same patterns throughout the app
3. Clarity: Every element has an obvious purpose
4. Spacing: Generous whitespace improves readability

Skip (for now):

• Custom animations (use system defaults)
• Novel navigation patterns (use standard tab bars, nav stacks)
• Unique controls (use system components)

UI Design Fundamentals

Visual Hierarchy

Organize content to naturally guide the user's eye. Most important elements should be most prominent.

Techniques:

• Size: Larger = more important
• Color: Bright/saturated = more attention
• Contrast: High contrast = draws eye
• Position: Top and center = seen first
• Weight: Bold text = more important

Consistency

Maintain uniformity across your app:

• Same button styles everywhere
• Consistent spacing (use a spacing scale: 4, 8, 16, 24, 32px)
• Uniform typography (2-3 font sizes maximum)
• Predictable navigation patterns

Color Schemes

If You Have a Primary Color: Use a tool like Eva Design System's color generator to create harmonious secondary colors, success/error states, and neutral variants.

Safe Default Approach:

• One primary brand color
• Gray scale for text and backgrounds
• System red for errors/destructive actions
• System green for success/confirmation
• Blue for links and interactive elements

Dark Mode:

• Don't just invert colors
• Use elevated surfaces instead of borders
• Reduce contrast slightly (pure white on pure black is harsh)
• Test both modes thoroughly

Typography

System Fonts Are Fine: San Francisco (iOS) and New York (iOS serif) are excellent, highly readable fonts. Custom fonts add complexity for minimal benefit.

Type Scale:

• Title: 28-34pt
• Headline: 20-24pt
• Body: 17pt (iOS default)
• Caption: 12-14pt

Dynamic Type: Always support it. Users who increase text size need your app too.

Spacing and Layout

The 8-Point Grid: Use multiples of 8 for all spacing: 8, 16, 24, 32, 40, 48px. Creates visual rhythm and consistency.

Minimum Touch Targets:

• iOS: 44x44 points minimum
• Larger is better for primary actions
• Add invisible padding if visual element is smaller

Safe Areas: Respect system safe areas for notches, home indicators, and Dynamic Island.

iOS Design Patterns

Navigation

Tab Bar: For 3-5 top-level sections. Most common iOS pattern.

Navigation Stack: For hierarchical content. Use standard back button behavior.

Modal Sheets: For focused tasks that can be dismissed. Use .sheet in SwiftUI.

Sidebar: For iPad and macOS. Implement with NavigationSplitView.

Common Screens

Onboarding: 3-5 screens maximum. Show value, not features. Request permissions contextually.

Empty States: Never show blank screens. Provide guidance on how to add content.

Error States: Explain what went wrong and how to fix it. Avoid technical jargon.

Loading States: Use skeleton screens for content, spinners for actions.

SwiftUI Components

Prefer system components—they get Dark Mode, Dynamic Type, and accessibility for free:

• List for scrollable content
• Form for settings and input
• NavigationStack for navigation
• Button with standard styles
• Label for icon + text combinations

Accessibility

Why Accessibility Matters

Over 1.3 billion people worldwide live with some form of disability. Beyond ethics:

• Legal requirements (ADA, EAA as of June 2025)
• Accessibility features benefit everyone
• Apple features accessible apps prominently
• Improves overall UX quality

VoiceOver Support

VoiceOver is Apple's built-in screen reader. Supporting it is the highest-impact accessibility improvement.

Basics:

// Good: Descriptive label
Image(systemName: "heart.fill")
    .accessibilityLabel("Favorite")

// Bad: Generic or missing label
Image(systemName: "heart.fill")
    // VoiceOver users hear nothing useful

Best Practices:

• Every interactive element needs a label
• Don't include element type in label (VoiceOver adds "button" automatically)
• Use sentence case and proper punctuation
• Labels should describe the action, not the icon

Accessibility Traits:

Button("Submit") { }
    .accessibilityAddTraits(.isButton)  // Usually automatic
    .accessibilityHint("Double-tap to submit your form")

Color Contrast

Follow WCAG guidelines:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18pt+): 3:1 contrast ratio minimum

Testing:

• Use Xcode's Accessibility Inspector
• Test with color blindness simulation
• Never convey information with color alone

Dynamic Type

Support all text sizes:

Text("Hello")
    .font(.body)  // Scales automatically

// For custom fonts
Text("Hello")
    .font(.custom("MyFont", size: 17, relativeTo: .body))

Testing: Test with largest accessibility text size. Ensure no text gets clipped.

Motion and Animation

Respect user preferences:

@Environment(\.accessibilityReduceMotion) var reduceMotion

withAnimation(reduceMotion ? nil : .default) {
    // Animation code
}

Accessibility Checklist

Essential (do these first):

• [ ] All images have accessibility labels
• [ ] All buttons have descriptive labels
• [ ] Color contrast meets 4.5:1 minimum
• [ ] Dynamic Type supported throughout
• [ ] Test with VoiceOver on real device

Important:

• [ ] Logical focus order (VoiceOver navigation makes sense)
• [ ] Reduce Motion preference respected
• [ ] No information conveyed by color alone
• [ ] Touch targets at least 44x44 points
• [ ] Error messages are accessible

Advanced:

• [ ] Custom accessibility actions where helpful
• [ ] Accessibility grouping for complex elements
• [ ] Rotor support for custom navigation
• [ ] Audio descriptions for video content

Design Resources

Inspiration

Mobbin (mobbin.com): Thousands of real app screenshots, organized by screen type and pattern. Essential for seeing how successful apps handle specific UX challenges.

Dribbble/Behance: Visual design inspiration. Caution: many designs prioritize looks over usability.

iOS App Teardowns: Subscribe to newsletters or YouTube channels that break down app designs.

Tools

Figma (Recommended for collaboration):

• Industry standard
• Free for individual use
• Huge library of iOS UI kits
• Design handoff features

Sketch (Mac-native alternative):

• Native macOS performance
• Large plugin ecosystem
• One-time purchase option

For Quick Mockups:

• Pen and paper (seriously—fastest for initial ideas)
• Apple's SF Symbols app
• Keynote/PowerPoint for simple wireframes

UI Kits

Apple Design Resources: Official Figma/Sketch templates with all iOS components.

Untitled UI: Comprehensive free Figma kit with consistent styling.

Numerous iOS UI Kits on Figma Community: Search "iOS" in Figma's community.

Colors and Assets

Eva Design System: Color palette generator from primary color.

Coolors.co: Color scheme generator.

SF Symbols: 5,000+ Apple-designed icons, free, automatically adapt to text size and weight.

Solo Developer Workflow

Minimal Design Process

For Simple Screens: Skip Figma—build directly in SwiftUI. Use previews to iterate.

For Complex Screens:

1. Sketch on paper (5 minutes)
2. Find similar screen on Mobbin
3. Adapt pattern to your needs in code

For Major Features:

1. Paper sketches of flow
2. Low-fidelity wireframes in Figma (optional)
3. Build in code, iterate with previews

When to Use Figma

Do use Figma when:

• Designing something complex with many states
• Need to get feedback before building
• Working with others who need to see designs
• Creating marketing materials (App Store screenshots)

Skip Figma when:

• Simple CRUD screens
• Following existing patterns
• Quick iteration is more important than polish
• You'll see it faster in SwiftUI preview

App Store Screenshots

You must provide screenshots in specific sizes for submission.

Workflow:

1. Take actual screenshots from simulator
2. Use Figma template to add device frames, text overlays
3. Highlight key features, not every screen
4. Tell a story across screenshots

Tools:

• AppMockUp (free device mockups)
• Screenshots.pro
• Rotato (3D device mockups)

Common Design Mistakes

Mistake: Over-designing initial version Fix: Launch with good-enough design, iterate based on feedback

Mistake: Ignoring system conventions Fix: Use standard iOS patterns unless you have a compelling reason not to

Mistake: Inconsistent spacing and styling Fix: Define a small set of spacing values and styles, use them everywhere

Mistake: Not testing on real devices Fix: Test on smallest and largest supported devices, test in dark mode

Mistake: Skipping accessibility Fix: Run VoiceOver for 5 minutes—you'll find obvious issues

Design Quality Checklist

Before shipping:

• [ ] Test on smallest supported device (iPhone SE/mini)
• [ ] Test on largest supported device (iPhone Pro Max, iPad)
• [ ] Test Dark Mode throughout app
• [ ] Test with Dynamic Type (largest setting)
• [ ] Run VoiceOver through main flows
• [ ] Verify touch targets are large enough
• [ ] Check color contrast with Accessibility Inspector
• [ ] Review spacing consistency
• [ ] Ensure loading/empty/error states exist

References

• Apple Human Interface Guidelines
• WCAG 2.1 Guidelines
• Mobbin (mobbin.com)
• Apple Accessibility Documentation
• CVS Health iOS SwiftUI Accessibility Techniques (GitHub)