البحث في الموقع

بعد أن تعرّفنا على ماهية التصميم وعناصره ومبادئه، وألقينا نظرة على برامجه وتطبيقاته الأكثر شهرة، يمكننا البدء بالعمل على تصاميم مختلفة بناء على تعلمناه في المقالات السابقة في هذه السلسلة، يبقى لدينا فقط أن نعلم ما هي القواعد الأهم والمتبعة في التصميم وذلك تبعًا للمشروع الذي سنعمل عليه، دون أن ننسى استخدام العناصر بالطريقة الأمثل والالتزام بالمبادئ وإتقان استخدام برامج التصميم. وتتضمن هذه المقالة أهم القواعد الواجب اتباعها لتصميم كل من الأيقونات (الرموز) والشعارات نظرًا للتشابه الكبير من حيث المبدأ في قواعد تصميم هذين العنصرين، وسنبدأ أولًا بتعلم قواعد تصميم الأيقونات. قواعد تصميم الأيقونات الأيقونات هي الرموز المستخدمة للدلالة على أمر ما، حيث تستخدم الأيقونات كرموز للبرمجيات في أجهزة الحاسوب وأيضًا للتطبيقات في الهواتف المحمولة، فتلك الرموز المميزة لتطبيقات الهاتف المحمول ليست شعارات بل أيقونات، ولكن من الممكن أن يستخدم الشعار كأيقونة للتطبيق مثل أن نستخدم شعار أحد البنوك كأيقونة لتطبيق البنك على الهواتف المحمولة. كما نستخدم الأيقونات المصممة داخل صفحات الويب للدلالة على الخدمات أو الفئات أو الميزات أو أي شيء آخر. ومثالًا على تلك النوعية من الأيقونات تلك المستخدمة على فئات الدروس والمقالات في أكاديمية حسوب. يمكن تصميم الأيقونات بخطوط وأشكال سوداء أو بلون واحد أو بطريقة التصاميم المسطحة Flat Design (وهي تصاميم ثنائية الأبعاد تتميز بالبساطة وبدون عناصر معقدة كالظلال والقوام والتدرجات اللونية وغيرها) أو حيوية بتدرجات لونية أو حتى ثلاثية الأبعاد. وتعد أيقونات التطبيقات من أبرز وأهم أنواع الأيقونات حيث أن الأيقونة المميزة ستجذب اهتمام الناس وتدفعهم لتحميل التطبيق وتجربته، قد يكون هناك تطبيق جيد للغاية وأداؤه ممتاز ولكن أيقونته سيئة وغير مثيرة للاهتمام، بينما تطبيق آخر يؤدي نفس الغرض ولكنه سيء وأداؤه تشوبه الأخطاء والمشاكل التقنية إلا أن أيقونته مذهلة ومثيرة للاهتمام، بالتأكيد سيتم تحميل التطبيق السيء ذو الأيقونة الجيدة أكثر من الآخر إلى أن تطغى التقييمات السلبية على جمالية أيقونة التطبيق السيء، لكن ذلك سيستغرق وقتًا طويلًا كما أن العديد من الناس لا تنتبه للتقييم بل تنظر للأيقونة فحسب. فما هي أهم قواعد تصميم الأيقونات؟ سنتعرف عليها الآن. تحديد الهدف يجب أن نحدد الهدف من الأيقونة التي سنصممها، إن أيقونات التطبيقات عادة ما تكون زاهية الألوان ومفعمة بالحيوية وقد تكون ثلاثية الأبعاد أيضًا، بينما أيقونات مواقع الإنترنت عادة ما تكون مسطحة وبسيطة، إذ تستخدم للدلالة على أمور معينة فحسب. ومن هذا المنطلق يجب أن نفهم الهدف من الأيقونة ومكان استخدامها لنتمكن من تحديد الطريقة التي سنصمم بها الأيقونة. قابلية تبديل الحجم قد تستخدم الأيقونة في أكثر من موقع تمامًا مثل الشعارات، لذا يجب أن تكون إما قابلة للتكبير والتصغير ولذلك يجب أن نصممها بالرسومات الشعاعية Vector وليس النقطية حتى لا تتأثر وتتشوه بعد تغيير حجمها، أو قد نضطر إلى تصميم حزمة كاملة من الأيقونات لجميع القياسات حيث أن بعض التصاميم قد تحمل تفاصيل أكثر من اللازم وعند تصغير حجمها فإن هذه الأيقونات لن تكون واضحة أو مفهومة، فهناك أيقونات ستظهر في قوائم صغيرة الحجم أو في رموز المواقع الإلكترونية، لذلك سيتعيّن علينا أن نصمم أيقونات لمختلف القياسات بحيث نراعي وضوح فكرة الأيقونة مهما صغر حجمها. لاحظ أن الأيقونات الأصغر حجمًا هي ليست نفس الأيقونة الكبيرة، بل هي تصميم جديد مشابه ولكنه واضح ضمن الحجم الصغير. اتباع الهوية البصرية عندما نصمم أيقونة لعلامة تجارية أو أي مؤسسة لديها هوية بصرية معدة مسبقًا، فيجب أن ننتهج نهج الهوية البصرية في التصميم من حيث الأسلوب والألوان والخطوط وغيرها، فمن غير المنطقي أن تكون الأيقونة مختلفة كليًا عن باقي عناصر الهوية البصرية. لذلك عندما يطلب منك تصميم أيقونة لمؤسسة تمتلك هوية بصرية، عليك اتباع نهج تلك الهوية، واطلب منهم كتيب إرشادات الهوية البصرية، وإن لم يكن لديهم كتيب فاطلب منهم تزويدك بنسخة عن عناصر الهوية البصرية لتلقي نظرة فاحصة عليها وتتبع نهجها. لاحظ الأيقونات أسفل صفحة الويب الخاصة بشركة تويوتا للسيارات تتبع نهج الهوية البصرية للشركة. البساطة والوضوح هذا الأمر ينطبق على الأيقونات والشعارات معًا، فالهدف من الأيقونة هو التعريف والدلالة إلى شيء ما مثل تطبيق أو خدمة أو فئة أو غير ذلك، لذلك يجب أن تكون الأيقونة بسيطة وواضحة لتكون مفهومة، ويجب أن تكفي النظرة الأولى إليها لفهم ما ترمز إليه. في المثال التالي لأحد المواقع استُخدمت أيقونات دلالية إلى ميزات معينة متوفرة في خدماتهم، ولكنك ستلاحظ بسهولة أن الأيقونات غير مفهومة، بل وتسبب الارباك لمشاهدها ولو اعتمد أصحاب الموقع على النصوص فحسب لكان ذلك أفضل. بينما تبدو الأيقونات في المثال التالي واضحة وتدل بوضوح على معنى الميزة المشار إليها. اتباع الارشادات في بعض المواضع كتطبيقات سطح المكتب أو تطبيقات الهواتف المحمولة أو غيرها يكون هناك إرشادات معينة لتصميم الأيقونات بحيث يجب اتباعها للحصول على أفضل النتائج وللتوافق والتناسق مع موضع استخدام الأيقونة، لذلك يجب دائمًا البحث عن أية إرشادات متوفرة قبل البدء بالتصميم، وعلى سبيل المثال يجب اتباع الارشادات عند تصميم أيقونات تطبيقات الأندرويد وكذلك أيقونات تطبيقات أنظمة iOS. تناسق الوزن البصري في معظم الأحيان نصمم مجموعة من الأيقونات وليس أيقونة واحدة، تستخدم في مواقع الويب أو تطبيقات الهاتف المحمول أو في قوائم البرامج وغير ذلك، ولذلك يجب أن تكون جميع الأيقونات بوزن بصري واحد تقريبًا، وذلك فيما يتعلق بالخطوط والألوان والحجم، والأهم أن يكون وزنها البصري متناسقًا مع التصميم العام للهوية البصرية وواجهة الموقع وواجهة الاستخدام للتطبيق وغيرها. لاحظ أن هذه الأيقونات متطابقة في الدلالات والمعاني ولكنها تختلف من ناحية التصميم والوزن البصري. نوعية ملفات الأيقونات توجد عدة أنواع لملفات الأيقونات ولعل أشهرها هي GIF وPNG وSVG. وتُعَدّ GIF أقدم تنسيق استُخدم لتصميم الأيقونات في الماضي كما تستخدم ICO لملفات أيقونات برامج أنظمة الويندوز، واستُخدم GIF نظرًا لصغر حجمه وإمكانية إدراج الشفافية فيه عكس JPG و BMP الشائعة في ذلك الوقت، إلا أن من سلبياتها عدم إمكانية استخدام حزمة ألوان واسعة حيث تعتمد نظامًا مؤلفًا من 256 لونًا فقط، ومع مرور الوقت تطورت الأدوات والتطبيقات وأصبح بالإمكان استخدام تنسيق PNG لصناعة الأيقونات والذي يتميز بمجال طيف واسع من الألوان بالإضافة إلى إمكانية تضمين الشفافية فيه، ولكن PNG هو تنسيق للرسومات النقطية وعند محاولة تكبير التصميم من أجل بعض الواجهات و التطبيقات فسوف تظهر التشوهات والعيوب. لذلك بدأ المصممون يعتمدون أكثر على SVG الذي يعتمد الرسومات الشعاعية والتي لا تتأثر بتغيير الحجم وتحافظ على دقة التصميم إضافة إلى استخدامه طيفًا واسعًا من الألوان وتضمين الشفافية فيه، والأكثر من ذلك أن ملفاته تتميز بصغر حجمها وهو الأصغر بين بقية التنسيقات، ما جعله الخيار الأمثل لتصميم الأيقونات حاليًا. وعلى الرغم من إمكانية استخدام هذه الملفات مباشرة في بعض التصاميم إلا أن العديد من التطبيقات والواجهات لا تزال لا تدعم هذه النوعية من الملفات، لذلك يجب تحويله إلى تنسيقات أخرى مثل PNG، وبناء عليه يجب أن نحدد المقاس المطلوب بحسب التصميم الذي نعمل عليه. فالخيار الأفضل هو تصميم الأيقونة بتنسيق SVG ومن ثم تصدير جميع المقاسات والتنسيقات التي تحتاجها بتنسيقات يمكن استخدامها مثل PNG. الأيقونات والشعارات مثل أي نوع من أنواع التصاميم فإن تصميم الأيقونات جزء من فن تصميم الرسوميات (التصميم الجرافيكي) ولهذا يجب استخدام العناصر وتطبيق المبادئ الخاصة بتصميم الرسوميات لإنجاز تصاميم احترافية خالية من الأخطاء ومثيرة للاهتمام. ويتشابه تصميم الشعارات من حيث المبدأ مع تصميم الأيقونات حيث أن كليهما يجب أن يحدد الهدف والغرض من هذا العنصر (الأيقونة أو الشعار) والجمهور المستهدف ويجب أن يصمم بأحجام مختلفة بحسب موضع الاستخدام ويجب أن يكون متناسقًا ومتكاملًا مع بقية عناصر الهوية البصرية، ويجب أن يُصمم الشعار كأول عنصر من عناصر الهوية البصرية ومن ثم يتم استخراج لوحات الألوان وباقي عناصر الهوية البصرية بناءً على نموذج الشعار، كما أن تنسيق ملفات تصميم الشعار عادة ما تكون أيضًا SVG أو PNG بحسب موقع استخدامه. الشعارات ليست أيقونات، ولكن يمكن أن تشتق الأيقونات من الشعارات تمامًا مثل أيقونات تطبيقات الهاتف المحمول. ليس بالضرورة أن يكون الشعار بسيطًا بعكس الأيقونة، إلا أن البساطة في التصميم تجعل الشعار أكثر أناقة واحترافية، وأسهل للفهم والملاحظة، حيث أن الغالبية العظمى من العلامات العالمية الشهيرة اتجهت في السنوات الماضية إلى تعديل شعاراتها لجعلها أكثر بساطة وأناقة عكس شعاراتها القديمة، وهذه بعض الأمثلة بحيث نعرض الشعار القديم وآخر شعار مستخدم الآن بغض النظر عن مراحل التطور التي مر بها الشعار. قواعد تصميم الشعار ما هو الشعار؟ هو واجهة أي علامة تجارية وهو الانطباع الأول الذي يتكون لدى الجمهور بمجرد رؤيته، لذا فإن تصميمه مهم للغاية. وبما أن تصميم الشعارات والأيقونات تعتمد قواعد ومبادئ مشتركة، إذ يجب تحديد الهدف والغرض من الشعار كما يجب مراعاة قابلية التكبير والتصغير بحسب موضع الاستخدام ويفضّل الالتزام بمبدأ البساطة والوضوح في تصميمه لضمان وصول فكرته ورسالته للجمهور، وعلى عكس الأيقونات فإن الشعار هو العنصر الأول في تصميم الهوية البصرية، وتتبع الهوية البصرية تصميم الشعار في تحديد شكل وأسلوب التصميم العام، كما يفضل استخدام تنسيق SVG لملفات الشعار مع تصديرها إلى PNG بالمقاس المناسب عند الحاجة. تجنب التقليد من الطبيعي أن تتشابه الأيقونات التي تصممها مع أيقونات كثيرة متوفرة على الإنترنت نظرًا لأن مواضيعها مكررة أساسًا، ولكن من غير المقبول تكرار أو تقليد الشعارات الأخرى، فلو طُلب منك مثلًا أن تصمم شعارًا لمطعم برجر، أول ما سيخطر ببالك تصميم شكل قطعة البرجر وبعد بحث بسيط على الإنترنت ستكتشف وجود العشرات وربما المئات من الشعارات التي تشبه تصميمك وربما يكون بعضها شبه مطابق له أيضًا، الأمر الذي سيجعل العميل يعتقد أنك نسخت الشعار من مكان آخر وقدمته له ولم تبذل أي مجهود في تصميمه، حصل ذلك معي في بدايات مشواري في التصميم لذلك اعتمدت طريقة جديدة في التحضير للتصميم قبيل البدء فعليًا، وهو أن أبحث عن تصاميم متعلقة بما أنوي القيام به ثم أحاول تجنبها جميعها وأسعى إلى إيجاد فكرة جديدة تجعل تصميمي مميزًا ولا شبيه له، وهو ما سيقدّم للعميل بدوره شعارًا مذهلًا يميّزه عنه منافسيه. اكتب في بحث الصور على جوجل (شعار برجر) وستحصل على العديد من شعارات البرجر، لذا حاول تجنب إنشاء تصميم مطابق أو مشابه لأي منها، وليكن تصميمك فريدًا من نوعه. ابدأ برسم المخطط يدويًا حتى وإن لم يكن لديك موهبة في الرسم اليدوي باستخدام القلم والورق، إلا أن الرسم باستخدام الورقة وقلم الرصاص له تأثير السحر على تدفق الأفكار وتعديلها بطريقة فورية. جميع الشعارات العظيمة بدأت بخربشة بسيطة على الورق، ثم أصبحت نموذجًا أوليًا يتطور كل لحظة إلى أن يصبح فكرة مميزة ثم تُنقل هذه الفكرة إلى الحاسوب عبر رسم الخطوط الأساسية لها على برنامج التصميم ومن ثم تطويرها برسم الأشكال الأساسية ثم تتدفق الألوان على التصميم لمنحه الحيوية والهوية الخاصة به، وهكذا إلى أن تصبح الفكرة شعارًا حقيقيًا مميزًا. الصورة بوساطة rawpixel.com من موقع Freepik. الأبيض والأسود يجب علينا كمصممين أن نضع في الحسبان مسألة التصميم بالأبيض والأسود، في بعض الحالات قد يكون الشعار بطبيعة الحال بالأبيض والأسود وبالتالي لا حاجة للقلق بشأن ذلك، ولكن في معظم الأحيان يكون الشعار ملونًا ومع ذلك تضطر الشركات وخصوصًا التجارية منها إلى استخدام نسخة بالأبيض والأسود من الشعار لأجل المطبوعات والتعليب والتغليف والتطريز والنقش وغيرها، لهذا يجب أن يكون الشعار واضحًا ومفهومًا بالأبيض والأسود كما هو كذلك بالألوان في تلك الحالة. إن نظرت إلى النمط الأبيض والأسود لبعض الشعارات فإنك لن تعرف الشعار بسهولة من النظرة الأولى وأحيانًا قد لا تعرفه أبدًا بدون الألوان، ولعل السبب في أن معظم الشعارات في المثال الذي حضّرته لك لا تحتاج إلى الشعار الأبيض والأسود بطبيعة الحال، ولكنني أردت توضيح الفكرة. في الشكل التوضيحي التالي ستشاهد شعارات بالأبيض والأسود ومن ثم ستشاهد الشعارات الملونة الأصلية في الشكل التالي، لاحظ كيف من الصعب التعرف على الشعار من النظرة الأولى في الشكل الأول. لاحظ صعوبة تحديد هوية هذه الشعارات. لاحظ كيف يمكن التعرف على الشعارات بسهولة من خلال الألوان وهي شعارات MasterCard، PayPal، Tommy Hilfiger، Flickr، Microsoft وTarget. الألوان بعد دراستنا وتعرّفنا على الألوان ونماذجها ونظريتها ومخططاتها من مقال الألوان في تصميم الرسوميات ونظرية اللون فإن أكثر وأول عنصر تصميمي يطبّق عليه نظرية الألوان وكل ما يتعلق به هو الشعار. يجب التركيز على تأثير الألوان على الجمهور المستهدف، ويجب أن يكون تأثيرها إيجابيًا، وفي حال استخدام أكثر من لون فيجب تطبيق قواعد المخططات اللونية لتوفير التوازن اللوني للشعار ولا يكون نشازًا أو غير مريح للنظر. كما نستطيع استخراج لوحة الألوان للهوية البصرية للعلامة التجارية من تصميم الشعار، أو قد يحضّر المصمم لوحة الألوان مسبقًا بناءً على نهج سابق متبع من قبل العلامة التجارية أو معطيات أخرى. أحيانًا قد يكون لاسم العلامة التجارية دلالة أو تعبير يدل على الألوان التي يجب أن تتواجد في الشعار، وذلك يجعله منطقيًا ومتناسقًا مع الاسم وراسخًا أكثر في الأذهان. شعار متصفح الانترنت فاير فوكس (الثعلب الناري) بتدرجات لون النار. مراعاة نماذج الألوان من المهم أن تعلم إذا ما كان الشعار سيستخدم للشاشات فقط أم للطباعة فقط أم لكلاهما، حيث يجب أن تصمم الشعار بنموذج ألوان RGB الخاص بالشاشات وبنموذج ألوان CMYK في حالة الطباعة، وفي هذه الحالة ستلاحظ تغيرًا على الألوان بين الشعارين وهذا طبيعي نظرًا لاختلاف نظام مزج الألوان بين النموذجين. في المثال التالي قسّمت شعار إنستجرام إلى نصفين بشكل قطري (مائل) وطبّقت على كل شطر نموذجًا لونيًا مختلفًا، الاختلاف بسيط للغاية ولكنك ستلاحظه إن دققت النظر. الشعارات النصية في حال استخدام النص في الشعار أو ربما بضعة حروف أو حتى حرف واحد فمن المهم أن تكون تلك الخطوط مميزة، وقد تضطر أحيانًا إلى تحريفها للحصول على تصميم شعار نصي مميز بشكل مختلف عن النص العادي. يلجأ المصممون في بعض الأحيان إلى الخطاطين لتصميم النص أو الحروف بخطوط عربية استثنائية إلا إن امتلك المصمم القدرة على التصميم بالخط العربي (مثال: شعار قناة الجزيرة الإخبارية). وأحيانًا أخرى قد يضطر المصمم إلى تصميم خط كامل فريد من نوعه لكتابة الشعار به (مثال: شعار قناة العربية الإخبارية). ولكن في أغلب الأحيان يتخذ المصمم من أحد الخطوط المتوفرة على الحاسوب أساسًا للتصميم ويحرّفه قليلًا للوصول إلى شعار فريد ومميز. شعارات قناتي الجزيرة والعربية. مجموعة من الشعارات النصية العربية مصممة من قبل عبدالرحمن ممدوح على موقع Behance. مجموعة من الشعارات النصية العربية لمختلف المصممين العرب. مجموعة من أشهر الشعارات النصية العالمية. تنظيم عملية التصميم إذا ما نظّمت عملية التصميم من البداية إلى النهاية فإنك ستوفّر على نفسك وعلى عميلك الكثير من الوقت في محاولة معرفة ما الذي يجب أن تفعله تاليًا، الموضوع بسيط ارسم مخططًا للخطوات الواجب اتباعها وطبّقه بحذافيره وستكون على ما يرام. وليكن مخطط سير عملك كالتالي: تلقي الطلب من العميل. فهم كافة جوانب الشعار المطلوب تصميمه ابتداءً بالهدف ودراسة الجمهور المستهدف والمنطقة المستهدفة والألوان المطلوبة وهوية العميل البصرية والخطوط وغير ذلك. ليس من الضروري أن تتوافر كل هذه المعلومات من قبل العميل ولكن حاول الحصول على أكبر قدر منها لتختصر الكثير من الوقت في تعديلات كثيرة لا داعي لها عبر فهم رؤية العميل وتطلعاته. البحث عن كل ما يتعلق بالشعار من أفكار وأمثلة وشعارات مشابهة. اجلس مع نفسك وفكّر في كيفية تصميم الشعار وفي كيفية تجنب تصميم شعار مشابه لما هو موجود مسبقًا. أمسك بالورقة والقلم وابدأ برسم النماذج الأولية وطورها على الورقة إلى أن تصل لفكرة مبهرة. انقل فكرتك من الورقة إلى برنامج التصميم على الحاسوب واحرص على رسم الشعار بالرسومات الشعاعية Vector لسهولة تعديلها والتلاعب بحجمها. أرسل تصميمك إلى العميل. أجرِ جميع التعديلات المطلوبة التي سيقترحها العميل. أنهِ التصميم وسلّمه للعميل. بهذه الطريقة يمكنك أن تصمم شعارًا دون إرباك أو قلق على ما يجب أن تفعله تاليًا. خاتمة يعد تصميم الشعار المجال الأكثر انتشارًا في عالم تصميم الرسوميات حيث تجد آلافًا من الخدمات المتمثلة بتصميم الشعارات في مختلف مواقع العمل الحر، حيث يحتاج الجميع إلى شعار مثل شعار قناة يوتيوب، صفحة فيس بوك، حساب تويتر، موقع إنترنت، تطبيق هاتف محمول، متجر، مصنع، شركة، منظمة أو أي شيء تقريبًا، لذلك يجب تطوير المهارات واكتساب الخبرة اللازمة لتصميم الشعارات فهي أكثر ما يملأ مخزونك من التصاميم لوضعها في معرض أعمالك. لا يختلف تصميم الأيقونة كثيرًا عن تصميم الشعار إلا أن الاستخدامات تختلف، ويظل الشعار هو الأساس في تصميم الرسوميات حيث تتبعه تصاميم بقية العناصر وهذا ما سنكتشفه في مقال قواعد تصميم الهوية البصرية الذي سينشر لاحقًا.

يحتوي موقع Wistia على مئات الآلاف من مقاطع الفيديو، كما أنه يتيح للمستخدمين اختيار لون مشغل الفيديو من لوحة تضم ملايين الألوان، أو بالتحديد 16,777,216 لونًا. وفي ظل هذه الخيارات الكثيرة، حاول موقع Wistia معرفة الألوان التي يختارها زبائن Wistia لمشغلات الفيديو الخاصة بهم، وأن يكتشف إن كان لهذه الألوان تأثير على عدد مرات تشغيل الفيديو. هيا بنا نكتشف المزيد. اللون 7b796a# يضم اللون الرمادي مئات الدرجات المختلفة، ولكن درجة واحدة هي موضع الاهتمام في هذا المقال، وهي الرمادي الدافئ أو "‎"#7B796A والذي يُعد اللون الافتراضي لمشغلات الفيديو في موقع Wistia. وعليه، إذا لم يخصص المستخدم لون المشغل الخاص به، فإن المشاهدين سوف يشاهدون مقاطع الفيديو باللون الرمادي الدافئ. وتجدر الإشارة إلى أن معظم المستخدمين يستخدمون اللون الافتراضي، إذ أن 60,000 فيديو من العينة* التي اخترناها يعتمدون على "#7B796A": في الحقيقة، إن اللون الرمادي الدافئ أكثر استخدامًا بخمس مرات من جميع الألوان الأخرى مجتمعة. وقد احتسب الموقع أيضًا عدد مرات التشغيل، والتي تُعد مؤشر قياس مهم إذ ما الفائدة من الفيديو دون تشغيله؟ وقد وجدنا أن الفيديوهات التي تحمل لون التشغيل الافتراضي تشكل الغالبية العظمى من عدد مرات التشغيل الفريدة: إن الفيديو الذي يُعرض في مشغل Wistia الرمادي أكثر تشغيلاً بتسع مرات من أي لون آخر. ويبدو أن البيانات (حتى الآن) تشير إلى أنه يجب الاحتفاظ باللون الافتراضي للحصول على الكثير من المشاهدات. ولكن هل هذه فكرة جيّدة حقًا؟ عند النظر إلى البيانات بعمق، وجد الموقع أن الرمادي الدافئ ليس الخيار الأمثل بالضرورة، إذ تشير البيانات إلى أن أن مقاطع الفيديو التي تحمل اللون الافتراضي قد جرى تشغيلها 46,577,051 مرة، فيما جرى تنزيلها 400,173,986 مرة، وذلك يعني أن مقاطع الفيديو التي تحمل اللون الرمادي قد جرى تنزيلها على صفحات المستخدمين 400 مليون مرة، ولكن المشاهدين لم يضغطوا لتشغيل هذه المقاطع سوى 46 مليون مرة فقط. وهو ما يجعل معدل تشغيل هذه الفيديوهات منخفضًا. ويمكن تعريف معدل التشغيل على النحو التالي: وبالتالي يكون معدل تشغيل مقاطع الفيديو المحاطة بمشغل رمادي اللون هو 11,64%: بعيدًا عن الرمادي لقد وازن موقع Wistia هذه الأرقام بمقاطع الفيديو التي لا تستخدم اللون الافتراضي. وكما اتضح سابقًا، فإن هذه الفيديوهات تمثل عينةً أصغر حجمًا، إذ وجد الموقع 10,732 فيديو بالمجمل توافق المعايير المحددة للعينة، ولا تستخدم اللون الافتراضي. وتشير المعطيات إلى أنه قد جرى تنزيل هذه الفيديوهات 42,365.480 مرة وتشغيلها 5,260,868 مرة، وهو ما يعني أن معدل التشغيل لمقاطع الفيديو التي لا تستخدم اللون الافتراضي هو 12.42%: ذلك يمثل تحسنًا بمعدل 7% في تشغيل مقاطع الفيديو التي لا تستخدم اللون الافتراضي. ولكن ما السبب في ذلك؟ هل يرجع ذلك إلى أن اللون الرمادي الدافئ ليس دافئًا بما فيه الكفاية؟ إن الموقع لا يعتقد أن اللون الافتراضي هو السبب الوحيد في انخفاض معدل تشغيل مقاطع الفيديو، وإنما يرجع السبب في ذلك إلى جملة من الأسباب المترابطة. إذ أن المستخدمين الذين يختارون لون مشغل الفيديو الخاص بهم، يميلون أيضًا إلى اختيار صور مصغرة مميزة، ويضبطون إعدادات المشغل لتلائم احتياجاتهم، وينشرون مقاطع الفيديو بين المتابعين، وبالمحصلة فإنهم أشخاص يبذلون مزيدًا من الجهد لتحقيق إنجازات أفضل. وبالتالي فإن هذه العوامل مجتمعة هي ما تزيد من معدل تشغيل الفيديو، ولكن في النهاية، تخصيص لون مشغل الفيديو لن يضر. تحسين معدل التشغيل إذا كنت ستغير لون مشغل الفيديو عن الرمادي الدافئ، فما هي الألوان الأخرى التي يمكنك اختيارها؟ عند استثناء اللون "7B796A#" من المعادلة، يصبح بالإمكان التعرف على أداء الألوان الأخرى. الألوان الأكثر شيوعًا يأتي اللون الأسود "‎"#000000 في المرتبة الثانية من ناحية عدد مرات التشغيل الفريدة، فهو يمثل 14,9% من الفيديوهات التي لا تستخدم اللون الافتراضي، و30,5% من مجمل عدد مرات التشغيل لهذه الفيديوهات: ورغم أن اللونين الأسود والأحمر يحظيان بمعظم المشاهدات الفريدة، إلا أن اللون الأزرق هو اللون الأكثر استعمالاً في مشغلات الفيديو، إذ أن ستة من أفضل عشرة فيديوهات ملونة من ناحية عدد مرات التشغيل الفريدة تستعمل إحدى درجات اللون الأزرق. معدل المشاهدة يشبه اللون الأسود اللون الرمادي الدافئ من ناحية أنه يمتلك عددًا كبيرًا من مرات المشاهدة الفريدة، ولكن معدل تشغيله منخفض نسبيًا. إن اللون الذي يتمتع بمعدل المشاهدة الأعلى هو "‎#C7C7C7" المعروف باللون الفضي: تحظى مقاطع الفيديو ذات اللون الفضي بمعدل مشاهدة يُقدر بـ 47.3%، إذ أن نصف الفيديوهات المنزلة تقريبًا يجري تشغيلها، وبالتالي فإن اللون الفضي يحظى بأربعة أضعاف معدل تشغيل الفيديوهات التي تحمل اللون الافتراضي. ورغم أن اللون الفضي متأخر عن اللونين الرمادي الدافئ والأسود من حيث عدد مرات التشغيل الفريدة، إلا أن معدل تشغيله يساوي 26,000 مرة من 54,000 مرة تنزيل، وهو معدل كبير بالفعل. ولكن هناك عامل آخر يتضح عند النظر إلى الألوان التي تحظى بمعدل مشاهدة مرتفع في الرسم البياني أعلاه. وازن بين هذا الرسم والرسم البياني الخاص بعدد مرات المشاهدة الفريدة، والذي كان يحتوي في معظمه على درجات مختلفة من اللون الأزرق. ذلك في الحقيقة يشير إلى أن هذه الألوان تخص علامات تجارية مختلفة، وهو ما يؤكد الفكرة التي تقول إن العلامة التجارية والتصميم بشكل عام هما ما يزيد من معدلات المشاهدة. إذًا، ماذا بشأن الألوان في أسفل قائمة معدل المشاهدات: وبشكل عام، إن الألوان ذات معدل المشاهدة المنخفض أغمق من الألوان ذات معدل المشاهدة المرتفع. وبالنظر إلى إضاءة الألوان وفق نظام الفضاء اللوني (صبغة، إشباع، إضاءة) يتضح أن أعلى عشر ألوان من ناحية معدل التشغيل تحظى بمتوسط إضاءة 0.47 (علمًا أن إضاءة اللون الأسود تمثل القيمة صفر وإضاءة اللون الأبيض تمثل القيمة 1)، وأن اللون الفضي يحظى بقيمة إضاءة 0.78 وأن قيمة الإضاءة في أربع ألوان من الألوان العشرة الأولى تزيد عن القيمة 0.5. في المقابل، فإن متوسط قيمة الإضاءة في أقل عشر ألوان من حيث معدل المشاهدة هو 0.35 كما أن قيمة الإضاءة لا تزيد في أي من هذه الألوان عن 0.5. وذلك يشير إلى أن اختيار ألوان أكثر سطوعًا لمشغل الفيديو الخاص بك قد يزيد من معدل التشغيل، حيث أن ذلك يُبرز مشغل الفيديو الخاص بك. كيف تخصص لون مشغل الفيديو الخاص بك في هذه المرحلة أمامك خياران: تحريك الدائرة في داخل لوحة الألوان إلى حين العثور على اللون المناسب. أو إدخال الكود الخاص باللون مثل "#7b796a" إذا كنت تعرف اللون الذي تبحث عنه. هنا تستطيع تعلم المزيد حول هذه الأكواد وكيفية ترجمتها إلى ألوان. اختر لونًا يلائم علامتك التجارية ما زال عليك اختيار اللون الملائم لمشغلك، ولكن الاختيار من بين 16 مليون لون مختلف ليس بالأمر السهل. إن علامتك التجارية تمثل أفضل مكان قد تبدأ منه البحث عن اللون الملائم. وإذا نظرت إلى الرسم البياني الخاص بالألوان ذات معدل المشاهدة المرتفع، سوف تلاحظ لونًا مألوفًا وهو: أزرق Wistia. أزرق Wistia هو لون العلامة التجارية الخاصة بشركة Wistia، لذلك خصصت الشركة غالبية مقاطع الفيديو الخاصة بها لتلائم تصميم موقعها. وعليه فإنه يُفضل أن تختار لون مشغلك من الألوان الرئيسية أو المكملة في علامتك التجارية، وأن يكون اللون ملائمًا لبقية الألوان في موقعك الإلكتروني. وهذا بالضبط ما فعله موقع InsightSquared المتخصص في تحليل المبيعات. فعلى غرار العلامة التجارية الخاصة بشركة Wistia، تتسم علامتهم التجارية أيضًا باللون الأزرق ("‎#00B3E9" في حالتهم) وقد استخدموا هذا اللون في مقاطع الفيديو الخاصة بهم: أما إذا لم يكن لديك قواعد معينة تتعلق بالألوان، فيُفضل أن تستخدم نظرية الألوان لاكتشاف الألوان الملائمة لفيديوهاتك وعلامتك التجارية. إن نظرية الألوان هي العلم الذي يفسر الانطباعات المختلفة التي تتركها الألوان في نفوس البشر، إذ أن بعض الألوان ترتبط بخلايا معينة في الدماغ، وبالتالي فإن اختيار اللون الملائم يُعد أمرًا مهمًا لإبراز أعمالك. على سبيل المثال، وجدت دراسة في عام 2012 أن الشركات التي تمتلك علامات تجارية يطغى عليها اللون الأحمر يُنظر إليها على أنها شركات مثيرة وحيوية، وأما تلك التي تحمل علامتها التجارية اللون الأزرق فإنه يُنظر إليها على أنها شركات جديرة بالثقة. الألوان الملائمة فيما يلي بعض الألوان ودلالاتها: أحمر: مثير، حيوي، عاطفي. أزرق: جدير بالثقة، مستقر، ودي. أخضر: طبيعي، صحي، هادئ. أرجواني: فخم، روحاني. أسود: قوي، راقٍ. انتبه: تملك الألوان دلالات مختلفة باختلاف الثقافات. اهتم بالتفاصيل يظهر من البيانات أن العديد من مستخدمي Wistia ما زالوا يستخدمون اللون الافتراضي، أو الرمادي الدافئ. ورغم أن هذا اللون يحصل على الكثير من المشاهدات، إلا أن معدل تشغيله ليس مرتفعًا كالألوان الأخرى. ربما يبدو لون مشغل الفيديو أمرًا ثانويًا بالنسبة إليك، ولكن في عالم التصميم هذه التفاصيل الصغيرة تصنع فرقًا. لذلك جرّب تخصيص لون مشغل الفيديو الخاص بك ليتلاءم بشكل أفضل مع تصميمك ومع علامتك التجارية. إنك بذلك تخلق انطباعًا أوليًا جيدًا، وهو ما قد يؤدي إلى زيادة معدل المشاهدة لديك. *هذه البيانات لا تشمل جميع الفيديوهات على Wistia، فقد اكتفى الموقع بتحليل 74 لونًا مختلفًا من بين ملايين الألوان الأخرى، وقد اختار العينة عن طريق استثناء الفيديوهات التالية: مقاطع الفيديو التي يقل عدد المشاهدات فيها عن 35 مرة: وبهذه الطريقة ضمن الموقع تحليل الفيديوهات التي شاهدها كم كبير من الناس. الفيديوهات التي يزيد معدل تشغيلها عن 50%: بما أن الفيديو قد يُنزل مرة ويُشغل مرة، فإن معدل تشغيله قد يكون 100%، لذلك جعل الموقع الحد الأدنى 50% حتى يستثني القيم المتطرفة من هذا التحليل. ترجمة -وبتصرف- للمقال The Color of Your Video Player is Affecting Your Play Rate لصاحبه Ezra Fishman

علم الألوان النفسي وقدرتها على الإقناع هو من أكثر جوانب التسويق إثارة للجدل والاهتمام. ويعود السبب إلى أن كثيرٌ من نقاشات هذه الأيام حول قدرة الإقناع بالألوان هي تخمينات وأدلة غير مؤكدة ومسوّقين يعملون على تضخيم العلاقة بين "الألوان والعقل". وللتخفيف من حدة هذا الاتجاه ومنح هذا العنصر الرائع حقاً من السلوك البشري المعاملة المناسبة، سنغطي اليوم مجموعة من أكثر الأبحاث موثوقية في نظرية الألوان والإقناع. مفاهيم خاطئة حول علم الألوان النفسي لماذا يستدعي علم الألوان النفسي الكثير من المناقشات، لكنه مدعومٌ بالقليل جداً من الحقائق؟ فالسبب كما تبيّن لنا الأبحاث يعود إلى مساهمة عناصرٍ مثل التفضيل الشخصي والخبرات والتنشئة والاختلافات الثقافية والمحيط. إلخ، في تشويش تأثير الألوان علينا. وبذلك فإن فكرة أن بعض الألوان كالأصفر أو الأرجواني لها القدرة على إثارة بعض المشاعر، هي بنفس مستوى دقّة قراءة بطاقة الحظ أو الأبراج الخاصة بك. ويزيد الأمر سوءًا بصور مبتذلة تلّخص علم الألوان النفسي بحقائق مدهشة كهذه: بالرغم من هذا لا تقلق. الآن قد حان الوقت لنلقي نظرة على أبحاث مدعومة لوجهات نظر حول دور الألوان في الإقناع. أهمية الألوان في التسويق في البداية دعونا نتحدث عن العلامات التجارية، والتي تعدّ واحدة من أهم القضايا المتعلّقة بمفهوم الألوان والمجال الذي جعل العديد من المقالات تواجه مشاكل فيه. كانت هناك العديد من المحاولات لتصنيف استجابة المستهلك لمختلف الألوان: لكن حقيقة الأمر هي أن الألوان تعتمد بشكل كبير على التجارب الشخصية حتى تكون ترجمة عالمية لمشاعر معينة. لكن هناك رسالة أشمل في مفاهيم الألوان. على سبيل المثال، تلعب الألوان دوراً كبيراً إلى حدٍ ما في عمليات الشراء والعلامات التجارية. في دراسة تحمل عنواناً مناسباً وهو تأثير الألوان في التسويق، وجد الباحثون أن 90% من القرارات المفاجئة للمنتجات قد تعتمد على الألوان فقط (وفقاً للمنتج). وفيما يتعلّق بالدور الذي تلعبه الألوان في العلامات التجارية، فتظهر لنا النتائج من الدراسات مثل دراسة التأثير التفاعلي للألوان، أن العلاقة بين العلامات التجارية والألوان يتوقّف على مدى ملائمة لون الشيء المستخدم لعلامة تجارية معينة (وبمعنى آخر، هل "يتناسب" اللون مع الشيء المُباع). وأكّدت أيضاً دراسة الأحمر المثير والأزرق القويّ أن نية الشراء تتأثّر بشكل كبير بالألوان نظراً للتأثير الذي لديها على الطريقة التي يُنظر بها للعلامة التجارية. ما يعني أن الألوان تؤثر على الطريقة التي يرى بها المستهلكون هوية العلامة التجارية المعنيّة (على كل حال، من يريد أن يشتري دراجة نارية لشركة هارلي دافيدسون إن لم تعطي شعوراً أن الهارلي قوي ورائع؟). وكشفت دراسات أخرى أن عقولنا تفضّل العلامات التجارية المعروفة، مما يجعل الألوان مهمة جداً عند إنشاء هوية العلامة التجارية. بل أنه قد اُقترح في بحث الألوان والتطبيق أنه من الأهمية الأساسية للعلامات التجارية الجديدة أن تستهدف ألواناً للشعار تضمن فيها تميّزها عن باقي المنافسين الراسخين (إن استخدم جميع المنافسين الأزرق، فستبرز باللون الأرجواني). حين يأتي الأمر عند اختيار اللون "الصحيح"، وجدت الأبحاث أن ردة فعل المستهلك المتوقعة اتجاه اللون المناسب مع ارتباطه بالمنتج هي أهم بكثير اللون نفسه. وبالتالي إذا قام صاحب دراجة هارلي بشراء المنتج كي يشعره بالقوّة، فبالإمكان أن تفترض أن الإصدار ذو اللون الوردي واللامع منه لن تكون مبيعاته جيّدة. أجرت جينيفر آكر-العالمة النفسية وأستاذة جامعة ستانفورد-دراسات حول هذا الموضوع بالذات في بحثها أبعاد هوية العلامات التجارية، ووجدت دراساتها خمسة أبعاد أساسية تلعب دوراً في هوية العلامات التجارية: (قد تشترك العلامات التجارية في صفتين، لكن في الغالب تُهيمن عليها صفةً واحدة. آخر صيحات الموضة تبدو أنيقة، معدات التخييم تبدو صلبة). وأظهر بحث آخر أن هناك علاقة حقيقية بين استخدام الألوان ومفهوم العملاء لهوية العلامة التجارية. بعض الألوان تنحاز بصورة عامة إلى صفات محددة (على سبيل المثال، البني مع الصلابة، الأرجواني مع الرقيّ، والأحمر من الإثارة). لكن تقريباً كل دراسة أكاديمية عن الألوان والعلامات التجارية ستخبرك أن تكون ألوان علامتك التجارية تدعم الهوية التي تريد تصويرها أكثر أهمية بكثير من أن تحاول مجاراة الصورة النمطية المربوطة باللون. بالنظر إلى عدم الدقة في التصريحات الفضفاضة مثل "الأخضر يعني الهدوء". هناك نقصٌ في السياق، في بعض الأحيان يُستخدم للترويج لقضايا بيئيّة مثل موقع Timberland’s G.R.E.E.N standard، لكن في بعض الأحيان يهدف للترويج في المساحات المالية مثل موقع Mint.com. في حين أن اللون البني قد يكون مفيداً في المستلزمات الصلبة (مثل شركة Saddleback Leather)، وعندما يوضع اللون البني في سياق آخر فقد يُستخدم لخلق الدفء، يجذب المشاعر (عيد الشكر) أو لإثارة شهيتك (في كل دعايات الشوكولاتة التي شاهدتها من قبل). الخط الفاصل: لا أستطيع أن أعرض عليك إرشادات سهلة وواضحة لاختيار لون علامتك التجارية، لكن بإمكاني أن أؤكد لك أن السياق الذي تعمل فيه هو بالتأكيد اعتبارٌ أساسي. الذي يلعب دوراً في الإقناع هو ما تخلقه علامتك التجارية من مشاعر، طابع، وصورة. كن متأكداً من معرفة أن الألوان تلعب دوراً فقط عندما تتناسب مع هوية العلامة التجارية المطلوبة (على سبيل المثال، استخدام الأبيض لربطه بحب شركة أبل للتصميم البسيط والنظيف). ومن غير السياق، فاختيار لون على آخر لا معنى له، وهناك القليل من الأدلة لدعم نظرية أن "البرتقالي" سيجعل الناس على الصعيد العالمي يشترون المنتج أكثر من اللون "الفضي". تفضيلات الألوان حسب نوع الجنس الحسّ المناسب قد يفسر سبب أن أكثر السيارات باللون الأبيض، أسود، فضّي ورمادي ... لكن هل هناك شيءٌ يفسّر سبب عدم وجود أدوات كهربائية باللون الأرجواني في العمل؟ واحدة من أفضل الدراسات في هذا الموضوع هي دراسة جو هالوكس مهام الألوان. تعرض معلومات هالوكس بعض التفضيلات الواضحة في بعض الألوان بين الجنسين. من المهم أن نلاحظ أن بيئة الفرد -وخصوصاً مفاهيمه الثقافية- تلعب دوراً قوياً في فرض اللون المناسب للجنس، وهذا بدوره بإمكانه أن يؤثر على اختيارات الفرد. افترض، مثلاً، قد غطّت مجلة سميثسونيان تفاصيل أسباب أن اللون الأزرق يصبح لوناً للأولاد واللون الوردي يعتبر في النهاية لوناً للفتيات (وكيف اعتادت أن تكون العكس!). وهنا نتائج هالوكس للألوان الأكثر والأقل تفضيلاً لدى الرجال والنساء: الألوان المفضلة للرجال الألوان المفضلة للنساء الألوان الأقل تفضيلاً لدى الرجال الألوان الأقل تفضيلاً لدى النساء أهم النقاط البارزة في هذه الصور هي سيادة اللون الأزرق في كلا الجنسين (كان اللون المفضّل في كلا المجموعتين) وتفاوت المجموعتين في اللون الأرجواني. أدرجن النساء اللون الأرجواني ضمن أول الألوان تفضيلاً، لكن الرجال لم يدرجوه في قائمة الألوان المفضّلة. (قد يكون هذا السبب في عدم وجود أدوات كهربائية باللون الأرجواني، لأنه منتجٌ مرتبط بالرجال إلى حدٍ كبير؟) ويظهر بحث آخر في دراسات لمفاهيم الألوان وتفضيلاتها أنه عندما يتعلق الأمر بالعمق، الألوان الخفيفة ودرجة اللون فيبدو أن الرجال يفضّلون الألوان الغامقة بينما تفضّل النساء الألوان الهادئة. وكذلك الرجال في الغالب يختارون الألوان العميقة كمفضّلة لديهم (الألوان مع إضافات الأسود)، بينما النساء يتقبلون الألوان الخفيفة (الألوان مع إضافات الأبيض): المصدر: KISSmetrics. الصور تعرض التفاوت بين تفضيلات الرجال والنساء. ابقِ هذه المعلومات في بالك عند اختيار لوحة الألوان الأساسية لعلامتك التجارية. تقديم الاختلاف الكبير بين التفضيلات الذوقيّة المبيّنة أعلاه، يدفع إلى جذب الكثير من الرجال أو النساء إن شكّلوا النسبة الأكبر من مشتريك المفترضين. تنسيق الألوان وروابط التحويل أصبح موضوع الكشف عن "أفضل" لون لمعدلات الانتقال على المواقع شائعٌ في الآونة الأخيرة (بدأ هنا ولاحقاً هنا). وقد قدّموا بعض النقاط الممتازة، لأنه بالتأكيد صحيح أنه لا يوجد لون واحد مفضّل لاستخدامه في روابط التحويل. وضّح المبدأ النفسي المعروف بـ تأثير العزلة أن العنصر الذي "يبرز مثل قرحة الإبهام" فسيبقى في الذاكرة على الأرجح. وتبيّن البحوث بوضوح أن المشاركين قادرين على التعرّف وتذكّر العنصر أفضل بكثير عندما تبرز بوضوح عن محيطها. زر التسجيل بارز لأنه مثل "الجزيرة" الحمراء في البحر أزرق. وجدت الدراسات التالية الاستجابة الجمالية لدمج الألوان وتفضيلات المستهلكين من دمج الألوان أنه في حين أن الغالبية العظمى من المستهلكين الذين يفضّلون أنماط الألوان بنفس الدرجة، يفضّلون الألوان البارزة والمتناقضة للغاية. فيما يتعلّق بدمج الألوان (كما هو مبيّن في الرسم التوضيحي لـ KISSmetrics)، فهو يعني إنشاء هيكل بصري مكوّن من قاعدة ألوان أساسية وخلطهم بألوان تكميلية بارزة (أو بإمكانك استخدام ألوان ثلاثية): المصدر: KISSmetrics وهناك طريقة أخرى لدمج الألوان تكون باستخدام الخلفية، الأساس والألوان البارزة لإنشاء تسلسل هرمي (كما قد بيّن جوش من StudioPress في الأسفل) على موقعك والذي يُمرّن العملاء على اللون الذي يستطيعون الضغط عليه: المصدر: StudioPress لمَ هو مهم: مع أنك قد تشعر بأنك مصممٌ داخلي بعد قراءة هذا الجزء، إلا أن هذه الأشياء هي بالواقع مهمة جداً لتساعدك في فهم السبب خلف نسبة ارتفاع وهبوط الضغط على الروابط. وعلاوة على ذلك، سيساعد في إبعادك عن مثالية معدلات الانتقال على المواقع والذي يضلّل الكثير من الأشخاص. ضع في اعتبارك، على سبيل المثال، هذا المثال الذي غالباً ما يذكر عن زيادة عدد المنتقلين عبر الروابط بسبب تغيير لون الزر: زاد من تغيير لون الزر عدد المنتقلين عبر الروابط بنسبة 21 بالمئة، لكن هذا لا يعني أن اللون الأحمر يحمل نوعاً من أنواع السحر ليجعل الناس يضغطون عليه. ألقِ نظرةً فاحصةً على الصورة: من الواضح أن بقيّة الصفحة يتجه نحو اللون الأخضر، مما يعني أن الزر الأخضر سيندمج مع ما حوله. في خلال ذلك يوفّر اللون الأحمر التناقض البصري الشاسع (وهو لون مكمّل للأخضر). وجدنا دليل آخر عن تأثير العزلة في عدد لا يحصى من التجارب المتنوعة، متضمنة هذه التجربة التي أُجريت بواسطة باراس كوبرا والمنشورة في مجلة سماشينق (Smashing). كان كوبرا يختبر ليرى كيف يكون بإمكانه الحصول على أكبر عدد من التنزيلات لبرنامجه PDFProducer، وضمّن هذه الاختلافات التالية لتجربته: هل تستطيع تخمين أي المجموعات قد أدّت بشكل جيّد؟ (تلميح: تذكّر، تناقض الألوان مهمٌ جداً). هكذا كانت النتائج: وكما ترى، فالمجموعة #10 قد تفوّقت على الأُخريات بحدٍ كبير. بالتأكيد هي ليست مصادفة أنها كانت هي المجموعة الأكثر تفاوتاً بالألوان. ستلاحظ أن اسم البرنامج مكتوب بخط صغير وبلون رماديّ فاتح، لكن النص الإجرائي ("التحميل مجاناً") كان كبيراً وبلونٍ أحمر، مما يخلق التباين اللازم لرفع نسبة الضغط على الروابط. في حين أن هذه ليست سوى دراسة من عدة دراسات، إلا أنك يجب أن تبقي تأثير العزلة في بالك عند تجربتك للألوان لخلق التباين في تصميم موقعك وإرشاد المتصفحين للمناطق التي تحتوي على روابط. لماذا نحب "الموكا" لكننا نكره اللون " البني"؟ بالرغم من إمكانية النظر للألوان بطرقٍ مختلفة، كذلك أسماء هذه الألوان تهُمُّ أيضاً. وفقاً لهذه الدراسة، عندما يُطلب من الأفراد تخمين منتجات بأسماء ألوان مختلفة (مثل المكياج)، كانت تُختار أسماءً "فاخرة" في كثير من الأحيان. على سبيل المثال، وُجِدَ الموكا مفضلاً أكثر من البني بشكل ملحوظ-على الرغم من أن الباحثين قاموا بعرض نفس اللون للأفراد. وجدت دراسة إضافية أن نفس التأثير ينطبق على منتجات كثيرة، يصنّف المستهلكين أسماء طلاء الألوان الأكثر راحة للعين بشكل دقيق أكثر من أسماء نظيراتها. كما تَبيّن أيضاً أن أكثر أسماء الألوان الفريدة والغير معتادة تزيد من نية الشراء. على سبيل المثال، عندما يكون هلام الفول مسمىً بأسماء مثل رازماتاز، تكون مختارةً أكثر من أسماء هلام الفول الأخرى مثل صفار الليمون. قد وُجِدَ هذا التأثير أيضاً في المواد الغير غذائية مثل القمصان. وكغرابة ما تبدو عليه، فاختيار أسماء وصفية ووابداعية لا تنسى لوصف لونٍ معين (مثل اختيار "اللون السماوي" على "الأزرق الفاتح") قد يكون جزءاً مهماً للتأكد من أن لون المنتج يحقق تأثيراً كبيراً. ترجمة -وبتصرّف- للمقال: The Psychology of Color in Marketing and Branding لصاحبه GREGORY CIOTTI.

هو أحد أهم عناصر التصميم، حتى وإن شاهدت تصميمًا بالأبيض والأسود فهو يحتوي بذلك على لونين وهما الأبيض والأسود. إذًا لا يوجد تصميم بدون ألوان حتى وإن كانت بلون واحد. فاللون أساس أي تصميم. لهذا يجب الاهتمام بهذا العنصر وفهم كل ما يتعلق به ليكون أحد أهم أسباب نجاح أي تصميم. ما هو اللون؟ نحن ندرك اللون عبر انعكاس الضوء على الأشياء الملونة إلى داخل أعيننا لتقوم مستقبلات الضوء داخل أعيننا بإرسال إشارات عصبية إلى الدماغ فندرك اللون الذي نشاهده. إذًا اللون هو الإدراك الذي يوفر بُعدًا مهمًا في الاتصال المرئي مع ما حولنا. ويعد تأثير اللون أكبر من باقي العناصر وخاصة التأثير المزاجي على المشاهد، ويشكّل العنصر الأهم من عناصر الهوية البصرية لأي علامة تجارية. وقد أسس العديد من العلماء نظريات عدة للون كما درسوا فلسفته وكتبوا عن ذلك العديد من الكتب والمقالات. أهمية اللون تنبع أهمية اللون من كونه العنصر الأهم والأكثر تأثيرًا في التصميم، وعلى الرغم من أن اللون يثير مشاعر متباينة ومختلفة من شخص لآخر بحسب مزاجه وثقافته، إلا أن الاستخدام الصحيح والمدروس للون في التصميم يساعد على ترسيخ العلامة التجارية للشركات ويزيد الموثوقية والانتشار الواسع للمنتجات. على سبيل المثال لو أنك دخلت متجرًا استهلاكيًا ضخمًا ومشيت في ممر المشروبات الغازية باحثًا عن عبوة لمشروبات غازية من كوكاكولا فإنك لن تبحث في ملايين العبوات على الرفوف عن أسماء المشروبات أو شعاراتها، بل تبحث بالتأكيد عن العبوات الحمراء بدرجة لونها المميز، وعندما تلمحها من بعيد فإنك تتجه بسرعة نحوها ثم تحملها لتتأكد من اسم وشعار المشروب بعد أن أدركت أنه اللون المطلوب. إذًا أصبح اللون الأحمر عندما نبحث عن مشروبات غازية يدل على علامة كوكاكولا تحديدًا، وهذا هو تأثير اللون على المستهلكين ومقدرته على الانتشار بالسوق، والأمثلة على ذلك كثيرة. ومن هنا نستنتج أهمية اللون في التصميم وتأثيره على العملاء، إذ لدى اللون القدرة والقوة لضمان نجاح أو فشل أعمال الشركات والعملاء، فكما أن له دورًا في نجاح علامة تجارية ما، فإن الاستخدام الخاطئ وغير المدروس سيكون له أثر سلبي ويسبب الفشل. لنفترض أنه طلب منك كمصمم أن تصمم الهوية البصرية لعلامة تجارية تعنى بإنتاج ألعاب الأطفال بحيث سيكون السوق الرئيسية المستهدفة في الهند، فإذا قمت باعتماد اللون البني لتصميمك فسيكون الفشل الذريع مصير تلك الشركة، لأن اللون البني في الهند يشير إلى الحداد والموت والحزن، وهذا لا ينطبق مع منتجات ألعاب الأطفال التي تدعو للفرح والسعادة، فإذا ما وضعت منتجات هذه الشركة على رفوف المتاجر هناك بجانب المنتجات المنافسة الأخرى التي تزينت بالألوان الزاهية فلن يشتري أحد هذه المنتجات بسبب فشلك في اختيار الألوان الصحيحة. على المصممين جميعًا فهم ماهية اللون ونظرياته ودراسة تأثيراته على المجتمعات المستهدفة من خلال فهم ثقافاتهم وطبيعة الرسالة والهدف من التصميم. الصورة بواسطة Tom Radetzki من موقع Unsplash المصطلحات المحددة لسمات الألوان عندما تسير في سوق الألبسة سيلفت انتباهك الألوان المختلفة للألبسة، فهذا أزرق فاتح وذاك أخضر داكن ولكن الذي بجانبه داكن أكثر قليلًا وهناك ما هو أفتح درجة لونية منه، هناك العديد من الدرجات للألوان، لاستخراج تلك الدرجات المختلفة من كل لون هناك علامات ومصطلحات رئيسية محددة للحصول على التدرجات المختلفة من الألوان، وهي الصبغة Hue والسطوع Tint والتظليل Shade والدرجة اللونية Tone والتشبع Saturation والصفاء Chroma والقيمة Value. الصبغة Hue أي نموذج من نماذج الألوان يتضمن ألوانًا رئيسية نقية نستخرج منها باقي الألوان بكافة درجاتها عبر تنسيقات معينة، فعلى سبيل المثال يتألف نموذج ألوان RGB من ثلاثة ألوان رئيسية هي الأحمر والأخضر والأزرق، وتختلف هذه الألوان الرئيسية كما يختلف عددها من نموذج ألوان لآخر، وتختلف نتائج دمج هذه الألوان بحسب النظام المتبع. ولهذه الألوان مستويات كالألوان الأساسية والثانوية. ومن المهم أن نعلم بأن الصبغة Hue لا تحوي اللونين الأبيض والأسود. ويعرّف اللون النقي بأنه اللون الذي لا يحوي أي درجة من اللون الأسود أو الأبيض، أي لا يحوي أي درجة من الدرجات الداكنة أو الساطعة. السطوع Tint يعرّف السطوع (Tint) بأنه درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الأبيض، وهو ما يجعل درجات ذلك اللون فاتحة وساطعة. يعمل السطوع على تفتيح اللون، لكنها لا تجعله أكثر إشراقًا، حتى وإن بدى أكثر إشراقًا ولكنه ليس كذلك، فهو في الواقع نفس اللون ولكنه باهت أكثر. ولا يحتوي السطوع على اللون الرمادي ولا الأسود. التظليل Shade وهو عكس السطوع بحيث أنه درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الأسود. وهو لا يحتوي على أي أبيض أو رمادي على الإطلاق. يجعل اللون داكنًا أكثر، ويمكن استخدامه ببساطة في تصميم منظر طبيعي على العناصر التي لا تصلها أشعة الشمس، أي على العناصر المظللة. الدرجة اللونية Tone تعرف الدرجة اللونية Tone على أنها درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الرمادي فقط. وعملية دمج الألوان باللون الرمادي سيقلل من حدة اللون. القيمة Value وهي مقدار الفرق بين السطوع Tint والتظليل Shade للون. التشبع Saturation والصفاء Chroma المصطلحان متقاربان جدًا من حيث المعنى وأحيانًا يستخدمان للغرض نفسه، ويمثلان مدى نقاء وصفاء اللون، فكلما كان اللون باهتًا أو يشوبه اختلاط مع اللون الأبيض أو الأسود أو الرمادي كان أقل تشبّعًا وصفاءً وكلما قل اختلاطه بهذه الألوان المحايدة كان أكثر تشبعًا وصفاءً. معاني الألوان واستخداماتها في التصميم (نظرية الألوان) اللون هو أداة حيوية يمكنها التأثير على الحالة المزاجية للمشاهدين. ومن المهم أن نتذكر أن الطريقة التي يُدرك بها اللون تعتمد أيضًا على الثقافة التي نشأ فيها المشاهد وهي أيضًا مرتبطة ارتباطًا مباشرًا بتجربته وتفضيلاته وتنشئته. ونظرًا لأن كل شخص يرى اللون بطريقة مختلفة، فإن هذا يعني عدم وجود لوحة ألوان مثالية. فما يثير رد فعل ما في شخص ما قد يثير رد فعل مختلف تمامًا في شخص آخر، والاختلافات الثقافية تعني أن لونًا ما يدعو للسعادة والتفاؤل في بلد ما، يمكن أن يكون محبطًا في بلد آخر، فإذا كنت ترغب في إنشاء تصميم فعال للغاية، فأنت تريد أن تفهم معاني الألوان وكيف تنقل رسالتك إلى الجمهور المستهدف. وهناك أنواع للألوان وهي الألوان الدافئة والباردة والمحايدة. الألوان الدافئة وهي الأحمر والبرتقالي والأصفر ودرجاتها المختلفة. بشكل عام، هذه الألوان حيوية ونشطة، مع دلالات إيجابية نسبيًا. الأحمر الأحمر لون النار، ويرتبط بالعاطفة والحب والشهوة. يمكن أن يرتبط أيضًا بالتحذيرات والخطر، أو حتى بالغضب. يمكن أن يكون للأحمر تأثير صحي على الناس أيضًا حيث يسبب لهم التوتر الذي قد يرفع معدل التنفس وضربات القلب. تصميم Nissan GT-R Sale- Landing page Concept للمصمم DMTR STFNSHN بترخيص المشاع CC BY-NC-ND 3.0 البرتقالي لون البرتقال وهو لون حيوي وإيجابي، كما يمكن أن يؤدي ارتباطه بأوراق الخريف والتحولات الموسمية إلى جعل الناس يفكرون في التغيير عندما يرونه. يرتبط البرتقالي أيضًا بالتحذيرات، على الرغم من أنها أقل قوة من اللون الأحمر. تصميم KTM duke 200 specification page للمصمم Goprotoz Design بترخيص المشاع CC BY-NC-ND 3.0 الأصفر لون الشمس وهو لون السعادة ويرتبط ارتباطًا وثيقًا بأشعة الشمس والأمل. يمكن أيضًا ربطه بالحذر والجُبن. تصميم Geo Protocol — Visual Identity and Web Design للمصممين LEAGUE \ Design Agency و Julia Zamiatina و leksandr Gusakov بترخيص المشاع CC BY-NC-ND 3.0 الألوان الباردة الأخضر والأزرق والأرجواني ودرجاتها المختلفة. بشكل عام، هي أكثر تحفظًا واسترخاء واحترافية وهدوءًا من الألوان الدافئة. الأزرق لون البحر والسماء، يدل على الثقة والاستقرار وهو مهدئ ويمثل أيضًا الصدق والولاء. كما أنه ينطوي على الثقة والمهنية والسلام وحتى الروحانية. تصميم ProDent للمصممة lizaveta Yaryhina بترخيص المشاع CC BY-NC-ND 3.0 الأخضر لون النبات والحياة ويعني النمو والانسجام والطبيعة ويرتبط بالثراء والمال والاستقرار، خاصة في الظلال الداكنة. تصميم redesign website للمصممة Amani Abu Zanouna بترخيص المشاع CC BY-NC-ND 3.0 أرجواني لون أزهار اللافندر، لون يدل على الإبداع، الخيال، الرقي، الرومانسية، ولطالما ارتبط بالفخامة والملكية، ولكنه يرتبط أيضًا بالغموض والسحر. الأرجواني الفاتح، مثل اللافندر، أكثر رومانسية ويرتبط بالربيع. تصميم OrderMe للمصمم Stas Ilin بترخيص المشاع CC BY-NC-ND 3.0 الألوان المحايدة الألوان المحايدة مهمة جدًّا لتصميم الرسوم لأنها تعمل غالبًا كخلفية ومن المتوقع أن تنتج التأثيرات الصحيحة بالتنسيق مع ألوان مميزة أكثر إشراقًا. ومع ذلك، يمكن أن تحمل معانيها الخاصة ورسائلها المعقدة. الأبيض لون النقاء، لون الحليب، لون الغيوم ويدل على النظافة، الليونة، التطور، الأناقة، الالوهية، حفلات الزفاف، الملوك والإيجابية بشكل عام. في بعض الثقافات ترتبط مع الموت والمأساة. فالأبيض والأسود يمكن أن يكون لها معانٍ مختلفة جدًا بحسب ثقافة البلد. تصميم Glanz Project للمصممة Bilawal Shah بترخيص المشاع CC BY-NC-ND 3.0 الأسود لون الظلام والليل والفحم، وهو لون أنيق وراقٍ، ولكن يمكن أيضًا أن يكون حزينًا وممثلًا للموت والحداد. ويستخدم للتعبير عن إحساس حاد أو غامض أو أنيق. الأسود هو أيضًا اللون الافتراضي للطباعة. تصميم My personal web للمصممة Denitsa Damyanova بترخيص المشاع CC BY-NC-ND 3.0 الرمادي يمكن عد اللون الرمادي معقدًا وقويًا، ولكن يمكن أيضًا أن يظهر على أنه ممل إذا تم استخدامه بطريقة خاطئة. هو أحد أكثر الألوان المحايدة مرونة، حيث يمكن رؤيته على أنه دافئ أو بارد، تقليدي أو حديث. ويرتبط أيضًا بمشاعر المهنية، الرسمية، المتطورة، الكآبة، الملل، المزاجية. تصميم Skymob - Logo & Website للمصممة Detlef Aioanei بترخيص المشاع CC BY-NC-ND 3.0 البني والبيج لون الخشب والشوكولا، البني صلب ويمكن الاعتماد عليه، ويمكن أن يرتبط بالطبيعة اعتمادًا على السياق الذي يستخدم فيه. بينما يمكن أن يكون البيج دافئًا أو باردًا حسب الألوان المستخدمة حوله. إنه محافظ بشكل عام ويمكن أن يكتسب دفء اللون البني أو برودة اللون الأبيض. يأخذ معنى الألوان من حوله ويتلاشى غالبًا في الخلفية. تصميم Coffee Trading Landing Page للمصممة Tatiana Dudik بترخيص المشاع [CC BY-NC-ND 3.0}(http://creativecommons.org/licenses/by-nc-nd/3.0/) الاختلافات الثقافية أحد المجالات التي يحتاج فيها المصممون إلى توخي الحذر بشكل خاص في عملهم هو النظر في الاختلافات الثقافية بالنسبة لمعاني الألوان. على سبيل المثال، في معظم الثقافات الغربية يرتبط الأبيض بالبراءة ويرتبط الأسود بالموت والحداد. لكن في ثقافات أخرى، وخاصة الصين واليابان وكوريا، ودول آسيوية أخرى، يرتبط اللون الأبيض بالموت والحداد، وحتى الحظ السيئ. لذلك تختلف التأثيرات النفسية للون على سلوك الإنسان باختلاف الثقافة. من المهم التفكير في المكان الذي يأتي منه الجمهور المستهدف، فإذا كان غالبية المستخدمين لموقع معين قادمين من الهند على سبيل المثال، فسيكون استخدام اللون الأسود فكرة سيئة. ولكن إذا كانوا قادمين من البلاد العربية، فإن اللون الأخضر مرتبط بالحظ والثروة والخصوبة، والتي قد تكون بالضبط نوع الرسالة المطلوبة. يمكنك النظر لهذا التصميم من موقع جامعة ناني يانغ التكنولوجية في سنغافورة حيث يظهر لك اختلاف تأثير الألوان بحسب المناطق حول العالم. الرسم البياني يوضح رؤية القائمين على الدراسة، وقد تختلف دراسات أخرى معها حول تأثيرات الألوان تبعًا للثقافة الدائرة اللونية (عجلة الألوان) تتضمن هذه الدائرة اللونية قياسيًا الألوان الرئيسية الثلاث والألوان الثانوية والثالثية. وتقوم جميع الشروحات والتصاميم على هذه الألوان تحديدًا، وهي الألوان الأساسية في دراسات نظرية الألوان. وقد صمم إسحاق نيوتن أول رسم تخطيطي دائري للألوان في عام 1666. الألوان الرئيسية هي الأحمر والأصفر والأزرق، في نظرية الألوان التقليدية فإن الألوان الرئيسية هي الألوان الصبغية الثلاثة التي لا يمكن مزجها أو تشكيلها بأي مزيج من الألوان الأخرى. جميع الألوان الأخرى مشتقة من هذه الألوان الثلاثة. الألوان الثانوية هي الأخضر والبرتقالي والأرجواني والتي تتشكل عن طريق خلط الألوان الرئيسية. الألوان الثالثية هي أصفر برتقالي، أحمر برتقالي، أحمر بنفسجي، أزرق بنفسجي، أزرق أخضر، أصفر أخضر وتتشكل عن طريق خلط لون رئيسي وثانوي. هذا هو السبب في أن التدرج اللوني هو اسم مكون من كلمتين، مثل الأزرق الأخضر والأحمر البنفسجي والأصفر البرتقالي. القواعد الرقمية لتمثيل الألوان والفروقات فيما بينها (النماذج اللونية) الغرض من هذه القواعد هو تسهيل تحديد الألوان بطريقة قياسية ومقبولة بشكل عام. وتسمى هذه القواعد بنماذج الألوان، ويمكن تصوير نموذج الألوان كمخطط متعدد الأبعاد بالنسبة لطيف الألوان. تحتوي معظم نماذج الألوان الحديثة على ثلاثة قنوات لونية مثل RGB، وبالتالي يمكن تصويرها على أنها أشكال ثلاثية الأبعاد، في حين أن النماذج الأخرى لها أبعاد أكثر مثل CMYK. فيما يلي، سنلقي نظرة على نماذج الألوان RGB وHSV وCMYK وLAB، وهي جميعها سائدة في أدوات التصميم الرقمي والطباعي ولغات البرمجة الحالية. RGB نموذج الألوان RGB (الأحمر Red والأخضر Green والأزرق Blue) هو الأكثر شهرة والأكثر استخدامًا كل يوم. يحدد مساحة اللون من حيث ثلاثة مكونات وهي الأحمر والأخضر والأزرق وجميعها تتراوح من 0-255. ويستخدم هذا النموذج في عمل التصاميم الخاصة بالشاشات مثل تصاميم الويب وتطبيقات الهواتف المحمولة وتطبيقات سطح المكتب. نموذج ألوان RGB هو نموذج مضاف، أي أنه يتم دمج قيم الأحمر والأخضر والأزرق (المعروفة باسم الألوان الرئيسية الثلاثة) لإعادة إنتاج ألوان أخرى. على سبيل المثال، يمكن تمثيل اللون "الأحمر" بـ [R = 255 ، G = 0 ، B = 0] ، "بنفسجي" بـ [R = 238 ، G = 130 ، B = 238]. وتمثيلها الرسومي المشترك هو الصورة التالية: HSB يحدد نموذج الألوان HSB بالسمات التالية (الصبغة Hue، التشبع Saturation، السطوع Brightness). الصبغة: نوع اللون (مثل الأحمر أو الأزرق أو الأصفر). وتتراوح من 0 إلى 360 درجة في معظم التطبيقات. التشبع: شدة اللون. وتتراوح من 0٪ إلى 100٪ (0 يعني عدم وجود لون و100 يعني لون كثيف مشبع). وتسمى أحيانًا "الصفاء" كما ذكرنا سابقًا. السطوع (أو القيمة): سطوع اللون. وتتراوح قيمته من 0٪ إلى 100٪ (0 دائمًا أسود اعتمادًا على التشبع وقد يكون 100 أبيض أو لون مشبع أكثر أو أقل). ويُعرف نموذج HSB أيضًا باسم نموذج HSV (الصبغة والتشبع والقيمة). تم إنشاء نموذج HSV في عام 1978 بواسطة Alvy Ray Smith. تمثيلها الرسومي المشترك هو الصورة التالية: الصورة من Wikia CMYK النموذج اللوني CMYK، المعروف أيضًا باسم CMJN، يرمز إلى: أزرق سماوي Cyan، أرجواني Magenta، أصفر Yellow وأسود blacK وتتراوح قيم جميعها من 0٪ إلى 100٪ في معظم التطبيقات. إنه نموذج ألوان مطروح يستخدم في الطباعة الملونة. يعمل CMYK على خداع بصري يعتمد على امتصاص الضوء. المبدأ هو مزج ثلاث ألوان واحد للسماوي والآخر للأرجواني والآخر للأصفر والتي ستعيد إنتاج الألوان. تمثيلها الرسومي المشترك هو الصورة التالية: مثل نموذج ألوان RGB، يعد CMYK مزيجًا من الألوان الأساسية (السماوي والأرجواني والأصفر والأسود). ويعاني CMYK من نقص في ظلال الألوان التي تسبب ثغرات في طيف ألوان هذا النموذج. لهذا السبب غالبًا ما توجد اختلافات عندما يقوم شخص ما بتحويل الألوان بين CMYK إلى RGB. ويستخدم هذا النموذج تحديدًا في الأغراض الطباعية، ولهذا نحتاج للون الأسود، حيث يُطبع النص عادةً باللون الأسود ويتضمن تفاصيل دقيقة، فإن لم يكن لدينا عبوة حبر سوداء في الطابعة فإن الطابعة سوف تطبع الألوان الثلاثة الأخرى فوق بعضها البعض لتمتزج وتنتج اللون الأسود، وعند الطباعة بالألوان الثلاثة فوق بعضها فإن ذلك سيتطلب محاذاة دقيقة للغاية لكل صورة أو نص يستخدم اللون الأسود. كما أن مزج الأصباغ السماوي والأرجواني والأصفر لا ينتج لونًا أسودًا نقيًا. ويمكن أن يؤدي خلط الأحبار السائلة للألوان الثلاثة معًا لجعل الورق موضع اللون الأسود رطبًا، وهي مشكلة في الطباعة عالية السرعة حيث يجب أن يجف الورق بسرعة كبيرة لتجنب وضع علامة على الورقة التالية، والورق ذو الجودة الرديئة مثل ورق الصحف قد يتمزق إذا أصبح رطبًا جدًا. كما أن استخدام كمية واحدة من الحبر الأسود بدلاً من ثلاث وحدات من أحبار الألوان الأخرى لتكوين اللون الأسود يوفّر كثيرًا في التكلفة فغالبًا ما تكون عبوة الحبر الأسود أرخص من الملونة. LAB نموذج الألوان LAB والذي يعمل بمبدأ مختلف عن باقي النماذج لأنه يحدد الألوان بناءً على محاور كما في التمثيل الرسومي التالي لذلك يعد نموذج LAB اللوني أكثر دقة في تحديد الألوان من بقية النماذج اللونية، يستخدم ثلاث قيم (L و A و B) لتحديد الألوان. تحدد مساحات ألوان RGB و CMYK لونًا عن طريق إخبار الجهاز بكمية كل لون مطلوب. يعمل النموذج Lab بطريقة أشبه بالعين البشرية، حيث يحدد لونًا باستخدام نظام ثلاثي المحاور. المحور A (الأخضر إلى الأحمر) والمحور B (الأزرق إلى الأصفر) ومحور الإضاءة L. وهذا يعني أنه من الأسهل الحصول على نفس اللون تمامًا عبر وسائط مختلفة، ولذلك يستخدم بشكل أساسي في صناعة البلاستيك والسيارات والمنسوجات. مخططات ولوحات الألوان بعد أن تعرفنا على كل شيء يتعلق بالألوان وعلاقتها بتصميم الرسوميات، يجب أن نعلم كيفية استخدام الألوان في التصميم بالطريقة الصحيحة والاحترافية. يعد مخطط الألوان هو الأسلوب الذي يتم من خلاله إنشاء لوحات الألوان وأما لوحات الألوان فهي مجموعة محددة من الألوان تعد بمثابة هوية التصميم اللونية بحيث تستمد ألوان التصميم من هذه اللوحة فيكون التصميم من حيث الألوان متناسقًا ومتجانسًا. ويعتمد مخطط الألوان على أنظمة خاصة تحدد علاقة الألوان ضمن لوحة الألوان ببعضها، فإذا صممت واجهتي ويب واعتمدت في الأولى على لوحة ألوان أنشأتها بنفسك وبدون الاعتماد على أحد مخططات الألوان، والثانية اعتمدت فيها على لوحة ألوان أنشأتها بناءً على أحد مخططات الألوان، فإن الواجهة الثانية ستكون بكل تأكيد أكثر تناسقًا من الأولى. مخططات الألوان المخطط أحادي اللون Monochromatic color scheme: يستخدم درجات مختلفة من السطوع Tint والظلال Shade لنفس الصبغة اللونية Hue. وهو ما سيصبغ التصميم أو الواجهة بتدرجات لون واحد. مخطط الألوان المتماثل Analogous color scheme: يستخدم الألوان الموجودة بجانب بعضها على عجلة الألوان. ينتج عن ذلك تصميم متجانس بعيد كل البعد عن التباين. مخطط الألوان التكميلي Complementary color scheme: يستخدم الألوان المتقابلة على طرفي عجلة الألوان. وهو المخطط الخاص بتصاميم تعتمد أساسًا على التباين. وتتواجد الألوان الدافئة والباردة معًا في التصميم ذاته. مخطط الألوان التكميلية المنقسمة Split Complementary: يستخدم لونًا من جهة في عجلة الألوان ومن الجهة المقابلة تمامًا لونين منقسمين بفارق بسيط بينهما. ويعد اللون الأول مهيمنًا واللونين الآخرين ثانويين. مخطط الألوان الثلاثي التكميلي Triadic Complementary (Triad): يستخدم ألوانًا متباعدة بالتساوي على عجلة الألوان. مخطط ألوان تتراديك (التكميلي المزدوج) Tetradic (Double Complementary): يستخدم مجموعتين متقابلتين من الألوان التكميلية. لوحات الألوان بعد اختيار أحد المخططات السابقة وأخذ نظرية الألوان في الحسبان والتنبّه إلى معانيها ودراسة التصميم من حيث المتطلبات والهدف ودراسة الجمهور المستهدف، بعد كل ذلك يجب عليك إنشاء لوحة الألوان المناسبة للتصميم، أو ابحث في مواقع الإنترنت المختصة بلوحات الألوان، بعضها يساعدك على إنشاء لوحة ألوانك الخاصة وبعضها يحتوي على الآلاف من لوحات الألوان المعدة مسبقًا لتختار منها وبعضها يحوي لوحات ألوان شهيرة ذات أسماء ورموز معرفة يمكنك الاعتماد عليها واستخدامها، إليك أهم هذه المواقع. Colorlisa موقع يتضمن مجموعة من لوحات الألوان الشهيرة مع ذكر أسمائها وأسماء مؤلفيها. Color Hunt يضم مجموعة ضخمة من لوحات الألوان الجاهزة وفيه خاصية البحث فإذا بحثت عن Winter أي الشتاء فإنه يقدم لك لوحات ألوان تتعلق بالشتاء. Paletton تطبيق ويب متميز لاختيار لوحة الألوان. Coolors من أشهر المواقع المتخصصة في لوحات الألوان ويضم خاصية البحث والقوائم الأكثر رواجًا والأحدث. Adobe Color أقوى أداة لإنشاء لوحات الألوان اعتمادًا على أحد المخططات الأساسية بشكل واضح ومباشر. تجربة عملية لاختيار ألوان التصميم سنقوم الآن بتجربة عملية لاختيار الألوان لتصميم واجهة المستخدم لتطبيق هاتف محمول مخصص للتسوق عبر الإنترنت. نبدأ أولًا برسم التخطيط المبدئي لشكل الواجهة كما في الشكل التالي: ثم نضيف الشعار والعناصر النصية التجريبية للتطبيق. ثم نذهب إلى موقع Coolors لنبحث عن لوحة الألوان المناسبة. اخترت هذه اللوحة مع الأخذ بالحسبان أن التطبيق موجه للمنطقة العربية، لذلك درست نظرية التأثير النفسي للألوان على جمهور هذه المنطقة ووجدت اللون الأزرق وتدرجاته تشير إلى ألوان السماء والبحار وهي ألوان مريحة وتبعث الإحساس على الثقة والراحة للشراء، وتعمّدتُ وجود اللون الأحمر الفاتح لاستخدامه في زر الشراء حتى أحقق التباين ويكون زر الشراء عنصرًا بارزًا ويجذب الانتباه والاهتمام لناحية تنفيذ عملية الشراء وهو الهدف من تصميم هذه الواجهة. استخدمت لوحة الألوان هذه كما يلي: وبهذا نكون قد استخدمنا ما تعلمناه في هذا المقال عن الألوان في تصميمنا هذا. يعمل المصممون المحترفون على اختيار الألوان من خلال خبرتهم بعيدًا عن مواقع لوحات الألوان حيث يتمكنون من تحديد النموذج اللوني الصحيح لاختيار لوحة الألوان الصحيحة بدورها للتصميم بدون العودة لهذه الموقع من واقع خبرتهم. المصدر المجاني لصور المنتجات خاتمة لماذا يجب أن تهتم بنظرية الألوان؟ ببساطة بسبب العلامات التجارية والتسويق والمبيعات. باستخدام هذه المعرفة الأساسية حول الألوان وأنظمة الألوان، أنت على استعداد لاتخاذ قرارات فعّالة بشأن العلامة التجارية، مثل اللون الذي يجب أن يكون عليه الشعار، أو المشاعر التي تثيرها الألوان لدى المستهلكين وعلم النفس وراء اختيارات الألوان على موقع الويب. ستساعدك معرفة نظرية الألوان في التسويق وفي فهم أفضل لأسلوب المنافسة في السوق، كما ستساعدك على جعل العلامة التجارية لعملائك مميزة وجذابة وتجنبك استخدام الألوان الرديئة التي ستؤدي إلى مبيعات سيئة.

يقدّم هذا المقال أساسيات الألوان في برنامج سكريبوس Scribus ويوضّح كيفية: معرفة الفرق بين نمطي الألوان الرئيسيين RGB وCMYK. التنقل ضمن نافذة الألوان والتعبئة Colours. إنشاء ألوانك الخاصة. استرجاع لون من لوحة ألوان موجودة مسبقًا. نسخ أو استيراد الألوان من مستند موجود مسبقًا. إنشاء لوحاتك اللونية المخصّصة. أساسيات الألوان يمنحك سكريبوس خيار إنشاء الألوان باستخدام نمطين مختلفين من الألوان هما: RGB وCMYK، فنمط الألوان هو مجرد طريقة لاختيار هذه الألوان. نمط الألوان RGB RGB هو اختصار للألوان "الأحمر Red والأخضر Green والأزرق Blue"، وهو المعيار المستخدَم في العروض المرئية، لهذا فإن كنت غير راغبٍ في طباعة مستندك، فسيكون استخدام ألوان RBG جيدًا. نمط الألوان CMYK CMYK هو اختصار للكلمات "Cyan وMagenta وYellow وKey أو Black"، وهو المعيار المستخدم في صناعة الطباعة، فإذا أردت طباعة مستندك باحترافية، فيجب أن تحاول استخدام ألوان CMYK، حيث يجب أن تفكر في استخدام ألوان CYMK حتى إذا أردت الطباعة باستخدام طابعة منزلية أو مكتبية (انظر إلى عبوة أو عبوات الألوان في طابعتك، فإذا كانت إحداها زرقاء فاتحة، وأخرى أرجوانيةً أو زرقاء داكنة، وأخرى صفراء؛ فلا بد أنك تستخدم ألوان CMYK). إذا اعتقدت أنك قد تحتاج إلى استخدام إدارة الألوان كما ذكرنا سابقًا، فعليك استخدام ألوان CMYK من البداية، فهذا سيجعل الأمر أسهل عند الطباعة. قد تكون قادرًا على استخدام ألوان RGB، ولكن يُحتمَل أن تعمل المطبعة مع ألوان CMYK افتراضيًا، وبالتالي ستظهر مشاكل إن استخدمت ألوان RGB. اختيار نمط الألوان الذي تستخدمه هو أمر متروك لك تمامًا، ولكن إذا كنت مرتبكًا، فاستخدم هذه الإرشادات العامة الآتية: إذا أردت طباعة المستند فاستخدم ألوان CMYK. إذا كان مستندك للاستخدام على الشاشة فقط، فلا مانع من استخدام ألوان RGB. هذه الإرشادات الأساسية مبسطة للغاية ولكنها جيدة لمعظم الأغراض، فالشيء المهم الذي يجب فعله هو التمسّك بنمط ألوان واحد في المستند بأكمله دون المزج بينها، وذا كان لديك أي تساؤل، فتحقق من المطبعة أولًا، إذ سيكون الأشخاص هناك قادرين على تقديم النصح لك. الألوان الموضعية Spot Colours يتيح لك سكريبوس أيضًا إمكانية تحويل لون إلى "لون موضعي". تُعَد الألوان الموضعية أكثر تعقيدًا مما تبدو عليه، ولكن يمكنك التفكير فيها على أنها تعليمات للمطبعة لاستخدام حبر خاص، فإذا أردت طباعة لون معين باستخدام حبر معدني ليكون مثل ذهب لامع على سبيل المثال؛ فعليك أن تجعل هذا اللون لونًا موضعيًا Spot Colour. ويجب أن تكون مستعدًا أيضًا لتشرح للمطبعة ما تريده بالضبط. لكن لا تنشئ ألوانًا موضعيةً خاصةً بك إلا إذا عرفت ما تفعله. نافذة الألوان نافذة الألوان والتعبئة Colours هي المكان الذي ستدير فيه جميع الألوان المستخدَمة في مستندك. يمكن فتح نافذة الألوان باتباع الخطوات التالية: افتح برنامج سكريبوس وأنشئ مستندًا جديدًا (إن لم يكن لديك المستند مفتوحًا بالفعل). اختر قائمة تحرير Edit ثم الألوان والتعبئة Colours. ثم ستظهر نافذة كما يلي: تعرض القائمة الموجودة على الجانب الأيمن الألوان الموجودة فعليًا في مستندك، حيث يجب تحديد اللون في هذه القائمة قبل تنفيذ إجراءٍ ما عليه. وتعمل الأزرار الموجودة على اليسار بالعمليات التالية: يتيح لك زر استيراد Import نسخ كل الألوان من مستند آخر. يتيح لك زر إضافة New إنشاء لون جديد. يتيح لك زر تحرير Edit تغيير لون موجود مسبقًا. يتيح لك زر نسخ مطابق Duplicate نسخ لون موجود وتعديل هذه النسخة. يتيح لك زر حذف Delete إزالة لون من المستند (أو استبداله بلون آخر موجود). يحذف الزر "احذف غير المستخدم Remove Unused" كل الألوان التي لا يستخدمها أي شيء في المستند. يقبل الزر "موافق OK" أي تغييرات أجريتها، ويتراجع الزر "إلغاء Cancel" عنها. محرر الألوان Colour Editor إذا ضغطت على أي من أزرار تحرير أو إضافة أو نسخ مطابق، فستظهر نافذة تحرير الألوان Edit Colour كما في الشكل التالي: سترى اسم اللون الذي تعمل عليه في الجزء العلوي الأيمن من المحرر، حيث يمكنك استخدام أي اسم تريده -بما في ذلك المسافات- طالما لم يستخدمه لون آخر. يوجد تحت الاسم قائمة نمط الألوان Color Model لاختيار نمط الألوان CMYK أو RGB كما ذكرنا سابقًا. يوجد أيضًا مربعان، حيث يُظهر المربع الموجود على اليمين اللون القديم (الأصلي)، واللون الموجود على اليسار هو اللون الجديد (المتغيّر)، ويكون اللون القديم دائمًا هو اللون الأبيض عند إنشاء لون جديد. وإذا حرّرت لونًا، فإن اللون القديم هو اللون قبل إجراء أي تغييرات؛ أما إذا نسخت لونًا، فإن اللون القديم هو اللون الأصلي الذي تنسخه. اللون الجديد هو دائمًا اللون الذي سينشأ عند الضغط على زر "موافق". توجد قائمة "محدد لوحة الألوان Palette Selector" في أعلى يسار نافذة محرّر الألوان، حيث تكون مضبوطةً افتراضيًا على الخيار "خريطة الألوان HSV Color Map". يمنحك تحديد الخيار خريطة ألوان مستطيلًا متعدد الألوان مثل الشكل التالي، حيث يمكنك النقر على لونٍ ما لتحديده. توجد أسفل خريطة الألوان بعض المنزلقات Sliders التي يمكنك استخدامها لتغيير اللون الذي تعمل عليه حاليًا، كما يوجد بجوار كل منزلق حقلٌ نصي، حيث يمكنك إدخال قيمة مباشرةً. ويوجد على يمين كل حقل مجموعة من الأسهم المتحركة التي تسمح لك بزيادة أو إنقاص هذه القيمة بسرعة. إنشاء لون جديد من الصفر افتح نافذة الألوان والتعبئة -إن لم تكن مفتوحةً بالفعل- من قائمة تحرير ثم الألوان والتعبئة Colours، ثم اضغط على الزر إضافة أو جديد New. ثم ستظهر لك نافذة تحرير الألوان Edit Colour. تأكّد من ضبط نمط الألوان Color Model على CMYK لإنشاء لون CMYK جديد، وعلى القيمة RGB لإنشاء لون RGB جديد. يوصَى بإعطاء اللون اسمًا مرتبطًا بغرض استخدامه، أي إذا أردت استخدام لون أزرق داكن لخلفيّة لافتة، فيجب تسمية اللون مثل الاسم "خلفية اللافتة Banner Background" مثلًا، حيث ؤدي تسمية الألوان بهذه الطريقة إلى تجنّب الالتباس إذا قررت تغيير اللون لاحقًا، فإذا سمّيت اللون في الأصل بالاسم "أزرق داكن" على سبيل المثال ولكنك أردت تغيير خلفية اللافتة إلى اللون الأحمرعوضًا عن الأزرق الداكن، فيجب إعادة تسمية اللون مع تغييره (وقد تغير رأيك مرةً أخرى). انقر في أي مكان على خريطة الألوان لتحديد اللون الموجود أسفل المؤشر (اسحب المؤشر على الخريطة لترى تغير اللون). سيتغيّر مربع اللون "الجديد" الموجود على اليسار ليظهر لك الشكل الذي سيبدو عليه اللون الجديد، أثناء تحديد لون من خريطة الألوان. استخدم المنزلقات الموجودة أسفل خريطة الألوان لضبط اللون كما تريد، واسحب المنزلق لتغيير أحد مكونات اللون، إذ سيغيّر سحب المنزلق "C" مثلًا مقدار السماوي Cyan في اللون إذا استخدمت نمط ألوان CMYK. ويمكنك أيضًا ضبط قيم محدَّدة لكل مكون من مكونات اللون باستخدام حقول إدخال النص على يسار كل منزلق. يمكنك الضغط على زر "موافق" لإنشاء اللون الجديد إن أعجبك، أو اضغط على زر "إلغاء" إن لم تَعُد تريده. انقر على محدد لوحة الألوان، وانتقل لأسفل حتى تصل إلى لوحة الألوان "CrayonTM" مثلًا، واضغط عليها. سترى أن خريطة الألوان قد استبدِلت بقائمة من الألوان التي لها أسماء، حيث سيؤدي النقر على لونٍ من هذه القائمة -اللون "Aquamarine" الأزرق الفاتح مثلًا- إلى تغيير اللون الذي تحرّره لتظهر قيم اللون Aquamarine المخزَّنة، وقد تلاحظ أيضًا تغيّر نمط الألوان، لأن بعض اللوحات اللونية عبارة عن لوحات RGB وبعضها الآخر عبارة عن لوحات CMYK. إذا غيّرت قيم اللون الآن، فلن تغيّره في اللوحة اللونية المعيارية، إذ تتغيّر فقط نسختك الخاصة من هذا اللون. يعيد برنامج سكريبوس تسمية اللون بنفس اسم اللون في اللوحة اللونية تلقائيًا عندما تختار لونًا من إحدى اللوحات المعيارية، لذلك فقد ترغب في إعادة تسميته بنفسك إلى شيء مفيد لك. يمكن أن يؤدي انتقاء الألوان من لوحة معيارية أحيانًا إلى تسهيل الحصول على الألوان التي تتناسب مع بعضها البعض، فهناك العشرات من اللوحات اللونية الجاهزة في سكريبوس التي يمكنها أن تفيدك في تصميماتك، لذلك نوصيك بإلقاء نظرة عليها. تحرير لون موجود مسبقا حدّد لونًا من القائمة الموجودة على يمين نافذة الألوان والتعبئة Colours واضغط على زر تحرير Edit. ستظهر لك نافذة تحرير الألوان كما كانت من قبل ولكنك ستحرّر اللون الذي حدّدته. يمكنك تغيير نمط الألوان والقيم إلى أي شيء تريده، كما تفعل عند إنشاء لون جديد. يؤدّي الضغط على زر "موافق" إلى إجراء التغييرات على اللون، بينما يلغيها الزر "إلغاء". نسخ لون حدّد لونًا من القائمة الموجودة على يمين نافذة الألوان والتعبئة Colours، واضغط على زر نسخ مطابق Duplicate. ستظهر لك نافذة تحرير الألوان كما كانت من قبل ولكنك ستحرّر نسخة من اللون الذي حدّدته. لاحظ تغيُّر اسم اللون مؤقتًا إلى "نسخ من <اللون> أو Copy of <colour>‎" حيث أن <اللون> هو اسم اللون الذي حددته في الأصل، لذلك يجب تغيير هذا الاسم إلى اسم أفضل. لن يتغير اللون الأصلي الذي حدّدته، إذ سيكون أيّ تغيير تجريه هنا على النسخة الجديدة فقط. يمكنك أيضًا تعديل نمط الألوان و / أو القيم كما تريد. سينشأ لونك الجديد بمجرد الضغط على زر "موافق"، أو اضغط على زر "إلغاء" إن لم تَعُد تريده. حذف لون حدّد لونًا من القائمة الموجودة على يمين نافذة الألوان والتعبئة Colours واضغط على زر حذف Delete. ستظهر لك نافذة حذف اللون Delete Colour كما في الشكل التالي (لكن انتبه، حيث سيؤدي الضغط على زر حذف في الإصدار 1.5.7 من برنامج سكريبوس إلى حذف اللون مباشرةً دون ظهور هذه النافذة): يجب الآن تحديد اللون الموجود الآخر الذي سيُستبدَل اللون المحذوف به من القائمة، حيث سيُستبدَل لون أيّ كائن (نص أو مخطط تفصيلي أو تعبئة أو غير ذلك) له اللون الذي تحذفه بهذا باللون الذي ستختاره، فإذا حذفت اللون "الأحمر" واستبدلته باللون "الأزرق" على سبيل المثال، فسيُلوَّن أي شيء كان لونه "أحمر" باللون "الأزرق". سيؤدي تحديد الخيار "لا شيء None" على أنه اللون البديل إلى عدم وجود أي لون على الإطلاق لكل شيء ملوَّنٍ باللون الذي تحذفه. اضغط على زر "موافق" لحذف اللون، أو اضغط على زر "إلغاء" لإلغاء الحذف. حذف الألوان غير المستخدمة يمكن أن تصبح قائمة الألوان الخاصة بك فوضويةً مع الكثير من الألوان التي أنشأتها لأي سبب من الأسباب ولكنك لم تَعُد تريدها، حيث يمكنك تصفح قائمة الألوان، وتحديد كل لون تعرف أنك لا تستخدمه ثم حذفه لوحده، ولكنها قد تكون عمليةً طويلةً جدًا، وقد تحذف لونًا لا تريد حذفه عن طريق الخطأ، لهذا السبب يحتوي برنامج سكريبوس على عملية "حذف الألوان غير المستخدَمة". اضغط على الزر "احذف غير المستخدَم Remove Unused" في نافذة الألوان والتعبئة Colours. سينظر برنامج سكريبوس إلى كل لونٍ في القائمة ويتحقق لمعرفة ما إذا كان هناك أي شيء يستخدم هذا اللون بمجرد الضغط على الزر "احذف غير المستخدَم"، فإذا استخدم أي شيء في المستند لونًا ما، فسيتجاهله سكريبوس وينتقل إلى اللون التالي؛ أما إن لم يستخدم أي شيء هذا اللون، فسيحذفه سكريبوس مباشرةً دون التحقق منك أولًا، ثم سيحدّث سكريبوس القائمة لإظهار الألوان التي تستخدمها الكائنات في مستندك فقط. استيراد الألوان من مستند آخر قد يكون لديك في بعض الأحيان لون محدَّد في مستند آخر وترغب في استخدامه في المستند الحالي، كما يمكنك إعادة إنشاء هذا اللون يدويًا، ولكن عملية استيراد اللون من المستند الآخر أسرع. اضغط على الزر "استيراد Import" في نافذة الألوان والتعبئة. ستظهر لك الآن نافذة افتح ملفًا Open File (أو استورد ألوانًا)، حيث يمكنك اختيار المستند - ملف سكريبوس SLA - الذي تريد استيراد اللون منه، بعدها حدّد مستندًا واضغط على موافق لاستيراد كل الألوان من المستند المحدد، أو اضغط على "إلغاء" لإلغاء الاستيراد. يحصل الاستيراد على كل الألوان من المستند المحدّد وتُضاف إلى مستندك المفتوح، حيث يمكنك استخدام عملية "حذف الألوان غير المستخدَمة" بعد استخدام اللون الذي تريده على كائنٍ ما لإزالة الألوان الأخرى المستوردة إن أردت ذلك. اللوحات اللونية المخصصة يمكنك إنشاء لوحاتك اللونية المخصصة باستخدام العمليات المذكورة أعلاه، إذ يمكنك استخدام هذه اللوحات في أي مستند آخر على النحو الآتي: أنشئ مستندًا جديدًا. اضبط الألوان على النحو المطلوب وتأكّد منها لأنك ستستخدمها مرات متعددة. احفظ المستند باسم مناسب. أغلق المستند ثم أنشئ مستندًا جديدًا. استخدم الزر "استيراد" في نافذة الألوان والتعبئة Colours لنسخ الألوان من مستند "لوحة الألوان" الذي حفظته للتو إلى مستندك الجديد. تذكّر أن أي تغييرات تجريها على الألوان التي استوردتها لن تُطبَّق على مستند "لوحة الألوان"، وإذا غيّرت ألوان مستند "لوحة الألوان"، فستحتاج إلى إعادة استيرادها لمشاهدة التغييرات. عجلة الألوان Colour Wheel هناك طريقة أخرى يمكنك من خلالها إنشاء الألوان في برنامج سكريبوس، وهي استخدام عجلة الألوان التي تتيح لك تحديد الألوان التي تتلاءم مع بعضها البعض بسهولة على النحو الآتي: أغلق نافذة الألوان والتعبئة إذا كانت مفتوحة. اختر قائمة إضافي Extras ثم عجلة الألوان Colour Wheel. يجب أن تشاهد الآن نافذة عجلة الألوان كالشكل التالي: تنقسم هذه النافذة إلى خمسة أقسام هي: توجد عجلة الألوان في أعلى اليمين، حيث يمكنك اختيار اللون الأساسي Base Colour. يوجد تحتها قسم تحديد الطريقة Method، حيث تختار طريقة تحديد سكريبوس للألوان الأخرى. يوجد تحته قسم المعاينة Preview، حيث يمكنك أن ترى كيف ستبدو الألوان المختارة مع بعضها البعض في ظروف مختلفة. الجزء العلوي الأيسر هو القسم الذي تغيّر من خلاله قيم اللون الأساسي اللونية بدقة. وتوجد تحته قائمة بالألوان التي اخترتها أو التي اختارها برنامج سكريبوس. اللون الأساسي Base Colour ستتعامل دائمًا مع اللون الأساسي عندما تستخدم عجلة الألوان، إذ يخبر هذا اللون الأساسي برنامجَ سكريبوس باللون الذي يجب استخدامه عند اختيار ألوان أخرى، ويظهَر اللون الأساسي دائمًا في دائرة عجلة الألوان المركزية. انقر على لونٍ من عجلة الألوان لاختياره على أنه اللون الأساسي، أو اسحب المؤشر حوله مع الاستمرار في الضغط على زر الفأرة الأيسر لرؤية تغيّر اللون الأساسي. هناك عدد من الدوائر الصغيرة حول عجلة الألوان تُظهِر الأماكن التي يختار سكريبوس الألوان منها، حيث توضّح الدائرة الحمراء مكان وجود اللون الأساسي على العجلة، كما توضّح الدائرة (أو الدوائر) السوداء مكان الألوان الأخرى. طريقة مخطط الألوان Colour Scheme Method يستخدم برنامج سكريبوس مجموعةً متنوعةً من الطرق لاختيار الألوان وهي: تدرج لوني أحادي Monochromatic: يتكون من ثلاثة ألوان هي اللون الأساسي ونسخة أفتح منه ونسخة أغمق. لون متماثل Analogous: يتكون من ثلاثة ألوان هي اللون الأساسي ولونان آخران عند زاويةٍ ما من اللون الأساسي، إذ يمكنك تحديد قيمة هذه الزاوية من الحقل الموجود تحت قائمة الطرق. لون مكمّل Complementary: يتكون من لونين هما اللون الأساسي ولون آخر متباين معه. التكامل المنقسم Split Complementary: يتكون من خمسة ألوان هي مزيج من لون متماثل ولون مكمّل. التكامل الثلاثي Triadic: يتكون من ثلاثة ألوان هي اللون الأساسي ولونان آخران عند الزاوية 120 درجة منه. ثانوي (تكاملي مزودج) Tetradic: يتكون من أربعة ألوان هي اللون الأساسي ولون متماثل ولونان مكمّلان. لست بحاجة إلى أن تعرف الأسلوب الذي تختار به هذه الطرق ألوانها أو ما تعنيه هذه الطرق، فكل ما عليك فعله هو تجربة هذه الطرق واختيار الأنسب لتصميمك. الزوايا Angles يمكنك اختيار "الزاوية" من الحقل الموجود تحت قائمة الطرق لبعض منها، حيث تحدّد هذه الزاوية فقط مدى دوران العجلة - بعيدًا عن اللون الأساسي - لتحديد الألوان الأخرى عند هذه الزاوية. قسم المعاينة Preview يوجد قسم المعاينة أسفل قسم طريقة مخطط الألوان، حيث يوضح الجزء الرئيسي من هذا القسم عيّنات الألوان التي اخترتها والألوان التي اختارها برنامج سكريبوس مع نص فاتح وداكن فوقها لتتمكّن من رؤية كيفية ظهورها في المستند. وتوجد فوق هذه المعاينة قائمةٌ تمثّل نوع خلل الطيف Vision Defect Type التي تمكّنك من تغيير نوع المعاينة التي ستراها، حيث سيظهِر الخيار "بصر طبيعي Normal Vision" كيف ستبدو الألوان لشخص يتمتع ببصر طبيعي، وتُظهر الأنواع الأخرى كيف ستبدو الألوان لشخص لديه مشكلة معينة في بصره، حيث يمكنك تحديد نوع العيب من القائمة لتغيير المعاينة. اختيار اللون الأساسي يمكنك تحديد قيم اللون الأساسي بدقة من القسم الموجود في الجزء العلوي الأيسر عن طريق الكتابة في حقول النص أو استخدام أزرار التحرك لزيادة أو إنقاص القيم. الغرض من علامات التبويب CMYK وRGB وHSV واضح، ويتيح لك التبويب مستند Document اختيار أحد ألوان مستندٍ موجود مسبقًا مثل لون أساسي. الألوان الناتجة Result Colours يُظهِر قسم الألوان الناتجة Result Colors الموجود في أسفل يسار النافذة الألوان كما ستكون إذا أُضيفت إلى المستند، كما أنه يظهِر أسماءها. ولا يمكنك إجراء أي تغييرات هنا، فهي مجرد معلومات، ولكن يمكن إعادة تسمية الألوان من خلال نافذة الألوان والتعبئة Colours -كما وضّحنا سابقًا- إن أردت ذلك. انقر على لونٍ من هذه القائمة لمعرفة المزيد من المعلومات حول هذا اللون في الجدول الذي تحته. الدمج Merging والاستبدال Replacing يمكنك استخدام إما الزر "دمج Merge" أو الزر "استبدال Replace" عندما تكون جاهزًا لإضافة الألوان المحدَّدة إلى المستند الخاص بك، حيث يؤدي الضغط على الزر "إلغاء" إلى إغلاق النافذة دون إجراء أية تغييرات. إذا اخترت دمج الألوان، فسيضيف سكريبوس الألوان الجديدة إلى قائمة الألوان في المستند؛ أما إذا كان اللون موجودًا بالفعل بنفس الاسم فستتلقى تحذيرًا وستُنقَل إلى نافذة الألوان والتعبئة Colours لإعادة تسمية اللون الحالي قبل المتابعة. إذا اخترت استبدال الألوان فسيضيف سكريبوس الألوان الجديدة كما هو الحال عند اختيار دمج الألوان، ولكن سيحل هذا اللون مكان أي لون موجود مسبقًا بالاسم نفسه. يمكن أن تكون هذه الخاصية مفيدةً إذا أردت تجربة مخططات ألوان مختلفة، حيث يمكنك على سبيل المثال: إنشاء مخطط ألوان أولي باستخدام عجلة الألوان. ثم إعداد المستند الخاص بك كما تريد. ثم الرجوع إلى عجلة الألوان واختيار مخطط ألون مختلف. ثم استبدال الألوان لترى التغييرات. إرشادات مهمة إذا أردت إنشاء لون RGB جديد اسمه "Violet" له القيم 146 و110 و174، فاتبع الخطوات التالية: اختر قائمة تحرير Edit ثم الألوان والتعبئة Colours. اضغط على زر إضافة أو جديد New. غيّر اسم اللون إلى "Violet" (بدون علامات الاقتباس). تأكد من ضبط نمط الألوان Color Model على الخيار RGB. استخدم المنزلقات أو حقول الإدخال لضبط "R" على القيمة 146، ثم اضبط "G" على القيمة 110، ثم "B" على القيمة 174. اضغط على زر موافق لإنشاء اللون الجديد. اضغط على "موافق" في نافذة الألوان والتعبئة Colours للعودة إلى المستند، إلّا إذا أردت إنشاء مزيد من الألوان. أما إذا أردت إنشاء لون CMYK جديد اسمه "Goldenrod" له القيم 4% و14% و62% و 1%، فاتبع الخطوات التالية: اختر قائمة تحرير ثم الألوان والتعبئة. اضغط على زر إضافة أو جديد. غيّر اسم اللون إلى "Goldenrod" (بدون علامات الاقتباس). تأكّد من ضبط نمط الألوان على الخيار CMYK. استخدم المنزلقات أو حقول الإدخال لضبط "C" على 4%، ثم اضبط "M" على 14%، ثم "Y" على 62%، ثم "K" على 1%. اضغط على زر موافق لإنشاء اللون الجديد. اضغط على "موافق" في نافذة الألوان والتعبئة للعودة إلى المستند إلّا إذا أردت إنشاء مزيد من الألوان. حيث تُعطَى دائمًا قيم اللون بالترتيب R ثم G ثم B لألوان RGB، أو C ثم M ثم Y ثم K لألوان CMYK. ترجمة -وبتصرّف- للمقال How to create your own colours. اقرأ أيضًا كيفية إنشاء الظلال في برنامج سكريبوس Scribus كيفية إنشاء التأثير Distressing Mask في برنامج سكريبوس لإنتاج تأثيرات تعبئة جذابة كيفية إنشاء لافتة نيون Neon Sign في برنامج سكريبوس Scribus كيفية إنشاء تأثير نص مخيف في برنامج سكريبوس Scribus

يتحدّث هذا الدّرس عن اثنين من مبادئ التّصميم المرئيّ التّي تساعدك في توجيه انتباه المُستخدم، فبعض أجزاء التّصميم أكثر أهمّية من غيرها، ولكنّها قد لا تكون أوّل ما يلحظه المُستخدمون، وعلينا أن نُعين المُستخدم ليُلاحظها. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم (هذا الدرس) التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم فكرة "الثّقل المرئيّ" (Visual Weight) بديهيّة نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفكرة مهمّة لك كمصمّم لتجربة المُستخدم. وظيفتنا هي أن نُساعد المُستخدم على مُلاحظة الأشياء المُهمّة، وألّا نُشغله عن هدفه في الوقت ذاته. بإضافة ثقل مرئي لبعض عناصر التّصميم، يمكنك زيادة احتمال أن يراها المُستخدم، وبالتّالي تغيير ما سيقوم به بعد ذلك. تذكّر: الثقل المرئيّ مفهوم نسبيّ، وكلّ مبادئ التّصميم المرئيّ تقوم على مقارنة عنصر في التصميم بما حوله من عناصر. ولكي لا نطيل الحديث، إليكم نجم هذه السّلسلة من الدّروس: البطّة المطّاطيّة الأصيلة! التباين تجذب البطّة في المنتصف النّظر أكثر ممّا حولها، فالتّباين يؤثّر في الثّقل المرئيّ. هو الفرق بين العناصر الداكنة والعناصر الفاتحة، وكلما زاد الفرق بين عنصرين زاد التّباين بينهما. ما نريده في تجربة المُستخدم هو زيادة تباين العناصر المُهمّة، كالبطّة السّوداء في الصّورة أعلاه، فمعظم محتوى الصّورة فاتح اللّون، وهذا يؤدّي إلى زيادة مُلاحظة البطّة السّوداء، ولو كانت الصّورة سوداء في معظمها، لبدت البطّات البيضاء أكثر ثقلًا. لو كانت هذه البطّات أزرارًا في واجهة، لنقر معظم المُستخدمين الزّر الدّاكن. العمق والحجم يميل البشر إلى الانتباه إلى العناصر القريبة منهم في العالم المادّيّ أكثر من تلك البعيدة عنهم. وبالمثل فإنّنا نميل إلى فهم العناصر الأكبر حجمًا في العالم الرّقميّ على أنّها "أقرب" إلينا، كالبطّة الوسطى في الصّورة أعلاه، والعناصر الأصغر حجمًا على أنّها أبعد عنّا (كالبطّة المُشوّشة أعلاه). لو كانت هذه البطّات متماثلة الحجم، لنظرنا إليها غالبًا من اليمين إلى اليسار (كما نقرأ). يؤدّي استخدام تأثير التّشويش (blur) والظّلال إلى زيادة واقعيّة مفهوم العمق، والحجم يعطي هذا التأثير حتى لو كان التّصميم يتبع الأسلوب المُسطّح (flat design). كقاعدة عامّة، اجعل العناصر الأكثر أهمّية ذات حجم أكبر من تلك قليلة الأهميّة، وهذا يؤدّي إلى إنشاء تراتب مرئيّ ضمن الصّفحة يُسهّل فحصها بالعين، ويُساعدك على اختيار ما يُلاحظه المُستخدم أوّلًا. من هنا نُدرك خطأ فكرة "جعل الشّعار أكبر"، لأنّنا لا نريد للمستخدمين أن يُطيلوا النّظر في شعارنا بدل أن يشتروا شيئًا ما من الموقع! اللون لدينا في الحياة الواقعية نور الشمس، والأضواء الصّناعيّة، والحرارة والبرودة، والثياب، والأسماء التّجارية وكثير من العوامل المشابهة الّتي تؤثّر في إدراكنا للون، ونحن كمصمّمي تجربة المُستخدم علينا أن نفهم الألوان، وإن لم يكن من المطلوب التعمّق في تفاصيلها. أي هذه الألوان يبدو باردًا؟ وأيها يبدو وكأنّه تحذير؟ للألوان معنى. أي من هذه البطّات تبدو وكأنّها أقرب؟ يمكن للألوان أن "تتقدّم" أو "تتراجع". يمكن لنا أن نتعلّم بعض الأمور من البطّات في الصّورتين أعلاه. عادةً ما ننجز الرّسوم التّخطيطيّة (wireframes) بالأسود والأبيض، وهذا أمر حسن، لأنّه يسمح لنا بالتّركيز على الوظيفة، أمّا المظهر فهو مسؤوليّة مصمّمي الواجهة. إلّا أن الألوان في بعض الأحيان تكون ذات وظيفة، كألوان إشارات المرور، أو كأن يكون لون "المصّاصة" مطابقًا لطعمها، فهذا مهمّ! معنى الألوان في الصّورة الأولى ضمن الفقرة السّابقة، نرى ثلاث بطّات: زرقاء وصفراء وحمراء، وهي بطّات جميلة، ويمكن أن نُلاحظ مُباشرة أن لكلّ بطّة صبغة، ولكلّ من هذه الصّبغات "معنى" ما. لو كانت البطّات أزرارًا، فقد تكون: "تأكيد" و "إلغاء الأمر" و "حذف"، ولو كانت مؤشّرًا لامتلاء الخزّان، لكانت "مليء" و "نصف مليء" و"فارغ"، ولو كانت مؤشّرًا في فرن لكانت "بار" و "دافئ" و "حار". لعلّك أدركت الفكرة: البطّات متماثلة، لكنّ اللّون غيّر المعنى. إن لم تكن بحاجة للإشارة إلى الاختلاف في الوظيفة، فدع مصمّم الواجهة يختر الألوان، وإلّا فاجعل الألوان جزءًا من رسومك التّخطيطيّة. التراجع والتقدم يمكن للألوان كذلك أن تكون "صاخبة" أو "هادئة"، ففي الصّورة الثّانية نُشاهد بطّة حمراء واثنتين زرقاوين، تبدو الحمراء أقرب قليلًا، ولكنّها ليست كذلك. الجأ إلى هذه الحيلة في أزرار الشّراء حيث تبدو وكأنّها "تقفز" من الشّاشة، فالمستخدم يميل إلى نقر الألوان الأقرب. وبالعكس، قد ترغب أحيانًا بأن تُبقي بعض العناصر ظاهرة دون أن تُشتّت انتباه المستخدم، كالبطّتين الزّرقاوين، فهي تبدو "متراجعة"، وهذا الأسلوب مناسب لقائمة تبقى دومًا ظاهرة على الشّاشة، فلو كانت "صاخبة" لصرفت انتباه المُستخدم عن عناصر أهمّ. أبق رسومك بسيطة استخدم الألوان في الرّسوم التّخطيطيّة لبيان الوظيفة فقط، فلا داعي للمبالغة في استعمالها أو الحرص على تجميلها لعرضها أمام الزّبون، فقد يدخل معك في نقاش لا طائل من وراءه لاختيار ألوان أخرى. اجمع مبادئ التصميم المرئي معا يمكن استخدام الألوان مع ما تعلّمناه عن الثّقل المرئيّ، إذ يسهل ملاحظة العناصر الكبيرة، وأمّا العناصر الكبيرة حمراء اللّون فيستحيل تجاهلها! اجعل رسائل الخطأ والتّحذيرات حمراء وعالية التّباين، وأمّا إن كانت رسالة تأكيد لنجاح العمليّة، فيكفي أن تكون صغيرة الحجم بلون أخضر مُتراجعٍ. ترجمة بتصرّف للدّرسين Visual Weight, Contrast & Depth و Colour من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 دليل المبتدئين إلى التصميم التفاعلي Interaction Design تطور العمل في إتاحة الألوان كيف تختار اللون المثالي لعلامتك التجارية عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب

تعلّمنا في الدرسين السابقين كيفية إنشاء ونشر موقعنا الأوّل. في الحقيقة موقعنا حاليًّا بسيط وذو محتوى قليل وليس جذّابًا بعد. سنتعلّم في هذ الدرس كيف نستخدم تنسيقات CSS لتنسيق الصفحة. كما سنتعلّم في درس لاحق كيف نضيف المزيد من التنسيقات إلى موقعنا وذلك بمساعدة إطار عمل اسمه Bootstrap. البنية والتنسيق Structure and Style لنتذكّر معًا: يُعبّر HTML عن بنية صفحة الويب، في حين تُعرّف CSS المظهر العامّ للصفحة. يُعتبر فصل بنية الصفحة عن تنسيقها أمر في غاية الأهميّة وله الكثير من المزايا رغم أنّه ليس إلزاميًّا. لذلك سنعمل دومًا على جعل رُماز HTML وتنسيقات CSS في ملفات منفصلة. الربط مع ملف CSS ملف CSS هو ملف نص عادي له الامتداد (css.) ونربط معه من داخل ملف HTML. أنشئ ملف جديد ضمن المجلّد Portfolio وسمّه main.css. افتح الملف index.html واضف العنصر <link> ضمن العنصر <head>. سنخبر الصفحة index.html عن طريق العنصر <link> أن تُحمّل ملف CSS، أي سننشئ رابط بينهما: <link rel="stylesheet" href="main.css"> أضف العنصر السابق إلى العنصر <head>. ستبدو الشيفرة لديك مُشابهة لما يلي: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> ملاحظة مهمّة: لكي يكون من الممكن الوصول لملف CSS، يجب أن تحتوي السمة href على المسار الصحيح للملف. وهذا يعني بدوره أنّه إذا كان ملف CSS في مجلّد فرعي، يحب أن نضم هذا المجلّد الفرعي إلى مسار الملف كما هو واضح. يمكنك مراجعة هذا الموضوع في الدرس الأوّل في فقرة عناوين URL النسبيّة والمطلقة. الألوان إلى الآن ما يزال ملف CSS فارغًا، لنبدأ الآن بكتابة أولى تنسيقات CSS. تحوي CSS ما يُعرف بالقواعد CSS Rules. يمكننا باستخدام قاعدة CSS أن نُخبر المتصفّح كيف يُعالج جزءًا مُحدّدًا من مستند HTML. كمثال على ذلك، سنغيّر لون الخلفيّة ولون النص للعنوان من المستوى الثاني h2 ضمن الملف index.html الخاص بنا. أضف ما يلي إلى ملف CSS: الملف main.css h2 { background-color: #607d8b; color: #ffffff; } يجب أن تحصل على شكل شبيه بما يلي: أكواد الألوان Color Codes تظهر الألوان على الشاشة كمزيج من نسب متفاوتة من الأحمر والأخضر والأزرق (RGB). يمكن التعبير عن المزج بين هذه الألوان الثلاثة في CSS بطريقتين: كقيم RGB عشرية (محصورة بين 0 إلى 255 لكل لون) أو كقيم RGB ستة عشرية hex values. وفي الواقع تُستَخدم القيم الستة عشرية في الغالب. إذا نظرنا إلى مثالنا الأخير، فنجد أنّنا قد عيّنا لونًا أزرقًا مائلًا للرمادي كلون خلفية باستخدام كود اللون 607d8b# بالترميز الستة عشري. أمّا لو أردنا استخدام الترميز العشري المُكافئ له فسنكتب (rgb(96, 125, 139. في التمثيل الستة عشري، يُعبّر أوّل رمزين من اليسار عن اللون الأحمر، والرمزين في الوسط عن اللون الأخضر، ويُعبّر الرمزان الأخيران عن اللون الأزرق. العمل مع أكواد الألوان يُعتبر التعامل مع الألوان كأكواد، شائع جدًا لكنه صعب في الحقيقة. لأنّك تتعامل مع قيم ورموز وليس مع ألوان، يُنصح دوماً استخدام أداة لانتقاء الألوان color picker. إذا كنت تستخدم المحرّر Brackets عندها يمكن أن تفتح أداة انتقاء اللون الموجودة ضمن ملف CSS الذي تعمل ضمنه. فقط تحتاج لأن تنقر بزر الفأرة الأيمن على كود اللون وتختار تحرير سريع Quick Edit أو أن تضغط Ctrl+E من لوحة المفاتيح. يؤدي ذلك إلى ظهور أداة اختيار الألوان حيث يمكنك اختيار اللون الذي يناسبك بسهولة. كما يمكنك اختيار ترميز اللون بالصيغة التي ترغبها من خلال ثلاثة أزرار موجودة في الأسفل. أدوات اختيار الألوان من الانترنت إذا لم تتوفّر أداة لاختيار الألوان ضمن المحرّر لديك، فيمكنك استخدام عدد كبير جدًّا من هذه الأدوات ولكن على الانترنت، فعلى سبيل المثال لا الحصر: HTML Color Codes ColorPicker ألواح الألوان من الانترنت نحتاج في كثير من الأحيان إلى أكثر من لون واحد لاستخدامه في موقعنا. لذلك نحتاج إلى أداة تزوّدنا بمجموعة من الألوان المنسجمة، والتي تتناغم مع بعضها لإضفاء تأثير جميل على الموقع. وهذا ما تفعله ألواح الألوان color palettes. هناك بعض المواقع على الانترنت التي توفّر مثل هذه الميزة. أمثلة على مواقع بمجموعات ألوان معرّفة مسبقًا: Colour Lovers Design Seeds Google Color Palette أمثلة على مواقع تولّد مجموعات ألوان حسب رغبة المستخدم: Kuler: يُعرّف قاعدة لون (سنتكلّم عن القواعد بعد قليل)، ويسمح لنا بالحصول على خمسة ألوان منسجمة معًا. Paletton: أداة متقدّمة للحصول على مجموعات ألوان منسجمة. Colourco.de: مولّد ألواح ألوان عملي أيضًا. قواعد CSS رأينا كيف تُغيّر CSS من هيئة عناصر HTML من خلال تأثيرها على الألوان. لنلقي نظرة عن كثب حول CSS وطريقة عملها. تُعتبر القاعدة rule البنية الأساسية لـ CSS وهي تتكوّن من ثلاثة عناصر: المحدِّد Selector والخاصية Property والقيمة Value. تُشير القاعدة السابقة إلى أنّ جميع عناصر <h2> يجب أن يكون لها لون خلفية له الكود 607d8b#. محددات CSS تُقرّر المحدّدات أيّ عناصر HTML ستُطبّق عليها قاعدة CSS. ملاحظة: سنتعلّم هنا المحدّدات الأكثر أهمية. من أجل الاطلاع على أنواع المُحدّدات الأخرى ابحث في Google عن CSS Selectors. محددات النوع Type Selectors تستهدف محدّدات النوع جميع العناصر التي يكون لها وسم HTML مُحدّد. فلو أردنا مثلًا استهداف جميع عناصر الفقرة p ضمن المستند بتنسيقات معيّنة، فسنكتب شبيه بما يلي: CSS p { ... } HTML <p>...</p> <p>...</p> محددات الصنف Class Selectors تُستخدم هذه المحدّدات بشكل متكرّر، وتُعتبر أنّها مُخصّصة أكثر قليلًا من مُحدّدات النوع، كما أنّه بإمكانها استهداف مجموعة مخصّصة من العناصر بدلًا من عناصر النوع الواحد فقط. لاستخدام محدّدات الصنف نضيف السمة class إلى العنصر المراد استهدافه، ونسند إليها قيمة مُعبّرة من اختيارنا. عند استخدام محدّد الصنف فإنّنا نستخدم نقطة عادية يليها قيمة السمة class التي أضفناها إلى العنصر. سيستهدف محدّد الصنف في المثال التالي، جميع العناصر التي لها سمة class تحمل القيمة highlight: CSS .highlight { ... } HTML <p class="highlight">...</p> <p>...</p> <p class="highlight new">...</p> لاحظ من شيفرة HTML في الأعلى، أنّ التنسيق سيُطبّق على عنصر p الأوّل والثالث فحسب، لأنّ عنصر p الثاني لا يمتلك سمة class لها القيمة highlight. كما نلاحظ أنّ عنصر p الثالث له أكثر من قيمة ضمن سمة class الخاصة به (highlight وnew). في الحقيقة يمكن استخدام عدة قيم لعنصر واحد بشرط أن نفصل بينها بفراغات. محددات معرف العنصر ID Selectors تشبه هذه المحدّدات محدّدات الصنف. فهي تستهدف جميع عناصر HTML التي تملك السمة id بقيمة مُعيّنة. من المهم أن نوضّح أنّ السمة id عبارة عن مُعرّف العنصر ضمن شيفرة HTML ورغم أنّه ليس من الملزم وضعها مع كل عنصر، إلّا أنّه في حال وجودها يجب أن تكون القيمة التي تحملها فريدةً ضمن كامل مستند HTML. نستنتج إذًا أنّ أي محدّد معرّف عنصر سيستهدف في الواقع عنصر واحد فقط ضمن مستند HTML. عند استخدام محدّد معرّف العنصر فإننا نكتب الرمز # يليه معرّف العنصر (قيمة السمة id). سيستهدف محدّد معرّف العنصر في المثال التالي عنصر واحد فقط ضمن مستند HTML بحيث تكون قيمة السمة id له هي navigation: CSS #navigation { ... } HTML <p id="navigation">...</p> <p>...</p> محددات الفروع Descendant Selectors يمكنك باستخدام هذا النوع من المحدّدات استهداف العناصر الأبناء لعنصر مُعيّن. ونقصد بالعناصر الأبناء لعنصر معيّن، تلك العناصر التي تقع ضمن هذا العنصر بصرف النظر عن المستوى الذي تقع فيه. انظر المثال التالي: <p id="level1"> <p id="level2"> <a href="myfile.html">My File</a> </p> </p> نلاحظ بأنّ كلًّا من العنصر <p> (ذو المعرّف level2) والعنصر <a> هما ابنان للعنصر <p> (ذو المعرّف level1). لأنّهما يقعان ضمنه بصرف النظر عن المستوى. في حين يُعتبر العنصر (ذو المعرّف level2) ابنًا مباشرًا للعنصر <p> (ذو المعرّف level1). أمّا بالنسبة لمحدّدات الفروع فنلق نظرة خاطفة على هذ المثال البسيط قبل أن نبدأ بالشرح: CSS p a { ... } HTML <p> <a href="http://code.makery.ch">My Website</a> </p> <a href="http://www.example.com">Example Website</a> نلاحظ بأنّ محدّد الفروع p a يستهدف جميع عناصر <a> أينما وُجدَت داخل عنصر <p>. وبناءً عليه نجد أنّ التنسيق سيُطبّق على My Website وليس على Example Website لأنّ الأخيرة موجودة ضمن عنصر <a> لا يقع ضمن أي عنصر <p> كما هو واضح. ملاحظة: ليس من الضروري أن يكون العنصر <a> في المثال في الأعلى ابنًا مباشرًا للعنصر<p>. فمحدّد الفروع السابق يستهدف أي عنصر <a> موجود ضمن أي مستوى ضمن العنصر <p>. إذا أردنا استهداف الابن المباشر فحسب، فيمكننا استخدام مُحدّد الابن ( > ). خصائص CSS تُقرّر قواعد CSS كيف يجب أن تظهر عناصر HTML. هناك العديد من الخصائص التي يمكن تعريفها في CSS. في الواقع لقد صادفنا اثنتان منهم: background-color وcolor. لن نتوسّع في الحديث عن خصائص CSS المختلفة، لأنّ هذا الدرس ليس مرجعًا لهذه الخصائص، لكن سنتعلّم كيف نجد المزيد من المعلومات عنها بأنفسنا. سنستفيد بشكل أكبر عندما نتعلّم هذه الخصائص عندما نحتاج إليهم فعليّا. توجد حالتان مختلفتان يمكن أن نصادفهما لنتعلُّم المزيد عن CSS. الحالة الأولى: عندما نصادف خاصية CSS لا نعرفها في هذه الحالة نبحث عن معلومات عنها في الانترنت، اكتب اسم الخاصية متبوعًا بكلمة css ضمن محرّك البحث. يمكنك أن تجرّب هذه الطريقة الآن لتحصل على معلومات حول خاصية CSS جديدة وهي: padding: 5px; استخدم css padding كعبارة بحث. لا تكتفي بالاطلاع على نتيجة البحث الأولى، بل اطّلع على النتائج الخمس الأولى أو أكثر إن أحببت. بعد ذلك قرّر أيُّ المواقع ستوفّر المعلومات المناسبة لك. جرّب تطبيق قاعدة CSS السابقة (أي القاعدة padding: 5px) على عنصر h2 في مشروعنا. الحالة الثانية: نريد تغيير أسلوب عرض أحد العناصر ولكن لا نعرف خاصية CSS المناسبة ابحث في الانترنت عن الشيء الذي ترغب أن تقوم به، متبوعًا بكلمة css. ربما تحتاج إلى إجراء عدة عمليات بحث قبل أن تجد ضالّتك. فإذا أردنا مثلًا تغيير حجم النص. في هذه الحالة استخدم الكلمات التالية text size css في محرّك البحث. ومرّة أخرى لا تكتفي بالنتيجة الأولى فقط من نتائج البحث. قيم CSS لقد صادفنا قبل قليل بعضًا من قيم CSS، فمثلًا القيم الست عشرية مثل ffffff# أو تلك القيم المتعلّقة بتعيين قياسات الأحجام مثل 5px. يتوجّب علينا أحيانًا وبحسب خاصية CSS المستخدمة استخدام كلمات مُعيّنة مثل left أو right لمحاذاة النصوص على سبيل المثال. أكثر قيم CSS المستخدمة هي القيم المتعلّقة بتعيين قياسات الأحجام. لذلك سنتناولها بشيء من التفصيل. غالبًا ما يُعرّف الحجم باستخدام البيكسل Pixel، ونرمز له اختصارًا بالرمز px. p { font-size: 16px; } توجد إمكانية أخرى وهي تعيين الأحجام باستخدام النسبة المئوية Percentage. دائمًا ما تكون النسب المئوية نسبيّةً بالنسبة للعنصر الأب. في المثال التالي سيشغل العنصر p ما مقداره 60% من عرض width العنصر الأب الذي يقع ضمنه، في حين سيشغل العنصر الأب عرض النافذة كاملًا. p { width: 60%; } توجد وحدة قياس مشهورة أخرى للأحجام وهي em. والـ em ترتبط دومًا بحجم الخط. ويعني ذلك أنّنا إذا غيّرنا حجم الخط فإنّ حجم العنصر المُقاس بالوحدة em سيتغيّر أيضًا. كمثال على ذلك إذا كان لعنصر ما حجم خط مقداره 20px وعرض 5em، فسيكون عرض العنصر الفعلي في هذه الحالة 100px (أي 20 مضروبة بـ 5). انظر إلى الشيفرة التالية: p { font-size: 20px; width: 5em; } محددات الصنف في مشروعنا إذا أردنا تكبير العنوان الرئيسي في موقعنا: "Web Portfolio of Marco". فسيكون ذلك ممكنًا بتعريف قاعدة CSS للعنصر h1 كما يلي: h1 { font-size: 65px; } المشكلة التي ستصادفنا هنا أنّ جميع عناصر h1 الموجودة في المستند ستكبُر بتأثير هذه القاعدة. لذلك فإذا أردنا أن نُكبّر عنوان h1 الأوّل الموجود في المستند فسنستخدم لهذا الغرض مُحدّد صنف class selector. سنضيف السمة class إلى عنصر h1 المراد استهدافه، ويمكننا بالطبع إسناد أي قيمة لهذه السمة، سنختار القيمة title: <h1 class="title">Web Portfolio of Marco</h1> يمكننا الآن استهداف عنصر h1 هذا بكتابة قاعدة CSS بالشكل التالي: .title { font-size: 65px; } إذا جرت الأمور على ما يرام فستحصل على شكل شبيه بما يلي: سننتقل الآن إلى الدرس الرابع، والذي يتحدّث عن أدوات التطوير البرمجية المتاحة ضمن متصفّح الانترنت. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 3: Introduction to CSS لصاحبه Marco Jakob.

هذا خلاصة التصميم بمساعدة المطور الخاص بك، درس إلكتروني من InVision للكاتب كيفين توماسو. يدور التصميم من أجل التطوير حول إيجاد الحل الذي ينتج أفضل تجربة ممكنة للمستخدم بأقل عدد من الأجزاء المتحركة. لا تنتهي مشاريع تطبيقات الويب في جلسة واحدة؛ فهي تحتاج للنمو، والتطور والتغيير - يفضل بسرعة في بعض الأحيان. ويجب على المصممين عند اتخاذ القرار، وضع كيفية بناء التصميم في الحسبان. فالتصميم الذي يبدو رائعًا للمستخدم ولكنه يتعطل في كل مرة يريد فيها المطور أن يحدث تغييرًا، لا يعد تصميمًا - واجهة جميلة مع مشاكل كامنة خلفها. قد يبدو تصميمك جيدًا من الخارج، ولكن الشيفرة المستخدمة في إنشائه قد تكون في حالة فوضى. إن التصميم بمساعدة المطور يعني العمل ضمن فريق، وليس مجرد إكمال خطوة في الطريق. الهدف النهائي هو إنشاء منتج عظيم ليكون عبارة عن تجميع التصميم مع عملية التطوير. يمكن أن يحسن التصميم مع مدخلات المطور وشيفرة يمكن كتابتها بمساعدة المصمم. العمل معًا وفهم من أين قد جئتما، هو السبيل لتحقيق الأهداف والتغلب على العقبات بشكل كبير. "التصميم بمساعدة المطور يعني العمل ضمن فريق". أيضًا يُعنَى التصميم مع التطوير بمعرفة الأهداف النهائية واتخاذ قرارات صعبة من خلال المعرفة الواسعة بالصورة الكلية. عندما تستطيع النظر للغابة من خلال الأشجار، فإنك تستطيع الوصول إلى وجهتك بشكلٍ أفضل. وفي هذه الحالة تكون الوجهة عبارة عن منتجٍ رائع. ما الذي لا يعبر عن التصميم مع التطوير هذا ليس دعوة أو عذر لانتقاد المطور أو إعطاء تغذية راجعة. ولا يشير أيضًا إلى أن عملهم أهم بأي طريقة. لا يوجد للمنتج مكانًا في حياة المستخدم بدون تصميم، تمامًا كعدم إمكانية وجوده قبل عمل شيفرة له. ما يجذب المستخدمين ويبقيهم في موقعك هو التصميم وتجربة المنتج. فبدون تصميمٍ جيد، ستأمل أفضل المواقع والتطبيقات أن تنجح بغض النظر عن مظهرها (أنا أنظر إليك، كرايجلست). والحقيقة هي أن التصميم يحدث أولًا، ولذلك فإن معرفة الأدوات والتقنيات التي ستستخدم لإخراج تصميمك، تملك تأثيرًا أكبر من التأثير في الحالة العكسية. لا يضيف إعادة تعديل الصور من خلال ضبط levels & curves واستخدام أداة burn في برنامج الفوتوشوب، الكثير للمطور؛ لأنه في الوقت الذي ينتهون فيه منها، سيكون عليهم إضافة الصورة النهائية للموقع. ومن ناحيةٍ أخرى، إذا كنت تعرف أفضل الطرق لحفظ الصورة وتصغير حجم الملف ورفع الأداء، فإن منتجك سيتحسن. يمكنك التفكير بمساعدتهم في إنجاز عملهم بينما تعمل، ولكن العكس لا يعمل دائمًا هنا. أنت هو المصمم. ستكون محط اهتمام الجميع في حال كنت تعرف القليل حول كيفية قيام طاقم البناء بعمله. اتبع هذه الخطوات البسيطة لتصبح مصممًا رائعًا يُعنَى هذا الدرس التعليمي بمساعدتك على التصميم مع وضع التطوير في الذهن. أما بالنسبة لما لم يتم تناوله هنا، فيعني أن عملك الأول والرئيسي هو التصميم مع وضع المستخدمين في الذهن. أنت تعرف بهذا ولست بحاجة لسماعه مني، أنت رائعٌ في هذا. الهدف هو جعلك أفضل في الصورة الكبرى، بحيث يتحسن المنتج مع كل قرار تتخذه بطريقةٍ أو بأخرى. قائمة التحقق التي تمر من خلالها عندما تواجه أي قرار في التصميم هي كالتالي: عندما يكون فيها فائدة واضحة للمستخدم، افعلها. لا تدع أي مطور يخرجك منها إذا كانت توفر تجربةً أفضل للمستخدم بشكلٍ مؤكد. مثلًا: إذا احتاجت رسالة خطأ في موقعك لتكون بألوانٍ مختلفة، وكلماتٍ محددة وظهورها في الداخل مع عناصرها لتجنب مغادرة المستخدم بدلًا من رسالةٍ في أعلى الصفحة، افعلها. يستحق نجاح منتجك هذا العمل الإضافي في البداية. يمكن كتابة الشيفرة بشكل أفضل بمساعدة المصمم. اسأل حول كيفية إنجاز هذا. استخدم أي حقائق ومصادر ممكنة لتوضيح موقعك، ولكن لا تجعل المستخدم يعاني لأن هذا سيكون أكثر تحديًا عند التطوير. تحقق مما إذا كان هناك طريقة أخرى لخلق نفس التأثير من أجل مساعدة المستخدم وقاعدة الشيفرة. ففي الكثير من الأحيان، يكون هناك مجال لإنجاز ما تريده بطريقةٍ أخرى أسهل لا تسبب الفوضى. اطلب مدخلات المطورين، حيث أن منطقهم وعقلهم يمكن أن يخرج بحلٍ أفضل من الذي قد خططت له، ويعمل لصالح المستخدم وصالحهم أيضًا. مثلًا: يمكن تصنيف رسائل الأخطاء ووضع شيفرة الألوان في برنامج قابل لإعادة الاستخدام. وبدلًا من وجود رسالة مخصصة ولون لكل إدخال كما هو في المثال السابق، قد يكون هناك 3 فئات من الرسائل، كل واحدة بلون. يسمح هذا للمطورين بترتيب وإعادة استخدام الشيفرة بشكل أفضل، بينما يتواصل بوضوح مع المستخدم. عندما يحدث جدال حول صنف، أو عنصر في التصميم أو ميزة تخدم المستخدم، اختر الطريق الذي يجعل الشيفرة قابلة لإعادة الاستخدام، أو ثابتًا أو نظيفًا. هل يمكن لرسائلك التحذيرية استخدام اللون الأصفر المشترك بدلًا من اللون البرتقالي الاعتيادي؟ ينقل كل منهما طبيعة التحذير للمستخدم، ولكن استخدام لون مخزن وثابت يقلل من التعقيدات ويجعل الشيفرة أصغر حجمًا. ترجمة ـوبتصرف- للمقال What does it mean to design for development لكاتبه Kevin Tomasso

هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم. 1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر 2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر 3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر 4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر 5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر 6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر 7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر 8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر 9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر 10- 85% من الأشخاص البالغين يعتقدون بأن نسخة الأجهزة المحمولة لموقع إلكتروني خاص بشركة يجب أن يكون بنفس جودة نسخة الحاسوب إن لم يكن أفضل منها. المصدر 11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر 12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر 13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth

اليوم، تبدأ التجارب عادةً على أروقة الإنترنت قبل نزولها إلى الشارع. وفي بعض الحالات، تنتهي التجربة بمجرد عودتها إلى الويب. إذا كنت ترسم فراغًا، لا تنظر إلى أكثر من ذلك. يعرف الزبائن مدى جودة الأكل على الإنترنت من خلال التقييمات و التوصيات. وحتى بعد اختيار المكان المثالي على الإنترنت، يأخذ الزبائن محتوى Yelp معهم - متذكرين أي من مقدمي الخدمة هو الأفضل أو أي الساندويشات تكون "بخبزٍ جيد". بعد ذلك، وبعد انتهاء الوجبة يعود الزبون للتقييم ويتفاعل مع الآخرين. إنّ علاقة الإنترنت - بدون إنترنت (online-offline) ليست محدودة بتطبيقات التقييم. في الواقع، تؤكد أحد أحدث المبادرات الشخصية في InVision على تحويل العلامة التجارية الرقمية خاصتنا إلى تجربة ملموسة - ونحن نشارك الأفكار والرؤى الداخلية مع أي شركة تبحث عن هذا. أشياء رئيسية لوضعها في الحسبان قبل إحضار علامتك التجارية للحياة عندما يكون هدفك هو خلق تجربة، سيكون هناك الكثير من المصاعب قبل أن يتم أي شيء بشكل صحيح. 1. تحديد الزمن إنّ تحديد وقت زمني في البداية يساعد على توضيح إمكانيات كل من له دور. لذلك، يمكن للتجربة أن تتمدد أو تتقلص لتناسب الفترة - أسابيع أو حتى ساعات- لتنافس الأولويات، كما يجب توقع المشاكل. وعندما تبدأ الكرة بالدوران، تستطيع القيام بقرارات استراتيجية عمّا يجب احتواءه أو تجاهله بناءً على كمية الوقت التي تملكها مقارنةً بالنتائج المتوقعة. 2. وضع مصادر الأفكار وجمع الإلهام الداخلي تتضمن الخطوة الثانية، العمل الجماعي. في الوقت الذي تقوم به بتحضير تفاصيل التجربة التي تريد إنشاءها، قم بجمع المصادر من فريقك. عند هذه النقطة، سيكون كل شيء نظريًا - وإن دمج وجهات نظر من مجالات وظيفية متعددة- هي طريقة مؤكدة لتمثيل علامة تجارية كاملة، ليس فقط أفكار منظمي الاحتفالات والأحداث وخبراء التسويق. كيف نعلم أنّ هذه الخطوة خطوة أساسية؟ لأننا نعلم من واقع خبرتنا أنّ إخراج الأفكار هو تجربة تأتي بعد الدعوة إليها فقط، وأنّ فكرة استخدام تنسيق غداء قابل للتطور أتت من عضوٍ في الفريق. جرى تصميم العشاء الجماعي للتفكير في التصميم حول عدة مواقع واتجاهات. 3. اختر إما الوكالة أو داخل المؤسسة عندما يكون لديك ولفريقك أفكار قوية وثابتة وخط زمني للعمل عليها، أنشئ نصًّا موجزًا ولوحة مرئية عنها. سيربط مصدر الثقة هذا خبرتك مع المشاركين الآخرين. ستحتاج هنا إلى رسم خط. هل ستُنشِئ كل شي داخل مؤسستك، أم ستوكل أعمال التصميم إلى وكالة مختصة؟ إنّ القيام بهذا العمل داخليًا يعني في حالتنا، أننا سنتحكم بشكل أكبر بكل جماليات التصميم. كما أننا أردنا أن تكون التجربة مؤمنة بشكلٍ كبير. كل وحدة صورية تكون ذات أهمية كبيرة في عالم التصميم الرقمي- كما هي اللمسات الفنية في كل شخص. 4. قم باتخاذ القرارات المهمة المتعلقة بالعلامة التجارية في الكثير من الأوقات، الحل الأول هو طباعة لافتة كبيرة أو ملصق جداري مع اسم الفعالية وشعار الشركة. يغيِّر ذلك كيفية استقبال الزوار للفعالية وما قمنا بخلقه - خاصة إذا لم تترجم علامتك الرقمية إلى عرض تجاري أو وليمة. إن قرارات العلامة التجارية التي تتخذها هي المفتاح لتأسيس الإحساس بتجربتك. وقبل أن تبدأ بوضع الأشياء مع بعضها، قرِّر عدد العناصر التجارية الخارجية التي ستكون جزءًا من الخليط. هل ستستعمل ألوان الشركة؟ هل سيكون شعار الشركة موجوداً على كل عناصر التصميم؟ وهل هدفك هو التعريف عن علامتك التجارية أم أنّ هناك هدف آخر؟ هناك فرق كبير بين وضع علامتك التجارية على رأس البيئة الموجودة، والتي تعمل بشكل طبيعي. تصميم تجربة دون العلامة التجارية العلنية عندما يحين الوقت لإظهار شخصية شركتك، ركز على السبب وليس الكيفية. ستتمكن من التحكم في شعور الحاضرين من خلال تأطير كل قرار من قرارات العلامة التجارية الخاصة بك حول الأهداف، وتوليد العملاء المتوقعين في سوقٍ جديدٍ، والالتقاء بالعملاء وإظهار التقدير للمجتمع. قالت ميكايلا أليكساندر، مديرة الفعاليات التسويقية التي قادت حفل العشاء الجماعي للأفكار في التصميم: في هذا السيناريو، كان "السبب" هو إعطاء رواد التصميم بيئة ملهمة للإبداع لمناقشة تحديات هذا المجال والتفكير في التصميم دون ضغطٍ من حضورٍ إعلامي أو غيره. كان شعار أسبوع التصميم في سان فرانسيسكو ، "اسأل عن كل شيء". مع وضع كل هذه الأشياء في الحسبان، جعلت InVision كل تفاصيل الأمسية مفاجئة بطريقةٍ أو بأخرى من خلال تصميمها. باستثناء عدد قليل من التفاصيل الصغيرة، حيث أنّ شعار الشركة لم يكن موجودًا، وبالتأكيد لم يكن نقطة الارتكاز. باستخدام السرد الذي استخدمناه في مراحل التخطيط وبالتزامن مع موضوع أسبوع التصميم، اعتمدنا في كل قرار للتصميم، على تجربتنا المستهدفة. عند القيام بذلك لعلامتك التجارية الخاصة، فكر في الطريقة التي تجسد بها تجربتك في شعار الشركة أو مهمتها. يعد هذا بمثابة علامتك التجارية، دون الحاجة لمئات الشعارات. ولإثارة الفكرة القائلة بأن قادة القرار سيجتمعون في بيئة نخبوية ومريحة، أضفنا العديد من اللمسات الشخصية. ومن بين الأشياء الأخرى التي قمنا بها لتجسيد علامتنا التجارية، ما يلي: استخدام البيئة لتعزيز مقاصدنا جعل التجربة مرنة كالسوائل من خلال دمج أماكن متعددة التحكم في أجواء كل مكان بالتعاون مع البائعين اختيار البائعين مع فلسفات التصميم المتطابقة والمناهج التي تطابق الجمالية التي يتم إنشاؤها المكونات الرقمية المبدئية للاحتفال بالتصميم خارج مجتمع الإنترنت ركز على نقاط الاتصال هذه لتنشيط علامتك التجارية مع وضع جميع الاعتبارات الأخرى جانبًا، وجدنا أنّ هذه المناطق هي الأكثر أهميةً لإنشاء تجربة خارج الشبكة العنكبوتية. تُرسم كل نقطة اتصال من تجاربنا الخاصة، ولكن يمكن تكييفها بسهولة للعمل مع علامتك التجارية. اختر البيئة التي تدعم سردك بشكل أفضل عندما يكون هدفك هو ربط الناس، فإن البيئة التي تضعهم فيها مهمة بقدر أهمية المحادثات. اقترب من ذلك مثل مصمم صفحات الإنترنت الذي يأخذ في الحسبان المحددات الرقمية للواجهة وكيف يؤثر ذلك على رحلة المستخدم عبر موقع الإنترنت أو التطبيق. ولكن بدلًا من رحلة على الشاشة، فأنت تقوم بتصميم رحلة فعلية. ولتعيين نغمة هذه التجربة وربطها بالخط الزمني والتنسيق، استخدمنا صفحةnVite . عكست اللغة تطور الفعالية، ونقلت الجدول الزمني، وألمحت إلى الجمالية العامة. ونظرًا لأننا أردنا تسهيل الاتصالات الأصلية والحفاظ على قدرة تخمين الحضور، فإن العشاء الرائع في أماكن متعددة منح الضيوف رحلةُ واضحةً، إذ أُلهمت كل أمسية من اقتباس مختلف عن التصميم من قادة الصناعة المختلفين. تحديد الأماكن والبائعين اللازمين لإكمال التجربة على غرار اختيار البيئة المناسبة، يتم اختيار البائعين المناسبين - وأماكن أخرى، إذا لزم الأمر – للإحاطة بكل الجوانب. لا يتم إنشاء البيئة دائمًا في مساحة واحدة فقط. ولجعل الحركة جزءًا حقيقيًا من التجربة، اخترنا 3 أماكن تكميلية لترسيخ كل مرحلة. في كل مكان، تم تعريف الحضور على سؤالٍ مختلف حول التصميم أو تحدياته. عندما يتعلق الأمر بالبائعين، اخترنا مقدمي خدمات محترمين تتشابه أساليبهم مع الحِرَف بالطريقة التي تتبعها شركات تقديم الأفكار في التصميم. ونتيجةً لذلك، ساعدت كل التفاصيل في تشكيل التجربة وتعزيز الأفكار ذاتها التي استخدمناها لبناء الفعالية. تصور العناصر المرئية وكيف ستقوم بإنشائها للحصول على جوهر إنشاء تجربة قائمة بذاتها - وليس مجرد امتداد لعلامة تجارية في علامة تجارية أخرى متوازنة مع الهدف. لذلك، أرَدتُ أن أبتعد عن الخيارات المعتادة. وباعتباري مسوقةً، هناك دافع لجعل العلامة التجارية ذات صدىً عالٍ قدر الإمكان من خلال لافتات وشعارات قابلة للسحب عند كل منعطف. بدلًا من ذلك، أردت أن أرتقي وأدمج ذلك في التجربة - ميكايلا ألكساندر- ، مديرة فعاليات التسويق. وهناك واحدة من أكثر الطرق إبداعًا لإكمال علامتك التجارية، وهي استخراج العناصر المرئية التي تساعد في التعرف عليها على الإنترنت، ثم تطبيقها على المساحة المادية. على سبيل المثال، عملنا مع البائعين لإضافة نقاط من اللون الوردي لـ InVision إلى القائمة دون الابتعاد عن نظام الألوان العام. قد تتعرض لمحددات بصرية لكن هذا هو المكان الذي تلعب فيه الحلول الإبداعية. يختلف تصميم الويب عن الطباعة. في بعض الحالات، قد تؤدي هذه الاختلافات إلى إلقاء نظرة خاطفة على خططك نظرًا لارتباطها بالجمالية العامة. وقال كونور مورفي، مصمم InVision الذي أنشأ العشاء الجماعي للتفكير في التصميم: على سبيل المثال، كانت لدينا مواد سوداء وذهبية لطيفة مع خطة لجعلها وكأنها مختومة. لقد أضاف عنصرًا فاخرًا، لكنه لم يكن قابلاً للتنفيذ في ذلك الوقت. من أجل حل المشكلة، نظرت إلى درجات أخرى من الذهبي واخترت واحدة أعطت تأثيرًا مماثلًا. ترجمة المكونات الرقمية إلى التفاصيل المادية من المحتمل أنك قد اعتدت على العمل مع العناصر الرقمية لعلامتك التجارية. تحتوي الأدلة على التفاصيل، ويوفر كل مشروع نظرة ثاقبة لتحديات الواجهة وأفضل الممارسات التي تظهر على الشاشة. لسوء الحظ، فإن نقل كل ذلك من الشاشة إلى المشهد ليس سهلًا كما يبدو. الألوان يناسب اللون الأسود والذهبي العشاء الجماعي للتفكير في التصميم بشكل أفضل، لذلك لم نواجه التحدي المتمثل في مطابقة نقاط InVision الوردية المعتادة. إذا اخترت المزيد من العلامات التجارية التقليدية، ستكون الألوان أمرًا يجب مراعاته بالتأكيد. إن ترجمة الشيفرات الست عشرية إلى PMS لا تسفر دائمًا عن تطابق تام، لذلك يجب عليك اختيار بديل يحافظ على العلامة التجارية. قرارات أسلوب المحتوى تم دمج الاقتباسات من قادة التصميم في الصورة لإعطاء أفكار أكبر عن التصميم، ولكن تم طباعتها — على عكس معظم ميزات المحتوى من InVision. يختلف التصميم للطباعة أو لأي مواد مادية عن تصميم شيء ما على الشاشة. من خلال الشاشة، يمكنك رؤية الشكل الذي سيبدو عليه التصميم تمامًا - مع كل الألوان الصحيحة والخطوط المناسبة وجودة الصورة وما إلى ذلك. أما في الطباعة، يكون الأمر أصعب قليلًا. لا تظهر الألوان عادة على الورق كما تظهر على الشاشة، وقد تتغير الخطوط عند الطباعة، وتصبح القراءة أكثر صعوبة. - كونور ميرفي ، مصمم-. تؤثر الفروق الدقيقة في الطباعة أيضًا على المكونات الأخرى للتصميم. كانت إحدى نقاط الأمسية الوحيدة التي تحمل علامة تجارية هي الشاشة مع شعار InVision والكلمات "Question Everything". ومع ذلك، فقد تم عرض هذا نهارًا في مساحة كبيرة إلى حدٍ ما، لذلك لم يكن نظام الألوان أو الخط ذاته بهذه السهولة. كان العنصر الثاني الذي قمنا بتضمينه هو غلاف الحاسوب المحمول المخصص لكل ضيف، منقوشًا عليه InVision. ومع ذلك، فقد بدا التصميم العلوي المصغر من علامة InVision مختلفًا تمامًا ومختومًا في الجلد في صفحة المنتج الرئيسية. في النهاية، قررنا الابتعاد عن الشعار المعتاد كما قررنا استخدام جميع الحروف الكبيرة. الأحجام والنسب يجب أن يُؤخذ حجم الكتابة في الحسبان عندما يتعلق الأمر بالمواد المادية. هل سيحتاج الناس إلى قراءة رسالة من بعيد أم أنها ستكون أمامهم مباشرة؟ كيف يمكن أن تكون الرسالة مثيرة للاهتمام دون أن يصبح بسيطًا أو يصعب قراءته؟ وأخيرًا، هل يلزم دمج الخطوط للطباعة؟ دمج طرق أصيلة للسعادة إنّ تصميم تجربة برعاية عالية كانت طريقتنا في مفاجأة وإسعاد الضيوف. يتماشى اختيار الأشياء من أجلهم فقط مع فكرة الاحترام وتكريم الآراء المختلفة من قادة التصميم، وجعل الأمسية مرحبة بـ InVision كمضيف – ليست نقطة محورية. قال مورفي: مفاجأة الضيوف بشكل جيد مع موضوع السؤال عن كل شيء. في وقتٍ مبكر، اقترح أحد أعضاء الفريق أن نستخدم أغطية الطاولات لعمل تحدي افتراض ما هو صالح للأكل. وبعد التعاون مع متعهد الطعام، قررنا أن نجعل السلطات جزءًا من تصميم الأزهار الفعلي. كيف تريد أن ينخرط الناس ويتواصلوا مع شيء تنتجه علامتك التجارية - خاصة عندما تكون ملموسة - هي فرصة كبيرة لترك انطباع دائم. وأحيانًا، تتكلم أكثر عندما لا تشوش الرسالة. الذهن المنير والحاد يأخذك بعيدًا، والتواصل مع السرد والهدف يمكن أن يأخذك أبعد من ذلك. أكبر فوز لديك هو جعل الناس يتواصلون إنّ التجربة بأكملها مهمة عندما تقوم بترجمة علامتك التجارية الرقمية إلى العالم الواقعي. يجب التفكير في كل نقطة اتصال من منظور العلامة التجارية والتصميم — وقد تقود الاختلافات في التصميم اللعبة النهائية. إذا كنت مصممًا، فهذا يعني التفكير في التفاصيل الصغيرة وفي تجربة المستخدم في سياق الغرفة أو المساحة المادية، وضبط الأنماط الرقمية لتكملة العناصر الخارجة عن سيطرتك. من منظور التسويق والعلامة التجارية، يعني هذا تجربة "لماذا" الخاصة بك بما تنتجه. يجب فحص كل شيء بدءًا من قوائم الكوكتيل وحتى رسائل الترحيب من خلال عين الشخص وليس الاحتمالات. إذا تم ذلك مع الاهتمام بالتفاصيل والهدف، فإنّ إنشاء تجربة - بدلاً من مجرد فعالية آخرى - يمكن أن يلبي حاجة يتردد صداها مع الناس لعدة أشهر. ترجمة- وبتصرف -للمقال How to transform your digital brand into a real world experience لصاحبه Kaysie Garza