ProgrammerKhaled
الخدماتالعمليةالسعرتواصل الآن
عالعربيةENEnglish
2026FEED2026
Menu2026
01الخدمات02العملية03السعر04تواصل الآن
عالعربيةENEnglish
FEED
دراسة حالة

وثاق

صفحة تشرح تفكير مكتب محاماة — لا تسرده

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

زيارة الموقع الحي
الدور
تصميم وتطوير كامل
المجال
مكتب محاماة — الرياض
النطاق
صفحة واحدة · عشرة أقسام
وثاق

التشخيص

ثلاثة أشخاص قالوا الملاحظة نفسها: «كأنها جريدة»، «حسّيت أن الصفحة أقرب لتصفح ملف Word» — ولا أحد عرف السبب. توقّفت عن الجدال وقِست الصفحة: 5,014 حرفاً بلا صورة واحدة، وتباين 1.15:1 بين خلفيتين يُفترض أنهما متناوبتان، وستة أقسام من ستة بعرض 1430px بالضبط. الصفحة لها شكل واحد مكرّر ست مرات — لهذا قُرئت كمقال طويل مهما تغيّرت الكلمات.

الفكرة والتنفيذ

01

شكل القسم = شكل تفكيره

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

02

الدُّرج والأبواب والسجلّ

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

03

العمود الفقري

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

التقنيات:Next.jsGSAPTailwind v4AVIF

ما تكلفته «العربية أولاً» فعلياً

الحجم الاسمي ليس حجم القراءة

جسم الحرف العربي يقف عند 40% من الـ em مقابل 48% لارتفاع x اللاتيني — فـ 18px عربي تُقرأ أصغر بثلاث درجات. رُفع مقياس الطباعة درجة كاملة.

scrollLeft سالب في RTL

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

المنطقي لا يختلط بالفيزيائي

‏translate فيزيائي وinset منطقي — يعملان معاً في LTR وينكسران بصمت في RTL. اكتُشف بقياس عنصر «موسّط» فوُجد خارج المركز.

مقيس لا مُدّعى

القاعدة في هذا المشروع: أي ادعاء تصميمي يساوي قيمة قياسه. القياس أمسك ما لا تمسكه المراجعة.

ما كان يُعتقدما أظهره القياسبعد
عناوين الأقسام غير متسقةتفاوت 2.2× (40 ← 88px) وأكبرها يتفوّق على عنوان الصفحة45 ← 60px
رقم الفهرس زخرفي2.79:1 — رسوب في معيار AA6.10:1
خط الهامش باهت على الداكن1.00:1 — غير موجود فعلياً على ثلاث شاشات1.97:1
فقرة أطول قليلاً156 حرفاً في السطر مقابل 43–79 في كل مكان52

ما الذي شُحن

100KB
إجمالي وزن الخطوط — ثلاثة أوزان للغتين
44KB
أكبر صورة عند 1920px بصيغة AVIF
4
بنى أقسام مختلفة من بنية واحدة

من داخل الصفحة

01مجالات الممارسة — السجلّ المسطّر
مجالات الممارسة — السجلّ المسطّر
02لماذا وثاق — كيف نصنع الفرق
لماذا وثاق — كيف نصنع الفرق
03التواصل والخاتمة
التواصل والخاتمة

عندك محتوى كثير وصفحة تُقرأ كملف Word؟

خلينا نعطي كل قسم الشكل الذي يناسب تفكيره — ونقيس الفرق بدل ما ندّعيه.

احكيلي عن مشروعك
رجوع للعملية

من الصفر لموقع حقيقي

العملية
  • الخدمات
  • العملية
  • السعر
  • تواصل الآن
وظّفني الآن
شوف أكوادي
تواصل معي
ورا الكواليس
تواصل مباشر
  • Upwork
  • GitHub
  • LinkedIn
  • Instagram
  • WhatsApp
  • سياسة الخصوصية
  • شروط الاستخدام

© 2026 KHALED

2026 KHALED FULL STACK ENGINEER ©