الهيكل أولًا: كيف ترسم مخطّط صفحة إليمنتور قبل أن تزيّنها.

1. ابنِ بترتيب القراءة

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

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

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

2. الصفحة الرئيسية ذات الفئات العشر

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

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

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

3. ثلاثة اختبارات لا تُجرى إلا بالرمادي

اختبار التحديق

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

اختبار الزرّ الواحد

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

اختبار الفجوة

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

4. متى تضيف اللون

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

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

5. التصدير والاستيراد بلا مفاجآت

ما تنزّله من أساس ملف قالب إليمنتور أصلي. ثلاثة أشياء تستحق المعرفة قبل أن تضغط «استيراد».

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

الاستيراد نفسه: القوالب ← القوالب المحفوظة ← استيراد القوالب، اختر ملف .json، ثم أدرجه من قوالبي داخل المحرّر. تُجلب الصور المؤقّتة من أساس أثناء الاستيراد وتُنسخ إلى مكتبة الوسائط؛ استبدلها واحذف الأصلية حين تنتهي.

6. قائمة الفحص

علّقها بجانب المحرّر. يجب أن تُعلَّم كل خانة بالرمادي قبل تطبيق أي طقم.

1. الصفحة تُقرأ كحجّة من الأعلى للأسفل: ادّعاء ← سبب ← دليل ← سعر ← اعتراضات ← إجراء.
2. الدليل (أرقام، آراء، شعارات) يقع بين المزايا والسعر.
3. الصفحة تنجح في اختبار التحديق: شكلها مقروء عند 25%.
4. زرّ رئيسي واحد فوق حدّ الشاشة، ولكل زرّ آخر سبب.
5. لا قسمان متجاوران يحملان العنصر الصاخب نفسه (عنوانان، أو لوحتان).
6. القائمة تُقرأ صحيحًا تحت ثلاثة أطقم على الأقل.
7. تحذير أدوات برو في الاستوديو فارغ، أو أنك تملك إليمنتور برو.
8. معاينة الهاتف مفحوصة: تعليق اللوحة الأولى يعمل وحده.

ثم، وثم فقط، اجعلها لك.