Mastering Mobile App UI Design: 10 Essential Principles for a Seamless User Experience

📘 Chapter 3: Visual Hierarchy, Typography, and Color Theory

🧭 What You’ll Learn

In this chapter, you’ll master:

• Designing clear visual hierarchies to guide user attention
• Choosing and applying typography effectively in mobile apps
• Using color theory to convey emotion, state, and brand identity
• Achieving accessibility and consistency through visual styling
• Best practices for combining fonts, colors, and spacing for mobile screens

These elements are crucial for creating intuitive, readable, and emotionally engaging interfaces.

🎯 Why Visual Design Matters in Mobile UI

Good design doesn’t just look good—it communicates. The right visual hierarchy, typography, and color palette:

• Helps users scan and understand information quickly
• Creates an emotional connection
• Reinforces branding
• Increases usability and accessibility
• Reduces cognitive load and confusion

🧱 Part 1: Visual Hierarchy — Guiding the Eye

Visual hierarchy is the arrangement of elements to show importance.

✅ Principles of Visual Hierarchy:

• Size: Bigger = more important
• Color: Brighter = more attention
• Contrast: Stronger = more visible
• Position: Top = seen first
• Spacing: More space = separation of elements

🔹 Example: React Native Layout with Hierarchy

jsx

<View style={styles.card}>

  <Text style={styles.title}>Premium Plan</Text>

  <Text style={styles.subtitle}>Unlimited access to all features</Text>

  <Text style={styles.price}>$9.99/month</Text>

</View>

js

const styles = StyleSheet.create({

  card: {

    padding: 20,

    borderRadius: 10,

    backgroundColor: '#fff',

    elevation: 3,

    marginBottom: 20,

  },

  title: {

    fontSize: 24,

    fontWeight: 'bold',

  },

  subtitle: {

    fontSize: 16,

    color: '#555',

    marginTop: 8,

  },

  price: {

    fontSize: 20,

    fontWeight: '600',

    color: '#0f62fe',

    marginTop: 12,

  },

});

📊 Table: Hierarchy Patterns

✍️ Part 2: Typography in Mobile UI

Typography is the art of arranging text for readability and aesthetics.

✅ Font Pairing Best Practices

• Use 1–2 font families max
• Pair a bold header font with a clean body font
• Stick to platform-native fonts for performance (e.g., San Francisco on iOS, Roboto on Android)

🔤 Font Hierarchy Example

🔠 Typography Code Sample

jsx

<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Your Dashboard</Text>

<Text style={{ fontSize: 14, lineHeight: 20, color: '#444' }}>

  Welcome back! Here's what’s happening today.

</Text>

🧠 Typography Guidelines

• ✅ Use line height at least 1.3x font size for readability
• ✅ Avoid using ALL CAPS excessively
• ✅ Left-align text for Western languages
• ✅ Don’t rely on font color alone for meaning (use icons/labels too)

🎨 Part 3: Color Theory in Mobile UI

Colors influence perception, mood, and behavior. Used right, they help communicate:

• Hierarchy
• Brand identity
• State (success, warning, error)
• Interactivity (tap targets)

🎨 Primary Color Roles

✅ Color Emotion Chart

🖼️ Sample Color Usage

js

const COLORS = {

  primary: '#0f62fe',

  background: '#ffffff',

  surface: '#f4f4f4',

  text: '#121212',

  error: '#da1e28',

  success: '#24a148',

};

jsx

<View style={{ backgroundColor: COLORS.surface, padding: 16 }}>

  <Text style={{ color: COLORS.text }}>Welcome!</Text>

</View>

⚠️ Accessibility & Contrast

Color alone should never carry critical information. Always combine with icons or text.

✅ Ensure Contrast Ratios

Use tools like WebAIM Contrast Checker or plugins in Figma to meet WCAG 2.1 standards.

Example: Inaccessible vs. Accessible

🧩 Combining All Three: A Sample Card

jsx

<View style={styles.card}>

  <Text style={styles.heading}>Update Available</Text>

  <Text style={styles.body}>

    A new version of the app is available. Update now to enjoy new features.

  </Text>

  <TouchableOpacity style={styles.button}>

    <Text style={styles.buttonText}>Update</Text>

  </TouchableOpacity>

</View>

js

const styles = StyleSheet.create({

  card: {

    backgroundColor: '#f4f4f4',

    padding: 20,

    borderRadius: 10,

    margin: 16,

  },

  heading: {

    fontSize: 20,

    fontWeight: '600',

    color: '#0f62fe',

  },

  body: {

    fontSize: 14,

    marginTop: 8,

    color: '#333',

    lineHeight: 20,

  },

  button: {

    backgroundColor: '#0f62fe',

    marginTop: 16,

    padding: 14,

    borderRadius: 6,

  },

  buttonText: {

    color: '#fff',

    textAlign: 'center',

    fontSize: 16,

  },

});

✅ Summary: Best Practices Cheat Sheet