6 أشياء لتضعها في دليل التصميم الخاص بك الآن
أدلة التصميم هي أداة لا تقدر بثمن لزيادة إنتاج فريق التصميم ، ولضمان هوية العلامة التجارية المتسقة. نحن ننظر إلى ستة مكونات أساسية لأدلة التصميم الناجحة.
دليل التصميم هو أكثر من مجرد وثيقة تأتي مع موقع جديد أو هوية علامة تجارية جديدة. دليل التصميم الجيد هو عمل فني بحد ذاته وله تطبيق عملي في أعمال التصميم اليومية. يعرض مشروعك ويتطلع إلى أن يكون. يجب أن تجلب عناصر التصميم والصوت وحتى التعليمات البرمجية بطريقة يمكن التحكم فيها واستخدامها وسهلة الفهم.
يبدأ من عناصر التصميم الستة هذه التي تحتاج إلى أن تكون في وثائقك. (إذا لم تكن كذلك ، فراجع دليلك على الفور!)
1. أمثلة الهوية العلامة التجارية
يجب أن يعرض دليل التصميم هوية علامتك التجارية بتنسيق مرئي يمثل الطريقة التي تريد أن تبدو بها مواد التصميم. هذا مثال على العرض ، لا تخبر. (على الرغم من وجود بعض التلميحات في الدليل للانتقال إلى الأمثلة المرئية).
أفضل الأمثلة على ذلك هي استخدامات الحالة الحقيقية التي تجسد بالضبط ما يقصد به تصميم معايير التصميم.
استخدم لقطات الشاشة من الصفحة الرئيسية لموقعك على الويب أو صفحة الجوال الرئيسية أو التطبيق أو أي مكان آخر عندما يكون التصميم في أفضل حالاته.
ما هو لطيف حول أحب الركوب دليل التصميم هو أن كل صفحة في الكتيب تبدو مثل الموقع ، مما يخلق اتساقًا للعلامة التجارية. حتى أن الدليل يجلب عناصر صغيرة من التصميم إلى التركيز ، مثل النمط الصحيح لأيقونات التطبيقات في عرض دقيق.
أفضل جزء في استخدام أمثلة حقيقية في دليل التصميم هو أنه لا يتعين عليك إنشاء عمل إضافي لعرض عناصر مرئية ؛ لديك بالفعل في متناول اليد. بالإضافة إلى ذلك ، سيعرف أعضاء الفريق أن الإرشادات الخطية تعمل في الممارسة الفعلية نظرًا لوجود دليل مرئي.
2. إرشادات التصميم
كل شيء من حوامل الألوان إلى لوحات الطباعة ، إلى الأشكال واستخدام عناصر التصميم يجب أن يتم تحديده بوضوح.
لماذا يبدو التصميم ويعمل بطريقة معينة؟ ما هي الفلسفة وراء ذلك؟
يمكن أن يساعد تفسير هذه الأشياء المستخدمين في تطبيق أسلوب التصميم بشكل أكثر دقة ومتسقة عبر الوسائط. عندما يتعلق الأمر بتصميم موقع الويب ، من المستحسن تضمين عناصر قد تختلف عن نظيراتها للعلامات التجارية المطبوعة وكيفية ارتباطها. على سبيل المثال ، يختار العديد من المصممين لوحة ألوان مختلفة على الإنترنت تحاكي طباعة العلامة التجارية لزيادة استخدام Google Fonts إلى Typekit لسهولة الاستخدام.
تأكد من ملاحظة أي الخطوط هي استبدال إذا كان هذا جزءًا من استراتيجية التصميم الخاصة بك.
عندما تحدد الخطوط العريضة لإرشادات التصميم عندما تكون مهمة - تكون علامات H1 دائمًا 88 نقطة أو دائمًا ما تكون الصور المصغرة 200 × 200 بكسل - ولكن لا تفرط في الإفصاح عن التفاصيل غير الضرورية. تريد من أعضاء الفريق أن يروا المعلومات في لمحة وأن يستخدموها ، ولا يثقلوا في محاولة العثور على شيء في بحر من المواصفات.
3. صوت وشخصية
لا تعتبر إرشادات أسلوب الكتابة ممتعة بقدر ما تفكر فيها العناصر المرئية الأخرى في دليل التصميم ، ولكنها لا تقل أهمية عن ذلك.
يمكن أن يؤثر نمط الكتابة الوصفي للنسخ أيضًا على العناصر المرئية. تساهم في نوع الصور التي تختار استخدامها وحتى عناصر مثل اللون والنوع. كل هذه العناصر تذهب معا لخلق شخصية شاملة للعلامة التجارية.
كيف سيعرفك العالم الخارجي.
والأكثر من ذلك هو أن الصوت القوي والشخصية تصبح جزءًا من الهوية المرئية أيضًا. تظهر شخصية جيدة في عناصر التصميم لأن المستخدمين يمكنهم تحديد عناصر التصميم حتى خارج محتوى بقية العلامة التجارية. (فكر في "كوكا كولا" باللون الأحمر أو حرف "ديزني" المميز.)
4. كبار المسئولين الاقتصاديين الكلمات الرئيسية
قد يكون تحسين محركات البحث واحدًا من أكثر أجزاء تصميم مواقع الويب التي يتحدث عنها وأقلها متعة. فكر في الكلمات الرئيسية مبكرًا وغالبًا.
أدرجها بالطريقة التي تتحدث بها عن العلامة التجارية ، بلغة وصفية عن التصميم ووضع قائمة بالكلمات الرئيسية العليا في دليل التصميم نفسه.
تجار الملابس في المناطق الحضرية يحتوي على قائمة كلمات رئيسية مصممة بشكل جيد (وممتع) في دليل علامته التجارية. بينما تستخدم العلامة التجارية للملابس الكثير من الكلمات الرئيسية المختلفة ، يتم تمييز الكلمات الأكثر أهمية بالألوان بحيث تراها على الفور.
تحتوي قائمة الكلمات الرئيسية مثل هذا على الكلمات التي تريد أن تقولها في أعلى الصفحة في كل مرة تراها. سيخبرك معظم الأشخاص الذين يكتبون نسخة أنه بمجرد أن ترى أو تفكر في كلمة ما في سياق معين ، فإنه يعلق في رأسك. هذا هو بالضبط ما من المفترض أن تفعله قائمة الكلمات الرئيسية الخاصة بـ SEO.
يجب أن ترتبط عناصر التصميم بهذه الكلمات الرئيسية في جميع الأوقات إلى أن المحتوى مرتبط في تصميم الموقع.
5. أنماط الأنماط والعناصر
مع وجود العديد من الوسائط المختلفة عبر الإنترنت (ناهيك عن الشركات التي تصمم أيضًا عناصر مطبوعة) ، من المهم وجود أدلة لكل الاستخدامات الممكنة.
ينطبق هذا على الإصدارات الثابتة والمتحركة من الشعارات ولوحات الألوان والأنماط وحتى عناصر التصميم مثل حقول النموذج والتنقل.
يجب أن يحتوي دفتر التصميم على قسم مخصص لهذه العناصر. وإذا كنت تريد أن يعجبك الفريق حقًا ، فقم بإنشاء دليل نمط ونمط عنصر في موقع على الإنترنت بحيث يمكن للمستخدمين فقط نسخ ولصق العناصر للاستخدام السريع.
6. كود القصاصات
يجب أن يتضمن كل دليل لتصميم مواقع الويب الكثير من مقتطفات الشفرات الشائعة الاستخدام. من الأزرار إلى الرسوم المتحركة الصغيرة إلى تأثيرات التمرير ، تضيف هذه الأجزاء الصغيرة من الكود ساعات إلى سير العمل اليومي من خلال القضاء على الحاجة إلى إدخال المواصفات يدويًا مع كل عنصر جديد.
يعمل هذا الإجراء مع كل شيء بدءًا من تدوينات المدوّنات - أضف كتلة تعليمات برمجية للصور التي يمكن للمدونين نسخها ولصقها للوصول إلى الحجم والصنف المناسبين - إلى تأثيرات واجهة المستخدم الأكثر تفصيلاً.
يتضمن Firefox معلومات مكون التصميم في دليل التصميم الخاص به لاستخدام العلامة التجارية والشعار الذي تم تعديله مؤخرًا. حتى إذا لم تقدم مكتبة كاملة من مقتطفات الشفرة ، فتذكر تضمين بعض المعلومات الأساسية مثل مكان استخدام H1 إلى H4 على الصفحات الموجودة في تصميم موقع الويب وكيفية ترتيب الأزرار والصور.
استنتاج
أفضل جزء في دليل التصميم هو أنه لا يجب أن يكون مستندًا ثابتًا. يمكن أن تنمو وتتغير كما تفعل العلامة التجارية الخاصة بك والهوية المرئية تفعل الشيء نفسه.
يختار معظم المصممين - مصممي مواقع الويب على وجه الخصوص - الإصدارات عبر الإنترنت من دليل التصميم بحيث يكون إجراء التغييرات وكود الشفرة ومقتطفات الألوان سريعًا وسهلاً. يمكنك إضافة صفحة دليل الأنماط إلى موقعك على الويب ، وتذكر الإشارة إليها (وتحديثها) بشكل متكرر.