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

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


إنشاء دليل نمط موقع الويب

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

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

هنا يأتي دور دليل الأسلوب.

ما هو دليل الأسلوب ولماذا يحتاج عملي إلى واحد?

دليل الأسلوب هو مورد موحد يحدد العلامة التجارية من خلال الاستخدام المتناسق للتصميم والنغمة والصوت والهوية.

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

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

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

عندما حان الوقت لإنشاء دليل نمط

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

سيستفيد عملك عبر الإنترنت من دليل الأسلوب إذا ومتى:

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

دليل أسلوبك موجود داخل موقع الويب الخاص بك

قبل البدء في بناء دليل أسلوبك ، ستحتاج إلى تحديد مكان وجوده. أفضل ممارسة هي تخصيص مساحتها الخاصة داخل موقع الويب الخاص بك ، إما كدليل (www.yourdomain.com/styleguide) أو كنطاق فرعي (styleguide.yourdomain.com).

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

يحتوي دليل الأسلوب الخاص بك على تخطيط خاص به

دعنا نبتعد عن هذا: سيستغرق إنشاء دليل أسلوبك بعض الوقت. ولكن ضع في اعتبارك الطاقة التي تضعها فيها كاستثمار سيوفر لك المزيد من الوقت (والمال) على المدى الطويل.

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

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

أدلة النمط مقابل. مكتبات الأنماط

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

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

بشكل أساسي ، مع مكتبة الأنماط ، قد تُعرض عليك خيارات النمط لعلامات H2 ؛ ومع ذلك ، فإن الشيء المفقود هو ما يقدمه دليل النمط: تعليمات حول السياق الذي يجب استخدام كل علامة H2 معينة فيه.

كيفية إنشاء دليل النمط

لصياغة دليل نمط يحدد جميع المربعات ، إليك الخطوات التي ستتخذها:

الخطوة 1. تحديد جوهر علامتك التجارية

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

الخطوة 2. تعيين قواعد الشعار الخاص بك

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

مثال دليل شعار تويترتويتر لا تترك مجالًا للخطأ في قواعدها الشاملة المتعلقة بالاستخدام المناسب لشعارها.

الخطوة 3. إنشاء الطباعة

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

مثال دليل بي بي سي للطباعةبي بي سي مشاركة ترميز وتخطيط العناصر المطبعية الخاصة بهم – وهي ضرورة لمؤسسة إخبارية كبيرة تستخدم العديد من العناوين المختلفة ذات الأهمية المختلفة.

الخطوة 4. قرر لوحة الألوان الخاصة بك

يمكن أن يكون اللون أكثر من مجرد تمثيل مرئي لعلامتك التجارية – يمكن أن يؤثر على نفسية المستخدمين. يمكن أن يصبح ظل معين من اللون الأحمر أقل لونًا وأكثر ارتباطًا باللاوعي مشروب غازي معين.

مثال دليل اللون موزيلاموزيلا تحافظ على اتساق علامتها التجارية من خلال تحديد لوحة ألوان برامجهم. من المهم تضمين رموز الألوان في HEX و Pantone و HSB و CMYK و RGB ؛ إذا ظهرت المناسبة أن علامتك التجارية يجب أن تكون موجودة خارج شاشة الكمبيوتر ، فستكون جاهزًا لذلك!

الخطوة 5. تحديد الايقونية الصحيحة

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

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

الخطوة 6. تحديد الصور الصحيحة

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

الخطوة 7: بناء نظام التخطيط والشبكة

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

مثال دليل شبكة MailChimpمايل تشيمب يحدد كيفية هيكلة المحتوى الرئيسي في شبكة. تضمن كميات البكسل المحددة للمزراب والحشو أن تظل الشبكة صحيحة بغض النظر عن حجم شاشة المستخدم.

الخطوة 8: تصميم العناصر

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

نماذج

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

أزرار

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

القوائم

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

مشروط

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

التفاعل وتأثيرات الرسوم المتحركة

صدق أو لا تصدق ، يمكن التعبير عن علامتك التجارية بالتفاصيل حتى في الدقيقة الواحدة من تأثير التمرير. رابط نصي بقيمة {animation: 500ms easy-in؛ } ينقل شخصية مختلفة وإحساسًا بالإلحاح مقارنةً بـ {animation: 100ms linear؛ }}.

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

لا تنسى المحتوى

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

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

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

يمكن أن تكون أدلة نمط المحتوى شاملة جدًا ، حتى بما في ذلك القواعد النحوية التي تتوقعها من أستاذ اللغة الإنجليزية. دليل توتس+ يفعل ذلك فقط. (يخبرني دليل المحتوى الخاص بهم حتى أن أكتبها كـ “Tuts +” وليس “Tutsplus”!)

استنتاج

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map