Andalusi

Goal

Adopt iOS 26 Liquid Glass to make Andalusi feel more modern and immersive, while protecting what matters most in an Arabic-first editor:

• Readability (Arabic glyphs, diacritics, calligraphy)
• Speed (browsing → creating should feel instant)
• Clarity (navigation and actions must be obvious)
• Maintainability (reduce custom UI where the system is stronger)

Challenge

Liquid Glass encourages UI to fade into the background—perfect for content-led experiences. But a creator app is a worst-case environment: busy templates, high-contrast photos, and dense typography.

So the real question became:

How do we use glass without letting it compete with text?

Principles

1. Content leads. Templates and canvas are the hero.
2. Navigation is glass. Create and discovery should feel light.
3. Typography is sacred. If glass hurts legibility, glass loses.
4. Native-first. Don’t rebuild what iOS already provides.
5. Calm motion. Scroll and transitions should explain hierarchy, not distract.

Material Model

Instead of treating Liquid Glass as a style, we treated it as a system of layers:

• Glass surfaces for navigation, browsing, lightweight actions
• Selective glass in the editor where contrast stays safe
• Solid fallback for edge cases (busy backgrounds, accessibility)

This gave us a predictable rule set and prevented the common trap: “make everything glass.”

Navigation

Bottom dock + Create

Previously, Create lived inside the tab bar and competed with navigation. In the Liquid Glass version, we separated responsibilities:

• A glass dock for navigation (Templates / My Designs)
• A distinct floating Create button with higher priority and clearer intent

This small change made the whole app feel lighter and more intentional.

Why it’s better?

• Clear hierarchy: browse vs. create are no longer mixed
• Better ergonomics: Create is always reachable and visually distinct
• Less chrome: the dock floats and recedes instead of framing content

Discovery

Templates header (Light/Dark)

Templates are visual—so the UI should feel like a lens, not a frame. I designed a glass header stack that stays readable and consistent across themes:

• Search inside a soft glass field
• Category chips as pill controls with subtle elevation
• Premium entry available but not dominating the page

Light Mode

Dark Mode

Library

My Designs (Light/Dark)

My Designs is where users return to continue work, so it must feel quiet, organized, and fast to scan.

Key choices:

• Larger thumbnails for quick recognition
• Minimal header controls (just enough, not noisy)
• Consistent bottom dock + floating Create, without blocking content

Light Mode

Dark Mode

AI

Prompt composer

As we moved into AI editing through text, we needed a UI pattern that feels powerful but not heavy. I introduced an AI composer that behaves like a glass utility layer:

• Supports adding inputs (thumbnails + add)
• Keeps typing focused and comfortable
• Preserves context by letting content remain visible behind the surface
  
  

Micro-interactions

Liquid Glass is as much about behavior as it is about visuals. I designed motion to feel calm and explanatory: