Salma Awad — موقع أعمال لمصمّمة

‏Salma Awad مصمّمة واجهات وتجربة استخدام تعمل من طرابلس، لبنان. وموقع salmaawad.com هو بيتها المهني: فهرس لأعمال مختارة، وأربع دراسات حالة كاملة، والصفحات المساندة المعتادة — الخبرة، ونبذة عنها، والتواصل، والسيرة الذاتية.

الموقع تطبيق Next.js منشور على Vercel. والصفحات مُولَّدة مسبقاً لا مُركَّبة في المتصفّح، فيصل الزائر على بيانات الجوّال إلى HTML جاهزة من أول استجابة، وتحصل محركات البحث على مستند كامل دون أن تضطرّ إلى تنفيذ JavaScript لترى المحتوى.

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

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

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

‏Next.js App Router مع توليد ثابت مسبق. كل صفحة تُولَّد سلفاً ويُعاد التحقّق منها على فترات قصيرة، فيُقدَّم الموقع من ذاكرة Vercel الطرفية بدل أن يُرسَم عند كل طلب — وترويسات الاستجابة على الموقع المنشور تُظهر صفحات مُولَّدة مسبقاً تُقدَّم من الذاكرة مباشرةً.

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

وعلى صعيد البحث يحمل الموقع رسماً مترابطاً من البيانات المنظّمة — Person و WebSite و WebPage وعناصر التنقّل و ItemList للأعمال المختارة — فتُوصَف المصمّمة والموقع ودراسات الحالة المفردة ككيانات متّصلة لا كصفحات لا رابط بينها. وهناك أيضاً صفحة هبوط محلية لتصميم الواجهات وتجربة الاستخدام في شمال لبنان، تستهدف البحث المحلي كما يستهدف بقية الموقع اسمها.

التوليد المسبق بدل الرسم في المتصفّح. كل صفحة تُولَّد سلفاً ويُعاد التحقّق منها على فترات، فتحمل أول استجابة HTML جاهزة. وترويسات الموقع المنشور ما زالت تُظهر ذلك: X-Nextjs-Prerender: 1 مع إصابة في ذاكرة Vercel. وعلى بيانات الجوّال هذا هو الفرق بين أن ترى العمل وأن تشاهد مؤشّر تحميل، وهو يعني أنّ محركات البحث تفهرس المحتوى دون أن تضطرّ إلى تنفيذ JavaScript للعثور عليه.

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

رسم مترابط من البيانات المنظّمة بدل مقتطفات معزولة. المصمّمة والموقع وكل صفحة والأعمال المختارة موصوفة ككيانات متّصلة — Person و WebSite و WebPage و SiteNavigationElement و ItemList — فيقرأ محرّك البحث وصفاً واحداً متماسكاً لمن هي وما صنعت، بدل أربع شذرات لا رابط بينها.

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