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

إحدى الطرق لضمان توافق الفريق عند تصميم أجزاء منفصلة من الموقع الإلكتروني أو حفظ التصاميم من المطورين هي إنشاء توثيق التصميم أو دليل نمط تصميم ويب.

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

ما هو دليل النمط؟

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

مجموعة أدوات واجهة المستخدم لـ Airbnb – ويب من إنجاز Derek Bradley

لماذا هو مهم؟

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

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

إنشاء دليل نمط تصميم ويب

1. دراسة العلامة التجارية

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

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

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

2. تحديد الطباعة

وفقاً لـ Oliver Reichenstein، الطباعة تشكل 95 في المائة من تصميم الويب.

يجب أن تضع الطباعة بشكل صحيح لأنها إحدى أهم أدوات التواصل بين الزوار وموقعك الإلكتروني.

ضع التسلسل الهرمي وحدده. هناك أنواع عناوين رئيسية: h1 و h2 و h3 و h4 و h5 و h6.

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

أدلة الأنماط من إنجاز Zech Nelson

3. لوحة الألوان

من المذهل كيفية إدراك الإنسان للون وربط الدرجات اللونية بالعلامات التجارية المعروفة. فكر في كوكا كولا، أنا متأكد من أنك ترى هذا اللون الأحمر الآن.

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

لوحة ألوان مركز الضيوف من إنجاز Chloe Park

4. الصوت

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

5. الرموز

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

أيقوندر هي أداة رائعة للعثور على رموز رائعة لمشاريعك.

مشروع الاسم تبني لغة بصرية من الرموز يمكن لأي شخص أن يفهمها

6. الصور

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

بعض مواقع الويب الرائعة للصور المجانية: 16 موقعاً للعثور على أفضل صور المخزون المجانية.

7. النماذج

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

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

8. الأزرار

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

9. المسافة

كيف يمكن أن تكون المسافة في دليل النمط؟ من المهم للغاية ذكر المسافة. يمكن أن تكون في شكل شبكة مستخدمة للتخطيط؛ يمكن أن تكون مسافة محددة بين العناوين والأزرار والصور والنماذج والعناصر الأخرى.

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

10. يجب فعله وما يجب تجنبه

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

أصول العلامة التجارية لتويتر والإرشادات

أمثلة

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

Spotify – إرشادات العلامة التجارية للشركاء (PDF)

تجميل Dropbox والشعارات

دليل نمط Kickstarter

دليل تصميم Lonely Planet

ابحث عن الإرشادات – أسرع طريقة للحصول على أصول العلامة التجارية

الخلاصة

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