89 lines
7.0 KiB
Markdown
89 lines
7.0 KiB
Markdown
# Iqra (iqra.falahos.my) — Homepage UI/UX Overhaul & Design Review
|
|
|
|
**Author:** Principal Editorial UI/UX Design Director
|
|
**Review Status:** Awaiting Publishing Board Approval
|
|
**Branch:** `design/homepage-ui-overhaul`
|
|
**Live Site Under Audit:** [https://iqra.falahos.my](https://iqra.falahos.my)
|
|
|
|
---
|
|
|
|
## Executive Summary & Design Audit
|
|
|
|
Iqra is a premier intellectual publication operating at the intersection of **Islamic Family Office, Halal Wealth & Succession, Tibb & Shifa (Integrative Medicine), Geopolitical Intelligence, and Classical Islamic Philosophy**.
|
|
|
|
A rigorous audit of the current live homepage revealed that while the editorial contributors (*Jauhari Che Wan, Dr. Tariq Al-Amiri, Dr. Hakim Zainur Rahman, Maryam Al-Andalusi, Farhan Idris, and Darul Falah Research Desk*) bring immense institutional authority, the **visual packaging is immature, cluttered, and fragmented**:
|
|
|
|
1. **The 4x Loop Clutter:** The identical post is duplicated across the top hero, FastFT stream, topic hubs, and the default calendar post feed.
|
|
2. **Chromatic Dissonance:** Uncoordinated teals (`#0d7680`), bright emeralds (`#007A4D`), raw burgundy (`#990f3d`), stark cold grey borders (`#e0e0e0`), and harsh white surfaces feel like an unfinished developer dashboard rather than an authoritative paper broadsheet.
|
|
3. **Immature Component Styling:** Heavy generic box-shadows, theatrical font pairings, and cartoon DiceBear avatar cutouts undermine editorial gravitas.
|
|
4. **Flattened Hierarchy:** Market intelligence playbooks, proprietary mathematical engines (Faraid, Nisab), and 5-minute morning routine articles are styled with identical 3-column cards.
|
|
|
|
---
|
|
|
|
## The Three High-Fidelity UI Design Directions
|
|
|
|
We have developed three distinct, fully realized design directions. Each prototype is self-contained and viewable directly in your browser or through Gitea:
|
|
|
|
```
|
|
+---------------------------------------------------------------------------------------------------+
|
|
| THREE EDITORIAL DIRECTIONS |
|
|
+------------------------------------+----------------------------------+---------------------------+
|
|
| 1. THE FALAH GAZETTE & MONOCLE | 2. AL-QALAM REVIEW | 3. SUKUK & SOVEREIGN RAIL |
|
|
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
|
|
| High-density, warm salmon-linen | Cerebral, ivory paper, generous | Executive terminal, dark-accent
|
|
| hairline borders, Scotch serif | literary whitespace, book serif | telemetry, high-cadence cards
|
|
+------------------------------------+----------------------------------+---------------------------+
|
|
```
|
|
|
|
### [Direction 1: The Falah Gazette (FT & Monocle Heritage)](direction-1-falah-gazette.html)
|
|
* **Design Philosophy:** The hallmark of institutional sovereign authority. High information density, warm salmon-linen ground (`#FFF1E5`), Ottoman spruce green (`#0E4D36`), crisp 1px hairline rules, and refined Scotch Roman serif typography.
|
|
* **Key Components:**
|
|
* **The Suq & Nisab Real-Time Ticker:** Ultra-compact charcoal header tracking Islamic Date, Gold Nisab (RM 32,450 / 85g Au), Silver Nisab, and Tokenised Sukuk Yields.
|
|
* **Formal Centered Broadsheet Masthead:** Framed dual-line masthead with subtle Arabic watermark glyph *« إقرأ »*.
|
|
* **Asymmetric 3-Column Lead Investigation:** 55% lead monograph + 25% analytical essays with fellow portrait medallions + 20% FastFT / The Iqra Wire rolling intelligence stream.
|
|
* **Voices of Iqra 5-Fellow Rail:** Dignified monochrome engraved fellow portraits with individual column titles (*Wealth, Waqf & Succession*, *The Shifa Desk*, *Corridors of Power*).
|
|
* **Quantitative Tools Strip:** Inset parchment modules for the Interactive Faraid Estate Solver and Zakat Calculation Engine.
|
|
|
|
---
|
|
|
|
### [Direction 2: Al-Qalam Review (Cerebral Intellectual Journal)](direction-2-alqalam-review.html)
|
|
* **Design Philosophy:** Inspired by *Foreign Affairs*, *The Atlantic*, and *London Review of Books*. Unhurried, contemplative reading cadence on natural book-stock ivory paper (`#FAFAF7`) with Andalusian forest green accents (`#165B33`) and generous, rhythmic whitespace.
|
|
* **Key Components:**
|
|
* **The Scholarly Masthead:** Clean small-caps typography with formal issue dateline (*Autumn 2026 Issue · Volume IV · Kuala Lumpur & London*).
|
|
* **Lead Essay Monograph:** Full-width contemplation card with drop-caps, scholarly pull-quotes, and zero distracting advertising widgets.
|
|
* **Quad Triptych Matrix:** 4 elegant vertical columns dividing Geopolitics, Juridical Wealth, Shifa, and Philosophy.
|
|
* **Fellowships of Darul Falah:** Author profiles framed as Senior Academic Fellows with research areas and collected paper archives.
|
|
|
|
---
|
|
|
|
### [Direction 3: Sukuk & Sovereign Rail (Financial Intelligence Terminal)](direction-3-sovereign-rail.html)
|
|
* **Design Philosophy:** Built for modern Islamic Family Offices, institutional sovereign wealth managers, and founders. Inspired by *Bloomberg Markets*, *Nikkei Asia*, and *Semafor*. Prioritizes data density, live intelligence signals, and modular grid structures.
|
|
* **Key Components:**
|
|
* **The Executive Market Ribbon:** Dynamic live status bar with monetary telemetry and quick command palette (`⌘K`).
|
|
* **Semafor-Style Structured Takeaway Hero:** Major investigation card with instant analytical breakdown drawers (*The Signal*, *The Fiqh*, *The Exposure*).
|
|
* **Quantitative Suite Dock:** 3 interactive calculators on the front page (PE/Crypto Zakat, Faraid Estate Simulator, Nisab Index).
|
|
* **Executive Intelligence Rail:** Compact category pill badges and time-stamped market dispatches.
|
|
|
|
---
|
|
|
|
## Comparison Matrix
|
|
|
|
| Feature / Criteria | Direction 1: The Falah Gazette | Direction 2: Al-Qalam Review | Direction 3: Sovereign Rail |
|
|
|---|---|---|---|
|
|
| **Aesthetic Inspiration** | Financial Times, Monocle | Foreign Affairs, Atlantic, LRB | Bloomberg Markets, Semafor |
|
|
| **Primary Paper Tone** | Warm Salmon-Linen (`#FFF1E5`) | Book-Stock Ivory (`#FAFAF7`) | Modern Slate/Canvas (`#F7F8FA`) |
|
|
| **Brand Accent** | Ottoman Spruce (`#0E4D36`) | Andalusian Green (`#165B33`) | Treasury Emerald (`#026E54`) |
|
|
| **Information Density** | High (Executive & Broadsheet) | Medium (Scholarly & Literary) | Very High (Data & Intelligence) |
|
|
| **Author Presentation** | Broadsheet Columnists Rail | Senior Academic Fellows | Sector Analysts & Desks |
|
|
| **Brand Fit for Iqra** | **98% (Recommended)** | 92% | 88% |
|
|
|
|
---
|
|
|
|
## Implementation Plan in Ghost Theme
|
|
|
|
Once the Publishing Board selects a preferred direction:
|
|
1. **De-duplicate Queries in `index.hbs`:** Replace uncurated post feeds with tagged `{{#get}}` queries matching the selected layout.
|
|
2. **Refactor Theme Components:** Move all inline styles into clean, modular SCSS files in `assets/css/components/`.
|
|
3. **Elevate Typography & Assets:** Host Google Fonts (*Source Serif 4*, *Newsreader*, *Cinzel*, *IBM Plex Mono*) locally for sub-50ms render times.
|
|
4. **Deploy & Verify:** Merge `design/homepage-ui-overhaul` into `main`, test across desktop and mobile, and deploy to live Ghost production.
|