ما توافق عليه في التصميم هو ما يُنفَّذ.

أنا إسلام ناصر، قائد فريق UI/UX والواجهات الأمامية في TakTek. أخطط مسارات الاستخدام، وأصمم الشاشات والمكوّنات التي تقوم عليها، ثم أكتب الكود بنفسي. سبع سنوات من هذا العمل، بالعربية والإنجليزية.

mo3ta.ps
معطى على شاشة حاسوب
معطى على الهاتف
mo3ta.ps على حاسوب وعلى هاتف

خمسة مشاريع صممتها، وبنيت أربعة منها.

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

معطى Mo3ta

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

الدور
تصميم UX وUI، ثم البناء كله
التركيز
الأرقام بالعربية، ومكوّنات الخريطة والرسوم البيانية، والعرض من الخادم
التقنيات
Vue 3 وInertia مع العرض من الخادم، على Laravel
الموقع
mo3ta.ps
مقدمة من 12 ثانية مصنوعة من شعار معطى وألوانه وحدود خريطته. ولحظتها الوسطى هي قاعدة الحالة: الرقم يصل ومعه تاريخه ومصدره.
mo3ta.ps/daily
لوحة معطى اليومية بالعربية: ستة أرقام رئيسية، وحقل بحث، ومرشحات للمنطقة والفترة، وأعلى الخريطة.
اللوحة اليومية. مرشحات المنطقة والفترة والمحافظة فوق الخريطة، وتاريخ آخر تحديث في الترويسة.
الصفحة الرئيسية لمعطى على الهاتف: خريطة فلسطين وحولها أربعة أرقام رئيسية.
الصفحة الرئيسية بعرض الهاتف. تبقى الخريطة في وسط الشاشة.
اللوحة اليومية على الهاتف: الأرقام في عمودين، ثم البحث، وأزرار المناطق، وقائمة المحافظات، وتبويبات الفترة.
اللوحة نفسها على الهاتف. تنزل الأرقام إلى عمودين، وتتراص المرشحات تحت البحث.

القرار. كل ما حول البيانات هادئ، لتحمل الخريطة والرسوم البيانية اللون، ولا يظهر رقم أبدًا من دون تاريخه ومصدره.

أين كانت الأرقام

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

لماذا تُعرض كل صفحة من الخادم

الرقم الذي لا تقرؤه محركات البحث رقم لا يجده أحد، فاستُبعدت مبكرًا فكرة لوحة تعمل في المتصفح وحده. الصفحات تُبنى على الخادم عبر Inertia وتصل HTML حقيقيًا، ثم يضيف Vue 3 فوقها الطبقة التفاعلية.

مجموعة مكوّنات واحدة لكل رقم

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

الأرقام، بالعربية

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

النتيجة

  • المنصة منشورة على mo3ta.ps، ومكتبة المؤشرات والخريطة ولوحات البيانات تعمل فعليًا.

ديفلو Devlo CMS

تطبيق Laravel واحد يشغّل 24 موقعًا إخباريًا وإعلاميًا، معظمها بالعربية، ولكل منها قالبه ووحداته ولغاته وفريق تحريره. صممت لوحة التحرير ونموذج القوالب، ثم بنيتهما.

الدور
التصميم والتطوير الكامل، ومالك منتج الواجهة الأمامية
التركيز
نموذج القوالب، ولوحة بثلاث لغات، وضوابط تمنع الأخطاء الصامتة
التقنيات
Blade وLivewire وAlpine على Laravel، مع MySQL وRedis
العرض التجريبي
demo.taktek.co، بتسجيل دخول
مقدمة من 15 ثانية مصنوعة من الصفحات الرئيسية لستة من المواقع. ولحظتها الوسطى هي قرار الحالة: إطار واحد يأخذ قوالب ثلاثة مواقع أخرى ولغاتها، بينما تبقى الوحدات والكود في مكانها.
  • الصفحة الرئيسية لموقع قدس الإخباريةقدس الإخبارية Quds News Network
  • الصفحة الرئيسية لموقع Maktoob MediaMaktoob Media
  • الصفحة الرئيسية لموقع الهدهدالهدهد Hodhod
  • الصفحة الرئيسية لموقع تيقنتيقن Tayaqan
  • الصفحة الرئيسية لموقع عدني كاستعدني كاست Adeni Cast
  • الصفحة الرئيسية لموقع أرشيف صالح العاروريأرشيف صالح العاروري Saleh Al-Arouri Archive
ستة من المواقع الأربعة والعشرين. قاعدة الكود نفسها والوحدات نفسها، وتختلف القوالب واللغات والوحدات المفعّلة.
الصفحة الرئيسية لشبكة قدس الإخبارية على الهاتف: الخبر الرئيسي فوق صورة، ثم قائمة عناوين بصور مصغرة.
شبكة قدس الإخبارية بعرض الهاتف. صفحتها الرئيسية مجمّعة من الوحدات نفسها التي تستخدمها بقية المواقع.

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

قالب واحد، من دليل هوية من ست صفحات: إيواد

  • عنابي#3D1720الأسطح الأساسية والعناوين
  • ذهبي#A8824Aللشعار فقط: المربعات والحدود والنص الكبير
  • ذهبي للنصوص#7E5F31أي نص ذهبي، 5.03:1 على الورق
  • ورقي#F0EDE6أسطح التحرير
  • كريمي#F3EEEAالنص على العنابي
  • حبري#1A1A1Aنص المتن

جاء إيواد، وهو معهد أبحاث دفاعية، بشعار ومساحته الآمنة وستة ألوان. ومنها صممت سلّم الخطوط والمسافات والمكوّنات وألوان الأقسام. الذهبي الرسمي يبلغ 3.02:1 على الورق، وهذا لا يكفي للنص، فصار يُستخدم للتمييز فقط، ويحمل ذهبي أغمق كل كلمة ذهبية.

  • صفحة القسم العالمي، بلونه #33526Bالقسم العالمي #33526B 7.02:1
  • صفحة القسم الإقليمي، بلونه #2F5D53القسم الإقليمي #2F5D53 6.39:1
  • صفحة قسم العقائد، بلونه #3D1720قسم العقائد #3D1720 13.39:1
  • صفحة القسم التعليمي، بلونه #7E5F31القسم التعليمي #7E5F31 5.03:1
  • صفحة قسم الإرث العسكري، بلونه #5C4632قسم الإرث العسكري #5C4632 7.56:1
الصفحات الرئيسية للأقسام الخمسة، ملتقطة من نسخة القالب ومحتواه التجريبي. تتشارك تخطيطًا واحدًا ومجموعة مكوّنات واحدة، ولكل منها لونه المميز، مفحوصًا على الورق، ووحدة خاصة به: مصفوفة، وأطلس، وخريطة للمدارس الفكرية، ومسارات تعلّم، وسجل للمعارك.

أربع وعشرون نسخة منفصلة

كانت غرف الأخبار تُبنى واحدة بعد الأخرى، كل منها نسخة من سابقتها. الإصلاح في موقع لا يصل إلى البقية أبدًا، وكل عميل جديد يعني أسابيع من العمل المكرر.

وحدات وقوالب ومفاتيح تشغيل

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

قالب من دليل هوية

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

لوحة لا تعرض إلا ما تستخدمه غرفة الأخبار

تعمل لوحة التحرير بالعربية والإنجليزية والتركية، ومن اليمين إلى اليسار افتراضيًا. تعطيل وحدة يزيل مسارها وبندها في القائمة الجانبية وصلاحيتها معًا، فلا يصادف المحرر أبدًا بندًا لا يؤدي إلى شيء. وكل عنوان في الواجهة مفتاح ترجمة، وعددها 5,874، تُفحص قبل كل حفظ في المستودع.

تفاصيل صغيرة، تُحسم مرة واحدة

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

فحوص لما لا يراه أحد

بعض الأعطال لا تُظهر خطأ أبدًا: نص إنجليزي يظهر بالعربية لأن العربية هي اللغة الاحتياطية، وصورة مشاركة يرفضها الزاحف بصمت، وصلاحية موجودة على مسار واحد ولا مكان غيره. كتب زميل في الفريق أمرًا لكل منها يفشل قبل أن يصل التعديل إلى المستودع، عبر 456 مكوّنًا في Livewire و839 ملف عرض في Blade.

قياس غرفة أخبار حية

كان موقع مكتوب ميديا، الموقع الإنجليزي على المنصة، يبدو بطيئًا على الهاتف. وكانت نتيجة Lighthouse على الموقع المنشور تتغير 20 نقطة بين تشغيلين متطابقين، فقبل أن ألمس الموقع بنيت أداة قياس تستطيع التمييز بين نسختين. انخفضت الخطوط من 749 KB إلى 78 KB، والأيقونات من 302 KB إلى 31.6 KB. أما النصيحة المعتادة، content-visibility على الأقسام خارج الشاشة، فسجّلت 84 مقابل 83، واستُبعدت.

النتيجة

  • يشغّل 24 موقعًا، منها شبكة قدس الإخبارية ومكتوب ميديا وتيقن والهدهد وعدني كاست وأرشيف صالح العاروري.
  • شبكة قدس الإخبارية، لمستخدمي Chrome الفعليين خلال 28 يومًا: سريع، وLCP عند 2.33 ثانية، وINP عند 104 ملي ثانية.

ما سأغيّره لو بدأت من جديد

أوامر الحماية جاءت واحدًا تلو الآخر، ومتأخرة عمّا ينبغي: كان على كل جزء من النظام أن يبدأ بفحصه. كتابة الفحص أولًا تجبرك على أن تحدد معنى الصحيح، وهذا هو الجزء الذي كان ناقصًا فعلًا.

Kevla Campa

موقع تسويقي لكرفان KEVLA CAMPA، وهو كرفان على شكل قطرة مبني هيكلًا واحدًا من الكيفلار وألياف الكربون. هذا تصور تصميمي وليس موقعًا منشورًا لشركة: صممته وكتبته كله يدويًا في HTML وCSS وJavaScript، بلا إطار عمل ولا خطوة بناء.

الدور
التصميم والواجهة الأمامية، تصور تصميمي
التركيز
مشاهد تمرير تشرح الهيكل، وحركة تبقى سلسة، وإمكانية وصول مفحوصة
التقنيات
HTML وCSS ووحدات ES، بلا إطار عمل ولا خطوة بناء
العرض المباشر
imsemoo.github.io/kevla-campa
مقدمة من 11 ثانية، مولّدة من HTML بخطوط الموقع وألوانه وصوره. تبدأ بمشهد مسح الطبقات من الصفحة الرئيسية.
imsemoo.github.io/kevla-campa
الصفحة الرئيسية لموقع Kevla Campa: العنوان Built different فوق صورة الكرفان الأبيض، ومعه زرّا Explore Kevla وEnquire now.
الصفحة الرئيسية، أول المشاهد الأربعة المثبّتة. مع التمرير تنجرف الصورة وتكبر تحت العنوان.
الصفحة الرئيسية على الهاتف: العنوان، والزران، والمزايا الأربع في عمودين.
الصفحة الرئيسية بعرض الهاتف. تنزل المزايا الأربع إلى عمودين.
مستكشف الكرفان على الهاتف: تبويبات العرض، وصورة الكرفان بنقاط مرقّمة، وملاحظات النقطة 08، الهيكل الأحادي القطعة.
المستكشف على الهاتف. تبقى النقاط على الصورة، وتظهر ملاحظات النقطة المختارة تحتها.

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

النظام: هيكل داكن، ولون إبراز واحد ليموني

  • الأرضية#07090Aالصفحة، داكنة افتراضيًا
  • السطح#0E1214إطارات الصور والمربعات والمستكشف
  • الفاتح#EEF0EDالأقسام الفاتحة، بنص حبري
  • الليموني#6BD117الروابط والتركيز والتحديد، 10.2:1 على الأرضية
  • السماوي#12B7C9حالة المرور وعناوين الأقسام على الداكن
  • السماوي على الفاتح#076570الدور نفسه على الأقسام الفاتحة، 5.9:1

خط Archivo يحمل كل ما هو كبير، بعرض موسّع بين 110 و118 بالمئة، وخط Azeret Mono يحمل التسميات الصغيرة، ولا يقل أبدًا عن 11 بكسل. السماوي ينخفض إلى 2.1:1 على الأقسام الفاتحة، فلها سماوي أغمق، وكل لون شبه شفاف ممزوج من هذه المتغيرات عبر color-mix().

  • مسح الطبقات في منتصفه: خط أخضر كشف الكرفان الأبيض المكتمل فوق نسيج كربون خام.الرئيسية، أثناء التمرير
  • صفحة التقنية: العنوان The skin is the structure فوق لقطة قريبة للهيكل.صفحة التقنية
  • مستكشف الكرفان: صورة الكرفان بثماني نقاط مرقّمة بجانب ملاحظات النقطة المختارة.صفحة الكرفان
  • المعرض: أزرار ترشيح للكل والخارج والتفاصيل والبيئة فوق شبكة صور.المعرض
أربع من الصفحات السبع: الرئيسية في منتصف مسح الطبقات، وصفحة التقنية، ومستكشف الكرفان، ومرشحات المعرض.

أربعة مشاهد، لكل منها خط زمني

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

قياس قبل التغيير

كان مسار المغامرة يتحرك متقطعًا. العرض ثبت على 60 إطارًا في الثانية، وكان الإطار عند المئين 95 يستغرق 16.8 ملي ثانية حتى مع إبطاء المعالج أربع مرات، فالخلل كان في الحركة نفسها: كل انتقال محشور في 12% من المشهد ويقفز حتى 296 بكسل في إطار واحد. الآن يستقر المسار على كل لوحة وينزلق على مدى 16% بمنحنى جيبي، فانخفضت القفزة إلى 73 بكسل على عرض 1440 بكسل و16 بكسل على الهاتف، ولا يظهر أي عنوان مقصوصًا أبدًا.

ما يفعله المتصفح أصلًا

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

صور تبقى ثابتة

في صفحة الكرفان تبقى النقاط مثبتة على الصورة في كل مقاس، وكل نقطة تملأ لوحة التفاصيل بصورتها وملاحظاتها. ولا تحل الصورة التالية محل السابقة إلا بعد فك ترميزها، فلا تومض اللوحة فارغة أبدًا.

نصوص مؤقتة تعلن عن نفسها

لم يزوّدني الصانع بالأرقام، فلم أخترع أيًا منها: ورقة المواصفات تقول Awaiting client figures، ونص القصة معلّم بكلمة DUMMY، ورقم الهاتف في نطاق محجوز للأعمال الخيالية. وملف README يسرد كل ما يجب استبداله قبل الإطلاق.

خطوط لا تحرّك الصفحة

Archivo وAzeret Mono خطوط متغيرة مستضافة مع الموقع، ولها خطوط بديلة مضبوطة المقاس من ملفات الخطوط نفسها، فيأخذ النص المساحة نفسها تقريبًا قبل وصول الخطوط وبعده، ويبقى انزياح التخطيط صفرًا في كل صفحة.

النتيجة

  • تصور تصميمي: لم يُطلق، وكل عنصر مؤقت فيه معلّم على أنه كذلك.
  • لا مخالفات في axe-core عبر 24 حالة، هي كل صفحة على عرضي الحاسوب والهاتف مع نوافذ الحوار المفتوحة وأخطاء النماذج، و100 في إمكانية الوصول وأفضل الممارسات وSEO في Lighthouse على كل صفحة، من القياسات المسجلة في المستودع.
  • الكود وملف README وخطط الحركة الست التي وراء التغييرات منشورة للعامة.

ما سأغيّره لو بدأت من جديد

أن تظهر أزرار الواجهة الافتتاحية أبكر. فهي تكتمل عند نحو 2.35 ثانية، ومراجعة الحركة في المستودع لاحظت ذلك وأجّلته، وتتابع أقصر ومنتظم كان سيحل المشكلة.

FreightZone

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

الدور
مصمم منتج: UX وUI ونظام التصميم
المنصات
iOS وAndroid، على أساس 360 × 800
النطاق
تطبيق العميل وتطبيق السائق، أكثر من 70 شاشة وحالة
مقدمة من 17 ثانية مبنية من متغيرات ملف Figma ومكوّناته ونصوصه وقواعد حركته، وتنتهي بغلافه. ولحظتها الوسطى هي قرار الحالة: كل عرض يحمل الحقائق الخمس نفسها في المكان نفسه.
Figma، تطبيق FreightZone
غلاف FreightZone: العنوان From pickup to final delivery بجانب ثلاث شاشات هاتف: توصيل في الطريق، وثلاثة عروض للمقارنة، ودفعة محفوظة في حساب الضمان.
غلاف ملف التصميم: التتبع، ومقارنة العروض، وتأكيد الضمان، ثلاث من أكثر من 70 شاشة وحالة.

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

النظام: أحمر العميل، بعد تعديله ليجتاز معايير التباين

  • العلامة#D7102Fالإجراءات الرئيسية، 5.2:1 تحت نص أبيض
  • الصبغة#FFF0F2أسطح العلامة
  • النص#0F172Aالنص الأساسي، 17.9:1
  • الثانوي#5B6679النص الثانوي، 5.8:1 على الأبيض
  • النجاح#15803Dالتسليم والدفع المكتملان، 5.0:1
  • الخطر#BE123Cالأخطاء والمشكلات المبلّغ عنها، 6.3:1

أبقيت الشعار والأحمر، لكن الأحمر انتقل من #F81D3E إلى #D7102F ليجتاز النص الأبيض عليه معيار WCAG AA. وخط Plus Jakarta Sans يأتي في 11 نمطًا من Display 32 نزولًا إلى 12 بكسل ولا يصغر عن ذلك أبدًا، ومتغيرات استدارة الزوايا مربوطة بمتغيرات Figma، والمسافات على شبكة من 4 نقاط بهامش شاشة 20 بكسل، وأزرار الأيقونات لا تقل عن 44 × 44.

ما الذي كان خاطئًا

كان زر Get a quote يذهب مباشرة إلى الدفع من دون أن يعرض سعرًا أو مركبة أو وقت استلام. وكان الدخول برقم الهاتف، واستعادة كلمة المرور بالبريد، والدخول عبر Google جنبًا إلى جنب، ولا حقل لكلمة المرور في أي مكان. والرمز نفسه كان يعني شيئين مختلفين في شاشتين، ودرج من تسعة بنود يخفي المهام الأساسية، ولم يكن موجودًا إلا المسار المثالي.

لمن هو

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

رحلة واحدة، للطرفين

النشر، ثم تلقي العروض، والمقارنة، والاختيار، والدفع في حساب الضمان، والتتبع، والتأكيد، ثم استلام الأجر. صار الدرج أربعة تبويبات في كل تطبيق، والتطبيقان يتشاركان شارة حالة واحدة، من Open for bids إلى Paid out، فيرى العميل والسائق دائمًا اسم الحالة نفسه للمهمة نفسها.

الثقة في لحظة الشك

الدفع لشخص غريب مقدمًا أكبر عائق في المسار، لذا يُشرح الضمان ثلاث مرات باختصار: عند نشر الطلب (لا شيء يُخصم الآن)، وقبل اختيار السائق (ما الذي سيحدث بعد ذلك)، وفي شاشة الدفع. رمز التحقق عبر الهاتف هو الطريقة الوحيدة للدخول، والسائق وحده يكتب رمز التسليم.

الحالات كلها، لا المسار المثالي وحده

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

النتيجة

  • ملف Figma كامل للتطبيقين، أكثر من 70 شاشة وحالة على نظام تصميم واحد، ودراسة الحالة في الملف نفسه.
  • أربع فرضيات، لكل منها المقياس الذي سيؤكدها أو ينقضها بعد الإطلاق، من الوقت الذي يستغرقه اختيار عرض إلى نسبة من يتوقفون بين اختيار السائق وتأمين الدفع. هي مقترحات، لا نتائج.

مقطع Cutaway

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

الدور
الفكرة والتصميم والبناء
التركيز
نموذج ثلاثي الأبعاد يجيب عن سؤال تشغيلي واحد في كل مرة، ويبقى سريعًا بحجم مستشفى كامل
التقنيات
React Three Fiber وthree.js وTypeScript، وglTF مضغوط، ومحاكاة اليوم في Web Worker، وإيجاد الطريق على شبكة من نقاط المبنى، وتوقّع بطريقة مونت كارلو ببذرة ثابتة، مُختبَر رجعيًا، وخادم تكامل عبر MQTT، وعيادة حقيقية مقروءة من IFC وقت البناء
العرض المباشر
imsemoo.github.io/cutaway
تسجيل من 58 ثانية للعرض المباشر، مُلتقط إطارًا بإطار على ساعة ثابتة: اللقطة الافتتاحية، والطبقات الأربع، والغرفة 4A09 وهي تسخن فوق حدها طوال فترة بعد الظهر، والطريق إلى أقرب مضخة متاحة في الجناح المجاور، والمستشفى كله مرسومًا بطوابق متباعدة، والطابق 4 مجسّمًا وفي المسقط، والواجهة وهي تتحول إلى العربية، وصفحة عمليات تجريبية تضع التوأم داخلها، وتفتح فيه غرفة، وتشغّل اليوم، وتسمع كل تنبيه لحظة فتحه.
imsemoo.github.io/cutaway/?select=4A09&t=21:00
الطابق 4 مجسّمًا، وخط أزرق متقطع من الغرفة 4A09 على طول الممر وعبر ممر زجاجي إلى مضخة في الجناح المجاور، عليها وسم 1 min away، بجانب لوحة الغرفة.
في الساعة 21:00 لا توجد مضخة متاحة في جناح الغرفة 4A09 نفسه. أقربها في الجناح المجاور، والطريق مرسوم على طول الممر وعبر الممر الزجاجي: 87 مترًا، نحو دقيقة.
imsemoo.github.io/cutaway/?building=clinic
العيادة مجسّمة: طابقاها متجاوران وعلى كل منهما اسمه، وغرف الكشف ملونة بحالتها، بجانب لوحة فيها غرف الكشف الـ49 ومبدّل بين الطابقين.
عيادة Medical-Dental من buildingSMART، مقروءة من نموذج IFC الخاص بها: الطابقان الساعة 14:30، و18 من غرف الكشف الـ49 مشغولة، وتنبيهات اليوم في اللوحة. المخطط مخطط المبنى نفسه؛ أما اليوم عليه فمحاكاة.
الجناح 4A على الهاتف بالعربية: الشريط العلوي، ومبدّل الطبقات ومفتاحه من اليمين إلى اليسار فوق النموذج وقد استدار طوليًا، ثم الخط الزمني.
بعرض الهاتف يستدير الجناح طوليًا ليناسب الشاشة. وهنا بالعربية: الشريط والطبقات والمفتاح تُقرأ من اليمين إلى اليسار، بينما يبقى الخط الزمني من اليسار إلى اليمين.
لوحة الجناح 4A على الهاتف الساعة 14:30: أربعة تنبيهات، وتنبيه الغرفة الساخنة مُستلَم ومعه زر لإرساله إلى الصيانة، وتحتها أسرّة العنابر في الساعات الأربع القادمة خطًا متدرجًا ومدى مظللًا وجملة.
تنبيه الغرفة الساخنة مُستلَم الساعة 14:30، ومعه خطوته التالية: إرساله إلى الصيانة. وتحته أسرّة العنابر في الساعات الأربع القادمة: سريران جاهزان الآن، وبحلول 18:30 الأرجح 3 أسرّة فائضة، وبين 1 و5 أربع مرات من كل خمس.

القرار. الأرضيات تحمل البيانات، سؤالًا واحدًا في كل مرة. الطبقة تلوّن كل غرفة، في جناح واحد أو عبر الطوابق الستة، حسب حالة السرير أو الحرارة أو الهواء أو انتظار جرس الاستدعاء، ومفتاحها بجانبها، على نموذج أبيض لا ينافس اللون أبدًا. وفي طبقتي الحرارة والهواء تعرض الغرفة قراءة حسّاسها، ولا تُقدَّر إلا الممرات، فلا حسّاس فيها، من الأبواب التي تنفتح عليها. واختيار غرفة يطير بالكاميرا إليها ويفتح يوم تلك الغرفة بجانب النموذج.

النظام: نموذج معماري أبيض، والبيانات على الأرضيات

  • الأرضية#E8ECF0أرضية الرسم تحت النموذج
  • النموذج#FBFBFCالجدران والأسرّة والتجهيزات، النموذج الأبيض
  • الحبر#2A3441الجدران في المسقط، مقطوعة ومحبّرة
  • الخط الأزرق#2946C7التحديد والتركيز والإجراءات، 7.5:1 على الأبيض
  • جاهز#157A4Cسرير نظيف، ولونه الخفيف يملأ الأرضية
  • بانتظار#B86E00سرير بانتظار التنظيف، والتحذيرات

Schibsted Grotesk يحمل الواجهة، وVazirmatn عربيتها، وFragment Mono أرقام الغرف والأوقات والقراءات بأرقام جدولية. ولكل حالة درجتان: قوية للشارات والأيقونات في اللوحة، وخفيفة للأرضيات، فيبقى النموذج أبيض ويعني اللون دائمًا بيانات. وللحرارة والهواء تدرجاتهما الخاصة، والمفتاح بجانب النموذج.

  • جناح في مسقط أفقي: جدران مقطوعة ومحبّرة، وغرف ملونة حسب حالة الأسرّة.المسقط
  • المسقط ملونًا حسب ثاني أكسيد الكربون في الساعة 18:00، واستراحة العائلات هي الأغمق، وهواؤها الراكد مقدّر وهو يتسرب إلى الممر خارج بابها، وتنبيهها في اللوحة الجانبية.الهواء في 18:00
  • الطابق 4 مجسّمًا: ستة أجنحة على صفيحة واحدة، تصل بينها ممرات زجاجية، ولكل منها اسمه.الطابق 4
  • كل الأجنحة في جدول: الأسرّة المشغولة والجاهزة وقيد التنظيف والمنتظرة وخارج الخدمة، وتنبيهاتها المفتوحة.القائمة
أربعة عروض لليوم نفسه: جناح في مسقط أفقي، وطبقة الهواء في الساعة 18:00، والطابق 4 بأجنحته الستة، وكل أجنحة المستشفى في جدول.

يوم يتصرف كعنبر حقيقي

المحاكاة مكتوبة لتروي فترة ما بعد الظهر في عنبر: حالات الخروج تتجمع في أواخر الصباح وحالات الدخول تصل طوال المساء، فتبقى الأسرّة متسخة، ثم قيد التنظيف، ثم جاهزة ومنتظرة. وتسخن الغرف بأعطال التكييف، ويثقل الهواء في استراحة العائلات في ساعات الزيارة، وتضعف بطاريات المضخات حتى يوصلها أحد بالكهرباء، وتنتظر أجراس الاستدعاء أطول عند تبديل النوبات. كل جناح من الأجنحة الستة والثلاثين يعمل من بذرته الخاصة، فكل زائر يعيد عرض اليوم نفسه، ولا يغيّر يوم جناح يوم جناح آخر، والجناح 4A، حيث يبدأ العرض، يحتفظ بقصة مكتوبة فوق ذلك. ويعمل كل هذا في Web Worker، ويصل الجناح المعروض أولًا في أقل من 30 ملي ثانية، وبقية المستشفى بعده بأقل من ثانية.

من جناح واحد إلى المستشفى كله

يعمل النموذج على ثلاثة مقاييس. الجناح عنبران ووحدة عناية مركزة، قريب بما يكفي لقراءة سرير. والطابق يضع أجنحته الستة على صفيحة واحدة، تصل بينها ممرات زجاجية. و«كل الطوابق» يرسم الطوابق الستة متباعدة، كمقطع مفكك للمبنى، وكل منها ملون بالطبقة نفسها، فتظهر الغرفة الساخنة من الطرف الآخر للمستشفى. وبجانب النموذج خريطة للمبنى، كل جناح فيها مظلل حسب امتلائه ومعلّم حيث يوجد أمر حرج مفتوح، والنقر على جناح يطير إليه، ومسار فوق اللوحة يعيدك إلى الأعلى. والكاميرا تضبط كل مقياس بإسقاط زواياه عبر كاميرا تجريبية، فيبقى النموذج دائمًا بعيدًا عن العناصر المعروضة فوقه، وشريط العنوان يحفظ المقياس والعرض والطبقة والوقت والاختيار، فكل عرض رابط.

الرسم والنموذج مشهد واحد

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

مبنى حقيقي من نموذج BIM الخاص به

كل أجنحة المستشفى التجريبي مبنية على مخطط واحد، ولا يوجد مبنى حقيقي هكذا. لذلك صار التوأم يقرأ مبنى حقيقيًا أيضًا: عيادة Medical-Dental من buildingSMART، وهي عيادة حقيقية من طابقين منشورة للاختبار في ملف IFC بحجم 13 MB. يُقرأ الملف في Node وقت البناء، ويُقتطع حدّ كل غرفة من شبكتها نفسها، مع اسمها وتصنيفها والمساحة التي يذكرها النموذج؛ وتحمّل الصفحة 34 kB من الحدود والجدران والأبواب، ولا تحمّل أداة القراءة أبدًا. والمرجع أرقام النموذج نفسه: النموذج يقيس الغرفة إلى منتصف جدرانها، وبعد احتساب نصف الجدار تقع 258 غرفة من 259 في حدود 5% من المساحة المذكورة. وتُفتح العيادة من رابط بالطبقات والعروض والتنبيهات واللغتين نفسها، مع يوم مُحاكى على غرفها هي، يُعاد عرضه أو يصل مباشرة: يخدمها خادم التكامل مبنى قائمًا بذاته، بمواضيعه وقواعده وبثه الخاص.

أقرب مضخة متاحة، والطريق إليها

من أي سرير، يجد «أقرب جهاز متاح» مضخة المحاليل أو الكرسي المتحرك أو جهاز مسح المثانة، أو جهاز التنفس من سرير العناية المركزة، الأسرع وصولًا سيرًا في أي مكان في المستشفى. والطريق يُحسب على شبكة للمبنى من 4,296 نقطة: كل غرفة وبابها، وممرا كل جناح، والعبور عبر قلب المبنى، والممرات الزجاجية، والمصاعد. والكلفة بالثواني، 1.2 م/ث سيرًا، والمصعد انتظار تُضاف إليه ثوانٍ قليلة لكل طابق. للسؤال إجابات ممكنة كثيرة، فبحث Dijkstra واحد من الغرفة يصل إليها كلها، بينما يحتاج A* إلى بحث لكل مضخة، ويستغرق البحث بين 2 و11 ملي ثانية. والطريق يُرسم فوق الجدران، ويتسع العرض إلى الطابق أو المبنى ليحتويه، ولا يُحمَّل البحث إلا عندما يسأل أحد أول مرة، كملف مستقل حجمه 1.4 kB.

تنبيهات لا تعرف إلا الحاضر

التنبيه لا يحتفظ إلا بما كان معروفًا عند فتحه، وصياغته بحسب الدقيقة على الخط الزمني: ضُغط في 14:21، وتسع دقائق بلا استجابة. اسحب إلى أي وقت، ولن يكشف شيء ما سيحدث بعد ذلك. والخطورة تُقرأ في تلك الدقيقة أيضًا، فلا تصبح الغرفة الدافئة حرجة إلا بعد أن تتجاوز 26.5 °م.

تنبيهات يمكن الرد عليها

يستلم الموظف التنبيه ثم يرسله إلى الفريق المسؤول عنه: الصيانة للغرفة الساخنة، والتمريض لجرس استدعاء بلا رد، وخدمات النظافة لسرير بانتظار التنظيف، وإدارة الأسرّة لسرير نظيف بلا مريض. ولا ينتهي التنبيه إلا حين تنتهي حالته. ففي إدارة الإنذارات الاستلام للموظف والإنهاء للعملية نفسها، فلا يدّعي زرٌّ أنه يبرّد غرفة. وكل إجراء ينضم إلى اليوم بدقيقته: اسحب الوقت إلى ما قبل الاستلام فيعود التنبيه جديدًا، وكل غرفة تحتفظ بسجل يقول متى انتهى تنبيه قبل أن يستلمه أحد. وفي الوضع المباشر يذهب الإجراء إلى الخادم ويعود إلى كل الشاشات حدثًا. وما يُتخذ والخادم متوقف ينتظر في صندوق صادر حتى يعود الاتصال، ويُسجَّل مرة واحدة مهما أُرسل، ويتحقق من ذلك اختبار متصفح عبر انقطاع العرض نفسه.

أسرّة العنابر في الساعات الأربع القادمة

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

بالإنجليزية أو بالعربية

مفتاح في الشريط العلوي يحوّل الواجهة كلها إلى العربية، من اليمين إلى اليسار، ويمكن لرابط أن يفتحها كذلك. ينعكس التخطيط، فتنتقل اللوحة إلى يسار النموذج وتتبادل العناصر العائمة أماكنها، بينما يبقى الوقت والمقاييس من اليسار إلى اليمين، كما في مشغّل الوسائط: الخط الزمني، والرسوم البيانية، وتدرجات الألوان، وخريطة المبنى. والتنبيهات مصاغة بالعربية بصيغ الجمع الست فيها، وأسماء الغرف مكتوبة بالعربية على الأرضيات. اخترت Vazirmatn بعد أن وضعت نصوص الواجهة نفسها في ستة خطوط عربية بجانب Schibsted Grotesk. ولا يُحمَّل هو ولا الفهرس العربي إلا في زيارة بالعربية، واختبار يقرأ الكود المصدري يفشل إذا فات الفهرس نص تعرضه الواجهة.

مباشرة، من سيل من الأحداث

الوضع المباشر يبني المستشفى من الأحداث عند وصولها بدلًا من يوم مسجل. خادم تجريبي في Web Worker يشغّل اليوم عبر بروتوكول JSON الذي سيستخدمه خادم تكامل حقيقي، بمعدل دقيقة مُحاكاة كل ثانية، والصفحة تضم كل حدث إلى اليوم نفسه الذي تقرؤه العروض أصلًا، فلم يحتج أي منها إلى تغيير. وأرقام التسلسل تحفظ السيل كاملًا: عند انقطاع الاتصال تقول الصفحة إن الطابق قديم، وتنتظر أطول قبل كل محاولة، ولا تطلب إلا الأحداث التي فاتتها، من آخر 2,000 حدث يحتفظ بها الخادم. واختبار يعيد تشغيل اليوم كله كأحداث ويتحقق أنه يُقرأ تمامًا كالتسجيل عند كل قراءة كل خمس دقائق.

من أنظمة المستشفى نفسها

أنظمة المستشفى لا تتكلم بلغة بث التوأم: حساسات المبنى وحالة الأسرّة ونداء التمريض وأوسمة التتبع، لكلٍّ منها بروتوكوله، ومعظمها يصل إلى MQTT عبر بوابة. لذلك يقف بينها وبين التوأم خادم تكامل: يشترك في موضوع لكل غرفة وجهاز وتدفق، ويفحص كل رسالة، ويجمع القراءات في إطار واحد كل خمس دقائق، ويستنتج كل تنبيه بنفسه بالحدود نفسها التي تستخدمها المحاكاة، ثم يقدّم البث الذي تقرؤه الصفحة أصلًا. وأمر واحد يشغّل مستشفى مُحاكى كاملًا على جهاز واحد، والعيادة بجانبه: الوسيط، والأنظمة وهي تنشر اليوم رسائل خامًا، وخادمًا لكل مبنى، والتوأم. ويرسل اختبارٌ اليومَ كله، 1,005,153 رسالة، ويجب أن يحوّلها الخادم إلى سجل الأحداث المسجَّل نفسه، 21,904 حدثًا ومعها التنبيهات الـ881 كلها، دون أن يُعطى أيًّا منها.

داخل لوحة تحكم أخرى

نادرًا ما يحظى التوأم بالشاشة وحده، لذا يمكن لأي صفحة أن تضمّنه: سكربت واحد حجمه 1 kB ووسم واحد، <cutaway-twin at="level-4">. وتخاطب الصفحة التوأم بالكلمات التي يستخدمها الرابط أصلًا. تفتح غرفة أو طبقة أو دقيقة وتشغّل اليوم، وتسمع ما يختاره المستخدم، والتنبيهات المفتوحة، وكل تنبيه لحظة فتحه، بلغة التوأم. ويعمل التوأم داخل iframe، فلا يلتقي React وthree.js وWebGL الخاصة به أبدًا بإطار عمل الصفحة المضيفة ولا بأنماطها، وبعد المصافحة يقبل الأوامر من ذلك المصدر وحده ولا يرسل تقاريره إلا إليه. وكل أمر تفحصه الدالة نفسها التي تقرأ الرابط، والأمر الذي لا يمكن تنفيذه يعود خطأً باسمه. وصفحة عمليات تجريبية تعرضه وهو يعمل، واختبار متصفح يضمّن التوأم في صفحة من مصدر آخر، ويحركه ويستمع إليه.

بلوحة المفاتيح وقارئ الشاشة

النموذج محطة واحدة في ترتيب التنقل بلوحة المفاتيح. ومفاتيح الأسهم تنتقل بين الغرف، أو بين الأجنحة في طابق أو في المستشفى كله، حسب ما يقع في ذلك الاتجاه على الشاشة، فتعني ما تراه العين أيًّا كان دوران الكاميرا، وEnter يفتح وEscape يعود خطوة إلى الخارج. والمؤشر يضيء الأرضية ويعرض الوسم نفسه الذي يظهر عند المرور بالماوس، وكل انتقال يُنطق بصوت مسموع، باسم الغرفة وحالتها. والتنبيهات التي تُفتح أثناء تشغيل اليوم أو بثه مباشرة تُنطق أيضًا، مجمّعة كل بضع ثوانٍ حتى لا يغرق المستمع في إعادة عرض سريعة. وعرض القائمة يحمل الطابق نفسه في جدول. ومع كل رفع للكود يفحص axe-core ثمانية عروض يمكن لرابط أن يفتحها، وفق WCAG 2.2 بمستويي A وAA، بمقاسي الحاسوب والهاتف. وجد في أول تشغيل مخالفة واحدة تكررت في كل عرض، وأُصلحت.

سريع لأنه يرسم أقل

اللوحة لا يُعاد رسمها إلا عندما يتغير شيء، فالمستشفى الساكن لا يكلف معالج الرسوميات شيئًا. وكل جناح مبني على مخطط واحد، فكل جزء من الهيكل instanced mesh واحدة لكل الأجنحة الستة والثلاثين، وأرضيات الغرف، وعددها 1,368، واحدة أخرى، وهي أيضًا هدف النقر. ولا يُحزم فيما يرسمه المعالج إلا ما يظهر في العرض: أول بناء للمستشفى كان يخفي الأجنحة الأخرى لكنه يرسلها إلى المعالج، 207,000 مثلث لجناح واحد، والحزم أعادها إلى 15,000. والأسرّة والمرضى وأثاث جانب السرير والأجهزة نماذج glTF، فيها 17,208 مثلثات مضغوطة إلى 129 KB، تُرسم كنسخ مكررة عبر shader لا يلوّن إلا الأجزاء التي تحمل حالة، مثل البطانية أو غلاف المضخة. وكل منها يتحول إلى بديل مبسط حسب بعده عن المكان الذي تنظر إليه الكاميرا، وإلى صندوق في عرض المستشفى كله، الذي يُرسم في 33 أمر رسم، أقل مما يحتاجه جناح واحد عن قرب. وحرارة الممرات وهواؤها تُقدَّر في fragment shader، من أبواب كل جناح، وهي 38 بابًا، موزونة بعرضها، وتُرسم خطوط التساوي وحد التنبيه من مشتقات فضاء الشاشة، وتفعيل تلك الطبقة يكلف إطارًا أو إطارين في الثانية.

يتكيف ويتعافى ومُختبر

الجودة تتكيف مع الجهاز: أربعة مستويات، من الإظلال المحيطي مع SMAA نزولًا إلى رسم بسيط بكثافة بكسلات أقل، تتدرج حسب معدل الإطارات المقاس أثناء حركة المشهد. وإن أُعيد تشغيل تعريف الرسوميات، يقول العرض إنه توقف مؤقتًا ويعيد بناء نفسه، وقد اختُبر ذلك والتأثيرات تعمل قبل الانقطاع، وهي تصل بعده، وهو تسابق كشفته الاختبارات الآلية. وكل رفع للكود يشغّل 113 اختبار وحدة، و30 اختبار متصفح مع WebGL حقيقي بمقاسي الحاسوب والهاتف، وفحوص إمكانية الوصول لاثني عشر عرضًا، وفحص جودة الكود، وفحص الأنواع، وحدًا لحجم كل حزمة، وأي فشل يوقف النشر.

النتيجة

  • تصور تصميمي: المستشفى والمرضى والقراءات كلها مُحاكاة، والصفحة تقول ذلك في كل عرض.
  • منشور على GitHub Pages، والكود متاح للعامة. ما يرسم الواجهة يُحمَّل أولًا، بحجم 89.7 kB مضغوطًا، ثم المشهد وthree.js بحجم 217 kB و99 kB، ثم النماذج بحجم 129 KB. والإظلال المحيطي وSMAA يُحمَّلان أخيرًا، بحجم 157 kB، وفقط عندما يستخدمهما مستوى الجودة. وقائمة التنبيهات والتوقع وتفاصيل الغرفة تصل بعد الرسم الأول مباشرة، والبحث عن الطريق والوضع المباشر والفهرس العربي عند أول استخدام، وجزء التضمين داخل الإطار وحده.
  • مقاس في سبتمبر 2026 على معالج رسوميات Intel مدمج بدقة 1280 × 800، مع دوران الكاميرا والإظلال المحيطي وSMAA، على ثلاثة قياسات: المستشفى كله بين 72 و90 إطارًا في الثانية في 33 أمر رسم، والطابق بين 74 و90، والجناح الواحد بين 69 و81 في 43 أمرًا، وعن قرب من غرفة بين 61 و77.
  • التوقع، مُختبَرًا رجعيًا على اليوم المُحاكى: بعد أربع ساعات أصاب مدى كل جناح 93.6% من المرات، وكان خطؤه في المتوسط 0.68 من السرير. وعلى اثني عشر يومًا أخرى من المحاكاة أصاب مدى المستشفى كله 80% من المرات، كما ينبغي لمدى يُراد له أن يصيب أربع مرات من خمس.

ما سأغيّره لو بدأت من جديد

أن أختبره على مجموعة من الأجهزة الحقيقية. معدلات الإطارات هنا من حاسوب محمول واحد وهواتف مُحاكاة، وهاتف Android متواضع هو الاختبار الذي ما زال ينقصه. وأن يجرّب التنقل بلوحة المفاتيح شخصٌ يستخدم قارئ الشاشة كل يوم، لا الفحوص الآلية وحدها. وأن يُختبر التوقع على تاريخ مستشفى حقيقي: فهو هنا يعرف متوسطات المحاكاة نفسها، فيقيس الاختبار الرجعي كيف يستنتج منها، لا كيف كان سيتعلمها.

وخمسة أخرى، باختصار.

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

taktek-dev.github.io/watad-theme
موقع وتد

وتد Watad

قالب لموقع إعلامي عربي. تصميم الواجهة من الهوية البصرية، والواجهة الأمامية.

واجهة أمامية جديدة لموقع watad.media، وهو موقع عربي للتحليلات والأخبار وموسوعة للثورة: أحد عشر قالبًا للصفحات مكتوبة في HTML وCSS وJavaScript بلا أطر عمل، جاهزة للتقطيع إلى Blade. كل صفحة معلقة على خط واحد هو المحور، ولأن اسمه «وتد»، فالحركة تدق وتدًا في هذا الخط.

ملاحظات من البناء
  • خط واحد يمتد على طول كل صفحة بين الشريط الجانبي والمتن. علامات الهوية الست تجلس عليه كأسافين، ولا يلمسه شيء غيرها.
  • عند التحميل يرسم المحور نفسه، وتسقط الأسافين في أماكنها. والملصقات ترتفع عن الجدار عند المرور فوقها، وتظهر كاملة دائمًا، بلا قص ولا تكبير.
  • تعديلات العميل مبنية فيه: أرشيف حسب الشهر والسنة، وأرقام صفحات في كل قائمة، وصف للأقسام يبقى ظاهرًا، وخط زمني للأخبار تفتح منشوراته في نافذة منبثقة لكل منها عنوانه الخاص.
  • كتّاب الموقع المنشور، وعددهم 45، يمكن البحث عنهم بالاسم أو المجال، والبحث يعامل أشكال الألف والتاء المربوطة والياء المختلفة على أنها حرف واحد.
  • رمادي الهوية صار أغمق بدرجة لتصل التواريخ بمقاس 12 بكسل إلى 4.5:1. أما الأرقام الرملية فتبقى دون AA قرارًا للهوية، مكتوبًا للعميل.
ozcar.com.au
موقع OzCar

OzCar

سوق للسيارات المستعملة. الواجهة الأمامية، من تصاميم Adobe XD.

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

ملاحظات من البناء
  • بحث بالماركة والطراز بمرشحات مترابطة، وصفحة السيارة بحاسبة التمويل وطلب فيديو مباشر، وصفحات التقييمات والمعارض.
  • جانب المزادات كواجهة تطبيق مستقلة: قائمة تنقل على اليسار من المرشحات (الماركة، والطراز، والفئة، والسنة، والنسخة، والكيلومترات) تقود لوحة للمزادات القادمة.
  • أنماط البطاقات والمرشحات والنماذج نفسها تتكرر في الجانبين، على طبقة مكوّنات صغيرة من SCSS فوق شبكة Bootstrap.
  • المرشحات والحاسبات تعمل أولًا كنماذج عادية، ثم يضيف jQuery السلوك المباشر فوقها.
  • الموقع العام متاح للزوار من أستراليا فقط، لذا تعرض الصورة الشاشات كما بُنيت.
الكود على GitHub
موقع Arbetsbil Stockholm

Arbetsbil Stockholm

مقترح تصميم. التصميم ونموذج أولي قابل للنقر، للحاسوب والهاتف.

عرض لتاجر مركبات عمل في ستوكهولم: موقع جديد مصمم كنموذج أولي قابل للنقر بعرضي 1440 و390، بصور التاجر نفسه ومخزونه وأسعاره. صنعته دون أن يُطلب مني، ووسمته بأنه مقترح. وليس كودًا للإنتاج.

besaeg.com
موقع BESA

BESA

منصة للدراسة في الخارج. الواجهة الأمامية من Figma، أكثر من 30 صفحة مبنية يدويًا.

البحث عن الجامعات، والبرامج التمهيدية، وأدلة الوجهات، والمنح، والتسجيل في معارض التعليم. جاءت التصاميم من Figma، وبنيت منها أكثر من ثلاثين صفحة يدويًا.

yedibasak.uk
موقع Yedi Başak

Yedi Başak

موقع جمعية خيرية. تصميم الواجهة، والواجهة الأمامية، والواجهة الخلفية على Laravel.

حملات، وتبرعات سريعة، وكفالات، وعطاء بعدة عملات، لجمعية إغاثة بريطانية. صممت الواجهة من الصفر وبنيتها، بما فيها الواجهة الخلفية على Laravel.

كل موقع، ودوري فيه.

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

نوع المشروع
ما تحتاجه

يظهر 46

  1. معطى Mo3taدراسة حالةمركز معلومات فلسطينفلسطين
    التصميم والواجهتان الأمامية والخلفيةLaravelInertiaVue 3العربيةزيارة
  2. ديفلو Devlo CMSدراسة حالةمنصة أخبار تشغّل 24 موقعًاتركيا، فلسطين، اليمن
    التصميم والواجهتان الأمامية والخلفية، ومالك منتج الواجهة الأماميةLaravelLivewireMySQLالعربية والإنجليزيةزيارة
  3. مسند Musnadالتحقق من الأخبار والادعاءاتاليمن
    التصميم والواجهتان الأمامية والخلفيةLaravelLivewireSchemaالعربية
  4. قدس الإخبارية Quds News Networkضمن دراسة حالة ديفلوشبكة أخبار فلسطينيةفلسطين
    التصميم والواجهتان الأمامية والخلفية، على ديفلوLaravelLivewireRTLالعربيةزيارة
  5. إيواد IWADضمن دراسة حالة ديفلومعهد أبحاث دفاعية
    تصميم الواجهة من دليل الهوية، ونظام التصميم، والواجهة الأماميةHTMLCSSJavaScriptالعربيةزيارة
  6. Kevla Campaدراسة حالةشركة كرفانات، تصور تصميميأستراليا
    التصميم والواجهة الأمامية، ولم يُطلقHTMLCSSES modulesالإنجليزيةزيارة
  7. FreightZoneدراسة حالةسوق للشحن، تطبيقا العميل والسائقأستراليا
    تصميم المنتج: UX وUI ونظام التصميمFigmaمتغيرات التصميمAuto layoutالإنجليزيةزيارة
  8. مقطع Cutawayدراسة حالةتوأم رقمي لمستشفى، تصور تصميمي
    الفكرة، والنموذج الثلاثي الأبعاد، والواجهة، والبناءReact Three Fiberthree.jsglTFالعربية والإنجليزيةزيارة
  9. وتد Watadباختصارموقع إعلامي عربي
    تصميم الواجهة من الهوية البصرية، والواجهة الأماميةHTMLCSSJavaScriptالعربيةزيارة
  10. مركز قاسيون Qasioun Center for Studiesمركز دراسات استراتيجيةسوريا، تركيا
    التصميم والواجهتان الأمامية والخلفيةLaravelLivewireثنائي اللغةالعربية والإنجليزية
  11. OzCarباختصارسوق سيارات ومجموعة معارضأستراليا
    الواجهة الأمامية، من تصاميم Adobe XDHTMLSCSSJavaScriptالإنجليزيةزيارة
  12. Calimeroمطعم Calimero Pizzaservice وطلباته عبر الإنترنتألمانيا
    الواجهة الأمامية، ضمن فريق، على مدى عامNext.js 14TypeScriptTailwindالألمانية والإنجليزية
  13. Tooloraمنتجي الخاص، قيد التطوير
    التصميم والهيكلة والواجهتان الأمامية والخلفيةLaravel 13Vue 3TypeScriptالإنجليزية
  14. احسبلي Ahsebliمنتجي الخاصالسعودية، الخليج، مصر
    التصميم والبناء وكل ما عدا ذلكPWAService workerSchemaالعربية
  15. متن Matnنظام إدارة محتوى خاص بي للمواقع المبنية يدويًا
    التصميم والواجهتان الأمامية والخلفيةCakePHP 5PHPUnitPHPStanالعربية والإنجليزية
  16. دفتر النقطة Nuqta Ledgerتطبيق Android خاص بيمصر
    تصميم المنتج وبناؤه في FlutterFlutterDriftRiverpodالعربية
  17. Arbetsbil Stockholmباختصارتاجر مركبات عمل، مقترح تصميمالسويد
    التصميم ونموذج أولي قابل للنقر، للحاسوب والهاتفHTMLCSSJavaScriptالسويدية
  18. SAMClerkمعلومات التعاقدات الفيدرالية الأمريكيةالولايات المتحدة
    الواجهة الأماميةHTMLCSSJavaScriptالإنجليزية
  19. Metalyolمورد ومقاول للحديد الإنشائي
    الواجهة الأمامية والحركةHTMLCSSJavaScriptالإنجليزية
  20. The Tide of Changeموقع مصغّر للأصوات المستقلة
    الواجهة الأماميةHTMLCSSJavaScriptالإنجليزية
  21. الجرمق Al-Jarmaqشبكة إعلامية فلسطينيةفلسطين
    التصميم والواجهتان الأمامية والخلفيةLaravelLivewireRTLالعربية
  22. Yedi Başakباختصارجمعية إغاثة إنسانيةالمملكة المتحدة
    تصميم الواجهة، والواجهة الأمامية، والواجهة الخلفية على LaravelLaravelBladeمدفوعاتالإنجليزيةزيارة
  23. تيقن Tayaqanمنصة مجتمعية للتحققفلسطين
    التصميم والواجهتان الأمامية والخلفية، على ديفلوLaravelLivewireRTLالعربية
  24. Maktoob Mediaضمن دراسة حالة ديفلومنصة مستقلة عن الحقوق والأقلياتالهند
    الواجهة الأمامية من Figma، ثم مراجعة الأداء والأمان، على ديفلوLaravelLivewireFigmaالإنجليزيةزيارة
  25. BESAباختصارمنصة للدراسة في الخارجمصر، المملكة المتحدة
    الواجهة الأمامية من Figma، أكثر من 30 صفحة مبنية يدويًاHTMLSCSSJavaScriptالإنجليزيةزيارة
  26. الهدهد Hodhodشبكة أخبار فلسطينيةفلسطين
    الواجهتان الأمامية والخلفية من Figma، على ديفلوLaravelLivewireFigmaالعربية
  27. عدني كاست Adeni Castمنصة بودكاست مستقلةاليمن
    التصميم والواجهتان الأمامية والخلفية، على ديفلوLaravelLivewireصوتالعربية
  28. التصميم والواجهة الأمامية، على ديفلوLaravelBladeRTLالعربية
  29. HandsOnTVمؤسسة إعلام وبثالمملكة المتحدة
    الواجهة الأمامية من Adobe XDHTMLSCSSJavaScriptالإنجليزية
  30. Hardware & Glassمورد إكسسوارات الزجاج المعماريالولايات المتحدة
    الواجهة الأمامية، مبنية يدويًاHTMLSCSSJavaScriptالإنجليزية
  31. BHF Couriersشركة توصيل طرودأستراليا
    الواجهة الأماميةHTMLSCSSjQueryالإنجليزية
  32. CourierNowحجز التوصيلأستراليا
    الواجهة الأمامية من Adobe XDHTMLSCSSJavaScriptالإنجليزية
  33. Hive Studioاستوديو إبداعيالسعودية
    WordPress، ثنائي اللغةWordPressElementorالعربية والإنجليزية
  34. IDD 2023مؤتمر لتحلية المياهالسعودية
    WordPress، ثنائي اللغةWordPressElementorالعربية والإنجليزية
  35. يسّروا Yassiruمنصة لدعم الزواج
    الواجهتان الأمامية والخلفية، مفتوح المصدرLaravelVueDockerالعربية
  36. Yottasrcمزوّد استضافة مواقع
    الواجهة الأمامية، مفتوحة المصدرHTMLSCSSJavaScriptالعربية والإنجليزية
  37. Creatives Dashboardمجموعة واجهات للوحات التحكم
    واجهة المستخدم، مفتوحة المصدرHTMLCSSJavaScriptالإنجليزية
  38. Skills Beyondمدرسة لتعليم القيادةأستراليا
    WordPressWordPressالإنجليزية
  39. Infinity Blue Barramundiمزرعة أسماك بارامونديأستراليا
    WordPressWordPressElementorالإنجليزية
  40. Power Line Egyptهندسة ومقاولاتمصر
    WordPressWordPressالإنجليزية
  41. أبعاد المستقبل Abaad Futureشركة فعاليات ومعارضالسعودية
    WordPressWordPressالعربية
  42. VisaOmanخدمة تأشيرات سفرعُمان
    WordPressWordPressالإنجليزية
  43. Burujتعليم القرآن للأطفال
    الواجهة الأماميةHTMLSCSSJavaScriptالإنجليزية
  44. IntimeDevشركة برمجياتمصر
    الواجهة الأماميةHTMLSCSSAOSالإنجليزية
  45. المهاجر Al-Mohajerأخبار للمهاجرين واللاجئينمصر
    الواجهة الأمامية، ستة قوالب صفحاتHTMLBootstrapRTLالعربية
  46. ThreadStudioأداة لتخصيص الملابس، عرض تجريبي
    الواجهة الأمامية مع API صغيرة بلغة PHPHTMLCSSJavaScriptالإنجليزية

كيف يسير المشروع.

الخطوات الست نفسها لصفحة هبوط أو لمنصة كاملة. كل خطوة تنتهي بشيء مكتوب أو مقيس.

  1. 01

    الموجز

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

  2. 02

    البنية

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

  3. 03

    الشاشة الأولى

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

  4. 04

    البناء

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

  5. 05

    القياس

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

  6. 06

    الحفاظ على ما يعمل

    معظم عملي يدخل أنظمة تعمل بالفعل. أقرأ الكود الموجود قبل أن أغيّره، وأبقي على ما يعمل.

الأرقام تتجدد كل يوم اثنين.

مهمة على GitHub Actions تشغّل واجهة PageSpeed من Google على هذه المواقع كل أسبوع، وتحتفظ بالوسيط من ثلاثة قياسات لكل جهاز، وتحفظ النتيجة في مستودع حسابي. وهذا القسم يقرأ تلك الملفات، فإن جاء أسبوع سيئ ظهر هنا أيضًا.

الأرقام المعروضة هي آخر ما حُفظ في المستودع، بتاريخ 21 سبتمبر 2026.

الملفات الخام على GitHub

مسند

جرّبه بنفسك
نتائج PageSpeed لموقع musnadye.com
الجهازالأداءالوصولالممارساتSEOLCP
هاتف991001001001.9 ث
حاسوب991001001000.5 ث

الوسيط من ثلاثة قياسات لكل جهاز، بإصدار Lighthouse 13.4.1.

مسند هنا لجانبه التقني. الصفحات تُعرض من الخادم، والتنقل بين صفحات القوائم يبقى في متناول محركات البحث، ومراجعتي للموقع المنشور في SEO والظهور في البحث بالذكاء الاصطناعي، 20 ملاحظة مرتبة حسب أثرها، صارت خطة إصداره التالي، ومعها بيانات ClaimReview المنظمة.

شبكة قدس الإخبارية

جرّبه بنفسك
نتائج PageSpeed لموقع qudsn.co
الجهازالأداءالوصولالممارساتSEOLCP
هاتف84100961003.9 ث
حاسوب9397961001.0 ث

مستخدمو Chrome الفعليون خلال 28 يومًا: سريع، وLCP عند 2.33 ثانية، وINP عند 104 ملي ثانية.

هذه الصفحة

57 KB من CSS مضمّنة في ملف HTML، و35 KB من JavaScript كتبتها بنفسي. بلا إطار عمل، ولا سكربتات من طرف ثالث. 12 طلبًا قبل الصور والخطوط، ثلاثة منها للجداول أعلاه. بُنيت في 11 أكتوبر 2026 من ملف JSON واحد بسكربت Python.

والمهمة الأسبوعية نفسها تقيسها: الأداء 100 على الهاتف و100 على الحاسوب، وإمكانية الوصول وأفضل الممارسات وSEO عند 100.

درجات Lighthouse من 100. ما دون 90 معلّم باللون البني. وLCP هو الوقت الذي يستغرقه أكبر عنصر في الشاشة الأولى حتى يظهر.

مع من ستعمل.

أنا إسلام. أقود فريق UI/UX والواجهات الأمامية في TakTek، وهناك نبني ديفلو ومتن ومواقع الأخبار التي تعمل عليهما. وإلى جانب ذلك أعمل على مشاريع حرة.

معظم ما أصممه يحمل معلومات حقيقية: إحصاءات تحتاج إلى مصدر، وأحكام تحقق يجب أن تُقرأ في ثانية، وعناوين عربية بجانب عناوين إنجليزية. أفضّل أن تُحسم البنية مبكرًا وكتابةً، وأراجع كل شاشة على عرض 375 بكسل قبل أن أعتبرها منتهية.

المكان
مدينة العاشر من رمضان، مصر. بتوقيت UTC+2، وأعمل عن بُعد
اللغات
العربية لغتي الأم. والإنجليزية: مستوى C1 في القراءة والكتابة، ومستوى محادثة في التحدث
دوري الآن
قائد فريق UI/UX والواجهات الأمامية في TakTek، مع عمل حر إلى جانبه
أسلوب العمل
كتابةً: موجز، وتسليم على مراحل، ومراجعات مكتوبة، والرد خلال ساعات قليلة

أين ذهبت السنوات السبع

  1. 2024 حتى الآنTakTek، قائد فريق UI/UX والواجهات الأمامية. ديفلو ومتن ومواقع الأخبار التي تعمل عليهما. ومنتجاتي الخاصة إلى جانب ذلك: احسبلي، والآن Toolora.
  2. 2020 إلى 2025IntimeDev، معارًا إلى SilverTrees. واجهات أمامية من ملفات XD وFigma لعملاء في أستراليا والمملكة المتحدة ومصر.
  3. قبل 2020عمل حر في الواجهات الأمامية وWordPress، معظمه لشركات عربية. وما زلت على مستقل بتقييم 5.0.

ما أعمل به

التصميم

  • Figma
  • أنظمة التصميم ومتغيراتها
  • الخطوط العربية وتنضيدها
  • نماذج أولية مكتوبة في HTML

الواجهات الأمامية

  • HTML وCSS وSCSS وTailwind
  • JavaScript وTypeScript
  • Vue 3 وInertia
  • React وNext.js
  • فحوص إمكانية الوصول عبر axe

وأيضًا

  • Laravel وLivewire وCakePHP حين يحتاج المشروع إلى خلفية برمجية
  • WordPress مع ACF
  • Core Web Vitals والبيانات المنظمة
  • Git وGitHub Actions وPHPUnit وPHPStan
  • مسودات بمساعدة الذكاء الاصطناعي، أراجعها سطرًا سطرًا

هذه الصفحة تعمل بملف متغيرات واحد

كل لون ومقاس ومسافة هنا يأتي من tokens.css، وهذه أكثرها استخدامًا. اقرأ الكود المصدري.

--ink#0f1115
--paper#ffffff
--accent#0b6e4f
--accent-on-ink#5fd3a5
خط ريدكس برو ريدكس برو للقراءة أيضًا، بحجم 16 بكسل وسطر 1.8. والكلمات اللاتينية بخط Schibsted Grotesk. Fragment Mono للأرقام 0123456789

ما كتبه العملاء بعد انتهاء العمل.

مراجعات منشورة على Upwork ومستقل، منقولة كما كتبها أصحابها، والإنجليزية منها مترجمة ونصها الأصلي تحتها. نسبة نجاح 100% على Upwork، وتقييم 5.0 على مستقل.

«إسلام نجم حقيقي. أردت الارتقاء بموقع لإطلاق منتج، وكان جمعه بين التصميم وأفكار التسويق الجاذبة استثنائيًا.»

“Islam is a superstar. I wanted to elevate a site for a product launch and his combined design and marketing hooks were exceptional.”

عميل على Upwork، إعادة تصميم الصفحة الرئيسية لشركة

«فهم نطاق العمل فورًا، ونفّذ كل شيء بطريقة نظيفة ومنظمة وقابلة للتطوير مستقبلًا.»

“He understood the scope immediately and implemented everything in a clean, structured, and future-proof way.”

عميل على Upwork، صفحة هبوط وحاسبة سندات

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

زيد ا.، عميل على مستقل

«فهم المتطلبات جيدًا، وكان موثوقًا ومتعاونًا يبحث عن الحلول طوال التنفيذ.»

“He understood the requirements well and was reliable, helpful, and solution-oriented throughout the implementation.”

عميل على Upwork، واجهة طلبات لمطعم

«التجربة مرضية لأقصى حد والنتائج تجاوزت سقف التوقعات. الاهتمام والخبرة والجهد أنتجت عملًا مميزًا.»

Nass A.، عميل على مستقل

أخبرني بما تبنيه.

يكفي للبدء موجز، أو ملف Figma، أو رابط الموقع الحالي. أرد كتابةً خلال ساعات قليلة: كيف سأتناول المشروع، وكم سيكلف، وكم سيستغرق.

تبحث عن مصمم UI/UX أو مطوّر واجهات أمامية لوظيفة؟ العنوان نفسه يصلح.