A CALMER WAY TO LEARN
Make prayer easier to learn, with a visual identity that feels thoughtful and distinctive. Compare the colors on real pages before choosing a direction.
TRY IT ON THE ACTUAL SITE
The pages and controls are interactive. The main site now offers Light (Pearl & Teal), Dark (Midnight & Brass), and Modern (Porcelain & Indigo). These comparison previews do not save theme preferences. On smaller screens, use “Open full preview” to explore comfortably.
THE EXPERIENCE BEYOND COLOR
My assessment: the site has useful depth, but its learning tools compete with introductory text, navigation and decorative framing. The next design pass should make the prayer lesson the main event.
These are recommendations, not features already implemented. The 3D option has been removed; illustrations remain.
“Learn the essentials” currently looks like a selected tab but does not take a learner anywhere. Replace it with two meaningful paths: “I’m new to Salah” and “I already pray.” Explain what each includes before asking about a school.
The introduction, learning path, selectors and illustration can push the current instruction below the first screen. Use a compact lesson header, a smaller position illustration and reachable Back / Next controls. Keep the step title visible after navigation.
The opening takbir currently reuses an arms-down standing image, and the bowing illustration needs a more level back. Commission a complete, reviewed set of poses, with separate visual variants wherever school-specific guidance changes the position.
Long recitations sit in a second scrolling area inside the page. Offer a full reading view with adjustable Arabic size, clear transliteration and meaning. Add phrase-by-phrase human recitation with repeat once suitable recordings are sourced and reviewed.
Four text cards become a long stack on phones. Let learners pick two schools and compare aligned points, with a shared-foundations summary, source links and a clear distinction between selected examples and a complete school-specific guide.
Manual latitude, longitude and timezone names create a technical hurdle. Add city search, a clear location/date summary and method-specific settings that appear only when relevant. Keep advanced calculation controls available behind explanations.
Surface common situations—travel, illness, missed prayer and mistakes—before the full article list. Give articles shareable links, a visible return path and a concise “what to do” summary before detailed evidence.
Use consistent type sizes, clear focus states, generous touch targets and visible text labels. Show review status beside the relevant guidance, and make school-specific sources easy to reach. Test keyboard use, contrast and enlarged text throughout.
Accessibility reference: W3C WCAG 2.2 ↗MY RECOMMENDATION
It gives Arabic and long-form guidance a clear reading surface, distinguishes actions from content, and moves away from the current all-green treatment. Pair it with a focused mobile lesson layout. Choose Midnight & Brass if a darker, more atmospheric identity matters most to you.
