193 lines
13 KiB
Markdown
193 lines
13 KiB
Markdown
# Iqra (iqra.falahos.my) — Editorial UI/UX Design Review & Direction Proposals
|
|
|
|
**Document ID:** `IQRA-UX-AUDIT-2026-10`
|
|
**Author:** Principal Editorial UI/UX Design Director
|
|
**Publication:** Iqra Times (`https://iqra.falahos.my`)
|
|
**Publisher:** Darul Falah / WMJ
|
|
**Target Date:** October 2026
|
|
|
|
---
|
|
|
|
## 1. Executive Summary & Problem Definition
|
|
|
|
The user feedback regarding Iqra's current homepage was direct and unambiguous:
|
|
> *"you need one UI designer, current main page UI looks really ugly and immamture. discuss with your team and come back with a a few UI designs"*
|
|
|
|
A thorough architectural and visual audit of `https://iqra.falahos.my` confirmed this diagnosis. Despite high-calibre intellectual contributions spanning Islamic Family Office, Halal Wealth, Integrative Tibb, and Civilizational Philosophy, the website was burdened by:
|
|
1. **Severe content loop duplication** (the exact same article appearing 4 times consecutively down the page).
|
|
2. **Clashing chromatic identities** (uncoordinated teals, bright greens, cold grey borders, and harsh white blocks).
|
|
3. **Immature component styles** (generic SaaS drop-shadows, clashing font combinations, uncurated author blocks).
|
|
4. **Flattened visual hierarchy** (monographs, 5-minute morning tips, and financial calculations all sharing the same visual weight).
|
|
|
|
To resolve this, we have created **three distinct, mature, world-class UI design directions**, accompanied by **fully interactive, high-fidelity browser prototypes** committed directly to this repository.
|
|
|
|
---
|
|
|
|
## 2. Deep Audit of Current Homepage Flaws
|
|
|
|
| Problem Area | Current Observation on Server | Root Cause in Codebase | Consequence to Reader |
|
|
|---|---|---|---|
|
|
| **Content Duplication** | The article *"Islamic Morning & Evening Adhkar Digital Planner ($17.99)"* renders consecutively 4 times. | `default.hbs` and `index.hbs` execute un-filtered `{{#foreach posts}}` loops in `ft-hero.hbs`, `ft-fastft-stream.hbs`, `ft-topic-hubs.hbs`, and the default Ghost post feed. | Severe cognitive fatigue; website looks amateurish and abandoned. |
|
|
| **Color Clash** | Header ticker uses `#007A4D` (emerald), `#0d7680` (teal), `#990f3d` (crimson), with `#e0e0e0` borders on stark `#ffffff`. | Incoherent CSS tokens in `screen.css` mixing raw hex colors without a defined paper-to-ink architectural system. | Feels like a fragmented Bootstrap mockup rather than an elite broadsheet. |
|
|
| **Typography Dissonance** | Titles jump between `Playfair Display`, `Source Serif 4`, and system sans-serif with loose leading. | Lack of typographic rhythm in CSS tokens; headings rendered with uncalibrated letter-spacing. | Reading experience is jarring and visually noisy. |
|
|
| **Author Board Styling** | Authors sit in an inline `<style>` card with circular avatars, raw arrows (`1 article →`), and beige panels. | Tacked-on inline CSS in `ft-editorial.hbs` rather than an integrated editorial board layout. | Degrades the dignity of institutional contributors (Dr. Tariq, Dr. Hakim, Maryam). |
|
|
| **Hierarchy Collapse** | Deep investigative essays on Sukuk rails share the same 3-column card style as micro-posts. | Flat card grid component applied indiscriminately across all tags. | Readers cannot distinguish major investigations from daily briefs. |
|
|
|
|
---
|
|
|
|
## 3. The Three New Editorial UI Directions
|
|
|
|
```
|
|
+---------------------------------------------------------------------------------------------------+
|
|
| THE THREE PROPOSED VISUAL PARADIGMS |
|
|
+------------------------------------+----------------------------------+---------------------------+
|
|
| 1. THE FALAH GAZETTE & MONOCLE | 2. AL-QALAM REVIEW | 3. SUKUK & SOVEREIGN RAIL |
|
|
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
|
|
| Salmon-linen paper, razor hairline | Meditative ivory, book serif, | Executive terminal, dark-accent
|
|
| borders, dense broadsheet gravitas | generous intellectual whitespace | telemetry, structured breakdown
|
|
+------------------------------------+----------------------------------+---------------------------+
|
|
```
|
|
|
|
---
|
|
|
|
### Direction 1: "The Falah Gazette" (Financial Times & Monocle Heritage)
|
|
*The High-Density Intellectual Sovereign Broadsheet*
|
|
|
|
* **Prototype File:** [`design-proposals/direction-1-falah-gazette.html`](direction-1-falah-gazette.html)
|
|
* **Core Philosophy:** Uncompromising editorial gravitas, high information density, razor-sharp hairline borders, and warm tactile paper. Communicates civilizational statecraft, financial rigor, and broadsheet permanence.
|
|
* **Palette Architecture:**
|
|
* Paper Ground: `#FFF1E5` (FT warm salmon)
|
|
* Surface Backplate: `#F6E6D8`
|
|
* Inset Card: `#FCF5EE`
|
|
* Carbon Ink: `#111111` / Body Ink: `#242220`
|
|
* Brand Accent: `#0E4D36` (Imperial Ottoman Spruce Green)
|
|
* Wax Seal Accent: `#9E2A2B` (Archival Crimson)
|
|
* Hairline Rules: `1px solid #E4D5C7` and `#C9B8A7`
|
|
* **Typography Hierarchy:**
|
|
* Masthead: *Cinzel*, 64px, uppercase, tracking `0.14em` with Arabic calligraphy glyph `« إقرأ »`.
|
|
* Display Headlines: *Newsreader* / *Source Serif 4*, 40px, leading `1.15`, weight 700.
|
|
* Eyebrow / Kickers: *Inter*, 11px, weight 700, tracking `0.12em` (`#0E4D36`).
|
|
* Body Prose: *Newsreader*, 17.5px, line-height `1.55`.
|
|
* Data Telemetry: *JetBrains Mono*, 10.5px.
|
|
* **Homepage Wireframe Structure:**
|
|
1. *Live Suq Ticker:* 28 Rabi' al-Awwal 1448 | Gold Nisab (RM 32,450 / 85g) | Silver Nisab | Sukuk 5Y Yield.
|
|
2. *Double-Bordered Centered Masthead:* Formal subtitle and bullet-separated navigation rail.
|
|
3. *Lead Asymmetric Trio:*
|
|
- Col 1 (55%): Major Investigation with 16:9 photography, lead excerpt, and dateline.
|
|
- Col 2 (25%): Two stacked analytical monographs with author metadata.
|
|
- Col 3 (20%): *The Iqra Wire* in a shaded linen box with pulsing live indicator.
|
|
4. *Voices of Iqra (Editorial Board):* 5-column panel framed in hairline rules. Each fellow features a portrait, distinct column tag (*The Jauhari Column*, *Wealth & Succession*, *The Shifa Desk*), and their latest treatise.
|
|
5. *Quantitative Engines Strip:* High-contrast black backplate showcasing the Faraid Estate Solver, Zakat Engine, and Waqf Registry.
|
|
6. *Curated Topic Dossiers:* 3-column structured matrix by core disciplines.
|
|
|
|
---
|
|
|
|
### Direction 2: "Al-Qalam Review" (The Intellectual Journal)
|
|
*Foreign Affairs, The Atlantic & London Review of Books Dignity*
|
|
|
|
* **Prototype File:** [`design-proposals/direction-2-al-qalam-review.html`](direction-2-al-qalam-review.html)
|
|
* **Core Philosophy:** Serene, contemplative, and literary. Strips away modern noise in favor of generous whitespace, delicate ivory book-stock paper, and profound scholarly weight.
|
|
* **Palette Architecture:**
|
|
* Page Ground: `#FBFBFA` (Natural book stock ivory)
|
|
* Surface Fill: `#FFFFFF` / Inset: `#F4F2EC`
|
|
* Archival Carbon Ink: `#1B1E21` / Reading Ink: `#4D5156`
|
|
* Brand Accent: `#185A37` (Andalusian Deep Olive Forest Green)
|
|
* Leather / Parchment Ochre: `#8D5B28` (Tuscan Ochre for pull-quotes)
|
|
* Delicate Hairline: `1px solid #E8E6DE`
|
|
* **Typography Hierarchy:**
|
|
* Masthead: *Cormorant Garamond*, 72px, weight 500, letter-spacing `0.08em` with ornament `— ✦ —`.
|
|
* Display Headlines: *Cormorant Garamond*, 52px, leading `1.14`, weight 600.
|
|
* Pull-Quotes: *Cormorant Garamond Italic*, 23px, leading `1.45` with ochre left-rule.
|
|
* Body Prose: *Eczar* / *Source Serif 4*, 17px, line-height `1.7`.
|
|
* **Homepage Wireframe Structure:**
|
|
1. *Volume & Dateline Header:* Volume IV, Autumn 2026 Issue.
|
|
2. *Single-Focus Lead Monograph:* Full-width intellectual feature without stock photo distractions, featuring an authoritative pull-quote from the Ihya.
|
|
3. *The Dispatch Rail:* Right-hand rail highlighting deep juristic and historical treatises.
|
|
4. *Quad Triptych:* 4 tall editorial columns divided by subtle vertical rules (Fiqh & Succession, Shifa & Tibb, Statecraft & Corridors, Classical Polymath).
|
|
5. *The Fellowships of Darul Falah:* Academic Fellow cards showcasing chairs and specialized monographs.
|
|
|
|
---
|
|
|
|
### Direction 3: "Sukuk & Sovereign Rail" (The Financial Intelligence Terminal)
|
|
*Bloomberg Markets, Nikkei Asia & Semafor Modernity*
|
|
|
|
* **Prototype File:** [`design-proposals/direction-3-sovereign-rail.html`](direction-3-sovereign-rail.html)
|
|
* **Core Philosophy:** Engineered for Islamic Family Offices, wealth managers, and tech leaders. Focuses on structured data density, live market signals, and executive-summary clarity.
|
|
* **Palette Architecture:**
|
|
* Workspace Ground: `#F4F5F7` (Crisp executive grey)
|
|
* Card Surface: `#FFFFFF`
|
|
* Obsidian Top Header: `#0D1117`
|
|
* High-Contrast Ink: `#111827` / Subtle: `#4B5563`
|
|
* Treasury Emerald: `#056A4E` (Light: `#ECFDF5`)
|
|
* Telemetry Amber: `#D97706` / Bond Blue: `#1E40AF`
|
|
* Grid Border: `1px solid #E5E7EB`
|
|
* **Typography Hierarchy:**
|
|
* UI & Metadata: *Inter*, 13px - 15px, weights 500/600/700.
|
|
* Analytical Headlines: *Newsreader*, 34px, weight 700.
|
|
* Telemetry / Engine Code: *JetBrains Mono*, 11px - 13px.
|
|
* **Homepage Wireframe Structure:**
|
|
1. *Live Telemetry Strip:* Black status bar with live Nisab, Sukuk benchmark yield, and API indicators.
|
|
2. *Executive Navigation Bar:* Quick search command palette (`⌘K`), category switches, and subscriber access.
|
|
3. *Lead Executive Investigation (Semafor-Style Breakdown):*
|
|
- Lead card featuring a structured 3-part breakdown directly on the card (*THE SIGNAL*, *THE EXPOSURE*, *JURISTIC VIEW*).
|
|
4. *Live Interactive Calculator Dock:* On-homepage interactive Zakat and Nisab estimator with instant numerical output.
|
|
5. *Intelligence Desks Terminal:* Modular 4-column cards with status badges and contributor monograph counts.
|
|
|
|
---
|
|
|
|
## 4. Author Board & Personas: Dignified Presentation
|
|
|
|
The existing site reduced distinguished scholars to small circular avatars with brief text snippets. The redesign establishes them as permanent institutional authorities:
|
|
|
|
| Persona | Official Role / Pillar | Visual Treatment in Redesign |
|
|
|---|---|---|
|
|
| **Jauhari Che Wan** | *Editor-in-Chief & Publisher* | Featured in a dedicated broadsheet "Warkah Pengarang" / Publisher's Desk with monogram seal and editorial manifesto on Nusantara istikhlaf. |
|
|
| **Dr. Tariq Al-Amiri** | *Senior Jurist & Estate Counsel* | Institutional badge `ESTATE & JURISPRUDENCE`, highlighting legal treatises on cross-border Faraid, Hibah, and Family Office structuring. |
|
|
| **Dr. Hakim Zainur Rahman** | *Integrative Physician & Tibb Researcher* | Institutional badge `INTEGRATIVE TIBB`, highlighting clinical research on chronobiology, prophetic medicine, and Fiqh an-Nafs. |
|
|
| **Maryam Al-Andalusi** | *Intellectual Historian* | Institutional badge `MANUSCRIPT FELLOW`, featuring archival monographs on Ibn Khaldun, Andalusian governance, and classical Malay manuscripts. |
|
|
| **Farhan Idris** | *Geopolitical Risk Analyst* | Institutional badge `GEOPOLITICAL RISK`, featuring strategic briefs on maritime straits, de-dollarization, and trade corridors. |
|
|
| **Darul Falah Research Desk** | *Quantitative Research Group* | Institutional crest, featuring live algorithmic Nisab tracking and Faraid calculation engines. |
|
|
|
|
---
|
|
|
|
## 5. Technical Implementation Plan in Ghost / Handlebars
|
|
|
|
To implement the winning design direction on `iqra.falahos.my`, the following technical refactoring will be executed:
|
|
|
|
### Step 1: De-Duplicate Content Loops in `index.hbs`
|
|
* Replace repetitive loops with scoped Ghost queries:
|
|
```handlebars
|
|
{{!-- 1. Lead Investigation Hero (Exactly 1 post) --}}
|
|
{{#get "posts" filter="featured:true" limit="1" include="authors,tags"}}
|
|
{{#foreach posts}}
|
|
{{> "ft-hero-lead"}}
|
|
{{/foreach}}
|
|
{{/get}}
|
|
|
|
{{!-- 2. Secondary Analysis & Wire (Excludes featured lead) --}}
|
|
{{#get "posts" filter="featured:false+tag:-products" limit="5" include="authors,tags"}}
|
|
{{> "ft-asymmetric-stream"}}
|
|
{{/get}}
|
|
|
|
{{!-- 3. Remove redundant default post feed from index.hbs --}}
|
|
```
|
|
|
|
### Step 2: Extract Inline CSS to Standardized Tokens
|
|
* Remove the inline `<style>` tags currently present in `default.hbs`, `index.hbs`, and `ft-editorial.hbs`.
|
|
* Add CSS design tokens into `assets/built/screen.css` matching the selected palette (paper, ink, hairline, accent).
|
|
|
|
### Step 3: Integrate Quantitative Calculators as Server-Side Partials
|
|
* Convert the calculator tabs into high-performance, responsive partials (`ft-calculator-strip.hbs`), removing layout shifts and JavaScript delays.
|
|
|
|
---
|
|
|
|
## 6. Verification and Review Instructions
|
|
|
|
1. **Local Browser Testing:**
|
|
Open any of the three HTML files in a browser to review typography, color harmony, and responsive layout:
|
|
- `direction-1-falah-gazette.html`
|
|
- `direction-2-al-qalam-review.html`
|
|
- `direction-3-sovereign-rail.html`
|
|
2. **Gitea Repository:**
|
|
These designs and documentation are version-controlled in repository `wmj/falah-ft-theme` (and `falahos/falah-ft-theme`).
|