Design & Production Roadmaps · 2026

Roadmaps for

'Renad
Eid'

Best Junior Product Designer & Product Delivery

Five tracks covering the full product design and delivery journey — workflow, UX/UI principles, model comparisons, idea-to-production engineering, and a practical step-by-step SOP.

01 Workflow Brief → Handoff

02 Principles UI / UX

03 Models E-comm · SaaS

04 Production Idea → Launch

05 SOP Step by Step

Track 01 · Workflow

1) Roadmap عملي من استلام الـ Brief إلى الـ Handoff

هذا القسم يعلّم المصمم كيف يحوّل brief من العميل إلى flows وشاشات وprototype ثم handoff واضح للـ developer.

This section teaches the junior designer how to turn a client brief into flows, screens, a prototype, and a clean developer handoff.

المرحلة	يسأل نفسه إيه؟	المخرجات	كيف يستخدم AI	أفضل أداة
1. استلام الـ Brief	ما الهدف؟ من المستخدم؟ ما القيود؟	Brief مفكك + أسئلة توضيح	يفكك الكلام الخام ويستخرج gaps	ChatGPT / Claude
2. Discovery	ما السوق؟ ما البدائل؟ ما التوقعات؟	Competitor snapshot + notes	يلخص البحث بسرعة	Perplexity
3. Problem Framing	ما المشكلة الحقيقية؟	Problem statement + goals	يعيد صياغة المشكلة من أكثر من زاوية	Claude
4. Idea Generation	ما أكثر من اتجاه للحل؟	3–5 solution directions	brainstorming بدل فكرة واحدة	Gemini / ChatGPT
5. Prioritization	ما الذي يدخل الـ MVP؟	MVP / Later / Never	impact vs effort	ChatGPT / Notion-style workflow
6. User Flow & IA	كيف يبدأ المستخدم وينتهي؟	Flow + sitemap	اقتراح المسارات وedge cases	Claude / Gemini
7. Wireframing	كيف ننجز المهمة بأقل تعقيد؟	Low-fi wireframes	توليد directions متعددة	Figma + ChatGPT
8. UI Direction	ما الشكل الأنسب للمنتج؟	Visual direction + components	اقتراح hierarchy وlayout	Figma / Claude / v0.dev
9. Microcopy	ماذا تقول كل شاشة؟	CTA + errors + empty states	كتابة رسائل أوضح	Claude
10. Prototype	هل الفكرة مفهومة؟	Clickable prototype	تحضير test scenarios	Figma Prototype / Maze
11. Testing	أين يتعثر المستخدم؟	Findings + fixes	تجميع وتحليل الملاحظات	Maze / Useberry / Claude
12. Handoff	هل الـ dev فاهم السلوك؟	Design spec + behavior notes	تحويل الشاشات إلى documentation واضحة	Figma Dev Mode / Claude

Case Study · حالة تطبيقية

Scent — تطبيق متجر عطور سعودي

Junior designer · 3 weeks · Mobile e-commerce brief → handoff

التحدي

علامة تجارية ناشئة تحتاج تطبيق موبايل لبيع العطور، مع brief غير مكتمل وتوقعات عالية من العميل.

الأسلوب

اتُّبع المسار الـ 12 خطوة كاملًا — بدءًا من تفكيك الـ brief بـ Claude واستخراج الـ gaps، وصولًا إلى design spec مع behavior notes لكل شاشة.

النتيجة

سُلّم الـ handoff في 3 أسابيع، صفر أسئلة من المطور بعد التسليم، والعميل طالب بمشروع ثانٍ مباشرة.

3WBrief → Handoff

0Dev questions post-handoff

4.8Client satisfaction / 5

ClaudePerplexityFigmaChatGPT

Scent app — fragrance e-commerce for a Saudi brand. Full 12-stage workflow applied: from brief deconstruction through zero-question developer handoff in 3 weeks.

◈ How It Happened · كيف حدث هذا

رنا · مصممة جديدة، أول مشروع منفرد لعلامة تجارية

وصل الـ brief على الواتساب: 5 نقاط قصيرة، بدون context، ما في ذكر للمستخدم ولا للهدف التجاري. أول قرار اتخذته رنا — ما تبدأ قبل ما تكتمل الصورة. فتحت Claude وحطّت الـ brief كاملًا، وطلبت منه يكشف الـ gaps ويعطيها الأسئلة التي لم تُطرح. رجع بـ 12 سؤال. أرسلتهم للعميل، وفي نفس اليوم وصلت إجابات حوّلت الـ brief من 5 نقاط إلى صورة واضحة. Stage 1 خلصت في 3 ساعات.

في Stage 2 (Discovery)، فتحت Perplexity وعملت competitive scan لـ 3 تطبيقات مشابهة في 20 دقيقة. لقت pattern مكرر: كلها ضعيفة في trust signals وصفحة المنتج. دوّنت النقاط وانتقلت مباشرة.

بدأت Stage 3 (Problem Framing) بكتابة 3 صياغات مختلفة للـ problem statement في Claude — اختارت الأوضح، وبنت عليها كل القرارات اللي بعدها. بعدها فتحت Figma ورسمت الـ user flow، 4 شاشات رئيسية، بدون UI بدون ألوان — فقط منطق ومسار.

الأسبوع الثاني: Wireframes في Figma، Low-fi. استخدمت ChatGPT لتوليد 3 directions مختلفة، قارنتهم، واختارت الأبسط. في Stage 9 كتبت كل الـ microcopy في Claude — الـ CTA، رسائل الخطأ، الـ empty states — ثم راجعتها بعينها كمستخدم، مش كمصممة.

"أول مرة يصلني handoff وما عندي ولا سؤال واحد للمصمم." — المطور، بعد تسليم الـ design spec

Rana received a 5-point WhatsApp brief. She refused to start without clarity — pasted it into Claude, extracted 12 hidden questions, sent them to the client, and turned an incomplete brief into a full project picture in 3 hours. Discovery on Perplexity took 20 minutes and revealed a clear gap in competitor products. Figma wireframes came next — no colors, no fonts, just logic. The developer received the spec on Thursday and had zero questions.

Track 02 · Principles

2) Roadmap مبني على مبادئ UI / UX

الفكرة هنا أن كل خطوة تُراجع على مبدأ: الوضوح، التحكم، الاتساق، منع الأخطاء، وتقليل الحمل الذهني.

Here, every design stage is reviewed through core principles: clarity, user control, consistency, error prevention, and reducing cognitive load.

المرحلة	السؤال الأساسي	مبدأ UI/UX	ما الذي يراجعه؟	المخرج
1. فهم المشكلة	المستخدم يريد إنجاز ماذا فعلًا؟	Match with user reality	هل المشكلة مكتوبة بلغة المستخدم؟	Problem statement
2. تنظيم المحتوى	ما الذي يظهر أولًا؟	Hierarchy & clarity	هل الأهم ظاهر فورًا؟	Content priority
3. بناء الـ Flow	كيف يدخل ويخرج ويرجع؟	User control & freedom	هل يوجد رجوع وإلغاء واضح؟	User flow
4. Wireframing	هل الخيارات واضحة؟	Recognition over recall	هل يعتمد على التذكر أم الرؤية؟	Low-fi wireframes
5. UI Design	هل الواجهة مقروءة ومتسقة؟	Consistency + visual clarity	هل الأزرار، النصوص، والمسافات ثابتة؟	High-fi screens
6. States & Messages	ماذا يحدث عند التحميل أو الفشل؟	Visibility of system status	هل المستخدم فاهم ماذا يحدث الآن؟	States + microcopy
7. Usability Review	أين يقع الخطأ؟	Error prevention & recovery	هل يمكن منع الخطأ أو علاجه بسرعة؟	Fixes list
8. Handoff	هل التنفيذ سيحافظ على التجربة؟	Behavior clarity	هل السلوكيات والحالات موصوفة؟	Design spec

مبادئ UX الأساسية

وضوح حالة النظام.
التحدث بلغة المستخدم.
التحكم والحرية.
الاتساق والمعايير.
منع الأخطاء قبل وقوعها.

Core UX principles: visibility, real-world language, user control, consistency, and error prevention.

مبادئ UI الأساسية

Visual hierarchy واضح.
Contrast جيد.
تناسق المكونات والمسافات.
وضوح الـ CTA.
تقليل التشتيت البصري.

Core UI principles: hierarchy, contrast, consistency, clear calls to action, and low visual noise.

Checklist لكل شاشة

هل الهدف واضح خلال ثوانٍ؟
هل أهم عنصر ظاهر؟
هل النص مقروء ومفهوم؟
هل يوجد feedback بعد أي action؟
هل يمكن الرجوع أو تصحيح الخطأ؟

Screen checklist: clear goal, obvious priority, readable text, visible feedback, and easy recovery.

Case Study · حالة تطبيقية

إعادة تصميم Checkout — متجر أزياء إلكتروني

UX audit + redesign · 2 weeks · E-commerce conversion problem

التحدي

معدل التخلي عن السلة كان 67% — المستخدمون يضيفون منتجات لكن ما يكملون الشراء. الـ checkout كان يعتمد على التذكر أكثر من الرؤية.

المبادئ المُطبَّقة

إعادة بناء hierarchy لإبراز الـ CTA، تطبيق error prevention بالتحقق الآني، وإضافة visibility واضحة لحالة الطلب في كل خطوة.

النتيجة

معدل إتمام الشراء تحسّن بشكل ملحوظ، حقول الـ form تقلصت من 14 إلى 8، والمستخدمون وصفوا الـ checkout بأنه "سهل وواضح".

-29%Cart abandonment rate

8Form fields (was 14)

2.1mAvg. checkout time (was 4.7m)

Recognition over RecallError PreventionVisibility of Status

Fashion store checkout redesign — applied all 8 UX/UI principles systematically. Cart abandonment dropped 29 points and average checkout time was cut in half.

◈ How It Happened · كيف حدث هذا

نورا · مصممة UX، مهمة إنقاذ checkout بمعدل تخلٍّ عالٍ

أعطاها المدير رقمًا واحدًا: 67% من المستخدمين يتركون السلة قبل الدفع. ما أعطاها سببًا. أول شيء عملته: فتحت Track 02 وطبّقت كل مبدأ على الشاشات الحالية كـ audit. مش تصميم جديد — تشخيص أولًا.

في المبدأ الرابع (Recognition over Recall): عدّت الحقول — 14 حقل، 8 منها اختيارية. المستخدم مضطر يتذكر إيش هو رمزه البريدي بدون أي مساعدة بصرية. حذفت 6 حقول فورًا، وأضافت autocomplete للعنوان.

Error Prevention: بدل رسالة خطأ تظهر بعد الضغط على Submit، صار التحقق يحدث أثناء الكتابة. المستخدم يعرف الخطأ قبل ما يكمل الخطوة. Visibility of System Status: أضافت progress bar بـ 3 خطوات واضحة في أعلى كل صفحة — المستخدم يعرف وين هو في أي لحظة.

آخر مرحلة قبل الـ handoff: Usability Review على Maze. 5 مستخدمين حقيقيين. لقت مشكلة واحدة ما شافتها في التصميم — زر الرجوع صغير جدًا على الموبايل. عدّلته وأضافت swipe-back behavior. وثّقت القرار في الـ design spec.

"ما توقعنا النتيجة بهالسرعة — الـ checkout ما اتغيّر كثير من الخارج، لكن داخليًا كل شيء صار منطقيًا." — مدير المنتج

Noura had one number: 67% abandonment. No explanation. She opened Track 02 and ran a systematic audit against every UX principle before touching Figma. Recognition over Recall revealed 14 form fields — 8 optional. She cut 6 immediately. Error prevention meant real-time validation instead of post-submit errors. A Maze test with 5 users caught one issue she'd missed: a back button too small on mobile. She fixed it, documented the decision, and shipped.

Track 03 · Models

3) أمثلة على E-commerce و SaaS Models

هذا القسم يفرق بين نوعين مهمين حتى يفهم الـ junior أن طريقة التفكير تختلف بين متجر إلكتروني ومنتج SaaS.

This section helps the junior designer distinguish between e-commerce products and SaaS products, because each requires a different UX mindset.

E-commerce Examples

Amazon: مثال على متجر ضخم يركز على البحث، التصفية، صفحة المنتج، الـ reviews، وسرعة الشراء.
Shopify stores: مفيدة لدراسة product pages, cart, checkout, upsell, and trust signals.
Marketplace patterns: مثل المتاجر التي تجمع بائعين متعددين، حيث يهم أكثر تصميم المقارنة والثقة واللوجستيات.

E-commerce usually optimizes product discovery, trust, cart conversion, and checkout completion.

SaaS Model Examples

Salesforce: مثال SaaS يركز على workflows, data density, permissions, and multi-role dashboards.
Notion: مثال SaaS يركز على flexibility, collaboration, and information architecture.
Shopify as a platform: أيضًا نموذج SaaS لأنه يوفّر برمجية مستضافة لإدارة المتجر والدفع والعمليات.

SaaS usually optimizes onboarding, retention, team workflows, permissions, and repeat usage over time.

البند	E-commerce	SaaS
الهدف الرئيسي	إتمام الشراء	إنجاز العمل بفاعلية والاحتفاظ بالمستخدم
الشاشات الحرجة	PLP, PDP, Cart, Checkout	Onboarding, Dashboard, Settings, Workflows
المؤشرات الأهم	Conversion, AOV, cart abandonment	Activation, retention, engagement, expansion
الـ UX focus	الثقة والوضوح وسرعة الدفع	التعلّم السريع، الإنتاجية، والوضوح طويل المدى

Case Study · حالة تطبيقية

Bazaar — منصة موحدة للبائعين والمشترين

Dual-interface product · 5 weeks · Marketplace + SaaS dashboard

التحدي

الشركة تحتاج واجهتين: متجر للمشتري (e-commerce) ودashboard للبائع (SaaS). الفريق كان يصمم الاثنين بنفس المنطق وخرجت تجربة مختلطة.

الفصل في التفكير

للمشتري: تحسين الـ trust والـ conversion وسرعة الدفع. للبائع: productivity وdata density وإدارة أدوار متعددة. كل واجهة صُمّمت بـ UX patterns مختلفة تمامًا.

النتيجة

الواجهتان أُطلقتا معًا، كل منهما بمنطق يناسب نوع المنتج، وبدون أي overlap في قرارات التصميم بينهما.

+34%Buyer conversion rate

78%Seller activation (week 1)

0Shared patterns between UIs

E-commerce UXSaaS UXDual InterfaceFigma

Bazaar marketplace — same company, two completely different UX models applied correctly. 34% buyer conversion lift and 78% seller activation rate in week one.

◈ How It Happened · كيف حدث هذا

سارة · مصممة product، مشروع بواجهتين لنفس الشركة

المدير قالها في اجتماع واحد: "محتاجين تطبيق للمشتري ودashboard للبائع. ابدأي." أول قرار اتخذته سارة — ما تفتح Figma. فتحت Track 03 في الـ roadmap وقرأت المقارنة بين E-commerce وSaaS. قرّرت قبل ما ترسم خطًا واحدًا: هذا مشروعان منفصلان بمنطق مختلف تمامًا، وأي خلط بينهما سيدمر التجربتين.

للمشتري، فكّرت بمنطق E-commerce خالص: ما هو الاحتكاك الوحيد بين رؤية المنتج وإتمام الشراء؟ الشاشات الحرجة عندها: صفحة المنتج، السلة، الـ Checkout. كل قرار تصميمي يُقاس بسؤال واحد — هل هذا يزيد أو يقلل الثقة؟

للبائع، فكّرت بمنطق SaaS: هذا شخص يشتغل في النظام 8 ساعات يوميًا. الأولوية ليست الجمال — الأولوية السرعة والكثافة المعلوماتية. Dashboard يُظهر كل شيء دفعة واحدة. Actions واضحة بدون تفكير.

الخطأ الذي تجنّبته عن وعي: ما استخدمت نفس component library للاثنين. كل واجهة بـ spacing وtype scale مختلفان. حتى الـ button style مختلف — المشتري يرى أزرار مستديرة وودية، البائع يرى أزرار حادة ومباشرة.

"يحسّ كمنتجين من شركتين مختلفتين — وهذا بالضبط ما أردناه." — مدير التصميم عند مراجعة الـ designs

Sara's first decision when given two interfaces to design: don't open Figma. She read the E-commerce vs. SaaS comparison in Track 03 first. For the buyer side, every decision was measured against trust and conversion. For the seller side, she optimized for density and daily efficiency. She deliberately used different component libraries, spacing scales, and button styles for each — no cross-pollination. The result felt like two products from two different companies, which was exactly the goal.

Track 04 · Idea → Production

4) Roadmap من الفكرة إلى Production

هذا المسار الجديد يربط التفكير المنتجّي بالتصميم والهندسة والتشغيل، باستخدام Perplexity, Gemini, ChatGPT, Claude, GitHub, Vercel, Supabase, Google AI Studio, وClaude Code.

This roadmap connects product thinking, UX design, coding, infrastructure, and launch operations from idea to production.

المرحلة	الهدف	المخرجات	الأداة / المنصة	كيف تُستخدم
1. Intake	فهم الفكرة والسوق	Idea brief + problem statement	Perplexity	بحث سريع عن السوق، المنافسين، والأسئلة المفقودة
2. Scope	تحويل الفكرة إلى MVP	MVP scope + priorities	ChatGPT / Gemini	تفكيك features إلى must / should / later
3. Product Spec	كتابة spec واضح	PRD / UX notes / acceptance criteria	Claude	إنشاء وثيقة منظمة ومقروءة للفريق
4. IA & UX	تصميم structure أولي	Flows + edge cases + screen map	ChatGPT / Claude	اقتراح user journeys ومراجعتها
5. AI Prompting & Model Test	اختبار نماذج الذكاء المطلوبة للمنتج	Prompt set + model selection	Google AI Studio / Gemini	تجربة prompts ونماذج Gemini بسرعة قبل الدمج الفعلي
6. Code Planning	تحويل الـ spec إلى backlog هندسي	Tasks + repo structure	ChatGPT / Claude	تقسيم العمل إلى frontend, backend, db, auth
7. Coding	بدء التطوير الفعلي	Feature implementation	Claude Code	توليد وتعديل الكود داخل بيئة التطوير بشكل agentic
8. Source Control	تنظيم الشغل والتعاون	Repo + branches + PRs	GitHub	إدارة الإصدارات، المراجعات، والعمل الجماعي
9. Backend & Data	بناء قاعدة البيانات والخدمات	Auth, DB, Storage, APIs	Supabase	إعداد قاعدة البيانات، auth، storage، والسياسات
10. Frontend Preview	معاينة المنتج أثناء التطوير	Preview deployment	Vercel	نشر preview لكل branch ومراجعة الـ UI بسرعة
11. QA & Refinement	إصلاح المشاكل وتحسين الجودة	Bug list + final polish	Perplexity / Claude / Gemini	تحليل المشاكل، كتابة fixes، وتحسين النصوص والـ flows
12. Production Release	إطلاق النسخة النهائية	Production deployment + checklist	GitHub + Vercel + Supabase	دمج main، مراجعة env vars، migrations، وإطلاق النسخة

Suggested Tool Ownership

Perplexity: market discovery, competitive scan, and factual validation.
Gemini: ideation, alternate solutioning, and fast prompt experimentation.
ChatGPT: structuring tasks, brainstorming, and translating messy thinking into clear steps.
Claude: product specs, UX documentation, long-form reasoning, and polished handoff docs.
Google AI Studio: prompt and Gemini model prototyping before code integration.

Engineering & Launch Stack

Claude Code: agentic coding, refactoring, and implementation support.
GitHub: repo, issues, branches, pull requests, and review flow.
Supabase: auth, database, storage, and backend primitives.
Vercel: previews, deployments, domains, and fast frontend release cycles.
Combined flow: GitHub branch → Vercel preview → QA → merge → production.

في المشاريع الـ SaaS، مرحلة الإنتاج لا تعني فقط نشر الواجهة؛ بل تعني أيضًا التأكد من auth, database rules, environment variables, logging, error handling, analytics, وrollback plan.

For SaaS, production is not just frontend deployment; it also includes auth, database rules, env vars, logging, analytics, and rollback readiness.

Suggested Tools to Complete Your Stack · أدوات إضافية مقترحة

أدوات لم تُذكر في المسار الأصلي لكنها تكمله في كل مرحلة وتُحسّن جودة التسليم بشكل ملحوظ.

Figma Design, wireframing, prototyping & dev mode handoff

v0.dev AI UI generation for rapid component & wireframe exploration

Linear Engineering task management, sprint planning & issue tracking

Maze Remote usability testing directly on Figma prototypes

Loom Async video walkthroughs for design reviews & stakeholder handoff

Sentry Error monitoring & crash reporting for production apps

PostHog Product analytics, session replay & feature flag management

Cursor AI-powered IDE — pairs well with Claude Code for development

Case Study · حالة تطبيقية

Taskflow — SaaS لإدارة المشاريع الإبداعية

Full-stack product · 6 weeks · Idea → production with 2-person team

التحدي

فكرة على ورقة → منتج حقيقي على production خلال 6 أسابيع بفريق: مصممة + مطور، مع الاعتماد الكامل على أدوات هذا المسار.

استخدام الأدوات

Perplexity للبحث، Claude لكتابة الـ PRD والـ spec، Figma للتصميم، Claude Code للتطوير، Linear لإدارة المهام، Supabase للـ backend، Vercel للـ deployment.

النتيجة

MVP أُطلق في الوقت المحدد، 3 features رئيسية بدون technical debt، وصفر critical bugs في أول أسبوع على production.

6WIdea → Production

3Core MVP features shipped

0Critical bugs (week 1)

ClaudeClaude CodeFigmaGitHubSupabaseVercelLinear

Taskflow SaaS — idea to production in 6 weeks. Every tool in this roadmap was used at its right stage: zero critical bugs, clean codebase, and a live product.

◈ How It Happened · كيف حدث هذا

ريم + أحمد · مصممة ومطور، فكرة على ورقة → منتج حقيقي

الأسبوع الأول — Perplexity. ريم وأحمد جلسا ساعتين يبحثان بـ Perplexity: من المستخدم المستهدف؟ ما المشاكل الحقيقية في المنافسين؟ ما الـ gaps التي لم يملأها أحد؟ خرجا بـ competitive landscape واضح وقراروا: المنتج سيستهدف الفرق الصغيرة التي تحتاج structure بدون complexity.

الأسبوع الثاني — Claude للـ PRD. ريم ما كتبت الـ PRD من الصفر. حطّت النتائج كاملة في Claude وطلبت منه يحوّلها لـ PRD منظم بـ user stories وacceptance criteria واضحة. راجعت الناتج، عدّلت 30% منه، وأرسلته لأحمد. أحمد قرأه وقال: "عارف إيش أبني."

الأسبوع الثاني والثالث — Figma + Loom. ريم رسمت الـ flows والـ wireframes. بدل اجتماعات مطوّلة، استخدما Loom لتسجيل walkthrough قصير لكل screen. أحمد يشوف، يعلّق، ويكمل.

الأسبوع الرابع — Claude Code. أحمد فتح Claude Code وبدأ التطوير مباشرة من الـ spec. كل مهمة ticket في Linear. مافيش شيء يُكتب بدون ticket. كل PR يولّد preview URL على Vercel — ريم تراجع الـ UI على الـ preview قبل أي merge.

الأسبوع الخامس والسادس — Supabase + Launch. أعدّ الـ auth والـ database. راجعا الـ env vars، الـ migrations، والـ error handling. يوم الخميس: دمج الـ main branch وأطلقا المنتج.

"الـ roadmap مش مجرد خطوات — هو طريقة تفكير. كل أداة كانت في مكانها الصح وما حدش لبس على الثاني." — أحمد، بعد الإطلاق

Week 1: Perplexity research defined the target user and product gap. Week 2: Reem fed the findings into Claude and got a structured PRD with user stories — she edited 30%, Ahmed read it and said "I know what to build." Weeks 3–4: Figma designs reviewed via Loom videos, then Claude Code for implementation with every task tracked in Linear and every PR previewed on Vercel before merging. Week 6: Supabase backend, env var review, and launch. Every tool was used in its right stage.

Track 05 · SOP

5) Practical SOP / SOP عملي ثابت

Arabic SOP

استلام الفكرة أو الـ brief.
استخراج الأسئلة الناقصة.
بحث سريع عن السوق والمنافسين.
تحديد المشكلة والـ MVP.
رسم الـ flow والـ IA.
تصميم wireframes.
صياغة UI direction.
كتابة الـ spec.
بدء التطوير وإدارة الـ repo.
إعداد الـ backend والـ auth.
Preview deployments واختبار الجودة.
الإطلاق على production.

English SOP

Receive the idea or brief.
Extract missing questions and assumptions.
Run a fast market and competitor scan.
Define the problem and MVP scope.
Create IA and user flows.
Design wireframes.
Define the UI direction.
Write the product and UX spec.
Start implementation and manage the repo.
Set up backend, auth, and data.
Use preview deployments and QA loops.
Release to production.

Case Study · حالة تطبيقية

Nimble — تطبيق توصيل بقالة في 15 دقيقة

First solo junior project · 4 weeks · No direct supervisor

التحدي

أول مشروع منفرد لمصممة junior بدون مشرف مباشر، deadline ضيق، وعميل لديه تاريخ من تغيير الـ requirements في منتصف الطريق.

الالتزام بالـ SOP

اتُّبعت كل خطوة في الـ SOP بدون تخطي أي مرحلة. استُخدم AI لتسريع البحث والكتابة مع الحفاظ على القرار النهائي للفريق في كل محطة تصميمية.

النتيجة

المشروع سُلّم في الوقت المحدد، المطور قال "أفضل handoff شفته من designer junior"، والعميل طلب مشروعًا ثانيًا في نفس الاجتماع.

4WFull project timeline

✓Delivered on deadline

+1New project won same day

SOPSolo ProjectClean HandoffFigmaClaude

Nimble delivery app — first solo junior project, 4 weeks, zero supervision. SOP followed step by step: on-time delivery, exemplary handoff, and a second project won immediately.

◈ How It Happened · كيف حدث هذا

فاطمة · مصممة junior، أول مشروع منفرد بدون مشرف مباشر

فاطمة طبعت الـ SOP. نعم، طبعت ورقة حقيقية ولصقتها جنب شاشتها. قاعدتها الوحيدة: لا تنتقل للخطوة التالية قبل ما تنهي الحالية. بدت بطيئة في البداية — لكنها كانت تبني بدون ثغرات.

الخطوة 1 و2 خذتا يومًا واحدًا: استلام الفكرة واستخراج الأسئلة الناقصة بـ Claude. الخطوة 3 خذت يومًا ثانيًا: بحث عن المنافسين في Perplexity — وجدت فراغًا واضحًا في تجربة التتبع بعد الطلب. دوّنت النقطة ومضت.

في الأسبوع الثاني، طلب العميل تغيير في الـ scope فجأة. بدل ما تقلق، سألت سؤالًا واحدًا: هل هذا يغيّر الـ problem أم فقط الـ features؟ كان features فقط. عدّلت الـ flow في Figma وكملت بنفس الإيقاع.

الأسبوع الثالث: Wireframes وUI direction. استخدمت v0.dev لتجربة layouts مختلفة بسرعة قبل ما تبدأ الـ high-fi في Figma — وفّرت عليها يومين من إعادة التصميم. الأسبوع الرابع: Design spec كاملة مع Claude. كل state، كل behavior، كل edge case — موثّق بلغة واضحة.

"أفضل handoff شفته من designer junior في حياتي. عرفت وين أبدأ وش أبني." — المطور، بعد قراءة الـ spec

يوم التسليم، أرسلت ملفًا واحدًا يحتوي كل شيء. في نهاية الاجتماع، العميل سأل: "متى تقدرين تبدأين المشروع الجاي؟"

Fatima printed the SOP and taped it to her monitor. Rule: never move to the next step before finishing the current one. Day 1–2: brief and missing questions via Claude. Day 3: competitor research on Perplexity found a gap in post-order tracking. Week 2: client changed scope mid-project — she asked "is this a problem change or just features?" Features only. She updated the flow and kept moving. Week 3: v0.dev saved two days of layout exploration. Week 4: full design spec written with Claude. The developer's response: "Best junior handoff I've ever seen."

Final Reminders

6) Final Reminders

لـ Junior Designer

لا تبدأ بالـ UI قبل فهم الهدف.
قدّم أكثر من direction.
فكّر في states وليس happy path فقط.
سلّم logic مع الشاشات.

لـ Product Team

اربط كل feature بهدف business واضح.
افصل بين MVP والـ nice-to-have.
راجع المخاطر مبكرًا.
اجعل الـ handoff قابلًا للتنفيذ.

لـ Engineering

استخدم branches واضحة.
اختبر previews قبل الدمج.
راجع migrations والـ env vars.
جهّز rollback plan قبل الإطلاق.

أهم نقطة: لا تجعل AI يقود التفكير بدل الفريق. استخدمه لتسريع الفهم، التوسيع، التنظيم، والكتابة، لكن القرار النهائي يجب أن يخرج من فهم المنتج والمستخدم والسياق.

Most important reminder: do not let AI replace product judgment. Use it to accelerate research, structuring, writing, and iteration—while keeping final decisions grounded in product context.

AI Engineering Field Guide · 2026

A practical guide to

AI
Mastery

From Using AI · to Building AI

دليل عملي يشرح أدوات الـ AI الحديثة — Claude و ChatGPT و Gemini و Cursor و Antigravity و غيرها — ومتى تستخدم كل أداة، والمفاهيم الأساسية (LLM, Agents, Skills, MCP, Tokens, Memory, Context, Harness)، وكيف تبني منتجات ذكية، وصولًا إلى بناء نموذج AI من الصفر.

Thirteen chapters that take a beginner, junior, or senior from confidently using AI tools at work to understanding the stack well enough to build their own.

Chapter 01 · The Landscape

1) ما هي أدوات الـ AI؟

أدوات الـ AI تطبيقات مبنية فوق نماذج لغوية ضخمة (LLMs) تساعدك في الكتابة، البحث، البرمجة، التحليل، التصميم، و البناء. الأهم أن تعرف فئة كل أداة و قوتها — لا أن تحفظ الأسماء، لأنها تتجدّد كل أشهر.

محادثة و تفكير

أسئلة، تحليل، كتابة، برمجة، استدلال طويل.

Claude · ChatGPT · Gemini

بحث بمصادر

إجابات محدّثة من الويب مع مراجع.

Perplexity · Gemini

وكلاء برمجة و IDEs

يقرأ مشروعك، يعدّل ملفات، يشغّل أوامر.

Claude Code · Cursor · Codex · Copilot · Antigravity

استوديو و تجريب

تجرّب النماذج و الـ prompts و تبني نماذج أولية.

Google AI Studio · Vercel v0

بناء و نشر و backend

استضافة، قواعد بيانات، auth، APIs بسرعة.

Vercel · Supabase · Firebase

صور و تصميم بصري

توليد و تحرير صور و أصول و واجهات.

Nano Banana Pro · ChatGPT (GPT Image) · Midjourney · Adobe Firefly · Imagen

معرفة و ملاحظات

تحلّل مصادرك أنت و تجيب منها (و audio overview).

Google NotebookLM

الأداة	الجهة	الفئة	الأفضل في
Claude	Anthropic	محادثة / تفكير	سياق طويل، تحليل، برمجة، أمان
ChatGPT	OpenAI	محادثة / صور	عام، متعدد وسائط، GPT Image للصور
Gemini	Google	محادثة / وسائط	تكامل Google، نصوص و صور و فيديو
Perplexity	Perplexity	بحث	إجابات محدّثة مع مصادر
NotebookLM	Google	معرفة / ملاحظات	الإجابة من مستنداتك أنت + audio overviews
Claude Code	Anthropic	وكيل برمجة	مهام برمجية كاملة في الـ terminal
Cursor	Anysphere	IDE ذكي	برمجة داخل محرر مدمج بالـ AI
Codex / Copilot	OpenAI / GitHub	مساعد كود	توليد و إكمال كود
Antigravity	Google	منصة وكلاء برمجة	بيئة تطوير agentic حول Gemini
Google AI Studio	Google	استوديو	تجربة Gemini و الـ prompts و الـ API
Vercel (+ v0)	Vercel	بناء / نشر	نشر فوري + توليد UI من نص (v0)
Supabase	Supabase	backend	Postgres + auth + storage مفتوح المصدر
Nano Banana Pro	Google (Gemini)	صور	توليد و تحرير صور عالي الدقة بالنص
Midjourney · Firefly	MJ · Adobe	صور	صور فنية / أصول تجارية آمنة

لا توجد «أفضل أداة» مطلقة — توجد أداة أنسب للمهمة. النماذج وراءها تتغيّر بسرعة، فركّز على الفئة و الوظيفة.

Tools are thin layers over fast-moving models. Learn the category (chat, search, coding agent, studio, backend, image, knowledge) — the leaderboard changes every few months.

Chapter 02 · In Practice

2) كيف تستخدمها في بيئة العمل؟

الفكرة ليست «اسأل و انسخ»، بل أن تبني workflow يدمج الـ AI في كل خطوة: فهم → توسيع → تنفيذ → مراجعة. تعامل معه كزميل سريع لكنه يحتاج توجيهًا و تدقيقًا.

Research

البحث و الفهم

لخّص مستندات طويلة، قارن خيارات، و اسأل عمّا لا تفهمه قبل الاجتماعات.

Writing

الكتابة و التوثيق

مسودات emails و تقارير و PRDs، و إعادة صياغة بنبرة مناسبة — ثم تحرّر أنت.

Coding

البرمجة

توليد boilerplate، شرح كود قديم، كتابة tests، و debugging و مراجعة PRs.

Design

التصميم

أفكار UX، نصوص واجهات، حالات edge cases، و توليد variations سريعة.

Data

البيانات

تحويل وصف لـ SQL، تحليل جداول، صياغة charts، و تفسير النتائج ببساطة.

Comms

التواصل

تلخيص اجتماعات، صياغة updates، ترجمة، و تحضير عروض و خطط.

احذر: لا ترفع بيانات سرية لأدوات عامة، تحقّق دائمًا من المخرجات (قد يخطئ بثقة — hallucination)، و لا تترك القرار النهائي للـ AI.

Guardrails: never paste secrets/PII into public tools, always verify output (models hallucinate confidently), and keep human judgment on final calls.

Chapter 03 · Decision Matrix

3) متى تختار الأداة المناسبة؟

اختر حسب طبيعة المهمة: تفكير؟ مصادر محدّثة؟ تنفيذ كود؟ صورة؟ هذا المسار يحسم الاختيار في ثوانٍ.

تحتاج حقائق محدّثة؟

PerplexityGeminiNotebookLM

تنفيذ كود أو تعديل ملفات؟

Claude CodeCursorAntigravity

صورة أو تصميم بصري؟

Nano Banana ProGPT ImageMidjourney

تفكير عميق أو كتابة طويلة؟

ClaudeChatGPT

تجربة API أو نشر سريع؟

Google AI StudioVercel

شجرة قرار سريعة لاختيار الأداة حسب نوع المخرج

المهمة	الأداة المقترحة	لماذا
تحليل/تفكير معقّد أو كتابة طويلة	Claude / ChatGPT (reasoning)	سياق طويل و استدلال أعمق
بحث بحقائق محدّثة + مصادر	Perplexity / Gemini	وصول للويب مع مراجع
الإجابة من مستنداتك الخاصة	NotebookLM	محصور في مصادرك أنت
مهمة برمجية كاملة عبر ملفات	Claude Code / Cursor / Antigravity	agentic — يقرأ، يعدّل، يشغّل
إكمال كود سريع داخل المحرر	Copilot / Codex	اقتراحات سطرية فورية
توليد صورة أو واجهة	Nano Banana Pro · GPT Image · v0	من نص إلى صورة/UI
تجربة الـ API و بناء prototype	Google AI Studio · Vercel	تجريب و نشر سريع

سؤال واحد يحسم: «ما المخرج الذي أحتاجه، و هل يتطلب حقائق محدّثة أو تنفيذًا فعليًا؟»

Ask one question: "What output do I need, and does it require fresh facts or real execution?" — that picks the tool.

Chapter 04 · The Vocabulary

4) المفاهيم الأساسية

لو فهمت هذه الكلمات الثماني، فهمت 80% من عالم الـ AI الحديث: LLM · Models · Agents · Skills · MCP · Tokens · Memory · Context. كل بطاقة فيها مثال عملي.

Context

ما يراه الآن

→

LLM / Model

predicts next token

→

Output

tokens out

Tools · MCP

Memory

Skills

Agent loop

repeat

كيف تترابط المفاهيم: السياق و الذاكرة و الأدوات و المهارات تغذّي النموذج، و الـ Agent يكرّر الحلقة

LLM

Large Language Model

نموذج يتنبّأ بالكلمة التالية، دُرّب على كميات هائلة من النص. هو «المحرك» الذي يفهم و يولّد اللغة.

Exampleتكتب «اشرح الـ JWT لمبتدئ» فيولّد شرحًا متدرّجًا — لأنه تعلّم أنماط اللغة و الشرح.

Models

النماذج و أحجامها

إصدارات بقدرات و سرعات و تكلفة مختلفة (صغير سريع رخيص / كبير أذكى أغلى). تختار حسب صعوبة المهمة.

Exampleتصنيف رسائل بسيطة → نموذج Haiku السريع؛ تحليل عقد قانوني → نموذج Opus الأقوى.

Agents

الوكلاء

نموذج + قدرة على اتخاذ خطوات و استخدام أدوات في حلقة (خطّط → نفّذ → راقب → صحّح) حتى ينجز هدفًا.

Example«أصلح هذا الـ bug» → الوكيل يقرأ الملفات، يعدّل الكود، يشغّل الـ tests، و يكرّر حتى تنجح.

Skills

المهارات

تعليمات/قدرات قابلة لإعادة الاستخدام تُحقن عند الحاجة (مثل «صمّم بأسلوب علامتنا»). تختصر التكرار و تضمن الاتساق.

Exampleskill اسمه «brand-deck» يحوّل أي محتوى لشريحة بألوان و خطوط شركتك تلقائيًا.

MCP

Model Context Protocol

بروتوكول موحّد يربط النموذج بأدوات و مصادر خارجية (ملفات، APIs، DB). مثل «منفذ USB» للـ AI.

Exampleتربط MCP بـ GitHub → الوكيل يقدر يقرأ الـ issues و يفتح PR مباشرة دون نسخ/لصق.

Tokens

الـ Tokens

وحدة النص التي يقرأ/يكتب بها النموذج (≈ ¾ كلمة). تحدّد التكلفة و حجم السياق.

Example«Hello world» ≈ 2 tokens. مستند 1000 كلمة ≈ 1300 token — كلها تُحتسب في الفاتورة.

Memory

الذاكرة

ما يحتفظ به النموذج عبر الجلسات أو الخطوات: تفضيلاتك، حقائق المشروع، قرارات سابقة — تُخزَّن و تُسترجَع عند الحاجة.

Exampleتقول مرة «أنا أفضّل TypeScript» فيتذكّرها في المحادثات القادمة دون أن تعيدها.

Context

السياق (Context)

كل ما تضعه أمام النموذج في هذه اللحظة: السؤال + التعليمات + الملفات + المحادثة. محدود بحجم النافذة (context window).

Exampleتلصق ملف الكود + الخطأ في نفس الرسالة → الإجابة أدق، لأن السياق كامل أمامه.

الفرق المهم: Context = ما يراه الآن (مؤقّت، محدود). Memory = ما يتذكّره لاحقًا (دائم، يُسترجَع). إتقانهما = نتائج أدق و أرخص.

Context = what the model sees right now (temporary, capped by the window). Memory = what it recalls later (persistent, retrieved). Mastering both = sharper, cheaper results.

Chapter 05 · The Scaffolding

5) ما هو الـ "Harness"؟

النموذج وحده «دماغ بلا أيدٍ». الـ Harness هو كل البنية حوله التي تحوّله لمنتج: الـ prompt، الأدوات، الذاكرة، حلقة التنفيذ، الاسترجاع، و الحواجز. جودة الـ harness غالبًا تفرق أكثر من جودة النموذج.

الـ Harness = النموذج في المركز، محاطًا بكل ما يجعله مفيدًا و آمنًا

كيف تطوّر و تحسّن الـ Harness؟

قِس قبل أن تحسّن

ابنِ مجموعة اختبارات (evals) تمثّل مهامك الحقيقية، و قِس النجاح رقميًا.

حسّن الـ context

أعطِ النموذج المعلومة الصحيحة فقط في الوقت الصحيح — retrieval و تلخيص و تنظيف.

أضِف أدوات أدق

أدوات واضحة، محدودة، و موصوفة جيدًا تقلّل الأخطاء أكثر من أي prompt.

كرّر على الـ prompt و الحلقة

عدّل متغيّرًا واحدًا في كل مرة، قارن بالـ evals، و احتفظ بما يرفع النتيجة.

قاعدة ذهبية: «context engineering» (ماذا يرى النموذج) غالبًا أقوى من «prompt engineering» (كيف تطلب).

Most agent quality comes from the harness — context, tools, and loop — not a cleverer prompt. Measure with evals, then improve one variable at a time.

Chapter 06 · Product Shapes

6) بناء منتجات AI بأشكال مختلفة

المنتجات الذكية تأخذ أشكالًا متعددة حسب التعقيد و الاعتماد على البيانات. القاعدة: ابدأ بأبسط شكل يحقّق القيمة، قِس، ثم اصعد السلّم.

سلّم البناء: كل درجة تضيف قدرة فوق ما قبلها — اصعدها حسب الحاجة لا حسب الحماس

الشكل	الفكرة	التعقيد	مثال	متى تستخدمه
Wrapper / Assistant	واجهة فوق نموذج بـ prompt محكم	منخفض	chatbot دعم، مساعد كتابة	أسرع طريق للقيمة
RAG App	نموذج + قاعدة معرفة خاصة بك	متوسط	«اسأل مستنداتنا»	تحتاج معرفة خاصة/محدّثة
Agentic App	وكيل يستخدم أدوات و ينفّذ مهام	عالٍ	وكيل برمجة، أتمتة عمليات	مهام متعددة الخطوات
Multi-Agent	وكلاء متخصصون ينسّقون معًا	عالٍ جدًا	بحث → كتابة → مراجعة	مهام كبيرة قابلة للتقسيم
Copilot مدمج	AI داخل منتج قائم	متوسط	اقتراحات داخل تطبيقك	تعزيز تجربة موجودة
Fine-tuned	نموذج مُدرّب على بياناتك	عالٍ	نبرة/مجال متخصص	عند ثبات المهمة و الحجم

Case Study 01 · Wrapper

«مساعد دعم العملاء» لمتجر إلكتروني

شركة صغيرة، فريق دعم مرهق، أسئلة متكررة

التحدّي

70% من تذاكر الدعم أسئلة متكررة (الشحن، الإرجاع) تستهلك وقت الفريق.

المقاربة

Wrapper بسيط: نموذج + system prompt فيه سياسات المتجر + نبرة العلامة، مدمج في الشات.

النتيجة

ردود فورية 24/7، و تحويل الحالات المعقّدة فقط لبشري.

−60%زمن الرد

3 أيامللإطلاق

+22%رضا العملاء

PromptNo trainingFast value

Case Study 02 · RAG

«اسأل قاعدة المعرفة» لفريق منتج

توثيق ضخم متناثر بين Notion و PDFs و Slack

التحدّي

الموظف الجديد يضيع أيامًا بحثًا عن قرارات و سياسات موثّقة في أماكن متفرّقة.

المقاربة

RAG: فهرسة كل المصادر في vector DB، و النموذج يجيب من المقاطع الأقرب مع روابط المصدر.

النتيجة

إجابات مرجعية دقيقة، و onboarding أسرع بكثير.

−75%وقت البحث

5k+مستند مفهرس

100%إجابات بمصدر

Vector DBRetrievalCitations

Case Study 03 · Agentic

«وكيل برمجة» يصلح bugs و يفتح PRs

فريق هندسي يغرق في تذاكر صيانة صغيرة

التحدّي

عشرات الـ bugs الصغيرة تؤجَّل لأنها «مهمة بس مملة» و تأكل وقت المطوّرين.

المقاربة

Agent (Claude Code + MCP لـ GitHub): يقرأ التذكرة، يعدّل الكود، يشغّل الـ tests، يفتح PR للمراجعة.

النتيجة

المطوّر يراجع بدل أن يكتب من الصفر — إنتاجية أعلى مع إبقاء البشر في القرار.

4×تذاكر/أسبوع

−50%وقت المطوّر

PRدائمًا بمراجعة بشرية

Agent loopMCPTests

مبدأ البناء الضخم: ابدأ صغيرًا، قِس، ثم وسّع. أغلب المنتجات الناجحة بدأت Wrapper بسيط ثم تطوّرت لـ RAG ثم Agentic.

Scale ladder: Wrapper → RAG → Agentic → Multi-agent. Ship the simplest shape that delivers value, measure, then climb.

Chapter 07 · See the Whole

7) ارسم الصورة الكاملة (Mind-Map)

المفاهيم متفرّقة تُنسى؛ المفاهيم المترابطة تُفهم و تبقى. الخريطة الذهنية تحوّل كل ما سبق إلى صورة واحدة ترى فيها العلاقات لا القوائم. هذه نقطة بداية — وسّعها بنفسك حتى تصير مرجعك الحي.

خريطة ذهنية لعالم الـ AI — المركز ثم ستة فروع، كل فرع يقابل فصلًا في هذا الدليل

ابدأ بالمركز

اكتب الموضوع في المنتصف («AI»)، ثم الفروع الكبرى حوله.

فرّع و اربط

كل فرع يتفرّع لمفاهيم أصغر، و ارسم خطوطًا بين المترابطات.

أضِف مثالًا لكل عقدة

المثال يثبّت المفهوم في ذاكرتك أكثر من التعريف المجرّد.

راجِع و وسّع دوريًا

كل ما تتعلّم جديدًا، ألحقه بالخريطة — تصبح مرجعك الحي.

MiroFigJamExcalidrawXMindأو ورقة و قلم

Chapter 08 · Tooling Mastery

8) الاحتراف في Claude Code و Codex

هذه أدوات «وكيل برمجة» — تقرأ مشروعك، تعدّل ملفات، تشغّل أوامر، و تنفّذ مهامًا كاملة. الاحتراف = توجيه دقيق + استغلال المزايا المتقدمة.

المستوى	التركيز	ما تتقنه
مبتدئ	الأساسيات	أوامر واضحة، طلب تعديل/شرح ملف، قراءة المخرجات
متوسط	السياق	ملف توجيه للمشروع (CLAUDE.md/AGENTS.md)، slash commands، تقسيم المهام
متقدّم	التوسعة	MCP servers، sub-agents، hooks، أتمتة سير العمل
محترف	الإنتاجية	workflows متعددة الوكلاء، evals، دمجها في CI/CD

Tip 01

اكتب خطة أولًا

اطلب خطة قبل التنفيذ، راجعها، ثم نفّذ — يقلّل الأخطاء كثيرًا.

Tip 02

ثبّت السياق

ملف توجيه للمشروع يشرح البنية و القواعد = نتائج أدق و أثبت.

Tip 03

مهام صغيرة

قسّم المهمة الكبيرة لخطوات قابلة للمراجعة و الـ commit.

Tip 04

اطلب tests

اجعله يكتب و يشغّل الاختبارات للتحقق من نفسه.

Tip 05

راجِع الـ diff

لا تدمج بثقة عمياء — اقرأ التغييرات دائمًا.

Tip 06

وسّع بـ MCP

اربطه بأدواتك (Git, DB, تصميم) ليصبح أقوى.

المحترف لا يكتب prompt أطول — بل يبني بيئة أفضل: سياق واضح، أدوات موصولة، و حلقة مراجعة.

Mastery = better environment, not longer prompts. Plan-first, small reviewable steps, a project context file, tests, and MCP-connected tools.

Chapter 09 · Project Memory

9) أهمية ملف CLAUDE.md (و نظائره)

ملف CLAUDE.md هو «ذاكرة المشروع» التي يقرأها الوكيل تلقائيًا في كل جلسة: يشرح البنية، القواعد، الأوامر، و الأسلوب. بدله تعيد شرح مشروعك كل مرة؛ معه يبدأ الوكيل و هو «يعرف بيتك».

Why

لماذا هو مهم؟

يحوّل الوكيل من «غريب ذكي» إلى «عضو فريق يعرف السياق». نتائج أدق، أخطاء أقل، و اتساق مع معايير الفريق دون تكرار.

What goes in

ماذا تضع فيه؟

نظرة على البنية، أوامر التشغيل و الاختبار، اصطلاحات الكود و التسمية، ما يجب تجنّبه، و روابط مهمة. اجعله موجزًا و حيًّا.

CLAUDE.md

# Project: Acme Dashboard

## Stack
Next.js 16 · TypeScript · Tailwind · Supabase

## Commands
- dev:   `npm run dev`
- test:  `npm test`
- build: `npm run build`

## Conventions
- Components in `src/components`, one per file.
- Prefer server components; mark client with "use client".
- Never commit secrets; use `.env.local`.

## Avoid
- Don't edit `generated/` — it's auto-built.

نفس الفكرة في الأدوات الأخرى

كل وكيل تقريبًا له «ملف ذاكرة مشروع» بنفس المبدأ — يختلف الاسم فقط:

الأداة	اسم الملف	ملاحظة
Claude Code	CLAUDE.md	يُقرأ تلقائيًا؛ يدعم ملفات متداخلة لكل مجلد
Codex / وكلاء عامون	AGENTS.md	معيار مفتوح شائع لتوجيه الوكلاء
Cursor	.cursor/rules (أو .cursorrules)	قواعد المشروع للـ AI داخل المحرر
GitHub Copilot	.github/copilot-instructions.md	تعليمات مخصّصة للمستودع
Gemini CLI	GEMINI.md	نفس المبدأ لأدوات Google

أفضل ممارسة: ابدأ ملفًا صغيرًا، و كل ما تصحّح للوكيل شيئًا متكررًا — أضِفه للملف. هكذا «يتعلّم» مشروعك بمرور الوقت.

Best practice: start small and treat the file as living memory — every time you correct the agent on something recurring, add it. Over time the project teaches itself to the agent.

Chapter 10 · Open Agent Stacks

10) بيئات الـ Agents (مثل OpenClaw و Hermes)

«بيئة الوكيل» (agent environment / runtime) هي البرمجية التي تشغّل الوكيل: تدير الحلقة، تعطيه أدوات، sandbox آمن، و ذاكرة. الأسماء تتغيّر بسرعة، لكن البنية واحدة.

حلقة الوكيل الأساسية — تتكرّر حتى يتحقّق الهدف أو يتوقّف

ما هي؟

Agent Runtime

إطار يحوّل النموذج لوكيل عملي: يقرأ الهدف، يخطّط، يستدعي أدوات، يلاحظ، و يكرّر داخل بيئة معزولة. أمثلة من النظام المفتوح: أطر للوكلاء البرمجية و وكلاء سطح المكتب و الـ orchestration.

Hermes & co.

نماذج مفتوحة للوكلاء

سلاسل مثل Hermes (من Nous Research) نماذج مفتوحة مضبوطة على استدعاء الأدوات / function-calling — تجعل النماذج المفتوحة صالحة لتشغيل وكلاء دون الاعتماد على واجهات مغلقة.

المكوّنات المشتركة

Loop

حلقة الوكيل

perceive → plan → act → observe، مع شرط توقّف.

Tools

سجل الأدوات

تعريف الأدوات و صلاحياتها و كيفية استدعائها.

Sandbox

بيئة معزولة

تنفيذ آمن للأوامر و الكود دون أذى للنظام.

Memory

الذاكرة

قصيرة (السياق) و طويلة (تخزين/استرجاع).

Orchestrator

المنسّق

يوزّع المهام بين وكلاء و يجمع النتائج.

Policy

الحوكمة

أذونات، حدود، و مراقبة و تسجيل.

منظومة الـ open agents تتحرّك بسرعة و الأسماء تتبدّل — تعلّم البنية (حلقة + أدوات + sandbox + ذاكرة) و ستفهم أي إطار جديد فورًا. راجِع دائمًا توثيق المشروع الرسمي قبل الاعتماد عليه.

The open-agent ecosystem moves fast and names churn. Learn the architecture — loop, tool registry, sandbox, memory, orchestrator, policy — and any new framework (or model line like Hermes) becomes readable instantly. Always verify against each project's official docs.

Chapter 11 · No-Code Automation

11) الأتمتة و أدواتها (Automations)

الأتمتة تربط تطبيقاتك ببعضها فتعمل وحدها: «لو حدث X نفّذ Y». أدوات الـ no-code مثل n8n و Zapier و Make تتيح بناء سير عمل (workflows) بدون كود — و دمج الـ AI كخطوة ذكية داخلها يحوّلها إلى «وكيل بلا برمجة».

n8n

مفتوح المصدر و قابل للاستضافة الذاتية، مرن جدًا، يدعم كودًا مخصّصًا و عقد AI. الأنسب للفرق التقنية و حسّاسية الخصوصية.

Exampleworkflow: بريد جديد → استخراج البيانات بـ LLM → حفظ في Notion → تنبيه على Slack.

Zapier

الأسهل و الأوسع تكاملًا (آلاف التطبيقات)، سحابي بالكامل. الأنسب لغير التقنيين و البدء السريع.

ExampleZap: نموذج Typeform → صف جديد في Google Sheets → رسالة ترحيب تلقائية.

Make

Make (Integromat)

محرّر بصري قوي للسيناريوهات المعقّدة بمنطق و فروع و حلقات، بسعر مناسب.

Exampleسيناريو: طلب جديد → توليد فاتورة PDF → إرسالها بالبريد → تحديث الـ CRM.

الأداة	النوع	الأفضل لـ	الميزة
n8n	مفتوح / استضافة ذاتية	الفرق التقنية، الخصوصية	مرونة + عقد AI + كود
Zapier	سحابي	غير التقنيين، السرعة	أوسع التكاملات
Make	سحابي	سيناريوهات معقّدة	محرّر بصري + سعر
+ AI nodes	داخل كل ما سبق	قرارات و توليد نص	LLM كخطوة في الـ workflow

القوة الحقيقية: أتمتة + AI. اربط مشغّلًا (trigger) بخطوة LLM بخطوة فعل، فتختصر ساعات عمل يدوي إلى ثوانٍ تلقائية.

The real power: automation + AI. Wire a trigger → an LLM step → an action, and hours of manual work become automatic — a "no-code agent".

Chapter 12 · Under the Hood

12) مقدمة: بناء نموذج AI من الصفر

لن تبني GPT في عطلة أسبوع، لكن فهم الـ pipeline يجعلك مستخدمًا أذكى و مهندسًا أفضل. هذه الخطوات الكبرى من البيانات إلى النشر.

خط أنابيب بناء النموذج — من النص الخام إلى API يخدم المستخدمين

البيانات (Data)

جمع و تنظيف نصوص ضخمة و متنوعة — الجودة هنا تحدّد سقف النموذج كله.

التقطيع (Tokenizer)

تحويل النص إلى tokens (وحدات) يفهمها النموذج رقميًا.

المعمارية (Architecture)

اختيار بنية — غالبًا Transformer مع طبقات الـ attention.

التدريب المسبق (Pre-training)

تدريب على التنبؤ بالكلمة التالية عبر مليارات الأمثلة — أغلى مرحلة حاسوبيًا.

الضبط (Fine-tuning / SFT)

تدريب موجّه على أمثلة «تعليمات → استجابة» ليتبع التعليمات.

المواءمة (Alignment · RLHF/DPO)

تحسين السلوك ليكون مفيدًا و آمنًا حسب تفضيلات بشرية.

التقييم (Evaluation)

قياس الأداء و الأمان على اختبارات متنوعة قبل الإطلاق.

النشر (Deploy & Serve)

تحسين السرعة و التكلفة (quantization, caching) و التقديم عبر API.

للتعلّم العملي ابدأ صغيرًا: درّب نموذجًا صغيرًا (nano/char-level) لتفهم الميكانيكا، ثم اصعد. الأساس رياضيات + Python + PyTorch.

Learn by building a tiny model first (char-level / nano-GPT) to feel the mechanics, then scale. Foundation: linear algebra, probability, Python, PyTorch.

Chapter 13 · The Roadmap

13) خريطة تعلّم: من استخدام الـ AI إلى بنائه

رحلة من «مستخدم» إلى «باني». كل مرحلة تبني على ما قبلها — لا تقفز قبل أن تتقن الأساس.

0مراحل متدرّجة

0فصول في الدليل

0مفاهيم أساسية

0%عملي بالتطبيق

مسار صاعد: كل محطة تفتح التي بعدها

المرحلة	التركيز	المهارات	المخرج
1 · مستخدم واثق	استخدام الأدوات	prompting، اختيار الأداة، التحقّق	تسرّع شغلك اليومي بالـ AI
2 · مستخدم متقدّم	دمج في الـ workflow	Claude Code، MCP، أتمتة، skills، CLAUDE.md	تبني سير عمل ذكي مكرّر
3 · باني تطبيقات	منتجات AI	APIs، RAG، agents، evals	تطلق منتج/feature ذكي
4 · مهندس AI	النماذج نفسها	Python، PyTorch، transformers، fine-tuning	تدرّب و تنشر نماذج

المبدأ الأهم: تعلّم بالبناء. أنجز مشروعًا صغيرًا حقيقيًا في كل مرحلة — هو ما يحوّل المعرفة إلى مهارة.

Learn by shipping. Finish one small real project per stage — that is what turns reading into skill. Use AI today; understand it deeply tomorrow.

UI / UX Studies · A Learning Journey

From zero to

UI/UX
Hero

Fundamentals · Process · Craft · Career

رحلة تعلّم ممتعة في عالم تصميم تجربة و واجهة المستخدم — من الصفر إلى الاحتراف. كل فصل فيه شرح مبسّط، مثال عملي، و قصص نجاح حقيقية. من الفرق بين UI و UX، مرورًا بالأبحاث و المبادئ البصرية و الألوان و الخطوط و الحركة و الإتاحة، وصولًا إلى خريطة تصبح بها مصمّمًا محترفًا.

Sixteen chapters that take you from "what is UX?" to a portfolio-ready designer — every concept paired with a real work example and success cases.

Chapter 01 · Foundations

1) ما هو الـ UI/UX؟

قبل أي أداة وأي برنامج، لازم نفرّق بين كلمتين بنخلطهم كتير: الـ UX (التجربة) والـ UI (الواجهة). ببساطة — الـ UX يسأل: "هل المستخدم وصل لهدفه بسهولة؟"، والـ UI يسأل: "هل الشكل واضح ومريح وجميل؟". الاثنان معًا يصنعان منتجًا الناس بتحبه وترجع له.

Before any tool, separate two ideas: UX (the experience — did the user reach their goal easily?) and UI (the interface — is it clear, comfortable, and good-looking?). Together they make a product people love and return to.

UX · Experience

تجربة المستخدم (UX)

هي الرحلة كاملة: هل المستخدم يفهم الخطوة التالية؟ هل يصل لهدفه بأقل احتكاك وأقل تفكير؟ الـ UX منطق ومسار وشعور — لا علاقة لها بالألوان بعد.

Exampleفي تطبيق توصيل طعام: هل أقدر أكمّل الطلب من أول شاشة للدفع في 4 خطوات بدون ما أحتار؟ هذا سؤال UX.

UI · Interface

واجهة المستخدم (UI)

هي الطبقة المرئية: الألوان، الخطوط، المسافات، شكل الأزرار وأماكنها. مهمتها تخلي المسار اللي صمّمه الـ UX واضحًا وجميلًا وسهل اللمس.

Exampleفي نفس تطبيق التوصيل: لون زر "اطلب الآن" أخضر بارز، حجمه كبير، وثابت أسفل الشاشة عشان الإبهام يوصله بسهولة. هذا قرار UI.

Relationship

العلاقة بينهما

الـ UX هو الهيكل والمنطق، والـ UI هو اللباس والشكل. واجهة جميلة فوق تجربة سيئة = إحباط أنيق. وتجربة ممتازة بواجهة مشوّشة = جهد ضائع. النجاح يحتاج الاثنين معًا.

Exampleزر دفع تصميمه رائع (UI ممتاز) لكنه في مكان لا أحد يلاحظه فيضيع الطلب (UX سيئ) — النتيجة فشل رغم جمال الزر.

تشبيه يثبّت الفكرة — جهاز التحكم (الريموت) في التلفزيون: الـ UX هو "هل أوصل للقناة اللي أبيها بسرعة وبأقل ضغطات؟"، أمّا الـ UI فهو "ترتيب الأزرار وأحجامها وألوانها": زر التشغيل أحمر ومميّز، أزرار الصوت كبيرة وتحت الإبهام مباشرة، والأرقام مرتّبة بشكل منطقي. ريموت بأزرار جميلة لكن مبعثرة = UI حلو وUX سيئ. لا تبدأ بالألوان قبل ما تتأكد إن المسار نفسه منطقي وسهل.

Think of a TV remote: UX is "can I reach the channel I want fast, with the fewest presses?" while UI is the layout — a red power button, big thumb-reachable volume keys, logically ordered numbers. Beautiful but scattered buttons = good UI, bad UX. Never start with colors before the path itself makes sense.

Chapter 02 · The Process

2) رحلة التصميم (Design Thinking)

التفكير التصميمي ليس وصفة جامدة، بل طريقة في التفكير تبدأ من الإنسان لا من الشاشة. خمس مراحل تنقلك من «ماذا يحتاج الناس فعلًا؟» إلى حلٍّ مُختبَر بين أيديهم: Empathize → Define → Ideate → Prototype → Test. سنمشي خلالها معًا عبر مثال واحد متكامل: تطبيق توصيل طعام.

Empathize

التعاطف — افهم المستخدم

اخرج من رأسك إلى عالم المستخدم: قابِله، راقبه، استمع لما يقوله و ما لا يقوله. الهدف فهم احتياجاته و مشاعره و سياقه، لا جمع الآراء فقط.

Exampleقابلنا 8 مستخدمين فاكتشفنا أن أكثر لحظة توتر ليست الطلب، بل انتظار «أين السائق؟» دون معرفة وقت الوصول الفعلي.

Define

التحديد — صُغ المشكلة

حوّل ما جمعته إلى عبارة مشكلة واحدة واضحة (Problem Statement). مشكلة محددة جيدًا = نصف الحل. تجنّب صياغة الحل داخل المشكلة.

Exampleعبارة المشكلة: «الجائع الذي طلب وجبته يحتاج إلى يقين لحظي بمكان طلبه و وقت وصوله — لأن الغموض يحوّل الجوع إلى قلق.»

Ideate

توليد الأفكار — تخيّل بحرية

اعصف ذهنيًا بأكبر عدد من الحلول دون حكم مبكر. الكمية أولًا، ثم نُصفّي. أغرب فكرة قد تكون شرارة لأفضل حل.

Exampleطرحنا 14 فكرة: خريطة حية، شريط تقدّم، إشعار «اقترب سائقك»، صوت طرق الباب، صورة الوجبة وهي تُحضَّر… اخترنا أقواها أثرًا.

Prototype

النمذجة — اصنع نسخة سريعة

ابنِ نموذجًا بسيطًا و رخيصًا يكفي لاختبار الفكرة — ورقة، Wireframe، أو نموذج تفاعلي في Figma. الهدف التعلّم بأقل تكلفة، لا الكمال.

Exampleصنعنا Prototype تفاعلي في Figma لشاشة التتبّع: خريطة + شريط مراحل (يُحضَّر → خرج → اقترب → وصل) في يومين فقط.

Test

الاختبار — تعلّم من الواقع

ضع النموذج بين يدي مستخدمين حقيقيين و راقب: أين يتعثّرون؟ ماذا يتوقّعون؟ كل ملاحظة وقود للتحسين، و كل «فشل» مبكّر يوفّر كلفة كبيرة لاحقًا.

Exampleأثناء الاختبار اكتشفنا أن المستخدمين لم يفهموا أيقونة «خرج للتوصيل» — فاستبدلناها بنص صريح: «طلبك في الطريق إليك الآن».

Mindset

العقلية قبل الخطوات

هذه المراحل أدوات تفكير لا قيود. ركّز على المستخدم، تبنَّ التجريب، و لا تخف من رمي فكرة لا تنجح. النضج هو معرفة متى تتقدّم و متى تعود خطوة.

Exampleبعد الاختبار عُدنا لمرحلة Define لأن المشكلة الحقيقية اتّضح أنها «الثقة في وقت الوصول» لا «شكل الخريطة».

المراحل الخمس بالترتيب — تطبيقًا على «تطبيق توصيل طعام»

Empathize · التعاطف

مقابلات و ملاحظة ميدانية مع 8 مستخدمين أثناء طلبهم الفعلي. النتيجة: لحظة الانتظار بعد الطلب هي مصدر القلق الأكبر، لا عملية الطلب نفسها.

Define · التحديد

صياغة عبارة مشكلة واحدة: «المستخدم الجائع يحتاج يقينًا لحظيًا بمكان طلبه و وقت وصوله.» مع خريطة رحلة (Journey Map) تُبرز نقطة الألم.

Ideate · توليد الأفكار

عصف ذهني لـ 14 فكرة، ثم تصويت و تجميع حسب الأثر مقابل الجهد. الفائز: خريطة حيّة + شريط مراحل واضح + إشعار «اقترب سائقك».

Prototype · النمذجة

نموذج تفاعلي منخفض الكلفة في Figma لشاشة التتبّع خلال يومين — لا كتابة كود، فقط ربط شاشات لمحاكاة التجربة.

Test · الاختبار

اختبار قابلية الاستخدام مع 5 مستخدمين. النتائج تعود لتغذّي المراحل السابقة: عدّلنا الأيقونات و النصوص، ثم أعدنا الاختبار.

انتبه: التفكير التصميمي حلقة تتكرّر، لا خط مستقيم. كثيرًا ما تعود من الاختبار إلى التحديد، أو من النمذجة إلى توليد الأفكار. كل دورة تجعل فهمك أعمق و حلّك أنضج — التراجع خطوة ليس فشلًا، بل جوهر العملية.

Design Thinking is an iterative loop, not a straight line. You'll often jump back — from Test to Define, or Prototype to Ideate. Each loop sharpens the problem and the solution. Looping back is the method working, not failing.

Case Study 01 · Food Delivery

«وصّلني» — إعادة تصميم شاشة تتبّع الطلب

تطبيق توصيل طعام · فريق منتج صغير · دورتان من Design Thinking

التحدّي

ارتفاع رسائل الدعم «أين طلبي؟» و تقييمات سلبية رغم سرعة التوصيل الفعلية. القلق كان مصدره الغموض لا التأخير، فالمستخدم لا يرى ما يحدث بعد ضغط «اطلب».

المقاربة

مررنا بالمراحل الخمس: تعاطف عبر مقابلات، تحديد لعبارة مشكلة دقيقة، توليد 14 فكرة، نمذجة سريعة في Figma، ثم اختبار مع 5 مستخدمين. عُدنا دورة ثانية بعد كشف أن المشكلة هي «الثقة في الوقت».

النتيجة

شاشة تتبّع بخريطة حيّة و شريط مراحل و وقت وصول تقديري واضح. انخفضت رسائل «أين طلبي؟» بشكل ملحوظ و ارتفع رضا المستخدمين عن مرحلة الانتظار.

-62%رسائل دعم «أين طلبي؟»

+24%رضا عن تجربة الانتظار

2دورتا تكرار قبل الإطلاق

EmpathizeDefineIdeatePrototypeTestFigmaUsability Testing

Chapter 03 · Discover

3) أبحاث المستخدم (User Research)

قبل ما ترسم أي شاشة، لازم تفهم: مين المستخدم؟ وإيش المشكلة الحقيقية اللي يعاني منها؟ أبحاث المستخدم هي الطريقة اللي تحوّل بها التخمين إلى قرار مبني على دليل — وهي أرخص بكثير من إعادة بناء منتج خاطئ.

User research turns guesses into evidence-based decisions. Understanding who your users are and what problem they actually face is far cheaper than rebuilding the wrong product later.

Interviews

المقابلات

محادثة 1-إلى-1 مع مستخدم حقيقي لفهم الدوافع والسلوك والإحباطات بعمق. اسأل "ليش؟" أكثر من "إيش؟".

Exampleتطبيق توصيل: 8 مقابلات كشفت أن المستخدمين يلغون الطلب ليس بسبب السعر، بل لأن وقت الوصول غير واضح.

Surveys

الاستبيانات

وسيلة سريعة لجمع بيانات كميّة من عدد كبير. ممتازة لقياس الاتجاهات، لكنها لا تفسّر "ليش".

Exampleاستبيان لـ 240 مستخدم أظهر أن 63% يستخدمون البحث بدل التصفّح — قرار: تكبير شريط البحث في الصفحة الرئيسية.

Usability Testing

اختبار قابلية الاستخدام

تعطي المستخدم مهمة وتراقبه وهو يحاول إنجازها على النموذج. تكشف نقاط الارتباك الحقيقية بسرعة.

Example5 مستخدمين حاولوا إكمال الدفع؛ 4 منهم لم يجدوا زر "تطبيق الكوبون" — تم نقله أعلى الملخّص.

Competitor Analysis

تحليل المنافسين

دراسة كيف يحلّ المنافسون نفس المشكلة: ماذا ينجح، أين الفجوات، وما الفرصة التي يمكنك أخذها.

Exampleمقارنة 3 تطبيقات حجز عيادات: كلها تطلب تسجيل قبل عرض المواعيد — الفرصة: عرض المواعيد أولًا ثم التسجيل.

Persona

الـ Persona

شخصية تمثيلية مبنية على بيانات حقيقية، تختصر "مين نصمّم له". تشمل الاسم، الهدف، والإحباط الأساسي.

Personaسارة، 29، أم عاملة. الهدف: ترتيب بقالة الأسبوع في أقل من 5 دقائق. الإحباط: تكرار إدخال نفس الطلبات كل مرة.

Journey · Flow

الـ Journey & Flow

Journey Map يرسم رحلة المستخدم العاطفية عبر المراحل، أمّا User Flow فيرسم المسار المنطقي للخطوات والقرارات داخل الواجهة.

ExampleJourney لرحلة "إرجاع منتج" أظهر نقطة إحباط واحدة كبيرة: انتظار رد الدعم 48 ساعة → أُضيف إرجاع ذاتي فوري.

الأداة	ماذا تجيب؟	متى تستخدمها؟	نوع البيانات
Persona	لمن نصمّم؟	بداية المشروع، لتوحيد فهم الفريق	تمثيلي مبني على بحث
Journey Map	كيف يشعر المستخدم عبر الرحلة؟	لاكتشاف نقاط الألم العاطفية	نوعي · Qualitative
User Flow	ما المسار من نقطة A إلى B؟	قبل الـ wireframing	منطقي · خطوات وقرارات
Usability Test	أين يتعثّر المستخدم فعلًا؟	على النموذج قبل الإطلاق	سلوكي · Behavioral

1) حدّد سؤال البحث

اكتب سؤالًا واحدًا واضحًا تريد الإجابة عليه. مثال: "لماذا لا يكمل المستخدمون عملية التسجيل؟" — لا تبدأ البحث بلا هدف.

2) اختر الأداة المناسبة

سؤال "كم؟" يعني استبيان. سؤال "ليش؟" يعني مقابلة. سؤال "هل ينجح التصميم؟" يعني اختبار قابلية استخدام.

3) اجمع وحلّل

ابحث عن الأنماط المتكررة، لا الآراء الفردية. ثلاثة مستخدمين يذكرون نفس المشكلة = إشارة حقيقية تستحق الفعل.

4) حوّل النتائج إلى قرار

كل نتيجة يجب أن تنتهي بقرار تصميمي. بحث بلا قرار = وقت ضائع. لخّص في Persona + Journey + قائمة فرص.

Case Study 01 · User Research

Madrasti — منصّة متابعة دراسية لأولياء الأمور

Discovery sprint · أسبوعان · معدّل تفعيل منخفض بعد التسجيل

التحدّي

المنصّة تسجّل آلاف الحسابات شهريًا، لكن 71% من أولياء الأمور لا يفتحون التطبيق مرة ثانية. الفريق كان يخمّن أن السبب هو "كثرة الإشعارات".

المقاربة

6 مقابلات + استبيان لـ 180 ولي أمر + اختبار قابلية استخدام على النموذج. بُني persona أساسي وJourney Map لأول 3 أيام بعد التسجيل.

النتيجة

السبب الحقيقي لم يكن الإشعارات — بل أن الشاشة الأولى فارغة حتى تربط المدرسة الطفل يدويًا. أُضيف ربط تلقائي عبر الرقم الوطني + شاشة "أول قيمة" تعرض درجات الطفل فورًا.

+44%Return rate (week 1)

-71%Empty first-screen exits

6Interviews that changed the brief

InterviewsSurveyUsability TestPersonaJourney Map

Madrasti had a 71% one-and-done problem the team blamed on notifications. Research revealed the real cause: an empty first screen until a child was manually linked. Auto-linking plus a "first value" screen lifted week-1 return rate by 44 points.

ابحث قبل أن تصمّم. كل ساعة بحث توفّر أيامًا من إعادة التصميم — والمستخدم الحقيقي دائمًا يفاجئك بشيء لم يخطر ببالك.

Research before you design. An hour of research saves days of redesign — real users will always surprise you with something you never assumed.

FigmaMazeGoogle FormsNotionFigJamDovetail

Chapter 04 · Structure

4) هندسة المعلومات (IA)

هندسة المعلومات هي فن تنظيم المحتوى وتسميته وربطه بحيث يجد المستخدم ما يريده بأقل عدد من القرارات. قبل أي شاشة أو لون، نرسم الهيكل: ماذا يوجد؟ أين يقع؟ كيف يتنقّل المستخدم بينه؟ هذا الفصل يأخذك من التسلسل الهرمي إلى الـ sitemap عبر أدوات عملية مثل card sorting.

Hierarchy

التسلسل الهرمي

ترتيب المحتوى من العام إلى الخاص في طبقات واضحة (أقسام ← فئات ← منتجات). كل طبقة تجيب على سؤال واحد، فلا يُغرق المستخدم بكل شيء دفعة واحدة.

Exampleفي متجر إلكتروني: الرئيسية ← «ملابس رجالي» ← «أحذية» ← «أحذية رياضية» ← صفحة المنتج. ثلاث نقرات تكفي للوصول.

Navigation

التنقّل (Navigation)

الشريط العلوي، القائمة الجانبية، الـ breadcrumbs، والفوتر — كلها وسائل تخبر المستخدم «أين أنا؟» و«إلى أين أذهب؟». تنقّل واضح يقلل الارتباك ومعدل الخروج.

ExampleMega menu في المتجر يعرض الأقسام الرئيسية عند الـ hover، مع breadcrumb «الرئيسية › رجالي › أحذية» يتيح الرجوع خطوة دون ضياع.

Card Sorting

الـ Card Sorting

أسلوب بحثي تُعطي فيه المستخدمين بطاقات بأسماء عناصر ويرتّبونها في مجموعات منطقية بالنسبة لهم. النتيجة: بنية مبنية على عقل المستخدم لا على هيكل الشركة الداخلي.

Exampleopen card sort على 30 منتجاً مع 8 مستخدمين كشف أنهم يبحثون عن «هدايا» كفئة مستقلة — أُضيفت للقائمة فارتفع اكتشاف المنتجات.

Sitemap

خريطة الموقع (Sitemap)

مخطّط شجري يعرض كل صفحات المنتج وعلاقاتها قبل التصميم. هي «المخطّط المعماري» الذي يتفق عليه الفريق ويكشف الصفحات المنسيّة أو المكرّرة مبكراً.

Examplesitemap للمتجر فصل «حسابي» إلى: الطلبات، العناوين، طرق الدفع، المفضّلة — بدلاً من صفحة واحدة مزدحمة.

Labeling

التسمية (Labeling)

اختيار كلمات الفئات والأزرار بلغة المستخدم لا بلغة الفريق التقني. التسمية الخاطئة تُخفي محتوى موجوداً وكأنه غير موجود.

Exampleتغيير زر «إتمام المعاملة» إلى «أكمل الشراء» وفئة «المنسوجات» إلى «ملابس» قلّل أسئلة الدعم حول مكان الأقسام.

Findability

سهولة الوصول

قابلية اكتشاف المحتوى عبر التصفّح أو البحث أو الفلاتر. حتى أفضل بنية تحتاج بحثاً داخلياً قوياً وفلاتر منطقية للمكتبات الكبيرة من المنتجات.

Exampleإضافة فلاتر «المقاس / اللون / السعر» + بحث يقترح تصحيحات إملائية رفع نسبة من يجدون منتجهم من أول محاولة.

مثال عملي: شجرة محتوى لمتجر إلكتروني

المستوى	المحتوى (Node)	الوظيفة
L0 · الجذر	الصفحة الرئيسية	نقطة الدخول + إبراز العروض والأقسام الرئيسية
L1 · الأقسام	رجالي · نسائي · أطفال · هدايا	التقسيم الأعلى حسب الجمهور (نتيجة card sorting)
L2 · الفئات	ملابس · أحذية · إكسسوارات	تضييق النطاق داخل كل قسم
L3 · الفئات الفرعية	أحذية رياضية · أحذية رسمية	صفحة قائمة منتجات (PLP) + فلاتر
L4 · المنتج	صفحة المنتج (PDP)	التفاصيل + الإضافة للسلة
مسارات أفقية	السلة · الدفع · حسابي · البحث	وظائف عابرة للأقسام متاحة من أي صفحة

1) اجمع المحتوى (Content Inventory)

اكتب قائمة بكل صفحة وعنصر يحتاجه المنتج. لا تنظّم بعد — فقط احصر ما لديك لتعرف الحجم الحقيقي.

2) شغّل Card Sorting

أعطِ مستخدمين حقيقيين بطاقات العناصر ودعهم يجمّعونها ويسمّون المجموعات. هذا يكشف نموذجهم الذهني (Mental Model).

3) ارسم الـ Sitemap

حوّل المجموعات إلى شجرة هرمية بمستويات واضحة، وحدّد المسارات الأفقية كالبحث والسلة.

4) اختبر بالـ Tree Testing

اطلب من مستخدمين إنجاز مهمة («جد حذاءً رياضياً») داخل الشجرة نصّياً قبل التصميم، وقِس نسبة النجاح ومكان الضياع.

البنية الواضحة تعني مستخدماً لا يضيع. حين يعرف المستخدم دائماً أين هو وكيف يصل لما يريد، تختفي نصف مشاكل الـ UX قبل أن نرسم أي شاشة. هندسة المعلومات الجيدة غير مرئية — لا يلاحظها أحد، لكن غيابها يلاحظه الجميع.

Clear structure means a user who never gets lost. Good information architecture is invisible — no one notices it, but everyone feels its absence. Fix the structure first, and half your UX problems disappear before a single screen is designed.

Case Study 04 · Information Architecture

إعادة هيكلة متجر «سوق» للإلكترونيات

IA redesign · 3 weeks · 1,200 منتجاً · مشكلة اكتشاف وتصفّح

التحدّي

قائمة تنقّل ضخمة بـ 40 فئة في مستوى واحد، وأسماء فئات بلغة المورّدين («وحدات طرفية»). المستخدمون يعتمدون على البحث فقط، ومعدل الوصول للمنتج عبر التصفّح كان منخفضاً جداً.

المقاربة

content inventory شامل، ثم open card sorting مع 12 مستخدماً أعاد تجميع الفئات إلى 6 أقسام بلغتهم. بنينا sitemap بثلاثة مستويات + breadcrumbs، واختبرناه بـ tree testing على 5 مهام قبل التصميم.

النتيجة

نسبة نجاح إيجاد المنتج عبر التصفّح ارتفعت بوضوح، انخفض الاعتماد على البحث وحده، وأصبح المستخدمون يكتشفون فئات لم يكونوا يعرفون بوجودها.

+38%Task success (tree test)

40→6Top-level categories

-24%Search-only sessions

Card SortingSitemapTree TestingLabeling

0نقرات كحد أقصى للوصول للمنتج

0أقسام رئيسية في القائمة

0مستخدماً في الـ card sort

0مستويات في الـ sitemap

FigmaFigJamOptimal WorkshopMazeMiroOptimalSortTreejack

Chapter 05 · Sketch

5) Wireframes و Prototypes

قبل ما تفتح الألوان والخطوط، اسأل نفسك: هل التدفّق نفسه منطقي؟ الـ wireframe بيختبر الفكرة والترتيب بأرخص وأسرع طريقة، والـ prototype بيخلّي الفكرة قابلة للتجربة قبل ما نصرف يوم واحد على UI كامل.

Before opening colors and fonts, test the flow itself. A wireframe validates structure cheaply and fast; a prototype makes it testable before you spend a single day on full UI.

Lo-fi

منخفض الدقة

مربعات وخطوط ونص placeholder. الهدف ترتيب العناصر والتدفّق فقط — مفيش لون ولا خط ولا أيقونة نهائية. يتعمل في دقائق ويترمى بدون ندم.

Exampleرسمة على ورقة لشاشة دفع: مستطيل «ملخّص الطلب»، حقل «الكوبون»، زر كبير «ادفع الآن» — كله رمادي بدون تفاصيل.

Mid-fi

متوسط الدقة

على Figma: spacing حقيقي، grid، نصوص فعلية، وتسلسل بصري واضح للأزرار والحقول — لكن بالأبيض والرمادي. هنا نحسم الـ hierarchy والترتيب قبل الهوية.

Exampleشاشة الدفع نفسها على Figma: 4 حقول مرتّبة، زر CTA بعرض كامل أسفل الشاشة، وخطوة «المراجعة» منفصلة عن «الدفع».

Hi-fi

عالي الدقة

التصميم النهائي: ألوان الهوية، الخطوط، الأيقونات، الصور، والـ states (hover / error / loading). قريب جدًا من المنتج الحقيقي وجاهز للـ handoff.

Exampleشاشة الدفع بالألوان الكاملة: زر «ادفع الآن» باللون الأخضر، رسالة خطأ حمراء عند رقم بطاقة خاطئ، وحالة تحميل أثناء التأكيد.

Prototype

Prototype تفاعلي

نربط الشاشات ببعضها بروابط وانتقالات (click → next screen) عشان المستخدم «يجرّب» التدفّق وكأنه منتج حقيقي — من غير كود. هدفه نكتشف لو الناس بتتوه فين قبل التطوير.

Exampleعلى Figma Prototype نربط زر «ادفع الآن» بشاشة «تم الطلب»، ونعطي 5 مستخدمين مهمة: «اشترِ هذا المنتج بكوبون خصم».

When to use

متى تستخدم كل مستوى؟

القاعدة بسيطة: ابدأ بأقل دقة ممكنة، واصعد فقط لما تتأكد إن المستوى الحالي «صحّ». كل ما الدقة أعلى، كل ما تغيير الفكرة أغلى.

Exampleفكرة جديدة غامضة → Lo-fi. ترتيب الشاشة محل خلاف → Mid-fi. تدفّق نريد اختباره مع مستخدمين → Prototype. جاهز للتسليم → Hi-fi.

المستوى	الأداة	الوقت	يجاوب على سؤال	متى تستخدمه
Lo-fi	ورق / قلم / Whiteboard	دقائق	هل الفكرة والتدفّق منطقيان؟	أول الأفكار، brainstorming سريع
Mid-fi	Figma (رمادي)	ساعات	هل الترتيب والـ hierarchy واضحان؟	قبل ما تلمس الهوية البصرية
Prototype	Figma Prototype / Maze	ساعات → يوم	أين يتعثّر المستخدم فعليًا؟	قبل التطوير، لاختبار التدفّق
Hi-fi	Figma (هوية كاملة)	أيام	هل المنتج جاهز ومُتقن للتسليم؟	بعد ما اتأكدت إن التدفّق صحّ

ارسم Lo-fi بسرعة

على ورقة، حدّد العناصر الأساسية لكل شاشة وترتيبها. لو لقيت الفكرة مش منطقية هنا، يبقى وفّرت أيام تصميم كاملة.

انقل لـ Mid-fi على Figma

spacing وgrid ونصوص حقيقية بالرمادي. احسم تسلسل الأزرار والحقول قبل أي لون أو خط.

اربط prototype واختبر مبكرًا

اربط الشاشات وأعطِ 3–5 مستخدمين مهمة محدّدة. راقب أين يترددون أو يضغطون غلط، وعدّل قبل ما تكمّل UI.

ارفع لـ Hi-fi بعد التأكد

بعد ما التدفّق ثبت، طبّق الهوية والـ states كاملة. دلوقتي بس التصميم النهائي يستاهل وقتك.

Case Study 01 · Wireframe Testing

اختبار شاشة الدفع — متجر إلكتروني للأجهزة المنزلية

Mid-fi wireframe + prototype · 4 أيام · قبل أي تصميم UI كامل

التحدّي

العميل أصرّ على شاشة دفع «من خطوة واحدة» فيها 11 حقلًا في صفحة طويلة. الفريق شكّ إنها هتربك المستخدم، لكن مفيش دليل بعد.

المقاربة

بدل ما نصمّم UI كامل، عملنا نسختين Mid-fi على Figma: نسخة الخطوة الواحدة، ونسخة مقسّمة لـ 3 خطوات. ربطناهم prototype واختبرناهم مع 6 مستخدمين بمهمة شراء واحدة.

النتيجة

4 من 6 تاهوا في النسخة الطويلة وسألوا «خلصت ولا لسه؟». النسخة المقسّمة عدّاها الجميع بسلاسة. أخدنا القرار في 4 أيام بتكلفة شبه صفر، قبل ما نبدأ Hi-fi.

4Dقرار بدل أسبوعين UI

-64%أخطاء التدفّق في الاختبار

6مستخدمين اختبروا قبل التطوير

Mid-fiFigma PrototypeUsability TestCheckout UX

Checkout test for a home-appliances store. Instead of building full UI, two Mid-fi wireframes (single-step vs 3-step) were prototyped and tested with 6 users. The split flow won — decision made in 4 days at near-zero cost, before any Hi-fi work.

اختبر مبكرًا و رخيصًا: كل مشكلة تكتشفها على wireframe بتوفّر عليك أضعاف وقتها لو اكتشفتها في Hi-fi أو بعد التطوير. الـ wireframe المتروكي مش فشل — هو أرخص نسخة من «تعلّمنا».

Test early and cheap: every problem caught on a wireframe saves you many times the cost of finding it in Hi-fi or after development. A discarded wireframe isn't failure — it's the cheapest version of "we learned something."

FigmaFigma PrototypeMazeWhiteboard / PaperBalsamiq

Chapter 06 · Visual Laws

6) مبادئ التصميم البصري

قبل ما نتكلم عن الألوان والخطوط، فيه قوانين بصرية بتتحكم في إزاي عين المستخدم بتتحرك على الشاشة وإيه اللي بتشوفه الأول. لما تتقن المبادئ الستة دي، أي تصميم في إيدك هيبقى أوضح وأهدأ — من غير ما تضيف أي عنصر جديد.

Six visual laws decide what the eye sees first and how it travels across the screen. Master them and any layout becomes clearer — without adding a single new element.

Hierarchy

التسلسل البصري

رتّب العناصر حسب أهميتها، عشان العين تعرف تبدأ منين وتروح فين. الحجم، الوزن، اللون، والمساحة هي أدواتك لتقول: «اقرأني الأول».

Exampleفي شاشة فاتورة: المبلغ المطلوب 320 ريال يظهر بخط كبير وغامق، ورقم الفاتورة وتاريخها بخط رمادي صغير تحته — فالعين تمسك المبلغ في أقل من ثانية.

Contrast

التباين

الفرق الواضح بين العناصر (لون فاتح/غامق، حجم كبير/صغير) هو اللي بيخلي المهم يطلع برّه ويلفت الانتباه. تباين ضعيف = كل حاجة بتغرق في بعضها.

Exampleزر «أكمل الدفع» أخضر صريح على خلفية بيضاء، بينما «إلغاء» مجرد نص رمادي بدون خلفية — التباين وحده يوجّه الإصبع للزر الصح.

Alignment

المحاذاة

خلّي العناصر تتبع خطوط وهمية مشتركة (يمين، يسار، أو منتصف). المحاذاة المنظمة بتدّي إحساس بالنظافة والاحتراف، وبتقلل العشوائية اللي بتتعب العين.

Exampleفي فورم تسجيل: كل الـ labels والحقول متحاذية على نفس الخط من اليمين (RTL)، فالعين تنزل عمودي مستقيم بدل ما تتنطط يمين وشمال بين كل سطر.

Proximity

التقارب

العناصر القريبة من بعض العقل بيقرأها كمجموعة واحدة. قرّب اللي مترابط وبعّد اللي مختلف — المسافة وحدها تكفي لتقول «دول مع بعض».

Exampleفي كارت منتج: الاسم والسعر والتقييم متلازقين كمجموعة، وبينهم وبين زر «أضف للسلة» مسافة أكبر — فالمستخدم يفهم إنهم معلومة واحدة والزر فعل منفصل.

Repetition

التكرار

كرّر نفس الأنماط (ألوان، أحجام، شكل الأزرار، المسافات) عبر الشاشات. التكرار بيبني اتساق وإحساس بالألفة، فالمستخدم يتعلم الواجهة مرة وحدة ويطبّقها في كل مكان.

Exampleكل الأزرار الرئيسية في التطبيق بنفس الأخضر، نفس الـ radius، ونفس الـ padding — فلما يشوف زر جديد لأول مرة يعرف على طول إنه «الفعل الأساسي» بدون ما يفكر.

Gestalt

مبادئ Gestalt

العقل بيلملم العناصر في أشكال وأنماط: التشابه، الإحاطة المشتركة، والاستمرارية. استغلها عشان تجمّع وتفصل من غير خطوط فاصلة كتير ولا حدود تقيلة.

Exampleفي dashboard، 4 أرقام إحصائية بنفس الستايل (Similarity) تتقرأ كصف واحد متجانس، وكل بطاقة محاطة بخلفية رمادية خفيفة (Common Region) تفصلها عن جارتها بدون أي بوردر.

المبادئ الستة دي مش زخرفة — كلها بتخدم هدف واحد: الوضوح. كل ما العين تلاقي تسلسل وتباين ومحاذاة ومجموعات منطقية، كل ما المستخدم يفهم الشاشة أسرع ويتعب أقل. لو تصميم وقع، 90% من الوقت السبب خرق واحد من دول.

These six laws aren't decoration — they all serve one goal: clarity. The more the eye finds hierarchy, contrast, alignment, and logical grouping, the faster users understand the screen and the less they tire. When a layout feels "off," it's usually one of these being broken.

Chapter 07 · Color

7) اللون (Color)

اللون ليس زينة فحسب، بل لغة تُشعِر المستخدم بالأمان أو الخطر، وتقوده عبر الواجهة، وتبني هوية المنتج. في هذا الفصل نتعلّم نظرية اللون من أساسها: عجلة الألوان، قاعدة 60-30-10 للتوازن، الألوان الدلالية (نجاح/خطأ/تحذير)، ثم التباين والإتاحة وقاعدة 4.5:1 التي تجعل النص مقروءًا للجميع.

Color Wheel

عجلة الألوان

أداة تنظّم الألوان حول دائرة وتساعدك على بناء تناغم: متشابهة (Analogous) متجاورة فهادئة، متكاملة (Complementary) متقابلة فحادة وعالية الجذب، وثلاثية (Triadic) متباعدة بالتساوي فمتوازنة وحيوية.

Exampleلزرّ "احجز موعدًا" نختار لونًا متكاملًا (مثل البرتقالي مقابل الأزرق الطبي) ليبرز فوق الخلفية الزرقاء الهادئة فيلفت العين فورًا.

60-30-10

قاعدة 60-30-10

وصفة بسيطة للتوازن: 60% لون أساسي/محايد يملأ المساحات، 30% لون ثانوي للعناصر الداعمة كالأقسام والأشرطة، و10% لون مميّز (Accent) يُحجَز للأفعال المهمة فقط. هذه النِّسَب تمنع الفوضى وتُبقي العين مرتاحة.

Exampleشاشة لوحة معلومات: 60% رمادي فاتح للخلفية، 30% أزرق طبي للبطاقات والرأس، 10% أخضر فقط لزرّ "تأكيد الحجز".

Semantic

الألوان الدلالية

ألوان لها معنى متّفق عليه يختصر القراءة: الأخضر = نجاح، الأحمر = خطأ/تدمير، الأصفر/الكهرماني = تحذير، الأزرق = معلومة. ثبّتها في نظام تصميمك كـ Tokens واستخدمها بانتساق عبر كل الشاشات.

Exampleفي نموذج تسجيل: شريط أخضر "تم حفظ بياناتك"، رسالة حمراء "البريد غير صحيح"، تنبيه كهرماني "كلمة المرور ضعيفة".

Contrast

التباين والإتاحة 4.5:1

التباين هو الفرق في السطوع بين النص وخلفيته. توصي معايير WCAG AA بنسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير (18pt+). النص المنخفض التباين يُتعب القارئ ويستبعد ضعاف البصر تمامًا.

Exampleنص رمادي فاتح (#9AA0A6) على أبيض يعطي 2.8:1 ويفشل؛ تغميقه إلى (#5F6368) يرفعه إلى 4.6:1 فينجح بلا تغيير في الهوية.

Tints & Shades

الدرجات والظلال

من اللون الواحد نشتق سُلّمًا من الدرجات (Tints بإضافة الأبيض) والظلال (Shades بإضافة الأسود) — مثلاً 50 إلى 900. هذا يمنحك ثراءً بصريًا منضبطًا للحالات: عادي، تمرير الماوس (Hover)، نشط، ومُعطّل.

Exampleزرّ أخضر أساسي 500، يصبح 600 عند Hover، و700 عند الضغط، و200 عند التعطيل — كلها مشتقة من لون واحد.

Culture

دلالة اللون والثقافة

معاني الألوان تختلف بين الثقافات والسياقات. في الخليج يرتبط الأخضر بالطمأنينة والصحة، بينما قد يعني الأحمر الخطر أو يُستخدم للتأكيد. اختبر دلالات الألوان مع جمهورك الفعلي قبل اعتمادها.

Exampleتطبيق صيدلية سعودي: استخدمنا الأخضر للهوية لارتباطه بالشفاء، وحجزنا الأحمر للتحذيرات الدوائية الحرجة فقط.

الدور (Role)	اللون المقترح	الاستخدام	التباين على أبيض
Success / نجاح	#2E7D32	تأكيد الحجز، اكتمال الإجراء	5.1:1 ✓
Error / خطأ	#C62828	فشل، حقل غير صالح، حذف	5.9:1 ✓
Warning / تحذير	#B26A00	انتباه، إجراء قابل للتراجع	4.6:1 ✓
Info / معلومة	#1565C0	نصائح، حالة محايدة	5.4:1 ✓
Neutral / محايد	#5F6368	نص ثانوي، حدود	4.6:1 ✓

ابدأ باللون الأساسي للهوية

اختر لونًا واحدًا يعكس شخصية المنتج (الثقة، الحيوية، الهدوء) واشتقّ منه سُلّم الدرجات الكامل.

أضِف لونًا مميّزًا واحدًا

لون متكامل أو ثلاثي يُحجَز للأفعال الأهم فقط — هذا هو الـ 10% في قاعدة 60-30-10.

ثبّت الألوان الدلالية

عرّف نجاح/خطأ/تحذير/معلومة كـ Tokens ثابتة لا تتغيّر بتغيّر الشاشة.

تحقّق من التباين

مرّر كل زوج (نص/خلفية) عبر فاحص تباين وتأكّد من بلوغ 4.5:1 قبل الاعتماد.

Case Study 01 · Healthcare Palette

تطبيق "شفاء" للرعاية الصحية

تطبيق حجز مواعيد وعرض نتائج تحاليل لعيادة متعددة التخصصات — جمهور واسع يشمل كبار السن

التحدّي

كانت اللوحة الأولى تعتمد أزرقًا واحدًا لكل شيء — الأزرار والروابط والتنبيهات — فاختلطت الإجراءات الحرجة بالعادية، وشكا مستخدمون كبار السن من صعوبة قراءة النصوص الرمادية الفاتحة.

المقاربة

بنينا نظام ألوان منضبط: أزرق طبي هادئ (#1565C0) للهوية بنسبة 60-30، وأخضر (#2E7D32) مُميَّز للأفعال الأساسية فقط، وألوان دلالية واضحة للنتائج. غمّقنا النص الثانوي ليبلغ 4.6:1 وأضفنا أيقونة ونصًا بجانب كل لون دلالي.

النتيجة

أصبحت الشاشات أوضح وأهدأ، وارتفع معدل إكمال حجز الموعد، وانخفضت تذاكر الدعم المتعلقة بـ"لم أجد زر التأكيد" بشكل ملحوظ بعد إبراز اللون المميّز.

+27%إكمال حجز الموعد

-38%تذاكر الدعم حول الأزرار

4.6:1أدنى تباين بعد التحسين

Color SystemAccessibilityHealthcareWCAG AA

0%لون أساسي/محايد

0%لون ثانوي داعم

0%لون مميّز للأفعال

4.5:1أدنى تباين للنص العادي

اللون وحده لا يكفي لنقل المعنى أبدًا. نحو 8% من الرجال يعانون من عمى ألوان (خاصةً تمييز الأحمر/الأخضر)، لذا أرفِق دائمًا اللون بإشارة ثانية: أيقونة، نص، أو نمط. لا تكتفِ بـ"الحقول الحمراء خطأ" — أضِف أيقونة تحذير ونصًا يشرح الخطأ.

Never use color as the only carrier of meaning. ~8% of men have color-vision deficiency (mostly red/green). Always pair color with a second cue — an icon, text label, or pattern — so the message survives even when the color isn't perceived.

FigmaWCAG 2.1 AAStarkColor Contrast AnalyzerMaterial Color ToolCoolorsDesign Tokens

Chapter 08 · Type

8) الخطوط (Typography)

الكتابة هي ٩٠٪ من أي واجهة. الطباعة الجيدة لا تُلاحَظ — يقرأ المستخدم بسلاسة و لا يشعر بالجهد. في هذا الفصل نتعلّم كيف نبني سلّمًا طباعيًا منظّمًا، و نختار اقترانًا متناغمًا للخطوط، و نضبط ارتفاع السطر و طوله ليصير النص مريحًا للعين. القاعدة الذهبية: القابلية للقراءة قبل الجمال دائمًا.

Type Scale

السلّم الطباعي

لا تختر الأحجام عشوائيًا. ابنِ سلّمًا بنسبة ثابتة (مثلًا ١.٢٥) لتنشأ هرمية واضحة بين العنوان و العنوان الفرعي و المتن.

Exampleقاعدة 16px ونسبة 1.25: ‎16 → 20 → 25 → 31 → 39px. كل حجم له دور: 16 للمتن، 25 لعنوان القسم، 39 لعنوان الصفحة.

Pairing

اقتران الخطوط

خطّان يكفيان: واحد للعناوين بشخصية قوية، و آخر للمتن مريح للقراءة الطويلة. التباين بينهما يخلق إيقاعًا بصريًا.

Exampleعنوان بخط Space Grotesk (Bold, هندسي حادّ) فوق متن بخط Inter (Regular, محايد و واضح). تباين في الشخصية مع انسجام في النسب.

Line Height

ارتفاع السطر

المسافة بين الأسطر تمنح النص هواءً يتنفّس. ضيّقة جدًا = ازدحام و تعب، واسعة جدًا = تفكّك. القاعدة: ١.٤–١.٦ للمتن.

Exampleمتن بحجم 16px مع line-height: 1.5 ‎(24px). العناوين الكبيرة تأخذ ارتفاعًا أقل (1.1–1.2) لأنها أسطر قصيرة.

Line Length

طول السطر (Measure)

السطر الطويل جدًا يُتعب العين عند العودة لبدايته، و القصير جدًا يقطع التدفّق. المدى المثالي ٦٠–٧٥ حرفًا للسطر الواحد.

Exampleفي مقال نصّي حدّد ‎max-width: 65ch — يضمن طولًا مريحًا بصرف النظر عن عرض الشاشة، فلا يمتدّ النص بلا نهاية على الديسكتوب.

Weight

الوزن للهرمية

الوزن (Bold / Regular / Light) أداة سريعة لتمييز الأهمية دون تكبير الحجم. استخدمه باعتدال — كل شيء غامق يعني لا شيء مهم.

Exampleفي بطاقة منتج: اسم المنتج Semibold 600، السعر Bold 700، الوصف Regular 400. ثلاثة أوزان بنفس الحجم تكفي لبناء الهرمية.

Contrast

التباين و الوضوح

أوضح خطّ يصبح غير مقروء فوق خلفية متقاربة اللون. تأكّد من تباين كافٍ بين النص و خلفيته، خاصة في الوضع الداكن.

Exampleنصّ رمادي ‎#8497AE فوق خلفية داكنة #0a1626 يحقق تباينًا 4.5:1 (معيار WCAG AA). أفتح من ذلك = إجهاد بصري.

اختر خطّ المتن أولًا

ابدأ بالخط الأكثر استخدامًا — المتن. اختره مريحًا للقراءة الطويلة، ثم ابنِ كل شيء حوله.

أضِف خطّ العنوان

اختر خطًا للعناوين يتباين في الشخصية لكن ينسجم في النسب. تجنّب خطّين متشابهين — لا فائدة منهما.

ابنِ السلّم

حدّد قاعدة (16px) و نسبة (1.25)، و ولّد منها أحجام العناوين. وثّقها كـ tokens قابلة لإعادة الاستخدام.

اضبط الإيقاع

اضبط ارتفاع السطر (1.5 للمتن) و طوله (65ch) و المسافات حول الكتل النصية حتى يتنفّس النص.

Example · Pairingاقتران عنوان/متن جاهز للنسخ: العنوان Space Grotesk 700 بحجم 39px و line-height 1.15؛ المتن Inter 400 بحجم 16px و line-height 1.6 و max-width 65ch. للعربية: Tajawal Bold للعنوان مع Cairo Regular للمتن — اقتران متناغم يدعم RTL بوضوح.

Case Study 01 · Readability First

إعادة تصميم مدوّنة «اقرأ»

مدوّنة مقالات طويلة كانت تعاني من معدّل ارتداد مرتفع و شكاوى من صعوبة القراءة

التحدّي

المتن بحجم 14px، أسطر تمتدّ لكامل عرض الشاشة (~120 حرفًا)، و ارتفاع سطر 1.2 ضيّق. القارئ يتعب بعد فقرتين و يغادر.

المقاربة

رفعنا المتن إلى 18px، قيّدنا العرض بـ 68ch، و وسّعنا ارتفاع السطر إلى 1.6. اقتران واحد: Tajawal للعناوين و Cairo للمتن، بثلاثة أوزان فقط.

النتيجة

ازداد متوسّط زمن القراءة و انخفض الارتداد بوضوح، دون إضافة أي محتوى جديد — مجرّد طباعة أفضل.

+42%متوسّط زمن القراءة

-31%معدّل الارتداد

68chطول السطر بعد الضبط

Type ScaleMeasureLine HeightRTL

0chطول السطر المثالي للقراءة

0خطّان يكفيان لأي مشروع

1.0ارتفاع السطر للمتن

القابلية للقراءة قبل الجمال. الخطّ المزخرف الذي يُبهر في الـ portfolio قد يكون كارثة في فقرة من ٣٠٠ كلمة. اسأل دائمًا: «هل يستطيع المستخدم قراءة هذا بسهولة على هاتفه في الشمس؟» إن كان الجواب لا، فالجمال بلا قيمة.

Readability beats beauty. A decorative font that wows in a portfolio can be a disaster in a 300-word paragraph. Always ask: can a real user read this comfortably on a phone in sunlight? If not, the aesthetics don't matter.

InterSpace GroteskTajawalCairotype-scale.comModular Scale65ch

Chapter 09 · Layout

9) التخطيط و المسافات

التخطيط الجيد يجعل العين تتنقّل بسلاسة. أدواتك: الشبكات (grids)، نظام مسافات منتظم (8pt)، و الفراغ الأبيض (whitespace). الفراغ ليس فراغًا — هو ما يمنح المحتوى أن يتنفّس و يُفهم.

tight

base

comfortable

section

block

page

نظام مسافات 8pt — كل القيم مضاعفات 4/8 فيصبح الإيقاع منتظمًا تلقائيًا

Grid

الشبكة

أعمدة و هوامش ثابتة تنظّم العناصر و تمنحك اتساقًا عبر الشاشات. 12 عمودًا هو المعيار الشائع للويب.

Exampleبطاقات منتجات على شبكة 12 عمودًا: 4 بطاقات × 3 أعمدة على الديسктоп، تتحوّل لعمود واحد على الموبايل.

Spacing

نظام 8pt

استخدم مضاعفات 8 (و 4 للتفاصيل) لكل الهوامش و المسافات. يلغي التخمين و يوحّد الإيقاع البصري.

Examplepadding البطاقة 24، المسافة بين العنوان و النص 8، بين البطاقات 16 — كلها من نفس السلّم.

Whitespace

الفراغ الأبيض

المسافة حول العناصر و بينها. الفراغ السخي يرفع الإحساس بالجودة و يقلّل الحِمل الإدراكي.

Exampleصفحة هبوط بفراغ واسع حول العنوان تبدو «فاخرة»؛ نفس المحتوى مزدحمًا يبدو رخيصًا و متعبًا.

القاعدة: جمّع المترابط (تقارب)، و باعِد المختلف. الفراغ المنتظم أقوى من أي خط فاصل.

Group what's related, separate what isn't. Consistent spacing communicates structure better than dividers ever will.

Chapter 10 · Systems

10) المكوّنات و أنظمة التصميم

بدل تصميم كل شاشة من الصفر، تبني «لُبنات» قابلة لإعادة الاستخدام. نظام التصميم (Design System) = مكوّنات + قواعد + tokens، يجعل المنتج متّسقًا و الفريق أسرع.

Atomic Design

من الذرّة إلى العضو

Atoms (زر، حقل) → Molecules (حقل بحث) → Organisms (شريط تنقّل) → Templates → Pages. تبني الكبير من الصغير.

Exampleزر + أيقونة + نص = «بطاقة منتج» (molecule)، و صفّ منها = «قائمة منتجات» (organism).

Tokens

الـ Design Tokens

متغيّرات مسمّاة للقيم (لون primary، نصف القطر، المسافة). تغيّرها في مكان واحد فيتغيّر المنتج كله.

Exampletoken «color-primary» = أخضر العلامة؛ لو تغيّرت الهوية، تعدّله مرة فتنتشر عبر كل الشاشات.

Consistency

الاتساق

نفس الزر، نفس السلوك، في كل مكان. الاتساق يبني ثقة المستخدم و يقلّل ما يحتاج تعلّمه.

Exampleزر «حفظ» بنفس اللون و المكان في كل الشاشات → المستخدم يجده دون تفكير.

وثّق حالات كل مكوّن: default · hover · active · focus · disabled · loading · error. المكوّن غير الموثّق يُساء استخدامه.

Document every component's states (default, hover, active, focus, disabled, loading, error). An undocumented component will be misused.

Chapter 11 · Motion

11) التفاعل و الحركة

الحركة الجيدة تشرح ما حدث و توجّه الانتباه — لا تتباهى. الفيدباك الفوري، و الانتقالات السلسة، و حالات العنصر الواضحة، هي ما يجعل الواجهة تبدو «حيّة» و موثوقة.

Micro-interactions

التفاعلات الدقيقة

استجابة صغيرة لفعل صغير: قلب ينبض عند الإعجاب، زر يهتزّ عند الخطأ. تصنع البهجة و الوضوح.

Exampleأيقونة «أضِف للسلة» تتحوّل لعلامة ✓ للحظة بعد الضغط → تأكيد فوري دون رسالة.

Feedback & States

التغذية الراجعة و الحالات

كل فعل يحتاج ردًّا مرئيًا خلال 100ms. وفّر حالات: تحميل، فارغ، خطأ، نجاح — لا تترك المستخدم في الفراغ.

Exampleزر «إرسال» يصبح spinner أثناء الحفظ ثم ✓ — المستخدم يعرف أن النظام يعمل.

Timing

التوقيت و الـ Easing

150–300ms للتفاعلات الصغيرة، ease-out للدخول. حرّك transform و opacity فقط (أداء سلس)، و احترم reduced-motion.

Exampleقائمة منسدلة تنزلق ease-out في 200ms أنعم بكثير من ظهور مفاجئ بـ 0ms.

قاعدة ذهبية: كل حركة يجب أن تحمل معنى (سبب → نتيجة). الحركة الزخرفية تشتّت و تتعب.

Every animation must express cause and effect. Decorative-only motion distracts and fatigues — and always honor prefers-reduced-motion.

Chapter 12 · Accessibility

12) إتاحة الوصول (Accessibility)

التصميم المتاح يخدم الجميع — ذوي الإعاقة، و كل مستخدم في ظرف صعب (شمس قوية، يد مشغولة، إنترنت ضعيف). الإتاحة ليست إضافة، بل جزء من جودة التصميم.

Contrast

التباين

نسبة تباين النص مع خلفيته ≥ 4.5:1 (و 3:1 للنص الكبير). نص رمادي فاتح على أبيض = غير مقروء.

Exampleافحص الألوان بأداة contrast checker قبل التسليم؛ #999 على أبيض يرسب الاختبار.

Keyboard

لوحة المفاتيح

كل شيء قابل للاستخدام بـ Tab/Enter، مع focus ring واضح. لا تحذف الـ outline أبدًا دون بديل.

Exampleنموذج يُملأ و يُرسل بالكيبورد فقط، و حلقة التركيز ظاهرة على كل حقل.

Targets

أحجام اللمس

أصغر هدف لمس 44×44px مع مسافة كافية بينها — تمنع الضغطات الخاطئة على الموبايل.

Exampleأيقونة حذف 16px داخل منطقة لمس 44px (hit area) — تبدو صغيرة لكنها سهلة اللمس.

Not color only

لا تعتمد على اللون وحده

أضِف أيقونة أو نصًّا مع اللون. 1 من 12 رجل لا يميّز الأحمر/الأخضر بسهولة.

Exampleحالة الخطأ = لون أحمر + أيقونة ⚠ + نص «بريد غير صحيح»، لا لون أحمر فقط.

ARIA & alt

للنصوص و الأيقونات

صور لها alt وصفي، و أزرار الأيقونات لها aria-label. قارئ الشاشة «يرى» بالنص لا بالشكل.

Exampleزر أيقونة بحث: aria-label="بحث" — بدونها يسمع المستخدم «زر» فقط.

Motion

احترم reduced-motion

بعض المستخدمين تزعجهم الحركة (دوار). وفّر نسخة هادئة عند تفعيل التفضيل.

Exampleعند prefers-reduced-motion تُلغى الانتقالات الكبيرة و يظهر المحتوى مباشرة.

الإتاحة ليست رفاهية — في كثير من الدول هي مطلب قانوني، و دائمًا هي علامة احترافية. صمّم للجميع.

Accessibility isn't optional — it's a legal requirement in many regions and always a mark of craft. Design for everyone.

Chapter 13 · Heuristics

13) قواعد Nielsen العشر للاستخدام

عشر قواعد ذهبية يستخدمها المصمّمون لتقييم أي واجهة بسرعة (heuristic evaluation). احفظها — فهي «قائمة فحص» الجودة.

#	القاعدة	مثال
1	وضوح حالة النظام	شريط تقدّم يقول «جارٍ الرفع 60%» بدل دوران بلا نهاية
2	التطابق مع العالم الواقعي	أيقونة سلة للتسوّق، و لغة المستخدم لا لغة المبرمج
3	تحكّم المستخدم و حريته	زر «تراجع/إلغاء» واضح بعد أي فعل
4	الاتساق و المعايير	زر «حفظ» بنفس الشكل و المكان في كل الشاشات
5	منع الأخطاء	تعطيل زر الإرسال حتى تكتمل الحقول المطلوبة
6	التعرّف لا التذكّر	إظهار الخيارات بدل مطالبة المستخدم بتذكّر أمر
7	المرونة و الكفاءة	اختصارات للخبراء + مسار بسيط للمبتدئين
8	تصميم جمالي بسيط	إزالة كل ما لا يخدم المهمة — لا حشو
9	مساعدة المستخدم على تصحيح الأخطاء	رسالة خطأ تشرح السبب و الحل، لا «خطأ 404» فقط
10	المساعدة و التوثيق	بحث سهل في المساعدة و نصائح في السياق

طبّقها كقائمة فحص: امشِ على واجهتك و اسأل عن كل قاعدة «هل أحققها؟». تكتشف نصف المشاكل في دقائق.

Use them as a checklist: walk your UI and ask each rule "do I satisfy this?" — you'll catch half your issues in minutes.

Chapter 14 · Toolkit

14) أدوات المصمّم

الأداة تخدم العملية لا العكس. ابدأ بأداة واحدة (Figma غالبًا) و أتقنها قبل أن تتنقّل. هذه خريطة الفئات.

التصميم

تصميم الواجهات و الأنظمة، تعاون لحظي في المتصفح.

FigmaSketchPenpot

التعاون و العصف

سبّورات بيضاء، خرائط رحلة، جلسات أفكار.

FigJamMiro

النماذج التفاعلية

تحويل التصميم لتجربة قابلة للنقر و الاختبار.

FigmaFramerProtoPie

اختبار المستخدم

اختبارات قابلية الاستخدام و heatmaps و مقاييس.

MazeUseberryHotjar

الأيقونات و الأصول

أيقونات و صور و رسوم متّسقة و مجانية.

LucideIconifyunDraw

الألوان و الخطوط

لوحات ألوان، تباين، و اقتران خطوط.

CoolorsRealtime ColorsFontpair

ابدأ بـ Figmaأتقن أداة قبل التنقّلالأداة وسيلة لا غاية

لا تطارد كل أداة جديدة. إتقان Figma + فهم المبادئ يكفيك 90% من العمل. الباقي تتعلّمه عند الحاجة.

Don't chase every new tool. Mastering Figma plus the principles covers 90% of the work; learn the rest when you actually need it.

Chapter 15 · Success Stories

15) قصص نجاح (Case Studies)

النظرية تُفهم بالأمثلة. هذه ثلاث قصص واقعية يظهر فيها أثر قرارات التصميم على أرقام حقيقية.

Case Study 01 · Checkout

إعادة تصميم صفحة الدفع

متجر إلكتروني يعاني من هجر مرتفع للسلة

التحدّي

68% من المستخدمين يتركون السلة عند الدفع — خطوات كثيرة و حقول غامضة و إجبار على إنشاء حساب.

المقاربة

دمج الخطوات في صفحة واحدة، دفع كضيف، شريط تقدّم واضح، و تحقّق فوري من الحقول.

النتيجة

مسار أقصر و أوضح رفع إتمام الشراء بشكل ملموس و قلّل تذاكر الدعم.

-34%هجر السلة

+28%إتمام الشراء

3→1خطوات الدفع

FlowFormsGuest checkout

Case Study 02 · Onboarding

تبسيط تجربة أول استخدام

تطبيق SaaS بمعدّل تفعيل منخفض

التحدّي

المستخدم الجديد يواجه شاشة فارغة معقّدة فيغادر قبل أن يصل لقيمة المنتج.

المقاربة

onboarding من 3 خطوات، حالة فارغة تعليمية، و «إنجاز سريع» في أول دقيقة.

النتيجة

وصل المستخدمون لـ «لحظة القيمة» أسرع فارتفع التفعيل و البقاء.

+41%التفعيل

+19%البقاء (W1)

-50%زمن أول قيمة

OnboardingEmpty statesActivation

Case Study 03 · Accessibility

تحسين الإتاحة وسّع القاعدة

منصّة محتوى تتجاهل معايير الوصول

التحدّي

تباين ضعيف، لا تنقّل بالكيبورد، و صور بلا alt — استبعاد شريحة كبيرة و مخاطر قانونية.

المقاربة

رفع التباين لـ AA، دعم كامل للكيبورد و قارئ الشاشة، و نصوص بديلة لكل وسائط.

النتيجة

تجربة أفضل للجميع، تحسّن SEO، و وصول لمستخدمين جدد كانوا مستبعَدين.

AAتوافق WCAG

+15%قاعدة المستخدمين

100%تنقّل بالكيبورد

A11yWCAGInclusive

الدرس المشترك: قرار تصميم صغير (خطوة أقل، تباين أعلى) قد يحرّك أرقامًا كبيرة. قِس دائمًا أثر تصميمك.

Common thread: one small design decision (fewer steps, more contrast) can move big numbers. Always measure the impact of your design.

Chapter 16 · 0 → Hero

16) خريطة التعلّم: من الصفر إلى الاحتراف

رحلة ممتعة في أربع محطات. لا تقفز — كل محطة تبني التي بعدها. و تذكّر القاعدة الذهبية: تعلّم بالبناء.

0محطات

0فصلًا في الرحلة

0قواعد استخدام

0%عملي بالتطبيق

المحطة	التركيز	المهارات	المخرج
1 · الأساسيات	الفهم	UX/UI، المبادئ، اللون، الخط، التخطيط	تنقد أي واجهة بوعي
2 · الأدوات و التطبيق	التنفيذ	Figma، wireframes، prototypes، نظام تصميم	تصمّم شاشات كاملة
3 · مشاريع و Portfolio	الإثبات	أبحاث، case studies، عرض القرارات	portfolio يحكي قصصًا
4 · التخصّص	التعمّق	Product Design · UX Research · Design Systems	خبير في مسارك

أفضل مشروع تبدأ به: أعِد تصميم تطبيق تحبّه. اكتب المشكلة، ابحث، صمّم، و وثّق قراراتك — هذا وحده portfolio.

Best first project: redesign an app you love. State the problem, research, design, and document your decisions — that alone is a portfolio piece.

'RenadEid'

1) Roadmap عملي من استلام الـ Brief إلى الـ Handoff

التحدي

الأسلوب

النتيجة

2) Roadmap مبني على مبادئ UI / UX

مبادئ UX الأساسية

مبادئ UI الأساسية

Checklist لكل شاشة

التحدي

المبادئ المُطبَّقة

النتيجة

3) أمثلة على E-commerce و SaaS Models

E-commerce Examples

SaaS Model Examples

التحدي

الفصل في التفكير

النتيجة

4) Roadmap من الفكرة إلى Production

Suggested Tool Ownership

Engineering & Launch Stack

Suggested Tools to Complete Your Stack · أدوات إضافية مقترحة

التحدي

استخدام الأدوات

النتيجة

5) Practical SOP / SOP عملي ثابت

Arabic SOP

English SOP

التحدي

الالتزام بالـ SOP

النتيجة

6) Final Reminders

لـ Junior Designer

لـ Product Team

لـ Engineering

AIMastery

1) ما هي أدوات الـ AI؟

محادثة و تفكير

بحث بمصادر

وكلاء برمجة و IDEs

استوديو و تجريب

بناء و نشر و backend

صور و تصميم بصري

معرفة و ملاحظات

2) كيف تستخدمها في بيئة العمل؟

البحث و الفهم

الكتابة و التوثيق

البرمجة

التصميم

البيانات

التواصل

3) متى تختار الأداة المناسبة؟

4) المفاهيم الأساسية

Large Language Model

النماذج و أحجامها

الوكلاء

المهارات

Model Context Protocol

الـ Tokens

الذاكرة

السياق (Context)

5) ما هو الـ "Harness"؟

كيف تطوّر و تحسّن الـ Harness؟

قِس قبل أن تحسّن

حسّن الـ context

أضِف أدوات أدق

كرّر على الـ prompt و الحلقة

6) بناء منتجات AI بأشكال مختلفة

التحدّي

المقاربة

النتيجة

التحدّي

المقاربة

النتيجة

التحدّي

المقاربة

النتيجة

7) ارسم الصورة الكاملة (Mind-Map)

ابدأ بالمركز

فرّع و اربط

'Renad
Eid'

AI
Mastery

UI/UX
Hero