wmj/falah-ft-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
58338cda851df8e9df463f251b8246e2ee03dbf7
falah-ft-theme/design-proposals/DESIGN_REVIEW_PROPOSALS.md
T

13 KiB
Raw Blame History

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
  • 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
  • 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
  • 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: 
    {{!-- 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).
Reference in New Issue View Git Blame Copy Permalink