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

يمكن أن تقوم SVG بأكثر بكثير من مجرد عرض الصور الثابتة، إذ تعد إمكانياتها الحركيّة واحدة من أكثر مميزاتها قوةً، مما يعطيها مزايا فريدة عن صيغ الصور الأخرى، وهي أحد الأسباب العديدة التي تجعل SVG أفضل من الصور النقطية، بما فيها GIF. ولكن هذا، بالطبع، ينطبق فقط على الصور التي تعد مرشحةً جيدةً لتكون SVG، مثل: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } الشعارات، الصور غير المعقدة، المعتمدة على الأشعة، أدوات التحكم بواجهة المستخدم، الرسوم البيانية، والأيقونات. بالطبع، إذا كان لديك صورة أكثر ملاءمةً للصيغة النقطية – مثل الصور الفوتوغرافية أو الرسومات المعقدة جدًا المعتمدة على الأشعة (والتي من الطبيعي أن تكون كبيرة الحجم جدًا مثل صور SVG)، فعليك استخدام صيغة الصور النقطية بدلاً منها. لا يجب أن تكون الصورة مرشّحاً جيداً لـ SVG فقط، ولكن يجب أن يكون SVG مرشّحاً جيداً للصورة. فمثلًا، إذا كان حجم الصورة صغير جداً كصور PNG، يجب استخدام PNG، وتقديم إصدارات/معاملات دقة مختلفة للصورة باستخدام srcset أو <picture>، بالاعتماد على ما تعمل عليه وتحاول تحقيقه. عمومًا، الصور المذكورة أعلاه هي عادةً مرشّحات مثالية لـ SVG. وإذا كنت ستحرّك أيًا منها، فإنّ الطريقة المعقولة للقيام بذلك هي إنشاء صورك المتحركة عن طريق تحريك شيفرة SVG. ومع ذلك، في الأسبوع الماضي، ظهر رابطًا منبثقًا في يوميات حسابي على التويتر يشير إلى مجموعة من الأيقونات المتحركة كـ GIF. إنّ أول ما مرّ في ذهني عندما رأيتهم بأنّهم كانوا مرشحين مثاليين لـ SVG ويجب أن يتم إنشاؤهم كصور SVG، وليس صور GIF. في العديد من الحالات يمكنك استبدال صور GIF بصور SVG بالفعل، تمامًا كما يمكن أن تستبدلها بتنسيقات الصور النقطية الأخرى لمرشّحين مثل تلك المذكورة أعلاه. إنّ القدرة على تحريك صور SVG هي ما يمنحها هذه الميزة والقدرة. وهذا ينطبق على عناصر أكثر من الأيقونات المتحركة. لذا، لهذا السبب أعتقد أنّه يجب عليك استخدام SVG بدلًا من صور GIF كلما استطعت. جودة الصورة الميزة الأولى لاستخدام SVG بدلًا من GIF - أو أية صيغة صورة لهذه المسألة - هي - كما هو متوقع - ميزة SVG الأولى: استقلالية الدقة. ستبدو صورة SVG فائقة الوضوح عند أي دقة للشاشة، بغض النظر عن حجمها. في حين أن صور GIF - صيغة الصورة النقطية - لا تظهر كذلك. حاول تكبير الصفحة التي تحتوي على صورة GIF وشاهد كيف ستبدو صورة الـ GIF منقطة ومحتوياتها غير واضحة. مثلّا، يبدو تسجيل GIF التالي لحركة صورة SVG جيدًا بهذا الحجم الصغير: يؤدي تكبير الصفحة عدّة مرات إلى جعل الصورة غيرَ واضحةٍ وتصبح حواف ومنحنيات العناصر الداخلية مسننةً، كما تشاهد في الصورة أدناه: بينما إذا قمت بالتحقق من عرض SVG التجريبي وتكبير الصفحة، فإن محتوى SVG سيبقى واضحًا وصافيًا بغض النظر عن مقدار التكبير. لتوفر صورًا واضحةً للشاشات عالية الدقة عند استخدام صيغة صورة نقطية مثل GIF، تحتاج إلى استخدام <picture> أو srcset وتشغيل الصور بسياقات مختلفة. بالطبع، كلما زادت دقة الصورة، زاد حجم الملف. مع صور GIF، سيصل حجم الملف لحجمٍ كبير بشكلٍ هائل. لكننا سنصل إلى ذلك في غضون دقيقة، كذلك، فإنّ استخدام صور GIF عالي الدقة وعرضها بحجمٍ أصغر للهواتف المحمولة يعد أمرًا سيئًا بالنسبة للأداء، لذا لا تفعل ذلك. عندما تنشئ أيقونات أو صور GIF متحركة، أبعادها ثابتةٌ. غيّر الأبعاد أو كبّر وصغّر الصفحة، وستحصل على صورة غير واضحة. أمّا مع SVG، ستتخلص من مشكلة الحجم، وستحصل على وضوحٍ دائم. يمكنك إنشاء صور SVG صغيرة وتغيير أبعادها وفق احتياجاتك دون التضحية بوضوح الصورة. نتيجة صورة GIF صورة SVG متحركة GIF مثل تنسيقات الصور الأخرى تمامًا، غير مستقلة الدقة، ولذا ستبدو غير واضحة عند تغيير حجمها أو عرضها بدقة أعلى صورة SVG قابلة لتغيير الحجم ومستقلة الدقة، وستبدو واضحةً بأي دقة شاشة الألوان والشفافية ربما يكون السبب الأول لتبتعد عن التعامل مع صور GIF هو الطريقة التي يتعامل بها مع الشفافية، خاصةً عندما يتم عرض الصورة على خلفية غير الخلفية البيضاء. هذه مشكلة تظهر غالبًا عند استخدام أيقونات GIF (سواءً كانت متحركة أم لا)، عندما يتم إنشاء الأيقونات عادةً بخلفيات شفافة. مثلًا، فكر مليّا بالدائرة التالية المحاطة بحدّ، أُنشئت كصورة SVG (يسار) وGIF بخلفية شفافة (يمين). المشكلة واضحة بمجرد النظر إلى الصورتين: تحتوي دائرة GIF على حواف رمادية حول حدّها. إذا كنت لا تعاينها في المتصفح، فقد لا يكون التأثير مرئيًا لك لأنّه من الممكن ألا يتم تطبيق أنماط الشكل. فيما يلي لقطة توضح المشكلة (على اليمين): يحدث هذا لأن الشفافية في صور GIF ثنائية. هذا يعني أن كل بكسل إما يعمل أو لا يعمل؛ البكسل سيظهر إما شفافًا أو ممتلئًا بشكلٍ كامل. وهذا بدوره يعني أنّ الانتقال بين اللون الأمامي ولون الخلفية ليس سلسًا، والتشوهات الناتجة تظهر بسبب تردد العينات غير المناسب، والمعروفة باسم التعرج. عندما لا يكون الخط مستقيمًا تمامًا، فإنّه يتسبب بأن تكون بعض البكسلات (حول الحواف) شفافة جزئيًا وممتلئة جزئيًا ، لذلك يحتاج البرنامج إلى معرفة اللون الذي يجب استخدامه لهذه البكسلات. تأثير الهالة "ناتج عن كل البكسلات التي كانت ممتلئة أكثر من 50٪ امتلاءً كاملاً وتحمل لون الخلفية بدلاً من اللون الذي تم تنقيطه" كريس ليلي. لذلك يكون هذا التأثير عادةً ناتجًا عن تلوث البكسل من لون الخلفية التي تتكون الصورة على أساسه مقارنةً بما هي عليه عند إنشائها/حفظها في محرر الرسومات. عادةً ما يحاط التعرج بمكافح تعرج، ولكن هذا ليس بالأمر البسيط عندما تكون الشفافية ثنائية: حلّ هذه المشكلة هو الشفافية المتغيرة، والمعروفة باسم قناة ألفا، والتي تسمح بدرجات متفاوتة من الشفافية وبالتالي انتقالًا أكثرَ سلاسةٍ بين اللون الأمامي ولون الخلفية، وهذا غير متوفر في GIF؛ وبالتالي، هذا يسبب مشكلة تأثير الهالة. تظهر الصور ذات تأثير الهالة أفضل عادةً عند استخدامها مع خلفيات بيضاء؛ أي لون خلفية آخر عالي التباين سيجعلها تبدو مشوهةً. لست متأكدةً تمامًا مما إذا كانت هناك طريقة لحل هذه المشكلة، لكنني لم أجد بعد صورة GIF ذات خلفية شفافة وحواف منحنية لم تكن بها هذه المشكلة. لقد رأيت الأشكال المستطيلة تعاني منها أيضًا. إذا كنت ترغب في استخدام صورتك/أيقونتك على خلفية غير بيضاء - مثلًا، على خلفية تذييل داكنة، قد يكون هذا لوحده يبعدك عن التعامل مع GIF، ولكن هناك أسباب أخرى تجعل استخدام SVG أفضل من GIF أيضًا، والتي سنغطيها في الأقسام التالية. ملاحظة: إذا كنت تقرأ هذه المقالة باستخدام المتصفح ولكنك لا ترى الحواف في الصورة الأولى على شاشة أصغر، فحاول تكبير الصفحة لترى التأثير. لماذا من الممكن ألا تكون قادرًا على رؤية الحواف على أحجام أصغر؟ الإجابة هي: ينعّم المتصفح الحواف كجزءٍ من عملية تغيير حجم الصورة. هل هذا يعني أنّه يمكنك استخدام هذا للتخلص من الحواف والاستمرار باستخدام GIF؟ نعم تستطيع. ولكن للقيام بذلك، يجب عليك استخدام صور GIF بحجم أكبر بكثير من الحجم الذي تريد أن تكون الصورة به، ثم تغيير حجمها. هذا يعني أيضًا أنك ستعرض صورًا للمستخدمين أكبر بكثير مما يحتاجون إليه، وبالتالي استهلاك المزيد من النطاق الترددي على الهاتف المحمول، بالإضافة إلى الإضرار بالحجم العام للصفحة وأدائها. رجاءً لا تفعل ذلك. نتيجة صورة GIF صورة SVG متحركة صور GIF قادرة على الشفافية الثنائية فقط. يسبب هذا التشوهات، المعروفة باسم تأثير الهالة التي تظهر كلما تمّ استخدام الصورة أو الأيقونة مع خلفية غير بيضاء كلما كان تباين لون الخلفية مع الصورة أعلى، كان تأثير الهالة أكثر وضوحًا مما يجعل الأيقونات غير قابلة للاستخدام عمليًا. تأتي صور SVG مع قناة ألفا ولا تعاني من أيّة مشاكل عند استخدامها مع ألوان خلفية مختلفة. تقنيات الصور المتحركة وأداؤها يمكنك تحريك صور SVG باستخدام CSS أو جافاسكربت أو SMIL، وتمنحك كلٌّ منها مستوىً مختلفًا من التحكم يمكنك الاستفادة منه لإنشاء جميع أنواع الصور المتحركة على عناصر SVG. لا توجد "تقنيات" لتحريك صور GIF. يتم تحريكها من خلال عرض سلسلة من الصور - صورة لكل إطار - بشكلٍ تسلسلي، بأسلوبٍ ثابتٍ وسرعةٍ ثابتةٍ. تعلم أنّ هذه الطريقة التي تعمل بها صور GIF فقط. ومن المؤكد أنّه يمكنك الإبداع مع أيقوناتك قبل تحويلها إلى صور GIF ثم "تسجيل" الحركات وتحويلها إلى GIF، ولكن ما مدى جودة مظهرها؟ وما مدى السيطرة على وقت الحركة التي ستحصل عليها بعد ذلك؟ لا شيء. لن تبدو الحركة سلسةً ما لم تتأكد من أن لديك 60 إطارًا على الأقل - أي 60 صورة - في الثانية لإنشاء صورتك الـ GIF. بينما مع SVG، فإنّ الحصول على صورٍ متحركةٍ سلسةٍ أسهل وأبسط بكثير من خلال الاستفادة من تحسينات المتصفح. حجم صور GIF أكبر من حجم صور PNG أو JPEG، وكلما طالت مدة حركة صورتك، زاد حجمها. ماذا لو أردت الآن تشغيل صورتك المتحركة لمدة 5 إلى 6 دقائق على الأقل؟ ماذا لو أردت تشغيلها لفترة أطول؟ ستحصل على الصورة. لنلقِ نظرةً أكثر تحديدًا على مثالٍ بسيط. يوجد أدناه صورتان: صورة SVG متحركة على اليسار وصورة GIF متحركة على اليمين. يتغير لون المستطيل في كلتا الصورتين بفترة ست ثوانٍ. يوجد العديد من الأشياء لملاحظتها هنا: تبدو صور GIF المتحركة سلسةً، لكن إذا ألقيت نظرةً قريبةً ستلاحظ أنّ مستطيل SVG يمر بمجموعة أكبر من الألوان عندما ينتقل من اللون الأولي إلى اللون النهائي. عدد الألوان التي يمر بها GIF محدودًا بعدد الإطارات. في الصورة أعلاه، تمر صورة الـ GIF بـ 60 إطارًا، أي 60 لونًا، بينما يمر SVG عبر الطيف بأكمله بين ظل اللون الوردي المستخدم واللون الأخضر النهائي. بالنسبة لتكرار الصور المتحركة مثل هذه، من الأفضل عمومًا تجنب قفزة اللون الظاهرة في الصورة المتحركة أعلاه، وإنشاء الصورة المتحركة بحيث تنعكس ما إن تصل إلى اللون الأخضر؛ بهذه الطريقة، ستنتقل بسلاسة إلى اللون الوردي ثم تبدأ الجولة الثانية من الصورة المتحركة من هناك أيضًا، مع تجنب قفزة الألوان القبيحة. مع CSS، يمكنك عكس حركة الصورة باستخدام قيمة اتجاه الحركة alternate. ولكن مع GIF، ستحتاج إلى العمل على عدد إطاراتك وربما ينتهي بك الأمر إلى مضاعفتهم لتحقيق ذلك؛ سيؤدي هذا بالطبع إلى زيادة حجم الصورة أيضًا. أحجام الصورتين الظاهرتين في الأعلى: حجم صورة GIF هو 21.23 كيلوبايت حجم صورة SVG هو 0.355 كيلوبايت هذا ليس فرقًا بسيطًا. ولكننا نعلم جميعًا أنه يمكننا تحسين صورنا. لذلك دعونا نفعل ذلك. يؤدي تحسين SVG باستخدام واجهة المستخدم الرسومية SVGO بالسحب والإفلات إلى تقليل حجم ملف الـ SVG إلى 0.249 كيلوبايت. لتحسين صورة الـ GIF، يمكنك استخدام واحدة من العديد من أدوات تحسين GIF عبر الإنترنت. لقد استخدمت ezgif.com لتحسين الصورة أعلاه. (توجد أدوات أخرى أيضًا؛ مثل gifsicle.) انخفض حجم الملف إلى 19.91 كيلوبايت. هناك العديد من الخيارات التي يمكنك الاختيار من بينها عند تحسين صور GIF. قمت بتحسين الصورة أعلاه بحيث يبقى عدد الإطارات نفسه، باستخدام ضغط Lossy GIF، الذي "يمكن أن يقلل من حجم ملف GIF المتحرك بنسبة 30 ٪ - 50 ٪ بتكلفة بعض التدرج / التشويش". يمكنك أيضًا تحسينها عن طريق إزالة كل إطار ذو الرقم n؛ مما يمكن أن يقلل من حجم الملف إلى أبعد حد، ولكن على حساب حركة الصورة التي لم تعد سلسةً بعد الآن. وفي حالة الصور المتحركة مثل الحالة المدروسة الآن، فإن إزالة الإطارات سيجعل التغيير في اللون "سريعًا" وملاحظًا. تتوفر أيضًا خيارات أخرى للتحسين مثل تقليل الألوان (الذي لن يكون مناسبًا للصور المتحركة المعتمدة على الألوان هنا) وخفض الشفافية. يمكنك معرفة المزيد حول هذه الخيارات في صفحة التحسين في موقع ezgif.com. للتلخيص: إذا كنت أردت أن تكون صورك الـ GIF المتحركة سلسةً، ستحتاج إلى المزيد من الإطارات في الثانية، وسيؤدي ذلك بالتالي إلى زيادة حجم الملف كثيرًا. بينما مع SVG، من المحتمل أن تحتفظ بحجم ملف أصغر بكثير. المثال أعلاه صغيرٌ، وأنا متأكد من وجود أمثلة أفضل، ولكني أردت أن يوضح المثال البسيط الفرق بين الصيغتين. حتى إذا كنت تحرّك المستطيل أعلاه باستخدام جافاسكربت أو حتى إطار عمل جافاسكربت — نظرًا لأن الصور المتحركة SVG لا تعمل في متصفح IE، مثلًا، من المحتمل أن يكون حجم ملف إطار العمل المقترن بحجم SVG أصغر أو يساوي على الأقل حجم صورة GIF. مثلًا، باستخدام GreenSock’s TweenLite، سيكون حجم SVG مع المكتبة المدمجة أقل من 13 كيلو بايت (والذي لا يزال أقل من حجم GIF)، إذ انّ حجم TweenLite المصغر هو 12 كيلو بايت. إذا انتهى بك الأمر إلى حجمٍ مساوٍ لحجم GIF، فإن الفوائد الأخرى لـ SVG ستزيد من الحجم وستحصل على المزيد منه. توجد بعض مكتبات جافاسكربت الأخرى التي تركز على مهام حركة معينة في وقت واحد، وتأتي بأحجام ملفات صغيرة بشكلٍ ممتاز (أصغر من 5 كيلوبايت)، مثل Segment التي تستخدم لتحريك مسارات SVG لإنشاء تأثيرات رسم خطية. حجم Segment المصغر هو 2.72 كيلو بايت. هذا ليس سيئًا للغاية، أليس كذلك؟ يمكن أن يكون هناك استثناءات، لذلك يجب عليك دائمًا الاختبار. ولكن بالنظر إلى طبيعة صور GIF وكيفية عملها، فمن المحتمل أن تجد أن SVG يُعدُّ خيارًا أفضل في معظم الحالات. ملاحظة: أداء SVG ليس في أفضل حالاته اليوم، ولكن نأمل أن يتغير هذا في المستقبل. توفر متصفحات IE/MS Edge أفضل أداء لعرض SVG بين جميع المتصفحات اليوم. على الرغم من ذلك، ستظل صور SVG المتحركة تبدو أفضل من صور GIF المتحركة، خاصةً عند التعامل مع الصور ذات الحركة الطويلة، لأنّ حجم ملف GIF - بافتراض تسجيلها بمعدل 60 إطارًا في الثانية - سيكون له تأثيرًا سلبيًا على الأداء العام للصفحة. تقدم المكتبات مثل GreenSock أداءً رائعًا أيضًا. نتيجة صورة GIF صورة SVG متحركة - صور GIF أكبر حجمًا عمومًا من صور SVG. حركة الصورة الأكثر تعقيدًا والأطول مدةً، تتطلّب عدد إطارات أكبر لإنشائها ولهذا يكون حجم الملف أكبر ويؤثر سلبًا على الأداء - ما لم تعمل حركة الصورة بمعدل 60 إطارًا في الثانية، فإنّ الحركة ستصبح مسننة وغير سلسة. أيضًا زيادة عدد الإطارات في الثانية سيؤدي إلى زيادة حجم الملف خاصةً للحركات الطويلة نتيجة: سيكون هناك حل بسيط يجب القيام به. إمّا أن تكون حركة صورة GIF ناعمة وسيتأثر الأداء وحجم الملف الكلي وحجم الصفحة بشكلٍ سلبي، أو ستعاني الصورة المتحركة GIF من إطارات أقل. سيتم المخاطرة بأحد أشكال الأداء في كلا الحالتين تستفيد صور SVG من تحسينات المتصفح عند تحريك العناصر. على الرغم من أنّ أداء المتصفح على عناصر SVG لا تزال في أفضل حالاتها، إلا أنّ الصور المتحركة ستبقى تعمل بشكلٍ جيد بدون الحاجة لتقديم تنازلات في أداء الصفحة لا يزال حجم ملف SVG معقولًا جدًا، إن لم يكن صغيرًا جدًا، مقارنةً بـ GIF، حتى عندما قد نحتاج إلى مكتبات معينة للصور المتحركة لإنشاء صور متحركة عابرة للمتصفحات إصلاح وتعديل الصور المتحركة إنّه من المحزن أن تستخدم صور GIF. ستحتاج إلى استخدام محرر رسومات مثل Photoshop أو Illustrator أو After Effects، على سبيل المثال لا الحصر. وإذا كنت مثلي، فلن يكون محرر الرسومات المكان الذي تصقل فيه مهاراتك، وستشعر أكثر أنّك في مكانك الصحيح أكثر عند إجراء تعديلات في الشيفرة، وليس في برامج تحرير الرسومات. ما الذي يحدث إذا كنت ترغب في تغيير توقيت صورتك المتحركة؟ أو إذا كنت تريد تغيير وظائف التوقيت لعنصرٍ واحدٍ أو عدة عناصر داخل صورتك؟ أو إذا كنت ترغب في تغيير الاتجاه الذي يتحرك فيه عنصرٍ ما؟ ماذا لو كنت تريد تغيير التأثير بالكامل وجعل العناصر في صورتك تفعل شيئًا مختلفًا تمامًا؟ ستحتاج إلى إعادة إنشاء الصورة أو الأيقونة مرةً أخرى. يتطلب منك أي تغيير الانتقال إلى محرر الرسومات والعمل مع الإطارات وواجهة المستخدم المعتمدة على الإطار. سيكون ذلك بمثابة تعذيب للمطورين، ومهمةً مستحيلةً لأولئك الذين لا يعرفون طريقتنا بالتعامل مع هذه المحررات بشكلٍ كافٍ لإجراء هذه التغييرات. مع SVG، فإن إجراء أي نوع من التغيير على الصورة المتحركة (الصور المتحركة) لا يُعدُّ سوى بضعة أسطر من الشيفرة. نتيجة (من وجهة نظر المطور) صورة GIF صورة SVG متحركة إصلاح وتعديل الصور المتحركة GIF يتطلّب إعادة إنشاء الصورة أو اللجوء إلى واجهة المستخدم في محرر الرسومات المعتمد على الإطارات للقيام بذلك، ويعدّ هذا مشكلة للمطورين في مواجهة التصميم عادةً، يمكن أن تتغير صور SVG ويتم التحكم بها بشكلٍ صحيح داخل شيفرة SVG - أو في أي مكان تم تعريف الصور المتحركة به، باستخدام عدة سطور من الشيفرة. حجم الملف، ووقت تحميل الصفحة والأداء في القسم السابق، ركزنا على أداء الصور المتحركة نفسها. في هذا المثال، أريد إلقاء بعض الضوء على أداء الصفحة ككل وكيفية تأثرها باختيار صيغة الصورة الذي تقوم به. في الحقيقة: كلما زاد حجم الملف، زاد التأثير السلبي على وقت تحميل الصفحة والأداء. بأخذ ذلك بالحسبان، لنرى كيف يمكن أن يساعد استخدام SVG بدلاً من GIF في تحسين إجمالي وقت تحميل الصفحة من خلال النظر إلى مثالٍ أكثر واقعيةٍ وعمليةٍ. في حديثي الأول عن SVG، منذ 18 شهرًا، ذكرت كيف يمكن استخدام SVG لاستبدال صور GIF المتحركة وكيف تؤدي إلى تحسين أداء الصفحة بشكلٍ عام. في ذلك الحديث، قدمت مثالًا واقعيًا لصفحة ويب واقعية استفادت مما توفره SVG وحصلت على الفوائد: الصفحة الرئيسية لـ Sprout. تحتوي صفحة الرئيسية لـ Sprout على صورتين متحركتين تم إنشاؤهما في البداية وعرضهما بشكل صور GIF. قبل عامين، كتب Mike Fortress مقالًا في مدونة Oak، يوضح فيه كيف قاموا بإعادة إنشاء صور GIF متحركة، خاصةً مخطط GIF (انظر الصورة أدناه) كصورة SVG متحركة. يشارك Mike في مقالته بعض الأفكار المثيرة للاهتمام حول أدائهم الجديد للصفحة كنتيجةٍ للتغيير إلى SVG: إنّه بالفعل فرقٌ كبيرً. مخطط Sprout هو المرشّح المثالي لـ SVG. لا يوجد سبب لتحريكها عن طريق تحويل الصور المتحركة إلى تسجيل GIF، عندما يمكن لـ SVG أن تحقق الكثير من الفوائد. يدرك Jake Archibald قوة صور SVG المتحركة أيضًا ، ويستخدمها لإنشاء الرسوم التوضيحية التفاعلية وتحريكها لاستكمال مقالاته. مقاله كتاب الطبخ دون اتصال يعتبر مثالًا ممتازًا (وبالمناسبة مقالًا ممتازًا). هل كان بإمكانه استخدام صور GIF للقيام بذلك؟ بالتأكيد. ولكن بالنظر إلى عدد الصور التي استخدمها، كان من الممكن أن تزيد صور GIF بسهولة الحجم الكلي للصفحة إلى 2 ميغابايت أو أكثر، بحيث يكون حجم كل GIF على الأقل مئات الكيلوبايت؛ في حين أن صفحة الويب بأكملها تبلغ حاليًا 128 كيلو بايت فقط مع جميع صور SVG المضمنة داخليًا، لأنّه يمكنك إعادة استخدام العناصر في SVG، لذا فإن أيّة عناصر متكررة لن تتسبب فقط في أن الصفحة بأكملها ستستعمل برنامج gzip كثيرًا، ولكن لكل صفحة سيصبح الحجم الكلي لصور SVG أصغر. الآن هذا رائع! سأبقي حالتي حول تحميل الصفحة والأداء هنا. ولكن لا يزال من المهم الإشارة إلى أنّه يمكن أن يكون هناك استثناءات. مرةً أخرى، في معظم الحالات، من المحتمل أن تجد أن SVG أفضل من GIF، لكنك ستحتاج دائمًا إلى الاختبار على أي حال. نتيجة صورة GIF صورة SVG متحركة صور GIF أكبر حجمًا بشكلٍ عامٍ من صور SVG مع الحركات المضافة لهم. وهذا يؤثر سلبًا على حجم الصفحة الكلّي ووقت التحميل والأداء. يمكن أن تُستعمل صور SVG وأن يُعاد استخدامها، مما يجعل حجم الملف أصغر عمومًا من GIF وهذا يحسّن من وقت تحميل الصفحة والأداء دعم المتصفح ربما تكون الميزة الوحيدة المتفوقة لصور GIF على صور SVG هي دعم المتصفح. تعمل صور GIF إلى حدٍ كبير في كل مكان، في حين أن دعم SVG أقل انتشارًا. على الرغم من أن لدينا العديد من الطرق لتوفير النسخ الاحتياطية للمتصفحات غير الداعمة - ويجب ألا يعوق دعم المتصفح الحالي أي شخص عن استخدام SVG، إنّ الصور الاحتياطية، إذا تم توفيرها كـ PNG أو JPG، ستكون ثابتة وبدون حركة. بالطبع ، يمكنك دائمًا تقديم GIF كخطوة احتياطية لـ SVG، ولكن يجب مراعاة الاعتبارات والعيوب المذكورة سابقًا. نتيجة صورة GIF صورة SVG متحركة تعمل صور GIF تقريبًا في كل مكان صور SVG يدعمها عدد أقل من المتصفحات، لكنها تأتي مع طرق كثيرة لتوفير صور احتياطية للمتصفحات التي لا تدعمها مخاوف سهولة الوصول (a11y#) انقل شيئًا ما إلى صفحة، أو أيّ مكان، لهذه القضية، لقد أضفت للتو تسليةً - شيءٌ ما من المؤكد أنّه سيجذب انتباه المستخدم بمجرد أن يبدأ التحرك. هكذا يعمل الدماغ البشري ببساطة. يعدُّ هذا أيضًا أحد الأسباب التي تركز عليها لافتات الإعلانات - وهي مبنية على - تركيزٍ قوي على الصور المتحركة. وهذا هو السبب في أنّ لافتات الإعلانات المتحركة مزعجةٌ للغاية. إنها تشتت الانتباه، خاصةً عندما تحاول أداء مهمة على صفحة تتطلب اهتمامك بالكامل، مثل قراءة مقال. تخيّل الآن صفحة بها مجموعة من الأيقونات المتحركة (أو الصور) التي لن تتوقف عن الحركة بغض النظر عما تفعله. لم نعد نتحدث عن صورة أو صورتين على الصفحة الرئيسية أو داخل مقالة هنا؛ نحن نتحدث عن متحكمات وعناصر واجهة المستخدم، والأيقونات الأصغر التي من المحتمل أن تكون موجودة في أماكن متعددة على الصفحة، وعلى صفحات متعددة. ما لم يكن من المفترض أن تكون الأيقونة عبارة عن رسوم متحركة بشكلٍ غير محدود - مثلًا، إذا كانت عبارة عن دوران متحرك أثناء مرحلة انتظار غير نشطة للمستخدم، فمن المحتمل أن تسبب مشكلة، وتصبح مصدر إزعاجٍ أكثر من كونها "شيئًا جميلًا". في الواقع، يمكن أن يصبح الأمر أكثر إزعاجًا لبعض الناس، لأن الحركة المستمرة يمكن أن تجعل بعض الناس حرفيًا يشعرون بالمرض. تناقش المصممة ومستشارة صور الويب المتحركة Val Head في مقالتها "تصميم رسوم متحركة للويب أكثر أمانًا من أجل حساسية الحركة" تأثيرات الصور المتحركة المفرطة الاستخدام في الويب على الأشخاص الذين يعانون من اضطرابات الدهليزية المتسببة بصريًا (منجم التركيز): تخيّل الآن ما إذا كانت الصور المتحركة لا تنتهي … مضاعفات مزدوجة. تشرح مقالة Val المشكلة بمزيدٍ من التفصيل، حيث تجمع ردود فعل من شخصين يواجهان هذه المشاكل بالفعل ويشاركان تجربتهما مع الصور المتحركة بأمثلةٍ مختلفةٍ. أحد الحلول التي يمكن أن تساعد في تجنب هذه المشاكل هو تزويد المستخدم بالقدرة على التحكم في الصور المتحركة حتى يتمكنوا من إيقافها عندما تصبح مزعجةً. يمكنك القيام بذلك باستخدام SVG. يمكنك التحكم بشكلٍ كاملٍ في الصور المتحركة وتشغيلها مرةً واحدة أو مرتين عند تحميل الصفحة - إذا كنت تحتاج حقًا إلى تشغيلها بمجرد قيام المستخدم "بالدخول" إلى صفحتك، ثم إظهارها عند تمرير مؤشر الفأرة لمرات متتالية، باستخدام سطورٍ قليلةٍ من الـ CSS أو جافاسكربت. لا تحتاج إلى المئات أو الآلاف من أسطر CSS أو جافاسكربت لإنشاء صورةٍ متحركةٍ للأيقونة، إلا إذا كانت أيقونتك مشهدًا معقدًا بالفعل فيها الكثير من المكونات المتحركة. لكنني أعتقد أنّه في هذه الحالة، لم تعد تمثل "أيقونةً" بعد الآن، وأنّها أصبحت عبارةً عن صورةٍ عاديةٍ أكثر. يمكنك الوصول إلى أقصى قدر من التحكم في إعادة التشغيل، والسرعة لكل تشغيلٍ لاحقٍ، وأكثر من ذلك بكثير، بفرض، بالطبع، أنّك تستخدم جافاسكربت للحصول على هذا المستوى من التحكم. أو يمكنك إضافة تبديل لمنح المستخدم القدرة على إيقاف تشغيل الصور المتحركة بلا حدود. لا يمكنك فعل ذلك باستخدام GIF … إلا إذا اخترت استبدال GIF بصورة ثابتة عند إجراء تبديلٍ معينٍ. قد يجادل البعض بأنّه يمكنك عرض نسخة ثابتة من الصورة – مثل صورة PNG مثلًا، ثم توفير إصدار GIF عند تمرير مؤشر الفأرة. ولكن هذا يسبب بعض المشاكل: إذا كانت الصورَ مضمنةٌ، فستحتاج إلى استبدال هذه الصور باستخدام جافاسكربت. هذا الإجراء لا يتطلب أي جافا سكربت إذا كنت تستخدم SVG. إذا كانت الصور عبارة عن صور أمامية (مضمنة في HTML باستخدام <img>)، وتحتاج إلى استبدال هذه الصور، فسينتهي بك الأمر إلى مضاعفة كمية طلبات HTTP لكلّ صورة. وإذا كانت صور الخلفية مضمنة في صفحة الأنماط (هذا غير مستحسن)، فإنّ الصور (خاصةً صور GIF) ستزيد حجم صفحة الأنماط وبالتالي تزيد الوقت الإجمالي لحظر عرض الصفحة. إذا كنت تبدّل/ عندما تبدّل مصادر الصورة عند تمرير مؤشر الفأرة، فهناك وميض ملحوظ بين الصورة الأولى والثانية في الاتصالات البطيئة. اتصالي بطيء؛ أحيانًا اتصال 3G بطيء، ولم أتذكر بعد وقتًا تم فيه استبدال صورة بأخرى عند تمرير مؤشر الفأرة، أو تم تغيير حجم منفذ العرض، أو أي شيء آخر، ولم أشاهد هذا الوميض. يزداد هذا الموقف سوءًا عندما تكون الصورة الثانية (GIF التي تحمّل عند تمرير مؤشر الفأرة) كبيرة الحجم إلى حدٍ ما — سيكون هناك وميض، تتبعه صورةً متحركةٌ بطيئةٌ غير متقنةٍ لـ GIF أثناء تحميلها بالكامل. هذا ليس جذابًا أبدًا. لذا، نعم، يمكنك تبديل مصادر الصورة للتحكم إذا أو عندما تشتغل الصور المتحركة GIF أو متى يتم ذلك، لكنك تفقد التحكم الدقيق في GIF وتؤثر على تجربة المستخدم مع واجهة المستخدم. يمكنك أيضًا التحكم في عدد المرات التي يتم فيها تشغيل الصور المتحركة في GIF - وهو أمرٌ رائعٌ، لكن هذا يعني أن الصور المتحركة ستعمل فقط عددًا محددًا من المرات. ثم لإعادة تشغيل الصور المتحركة عند تفاعل المستخدم، ستحتاج إلى اللجوء إلى الأسلوب أعلاه مع صور متعددة. يمكن تحقيق الصور المتعددة التي تحتاج إلى إصلاح، وطلبات HTTP المتعددة، والحل العام المُستهلَك غير الأمثل بصورة SVG واحدة. ضمّن صورة SVG واحدة على الصفحة. أنشئ الصورة المتحركة بالطريقة التي تريدها/تحتاجها. (أو أنشئ الحركة قبل تضمين الصورة.) شغّل وأوقف وتحكّم بالصورة المتحركة. وأمنح المستخدم القدرة على التحكم فيها أيضًا. لا توجد طلبات HTTP إضافية لكل صورة، ولا صيانة معقدة للخط الزمني للصورة المتحركة في محرر الرسومات، ولا توجد أي مخاوف تتعلق بسهولة الوصول أو مشاكل لا يمكن تجنبها ببضعة سطور من التعليمات البرمجية. نتيجة صورة GIF صورة SVG متحركة صور GIF لا يمكن إيقافها من قبل المستخدم بدون طلب صور إضافية وطلبات HTTP إضافية. لا تتم السيطرة بشكلٍ كاملٍ حتى يتم ذلك يمكن تخصيص صور SVG المتحركة بشكلٍ كامل لذا يمكن تفعيلهم وتعطيلهم والتحكم بهم من قبل المستخدم بدون الحاجة إلى طرق مستهلَكة سهولة الوصول إلى المحتوى صورة GIF صورة SVG متحركة صور GIF سهلة الوصول مثل صور PNG وJPEG باستخدام قيمة الخاصية `alt` لوصفهم. لا يمكن تمييز المحتوى الموجود داخل الصورة أو إتاحته مباشرةً لقارئات الشاشة بما يتجاوز الوصف العام للصورة يمكن الوصول إلى صور SVG ودلالتها. يمكن أيضًا وصف المحتوى المتحرك داخل الصورة وجعله قابلًا للقراءة من قِبل قارئات الشاشة باستخدام عناصر سهولة الوصول المدمجة في SVG، كما يمكن تحسينها باستخدام أدوار ARIA وخاصيّاتها أيضًا. (يمكنك أن تقرأ [هنا](https://www.sitepoint.com/tips-accessible-svg/) كل شيء عن جعل SVG قابلة للوصول) التفاعل لا يوجد الكثير لإضافته هنا، ولكن الحقيقة أنّه يمكنك التفاعل مع العناصر الفردية داخل SVG، أثناء أو قبل أو بعد تحريك الصورة، لكن هذا غير ممكن مع GIF. لذا، إذا كنت تستخدم GIF، فستفقد القدرة على فعل أي شيء يتجاوز تشغيل الصور المتحركة أو إيقافها، وحتى هذا لم يتم تنفيذه فعلاً باستخدام الـ SVG، كما رأينا، ولكن يتم تحقيق ذلك عن طريق مبادلة GIF بالخارج ببديلٍ ثابت. حتى تغيير ألوان العناصر داخل GIF سيتطلب صورًا إضافية للقيام بذلك. هذه ميزة أخرى لاستخدام SVG بدلاً من GIF. نتيجة صورة GIF صورة SVG متحركة لا يمكن أن تكون الحركات المحددة في صور GIF تفاعلية، لا يمكنك التفاعل مع العناصر الفردية داخل عنصر GIF، ولا يمكنك إنشاء روابط خارج العناصر الفردية أيضًا. محتوى SVG تفاعلي بالكامل. يمكنك إنشاء التفاعلات مثل تمرير ماوس الفأرة والضغط (والمزيد) التي تستجيب لها العناصر الفردية داخل صورة SVG. استجابة وتكيّف الصور المتحركة إنّ القدرة على تحريك صورة SVG مباشرةً من الشيفرة، بالإضافة إلى معالجة العديد من خاصياتها، تعطي وتضيف ميزةً أخرى على الصور المتحركة المعتمدة على GIF: القدرة على إنشاء صور متحركة جيدة الأداء، سريعة الاستجابة وقابلة للتكيّف، دون إضافة أي طلبات HTTP إضافية باستخدام بضعة أسطر من الشيفرة وبأحجام ملفات أصغر. كتبت سارة دراسنر مقالةً في مجلة Smashing Magazine تُظهر طرقًا مختلفة لتحريك SVG sprites. تتمثل إحدى هذه الطرق في وجود "مشاهد" متعددة داخل الـ SVG، وتحريكها باستخدام CSS، ثم تغيير "عرض" الـ SVG - عن طريق تغيير قيمة خاصية الـ viewBox - لإظهار مشهدٍ واحدٍ في وقتٍ واحدٍ، اعتمادًا على حجم منفذ العرض الحالي ومساحة الشاشة المتاحة. إذا كنت ترغب في إنشاء نفس الحركات باستخدام صور GIF، فستفقد إمكانيات التحكم في الصور المتحركة، كما ستحتاج إلى صور متعددة ربما تكون أكبر (في حجم الملف) من صورة الـ SVG الواحدة. ولكن إذا كنت لا ترغب في استخدام شيفرة SVG المتحركة، فيمكنك دائمًا إنشاء SVG sprite وتحريكه بالطريقة التي يمكنك بها تحريك أي صيغة صورة آخرى - باستخدام ()steps وعدة أسطر CSS. تتحدث سارة أيضًا عن هذه التقنية في مقالتها. لا يحتاج تحريك صور SVG أن يكون معقدًا، وهو يقدم أداءً أفضل بشكلٍ عام. نتيجة صورة GIF صورة SVG متحركة بما أنّه لا يمكن التحكم بالمحتوى داخل صورة GIF بالشيفرة، فلا يمكن جعل الصور المتحركة تتكيف أو تستجيب لتغيّرات منفذ العرض أو السياق بدون اللجوء إلى فصل الصور. بما أنّه يمكن تحريك محتوى SVG بشكلٍ مباشر باستخدام الشيفرة، فإنّه يمكن تعديل المحتوى والحركات بحيث يستجيب و/أو يتكيّف مع سياقات وأحجام منافذ عرض مختلفة، بدون الحاجة إلى اللجوء إلى أي أصول إضافية. كلمات أخيرة تتمتع صور GIF بدعم جيد جدًا للمتصفح، نعم، ولكن مزايا صور SVG تفوق مزاياها في جميع الجوانب تقريبًا. قد تكون هناك استثناءات، وفي هذه الحالات، تستخدم صور GIF بالتأكيد أو أي صيغة صور آخرى تقدم عملًا أفضل من SVG. قد تستخدم حتى فيديو أو HTML5 Canvas أو أيًا كان. يمكن أن توفر SVG الكثير من مزايا الأداء إلى القائمة عند موازنتها مع صيغ الصور الأخرى، وخاصةً GIF. وبالتالي، وبالنظر إلى كل ما سبق، أوصي بأنه في أي مكان يمكن استخدام SVG للصور المتحركة، يجب تجنّب استخدام صور GIF. أنت حر بالطبع في تجاهل توصيتي لكنك ستتخلى عن المزايا الكثيرة التي توفرها صور SVG المتحركة. ما لم توفر صور GIF الكثير من المزايا على صور SVG التي لا تحقق دعم المتصفح IE8 وأقل منه، فإنني أعتقد أن صور SVG ينبغي أن تكون هي السبيل للانطلاق. بعض المصادر لمساعدتك على البدء مع صور SVG المتحركة: عالم الصور المتحركة SVG. عدة طرق مختلفة لاستخدام SVG sprites في الصور المتحركة. إنشاء الصور المتحركة مع SVG. لدى GreenSock مجموعة من المقالات المفيدة حول تحريك SVG. Snap.svg ويُعرف أيضًا بأنّه "مكتبة jQuery للـ SVG". الصور المتحركة SVG باستخدام CSS وSnap.SVG. تصميم وتحريك صور SVG مع CSS. رسم خط متحرك في SVG. أرجو أن تكون قد وجدت هذه المقالة مفيدةً. شكرًا للقراءة. ترجمة -وبتصرف- للمقال Animated SVG vs GIF [CAGEMATCH]‎ لصاحبته Sara Soueidan

يُعتبر التصميم الجرافيكي مجالًا واسعًا جدًّا، ومهمّة الحصول على وظيفة مصمّم جرافيك ليست بالسّهلة. فعملية الحصول على وظيفة على شبكة الإنترنت تتطلب، بالإضافة إلى المهارات التي يجب أن تكتسبها، سِمات شخصية كمقاومة الإجهاد، الإبداع، والحافز الذاتي. لكنّ الجزء العملي يُعتبر، وبشكل واضح، هو الجزء الأهمّ، وهو الذي يتمّ الحكم من خلالهِ حتّى قبل تقييم مهاراتك الشخصيّة. لذلك سنبدأ اليوم بسلسلة من المقالات التي تدور حول أساسيات التصميم الجرافيكي، وسنستعرض في هذا الجزء العناصر الأكثر شيوعًا في هذا المجال. إنّ وظيفة مصمّم الجرافيك الرئيسية هي تصميم عناصر مرئية يمكن استخدامها في شبكة الإنترنت أو لغرض الطباعة. كمثال على ذلك؛ مخططات المواقع (التي يتم تحويلها في أغلب الأحيان إلى مواقع حقيقية من قِبل مصممي المواقع)، الملصقات، الكُتيّبات، النشرات، أو الحملات الإعلانية (في كِلا من شبكة الإنترنت والواقع). توجد في المجموع ستّة عناصر خاصّة بالتصميم يجب أن تكون مُلمًّا بها: الخط، الشكل، اللون، الخامة، القيمة والمساحة. 1. الخط يتواجد الخط عادةً في كلّ تصميم، حتّى لو كان إطارًا مُصمَتًا بعرض 1 بكسل أو خطًّا منقّطًا بعرض 5 بكسل. تحتوي جميع مواقع الإنترنت على خطوط، لكن مع أسلوب التبسيط للحدّ الأدنى (يُعرف أيضًا بالتبسيطية أو التقليليةMinimalism ) الذي أصبح شائعًا في السنوات الأخيرة هنالك محاولة لمسح الخطوط من مخططات الصفحات، أو على الأقل تقليل استخدمها. يمكن أن تكون الخطوط طويلة، حمراء، مستقيمة، رفيعة، زرقاء، متقطّعة، قصيرة، سوداء، أو منحنية، لكن تندرج جميعها تحت نفس الفئة. تستخدم الخطوط في أغلب الأحيان لرسم الحدود بين أقسام التصميم، أو لتوجيه نظر المشاهد نحو وجهة معيّنة. تعمل الخطوط على خلق تأثيرات ووقوع بصريّة مختلفة. تجذب الخطوط السميكة، العريضة الانتباه بسبب قوّتها البصرّية، بينما يكون للخطوط الرفيعة تأثيرًا مختلفًا معاكسًا لذلك. كما إن الألوان لها وقعٌ أيضًا، فالألوان الداكنة تكون سهلة الرؤية وجذب الانتباه أكثر من الألوان الفاتحة أو الباهتة. وهذا ليس كلّ ما في الأمر. فنمط الخط يمكن أن يؤثّر أيضًا في طريقة رؤية المستخدم له. هذا النمط يمكن تحديده بسهولة خلال CSS، ويمكن أن يكون، من بين الأنماط الأخرى، مصمتًا، منقّطًا، ومتقطّعًا. الخطوط المصمتة لها تأثير مختلف عن تأثير الخطوط المنقّطة، لأنّ الأولى تكون بارزة بشكل أكبر. في أسلوب التبسيط للحد الأدنى الذي تحدّثنا عنه سابقًا يتمّ إما استخدام الخطوط المصمتة بشكل أقلّ أو استخدم الخطوط المنحنية بشكل أكبر لأنها تعطي مظهرًا حركيًّا وانسيابيًّا للتصميم، والذي يعتبر أيضًا هدف من أهداف هذا الأسلوب. وهذه الخطوط توحي بالطاقة، تُبقي المستخدم مهتمًّا، وإذا ما تمّ دمجها مع الرسوم الإيضاحية سيصبح لها قوة فعّالة أمام عين الإنسان. كانت للخطوط المصمتة شعبية كبيرة قبل سنوات عديدة لأنها تحدد أسلوب التصميم؛ متين، متماسك، ومنظّم. لكنّ مواقع الإنترنت تغيّرت في السنوات الماضية ولم يعُد هذا النمط ذو شعبية بعد الآن، خاصّةً في معارض الأعمال Portfolio التابعة للمصمّمين والصفحات الأخرى ذات الحاجة الكبيرة إلى اللمسة الشخصية. فصلت الخطوط بين العمودين، وهي ليست بالعريضة جدًّا. استُخدمت الخطوط المصمتة للفصل بين أجزاء مختلفة من الموقع. 2. الشكل الشكل، أو الهيئة، هو العنصر الثاني الأكثر استخدامًا في تصميم المواقع. وهو في الواقع عبارة عن خطوط مجموعة جنبًا إلى جنب بأشكال مختلفة. ما زالت الأشكال تحظى بشعبيّة، وسبب هذا يعود إلى الحاجة إلى إبراز شيء ما، والأشكال هي إحدى الطرق للقيام بذلك. قد تكون الأشكال دوائر، مربّعات، مستطيلات، مثلّثات، أو غيرها من الأشكال التجريدية، ومعظم التصاميم تحتوي على الأقل على واحد من هؤلاء. يتمّ استخدام العديد من هذه الأشكال في تصاميم التبسيط للحد الأدنى، لأنها في الغالب تقوم على أساس الرسوم الإيضاحية والمخطّطات. كما إنّ النمط القديم لتصميم المواقع تضمّن الأشكال أيضًا، لذلك بقيت ذات شعبيّة طوال الوقت، وعلى الأرجح ستستمرّ على هذا المنوال. الأشكال، حالها كحال الخطوط، مرتبطة بذهن الإنسان بطرق مختلفة. على سبيل المثال؛ الدوائر مرتبطة بالحركة والطبيعة، بينما يتم النظر إلى المربّعات على أنها تصاميم أساسية هيكلية. وكما هو الحال في الخطوط فإن لون، نمط، خلفية أو خامة الشكل يمكن أن تغيّر كلّيًّا الإدراك الحسّي للمُشاهد. في معرض الأعمال الخاصّ بفريد مايا أعلاه، تمّ استخدام الأشكال لإبراز الشعار والأعمال السابقة. 3. الخامات Textures لم تكن الخامات ذات شعبيّة منذ بضع سنواتِ مضت، لكنّها تميل إلى أن تصبح أكثر وأكثر استخدامًا. وقد حلّت محل (أو نافست، إذا استطعنا تسميتها منافسة) الخلفيات ذات اللون المفرد. قد تبدو الخامات شبيهة بالخلفيات ذات الألوان المصمتة، لكن عند معاينتها عن قرب، يمكن ملاحظة اختلافات صغيرة ولكنّها فعّالة. تتضمّن أنماط الخامات الورق، الحصى، الخرسانة، الطوب، الألياف، والعناصر الطبيعية، وما بين الألوان الباهتة أو الناعمة. ويمكن للخامات أيضًا أن تكون دقيقة أو بارزة، وأن تستخدم باعتدال أو بإسباغ؛ يمكنها أن تعمل مع أي شيء تقريبًا. من شأن الخامات أن تغيّر شكل الموقع كليّا حتّى وإن بدت غير مهمّة، فهي توفّر وقعًا بصَريًّا مختلفًا تمامًا. في معرض الأعمال الخاص بجيسون جوليان أعلاه، تم استخدام خامة ذات النمط البالي grunge. في هذه الصفحة تمّ استخدام خامة مختلفة عن الخامة في المثال الأول، تبدو هذه كدفتر رياضيات. 4. اللون قد يكون اللون هو العنصر الأكثر أهميّةً في التصميم لأنه يعطي التأثير البصري الأقوى في لمحة واحدة. اللون واضح ولا يحتاج إلى مهارات رسم أساسية لملاحظتها. فبينما تعني الخطوط والأشكال الشيء نفسه كما في الواقع، عدا المستويات الأكثر عمقًا، تعني الألوان الشيء نفسه بالضبط كما في الطبيعة. الألوان تخلق الأحاسيس؛ الأحمر هو العاطفة، الأزرق هو الهدوء، والأخضر هو الطبيعة. للألوان تأثيرٌ واضحٌ على عقولنا حتّى وإن لم نُدرك ذلك. تم إجراء الدّراسات حول هذا الموضوع، ووجِد أن الشخص الذي يعيش في بيئة حمراء يمتلك ضربات قلب ونبضًا أعلى من الشخص الذي يعيش في بيئة زرقاء. الدماغ البشري يرى ذلك ويؤثّر على بقية الجسد تِبَعًا لما يراه. لذلك من المهم معرفة نظرية الألوان، حيث لا يمكن للعديد من المصممين أن يدعوا أنفسهم بالخبراء في هذا المجال. أن تكون خبيرًا في الألوان هو الذي يصنع الفرق بين التصميم الجيّد والتصميم المذهل. لا نقول إنه يجب أن تعرف كل شيء، لكن معرفة كيفية عمل خصائص اللون معًا كالصبغة Hue، الإشباع Saturation، الظل Shade، المشيج Tint، الدرجة Tone، أو الصفاء Chroma لهو أمرٌ جوهريّ بالنسبة لمصمم الجرافيك. في موقع Feed Fever تم استخدام ألوان مختلفة للنصوص في محاولة لإبراز أهمية كل خط باختلاف دقيق. 5. القيمة لم نتحدّث عن القيمة Value في النقطة السابقة على الرغم من أنها مرتبطة بشكل وثيق بعنصر اللون، لأن القيمة هي أكثر عمومية وهي التي تحدّد كون التصميم داكِنًا أو فاتِحًا. كما أن القيمة لها تأثير على المزاج أيضًا، ولكن فقط في مستويات أعمق. إنّ فهمك لخصائص الألوان يأخذك إلى مستويات قريبة من الإتقان، ولكن معرفة عمل وتأثير القيمة يأخذك إلى مستويات أبعد من ذلك. التصاميم الفاتحة تعطي انطباعًا وشعورًا مختلفًا عن التصاميم الداكِنة، ولذلك تحتاج إلى عينيّ خبير لملاحظة الفرق واختيار الأفضل تبعًا لذلك. 6. المساحة للمساحات وطريقة استخدامها تأثيرٌ مهمٌّ جدًّا في التصميم. أصبحت "المساحات البيضاء" (تسمّى أيضًا المساحات السلبية) تستخدم بشكل واسع في الآونة الأخيرة، لأنها تسمح للعين بالقراءة بشكل أسهل. ولمن لا يعرف مصطلح "المساحة البيضاء"؛ لا نقصد هنا أنها مملوءة باللون الأبيض على وجه التحديد، ولكن كل مساحة ضمن التصميم مملوءة فقط بلون الخلفية. يمكنك رؤية العديد من الأمثلة أدناه لفهم أفضل لهذا المفهوم. إذا كان تصميم الصفحة يحتوي على العديد من المساحات السلبيّة فإن هذا يضفي إضاءةً وشعورًا منفتحًا. وبخلاف ذلك يصبح التصميم مبعثرًا وقديم الطراز. وبذلك يكون للمساحات تأثيرٌ مهمّ في الطريقة التي يُنظر بها إلى التصميم من قِبل العين البشريّة. المساحات في مقدمة عناصر التصميم المهمّة، حتّى وإن قلنا إن اللون قد يكون العنصر الأهم، لأن المساحات من السهل ملاحظتها من قِبل العين المبتدئة. كما يمكنها أن تحوّل التصميم لصالحك والحصول على أفضل النتائج لمخطط صفحتك. صفحة جوجل هي أبسط مثال على استخدام المساحات السلبيّة بكثرة. في موقع Site Inspire تمّ استخدام المساحات السلبيّة على الجوانب وجُمع بينها وبين فنون الطباعة المناسبة. الخلاصة كانت هذه هي العناصر الأساسية التي يجب على كل مصمّم جرافيك مبتدئ أن يعرفها. وبالاطلاع على هذه العناصر يمكنك أن تفكّر أكثر من وجهة نظر المستخدم وبالتالي تستطيع التصميم بأسلوب أفضل. لكن هذا ليس كلّ شيء، هنالك المزيد عن مبادئ التصميم سنتحدث عنها في مقالات قادمة -إن شاء الله-. ترجمة -وبتصرّف- للمقال: Graphic Design Basics Part 1: Elements لصاحبه: James Richman. حقوق الصورة البارزة: Designed by Freepik.

الهوية البصرية هي جميع الصور والمعلومات الرسومية التي تعبّر عن هوية العلامة التجارية وتميزها عن غيرها. بمعنى آخر، تصف كل شيء يمكن للعملاء رؤيته فعليًا ، من الشعار إلى التصميم الداخلي للمتجر إلى أغلفة المنتجات وغيرها. فكل شيء تصممه يدل على هوية تلك العلامة، ستعرف على الفور أين توجد عبوات كوكاكولا في قسم المشروبات في أي متجر بمجرد رؤيتك للون الأحمر فيه، وفي متجر الهواتف المحمولة ستتعرّف على أجهزة الآيفون بمجرد رؤيتك لشكل التفاحة، وهكذا. تصميم هوية بصرية بعنوان Plantamed Visual Identity للمصمم Ville Oké تحت ترخيص المشاع CC BY-ND 3.0 ما هي عناصر الهوية البصرية الرئيسية؟ صحيح أن الشعار والألوان من عناصر الهوية البصرية ولكنهما لا يمثلان وحدهما الهوية البصرية كلها، فعند العمل على تصميم الهوية البصرية عليك أن تخطط لإنشاء تصاميم متكاملة ومتناسقة لمختلف المواد بدءًا من موقع الويب وصولًا إلى التغليف. ولا يجب الخلط بين عناصر الهوية البصرية ومواد العلامة التجارية المطلوب إنشاء تصاميم لها والتي تختلف من حيث التعدد والنمط من علامة تجارية لأخرى، وتشمل العناصر الأساسية للهوية البصرية مايلي: الشعار. الألوان. النصوص وأسلوب الطباعة. دليل استخدام الهوية البصرية. الأيقونات. الرسوم البيانية والرسوم التوضيحية (الإنفوجرافيك). أسلوب الصورة أو التصوير. ومع ذلك، لا يكفي أن نصمم هذه العناصر لتكون الهوية البصرية ذات فاعلية، بل . يجب الحرص على أن تكون عناصر الهوية متميزة عن بقية المنافسين وتجذب انتباه الناس، ويجب أن ترسخ في الأذهان بسهولة، فشركة آبل على سبيل المثال لم تكتب اسمها على منتجاتها ومع ذلك فهي راسخة في أذهان الناس ويعلم الجميع منتجاتها وأي شيء يتعلق بعلامتها التجارية بمجرد رؤية أي إعلان أو صورة لها. ويجب أن تكون الهوية البصرية مرنة وقابلة للتطوير حيث يجب أن تنمو وتتطور مع العلامة التجارية نفسها، ويجب أن تكون متماسكة ومتناسقة ومتكاملة بحيث تكمّل عناصر الهوية بضعها بعضًا. كيف تبدأ التخطيط لبناء الهوية البصرية؟ قبل البدء بتصميم عنصر الهوية البصرية يجب أن تكون لدى الشركة أو العميل أو العلامة التجارية هوية تجارية حقيقية لتستطيع البناء على أساسها عناصر الهوية البصرية. وتتضمن الهوية التجارية كلًا من: الغرض من العلامة التجارية. الرؤية. المهمة. الرسالة. الأهداف. القيم. من خلال هذه المعطيات يمكنك فهم طبيعة العلامة التجارية وتوجهاتها، وبذلك تُصمِّم الهوية البصرية بما يتناسب معها، وفي حال كنت ستبني هوية بصرية لعلامة تجارية ليست حديثة النشأة وإنما لهذه العلامة التجارية هوية بصرية سابقة وهي تسعى لتطويرها، فيجب أن تأخذ هويتها البصرية القديمة في الحسبان، وتطوّر هذه الهوية البصرية. من المهم المحافظة على تراث وأساس العلامة التجارية، إذ أن الغالبية العظمى من العلامات التجارية الكبرى في العالم طورّت هويتها البصرية بناء على النسخة القديمة ولكن برؤية جديدة وأساليب تصميمة مبتكرة تتماشى مع التطور في الأساليب التسويقية ومزاجية الناس. على سبيل المثال عمدت شركة آبل إلى تطبيق البساطة في تصاميم هويتها البصرية حيث تجد الأسلوب البسيط في تصميم الشعار والمنتجات وحتى أنظمة التشغيل وكذلك عبوات وعلب المنتجات وحتى موقعها الإلكتروني ومختلف برامجها وتطبيقاتها، ما يدل بوضوح على تطبيق عناصر هويتها البصرية على كافة منتجاتها وحتى إعلاناتها وهو ما يحقق التكامل والوحدة والذي ساهم بدوره في إيصال شعار الشركة وهو البساطة في الاستخدام والعمل وكل ذلك عبر تصميم هويتها البصرية. وليس بالضرورة أن تسعى لتصميم هوية بصرية بحيث تجبر الجمهور المستهدف على تقبّل ما تقدمه هذه العلامة التجارية بل على العكس تمامًا، يجب الأخذ بالحسبان احتياجات وتطلعات الجمهور المستهدف وما يتوقعه من هذه العلامة التجارية وبذلك يتحقق التقارب والتجاذب الحقيقي بين الطرفين وتتحقق الأهداف وتصل الرسائل. تصميم عناصر الهوية البصرية بعد الحصول على كافة المعلومات التي تحدثنا عنها سابقًا وكتابة رؤوس أقلام الأفكار لصورة وشكل الهوية البصرية والتفكير مليًا في الطريقة الأفضل للتوجه في التصميم، سنبدأ بالعمل على تصميم عناصر الهوية البصرية واحدًا تلو الآخر، ودائمًا ما يكون الشعار هو أول هذه العناصر. الشعار هو أول هذه العناصر لأنه يمثّل شكل وهوية العلامة التجارية وأكثر ما يراه ويتفاعل معه الجمهور، ولتصميم الشعار قواعد ناظمة تساعد على إنتاج شعار متماسك ومتوازن تبدأ من رسم المخططات والنماذج الأولية باستخدام القلم والورقة، ثم يتم نقل الأفكار المرسومة إلى برامج التصميم على الحاسوب عبر استخدام الرسومات الشعاعية Vector ابتداءً من رسم النقاط والخطوط الرئيسية، ومن ثم تطوير الأشكال الأساسية للشعار، وأخيرًا تلوين الشعار بالألوان المناسبة لطبيعة الهوية البصرية وللعلامة التجارية، ويجب أن يكون واضحًا وبسيطًا ومتميزًا. للمزيد حول قواعد تصميم الشعارات يمكنك متابعة مقال قواعد تصميم الشعارات والأيقونات ضمن مقالات هذه السلسلة. الألوان بمجرد الانتهاء من تصميم شعار ممتاز يلبي احتياجات العلامة التجارية وجمهورها، يمكنك استكشاف لوحة الألوان الخاصة بالهوية البصرية، ويعد اللون أحد أهم ما يميز العلامة التجارية عن منافسيها كما أنه ما يثير المشاعر لدى الجمهور المستهدف ويؤدي إلى ترسيخ العلامة التجارية في الأذهان. تتميز لوحة الألوان الجيدة بأنها منظمة ومتناسقة وتتبع مخططات الألوان القياسية وتوفر للمصممين خيارات كافية ليكونوا مبدعين ولكن ليس كافيًا للتغلب عليها وتجاوزها، وهذا يشمل اللون الرئيسي ولونان أساسيان مساعدان للون الرئيسي وكخيار إضافي يمكن إضافة من ثلاثة إلى خمسة ألوان تكميلية وذلك لمنح المصممين مساحة من الحرية في الإبداع والابتكار ضمن هذه الشريحة من الألوان. كما يجب تحديد لوحة ألوان لنموذج ألوان RGB إذا استخدم التصميم للشاشات ولوحة ألوان لنموذج ألوان CMYK في حالة التصميم للطباعة، ولمزيد من التفاصيل حول الألوان ونظرية الألوان وكل ما يتعلق بها يمكنك قراءة مقال الألوان ضمن مقالات هذه السلسلة الخاصة بأساسيات تصميم الرسوميات. تصميم هوية بصرية بعنوان Facilita - Identidade Visual للمصمم DBIZ Design Studio تحت ترخيص المشاع CC BY-ND 3.0 النصوص يجب أن يساهم كل عنصر من عناصر الهوية البصرية في تكوين شخصية العلامة التجارية وأن تتكامل مع بعضها. وهذا بالتأكيد ينطبق بشدة على عنصر النص وأسلوب الطباعة والذي يجب أن تستوحيها من الشعار الذي صممته مسبقًا. يجب اختيار مجموعتان أو ثلاث مجموعات من الخطوط على الأكثر للهوية البصرية لتستخدم في العناصر الأخرى، بحيث نحدد مجموعات الخطوط التي ستستخدم للعناوين وأخرى للفقرات ويجب تحديد المجموعات المستخدمة في التصاميم الإعلانية والكتيبات وكذلك المستخدمة في المنشورات الإعلانية لوسائل التواصل الاجتماعي. يمكنك متابعة المزيد حول النصوص وأسلوب الطباعة من خلال مقال النص وأسلوب الطباعة في تصميم الرسوميات. أسلوب التصوير عادة ما يهمل المصممون عنصر التصوير وذلك لأنهم في الغالب يبحثون عن الطريقة الأسهل في توفير هذا العنصر وهو من خلال مواقع تخزين الصور في الإنترنت سواء أكانت مجانية أم لا. بينما تهتم كبريات العلامات التجارية في العالم بهذا العنصر وتوظف لأجله المصورين والمختصين لالتقاط الصور الخاصة بها والتي ستميّزها بالتأكيد عن سواها حول العالم. وفي حالة كانت العلامة التجارية تقدّم منتجات واقعية غير رقمية فيجب في هذه الحالة توفير المصورين الذين سيصوّرون المنتجات بطريقة احترافية لتستخدم من قبل المصممين في تصميم منشورات إعلانية ومطبوعات وصفحات الويب التي ستسوق هذه المنتجات بأفضل طريقة. لذلك يعد عنصر أسلوب الصورة أو التصوير مهمًا لإبراز هوية خاصة بصور العلامة التجارية تميّزها عن سواها، فعندما تعبّر الصور تمامًا عن العلامة التجارية وما تمثله هذه العلامة التجارية، فإنها تتمتع بالقدرة على إثارة المشاعر أكثر من أي عنصر تصميم آخر، وسيساعد نمط الصور المحدد والمتسق والفريد للعلامة التجارية في إنشاء انطباعات وعلاقات تدوم لصالح هذه العلامة التجارية. فعلى سبيل المثال تسعى شركة مرسيدس بنز للسيارات لرسم انطباع يتضمن الأناقة والفخامة على منتجاتها حتى وإن أنتجت سيارات قوية، بينما تسعى علامة دودج التجارية للسيارات إلى خلق انطباع يوحي بالقوة والجدارة أكثر من الأناقة والفخامة حتى وإن أنتجت سيارات فاخرة، وهذا ما يظهر جليًا من خلال أسلوب التصوير المتّبع من قبل كلا العلامتين التجاريتين. وبالتأكيد تبرز بقية عناصر الهوية البصرية لكلا العلامتين التجاريتين من خلال الشعار والخطوط والألوان ومواضع النصوص ووزنها البصري بحيث حققت التكامل بين جميع عناصر الهوية البصرية ضمن هذين التصميمين. للمزيد حول هذا العنصر يمكنك قراءة مقال قواعد التعامل مع الصور والرسوميات. الأيقونات الأيقونات هي التي تستخدم في مواقع الويب وتطبيقات الهاتف المحمول وحتى في المنشورات والمطبوعات الإعلانية، حيث تستخدم للدلالة على الخدمات المقدمة أو على فئات المنتجات أو الخدمات أو للمزايا المتوفرة في العلامة التجارية، ويجب أن تتبع هذه الأيقونات نظم الألوان المستخدمة في الهوية البصرية، ويمكن أن تشتق من الشعار نفسه، ولتصميم الأيقونات قواعد تتشابه مع تصميم الشعارات ولمتابعة المزيد حول قواعد تصميمها يمكنك قراءة مقال قواعد تصميم الشعارات والأيقونات من ضمن مقالات هذه السلسلة. عملت شركة DHL العالمية للشحن إلى تصميم هوية بصرية فريدة طبّقت عناصرها على كافة المواد المستخدمة في تنفيذ خدماتها كالشعار وألوان السيارة واللباس الموحد لموظفي الشركة. كتيب إرشادات الهوية البصرية يجب أن يتّبع تصميم كل عنصر نهج أسلوب تصميم الهوية البصرية ككل، ولكن لتطبيق ذلك بطريقة صحيحة واحترافية ودون أخطاء يجب إنتاج كتيب إرشادات الهوية البصرية، حيث يتضمن شروحات تفصيلية دقيقة لكيفية استخدام عناصر الهوية البصرية وكيفية تطبيق الأسلوب التصميمي للهوية البصرية على أية مواد مستخدمة من قبل العلامة التجارية، وبذلك تحافظ العلامة التجارية على نمط موحد لكافة موادها ومنتجاتها وإعلاناتها وهو ما تفعله العلامات التجارية الكبرى حول العالم. تصميم كتيب إرشادات الهوية البصرية Manual identidade Visual للمصمم Isabela Gondim تحت ترخيص المشاع CC BY-ND 3.0 تأكد من تضمين إرشادات واضحة وسهلة المتابعة لكل عنصر من الهوية البصرية للعلامة التجارية، بما في ذلك الأمثلة وحالات الاستخدام، مع الإشارة إلى أكبر قدر من المعلومات حسب الحاجة لمساعدة المصممين على تطبيق الهوية البصرية للعلامة التجارية بنجاح. على سبيل المثال يجب توضيح متى نستخدم الشعار وحده وأين ومتى نستخدمه مع نص اسم العلامة التجارية، وأيضًا متى نستخدم هذا التنسيق بوضع النص يمين الشعار ومتى نستخدمه بتنسيق وضع النص يسار الشعار وأسفل وأعلى الشعار وغير ذلك من التعليمات. التكامل في تطبيق عناصر الهوية البصرية على مواد العلامة التجارية تختلف مواد العالمة التجارية المستخدمة من شركة لأخرى، فبعض الشركات تعمل على تطبيق عناصر الهوية البصرية على مواد مختلفة مثل أدوات القرطاسية والمواد المكتبية كالمغلفات وترويسة الأوراق الرسمية والتصاميم على سيارات الشركة واللباس الموحد لموظفي الشركة، إضافة إلى مواقع الويب وتطبيقات الهاتف المحمول والرسومات البيانية التوضيحية (إنفوجرافيك) وحتى تصاميم وإعلانات مواقع التواصل الاجتماعي ومقدمة فيديوهات الشركة، وكذلك العلب الكرتونية والعبوات التي تتضمن منتجات الشركة وغيرها الكثير من المواد. فمن المهم جدًا تطبيق عناصر الهوية البصرية من الألوان والخطوط والأشكال وغيرها على جميع المواد المستخدمة من قبل العلامة التجارية لتحقيق التكامل فيما بينها ولتعزيز وترسيخ هذه العلامة التجارية في أذهان الناس، ما يسهم في انتشار هذه العلامة التجارية ونجاحها. خاتمة تصميم الهوية البصرية يعني تصميم الخطوط العريضة الأساسية التي ستستخدم لتصميم مختلف المواد التي ستظهر للعلن أمام الجمهور مما يبرز هذه العلامة التجارية ويميزها عن منافسيها ويرسخ ظهورها وظهور منتجاتها في أذهان الناس والذي يساعد بدوره على تحقيق الانتشار والتسويق. ويعد كل ذلك من أهم متطلبات هذا العصر لتحقيق النجاح للعلامات التجارية. حوّل فكرتك إلى مشروع تجاري حقيقي ابدأ رحلتك الريادية وابن علامة تجارية مميزة تبقى في الأذهان أطلق مشروعك التجاري الآن

معظمنا لا يدرك تأثيرها والقليل منا ربما من يتنبهون لذلك. رغم أن تأثير الألوان مبالغ في تقديره يمكننا الشعور بذلك بوضوح في بعض المواقف (تخيل نفسك مثلًا في غرفة مظلمة حمراء فسوف تشعر بالغضب والانفعال بالتأكيد، أو أنك في غرفة باللون السماوي فستشعر حينها بالهدوء والسكينة). سوف نتكلم اليوم عن التأثير النفسي للألوان في تصميم الويب والطرائق التي تنتهجها شركات عديدة في استخدامها للألوان وماهي الرسائل التي توجهها من وراء ذلك. كيف تعمل سيكولوجية الألوان؟ تنقسم الألوان إلى مجموعتين رئيستين: الألوان الدافئة:هي الألوان في المنطقة الحمراء مثل: الأحمر، والبرتقالي، والأصفر. الألوان الباردة: وهي الألوان التي تقع في المنطقة الزرقاء مثل: الأزرق، والقرمزي، والأخضر. الألوان الدافئة تستثير المشاعر التي تتدرج من الدفء والراحة (مثل النار المشتعلة في مساء يوم ماطر) وصولًا إلى الغضب والعداء. أما الألوان الباردة فهي تتصف بالهدوء والاطمئنان ويمكن أن ترتبط بالحزن أو اللامبالاة أيضًا. فقديمًا كان الناس يؤمنون أن الألوان تشفي من أمراض مختلفة. هذا العلم كان يسمى بالعلاج الكيميائي وبعض أسسه يمكن تلخيصها فيما يلي: الأحمر: يزيد من نشاط الدورة الدموية وبالتالي ينشط الجسم والعقل. الأصفر: يحفز الأعصاب وينعش الجسد. البرتقالي: يزيد من طاقتك. الأزرق: يعالج الآلام. النيلي: يخفف من مشاكل وأمراض الجلد. وعلى الرغم من أن غالبية علماء النفس تعاملوا مع نظرية الألوان بنوع من الشك إلا أن العديد من العلامات التجارية والشركات لم توافقهم الرأي. فقد قامت هذه الشركات بحملات تسويقية هائلة معتمدة على طريقة إدراكنا للألوان وجعل الناس يشترون منتجاتها. في ما يلي الجدول الذي يحتوي على الألوان والمشاعر/الأحاسيس المرتبطة بها على نطاق واسع. ولنحاول هنا تحليل مواقع الإنترنت لبعض الشركات المعروفة على مستوى العالم ونتعرف إلى الكيفية التي تنفذ بها تقنيات الألوان. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اللون المعاني والمشاعر الأسود رمز التهديد أو الشر، ويشار إليه كدليل على القوة. ويرتبط بالموت والحداد وعدم السعادة والحياة الجنسية والالتزام والأناقة والغموض. الأبيض يرمز للنقاء والبراءة والبرود والنعومة والنظافة. الأحمر يثير مشاعر قوية مرتبطة بالحب والدفء والراحة. لا يزال يعتبر لونًا انفعاليًا يرمز للغضب ويخلق مشاعر الإثارة والشدة والنشاط الجنسي. الأزرق لون مفضل للعديد من الأشخاص كما أنه اللون المفضل لدى الرجال. يعطي الشعور بالهدوء و السكينة. يتصف بالسلام والأمن والنظام. الأخضر يرمز إلى الطبيعة والعالم الطبيعي. يمثل الهدوء والحظ السعيد والصحة والغيرة. يعتبر رمزًا للخصوبة وله تأثير مهدئ ويخفف من الإجهاد والضغط النفسي. الأصفر حماسي ودافئ، ولكنه قد يخلق أيضًا الشعور بالإحباط والغضب. أكثر إرهاق للعين (ولهذا السبب نادرًا ما تشاهد موقع ويب أصفر ساطع أو غرفة مطلية باللون الأصفر باستثناء قاعات اللعب المخصصة للأطفال). ومع ذلك فإن معظم الألوان التي تلفت الانتباه (ألوان رائعة جدًا للتفاصيل المهمة أو التنبيهات التي تحتوي إجراءً أو تذكيرًا أو تحذيرًا مثل تلك الرموز واللوحات الصفراء الخاصة بالتوقف/التنبيه والتحذير). الأرجواني المَلَكية والثروة، الحكمة والروحانية، الجنس والعلاقات الخفية والخاصة. البني لون طبيعي يوحي بالقوة والثقة والدفء والراحة والأمان. البرتقالي إن اللون الصارخ والفاقع يجعلك تشعر بالإثارة والحماس والدفء. كمزيج من الأحمر والأصفر، غالبًا ما يستخدم لجذب الانتباه. الوردي يرتبط بالحب والرومانسية والشباب والانتعاش، وقد يكون له تأثير مهدئ. يعتمد تأثير اللون الوردي على درجته وعمقه. والآن بمعرفتنا لما تعنيه الألوان والمشاعر التي تستحضرها، فلنحاول إجراء تحليل بسيط لمخططات الألوان التي تستخدمها 18 علامة تجارية عالمية معروفة على مواقع شركاتها على شبكة الإنترنت. هذا الأمر مثير حقاً، فقد بدأنا في اتخاذ الأمور على نحو مختلف. 1. كوكا-كولا Coca-Cola اللون الأساسي هو الأحمر المصبوغ على خلفية من الأبيض والرمادي الفاتح من أجل رؤية وتباين أوضح. الأحمر يفترض أن يخلق مشاعر الاستمتاع والحركة وعلى الرغم من أن الابيض من المرجح أنه يستخدم ليخفف حدة الأحمر كونه لون بارد, فانه من المفترض أن يمنح شعور البهجة ويمثل انعكاس الأفكار كما يقول العاملون المهرة "عمل رائع!". 2. ماكدونالدز McDonalds على الرغم من أن مطاعم ماكدونالدز تستخدم اللونين الأصفر والأحمر بهدف تحميس الأطفال إلا أن الموقع الإلكتروني يبدو أكثر رسمية باللونين الأبيض والأسود. ولا عجب في ذلك فبزيارته من قبل الوالدين الراغبين بمعرفة ماذا يأكل أبناؤهم وكم سببت لهم من سمنة فإن اللونين الأبيض والأسود حل مثالي لجعل الموقع يبدو أكثر اعتدالًا، ورسميًا، ومفهومًا، ونظيفًا مرتبًا. الآن تخيل لو أنه صمم باللونين الأصفر والأحمر (الذين يسببان الإثارة للعين) فإن ذلك سيُغضب الوالدين. وحسب رأيهم فإن: والدين محبطين = أموالًا أقل. 3. إم آند إمز M&M’s ألوان إم آند إمز والتي نراها عادة في التلفزيون من خلال الإعلانات هي الأصفر والأحمر (وهذا يضاعف الشعور بالحماس). الموقع نفسه مزيج من كل الألوان الممكنة بدءًا من الأزرق الخفيف في الخلفية للأزرق الغامق والأخضر والأصفر والبرتقالي والأحمر في البانرات والترويسة. رجال إم آند إمز M&M’s أذكياء للغاية، فكل منا يختار الحلوى التي يحبها، لكن هناك مشكلة واحدة وهي أن الموقع يبدو غير متناسق وأنه مكون من قصاصات غير متوائمة. 4. كولجيت Colgate الأحمر والأبيض والأزرق هي الألوان المتعارف عليها عالميًا والمشهورة لمعجون الأسنان وهي الثلاثة ألوان الوحيدة المستخدمة في الموقع الإلكتروني (حتى أن الأم والأطفال في الصورة على الترويسة يلبسون الأحمر والأبيض على خلفية زرقاء سماوية!). نرى أن الأحمر يعبر عن الطاقة والسعادة والأبيض يعبر عن اللمعان بينما يعبر اللون الأزرق عن البرودة المنعشة لسريان الماء والثقة بالنفس. وعلى الرغم من أنني أحببت معجون الأسنان هذا إلا أن منظمة ألوان الموقع لم تسعدني ولم تشعر عيناي بالراحة. فاللون الأحمر الفاقع جعلني أشعر بعدم الارتياح وغالبًا ما أفقدني التركيز على النص والمعلومات. 5. نستله Nestle شعار نستله يقول: (طعام جيد، حياة جيدة) ومنظومة الألوان المكونة من الأبيض-الرمادي-الأزرق ستشعرك بالهدوء والأمان والثقة بأن كل شيء سيكون على ما يرام. سوف تتذكر هذا الشعور حين تشتري منتجًا من نستله في المرة القادمة ستفكر بطريقة ما وتقول: "إنني أدرك بأن هذه الشركة معتمدة لإنتاج الطعام الجيد، ربما أكون قد قرأت هذا في مكان ما". وهذا يعتبر مثالًا عظيمًا يؤكد كيف أن التسويق مرتبط ارتباطًا وثيقًا بإدراكنا للألوان. 6. نسكافيه Nescafe هو أحد منتجات نستله ومع ذلك فإن موقع نسكافيه صُمّم بألوان الخوخ الغامقة المميزة -المكونة من مزيج من الأحمر الباعث على الدفء والنشاط والأرجواني المريح- والذي يجعلك تشعر بالتميز والانفراد. أنا أحب منظومة الألوان هذه، إنها ليس مزعجة كما اللون الأحمر وليست مرهقة كاللون الأرجواني إنها تجعلك تشعر بأنك مميز ومرتاح. 7. كادبوري Cadbury موقع إلكتروني مصنوع من ظلال اللون الأرجواني. أخمن أنه من المفترض القول بأن منتجات كادبوري مميزة للغاية، ولكن هذا يثير الشك في نفسي لبعض الأسباب. إنها نظرية مثيرة للاهتمام، بينما الشوكولاتة عادة ما ترتبط بالطاقة والنشاط (مثل سنكرز) أو الجنس (مثل الشوكولاتة السادة) ولكن نظرية الخدعة تجعل المنتج يصنف خارج المنظومة .أو ربما أنا الوحيد الذي يفكر بهذه الطريقة. 8. نوكيا Nokia أزرق، أخضر، رمادي، أبيض، وقليل من الوردي. أمّا الأزرق فهو للراحة النفسية والأخضر للطمأنينة والطبيعية والرمادي للمزج بشكل جميل بين الأزرق والأخضر، والأبيض للوضوح، أمّا الوردي فربما لجذب الفتيات. الموقع مصمم بألوان تشعرك بالثقة في الجودة وهذا التصميم بعيد عن منظومة الألوان الافتراضية والمكونة من الأزرق والرمادي والأبيض. من المعروف عن اللون الأخضر أنه يزيل التوتر وله تأثير مهدئ على بعض المحبطين والمنهكين من أعبائهم اليومية وأولئك الذين يأتون للبحث عن آخر التطورات. 9. كوداك Kodak على الرغم من أن منتجات كوداك مرتبطة باللون الأصفر (لاستثارة الانتباه) لكن الموقع مصمم بمنظومة الألوان الكلاسيكية المكونة من الرمادي-الأبيض -الأزرق وهذا ما يجعله مريحًا للعين ويسمح بالتركيز على النصوص والمعلومات. إنك تشعر بأنك ستحصل على المعلومة التي تريدها بطريقة واضحة، وبالتأكيد أنك لم تشعر بالرسمية بل بالطريقة الاحترافية لعرض الأشياء. 10. جيليت Gillette الأزرق هو اللون المفضل للرجال والقائمون على جيليت يعلمون هذا. "أفضل ما يمكن أن يحصل عليه الرجل"- اللون المفضل للرجال مع قليل من الأحمر والبرتقالي في العروض لجذب الانتباه. لقد عرفوا ماذا تحبون يا رفاق، وبالتالي فإنهم يعرفون كيف يبيعون منتجاتهم لكم. 11. إيكيا Ikea ترويسة الموقع مصممة بألوان مشرقة الأصفر والأخضر المصفر والأزرق السماوي الذي يجعلك تشعر إلى حد ما بالمتعة (والرغبة بشراء شيء ما). الصور المستخدمة في الفلاش المتحرك أيضا براقة وتشعرك بإثارة أكبر. جسم الموقع جميل وبسيط إلى حد ما - نصوص سوداء وزرقاء على خلفية بيضاء لتعطيك وضوحًا ووصولًا كاملًا للمعلومات. صفحة العروض المميزة يتربع بنر أحمر كبير في أعلاها ولا يمكنك أن لناظريك الابتعاد عنه! في اللحظة نفسها يظل عقلك يقرأ عبارة "عروض مميزة" مرة تلو أخرى … لقد استحوذت عليك إيكيا. 12. لوريال L'oreal ليس لدي الكثير لأقوله عن موقع لوريال المصمَّم بكافة الظلال الممكنة للون للأرجواني إنه يجعلك تشعر بالتميز حقًّا. مع منتجات لوريال سوف تكون مثيرًا وأنيقًا وواثقًا بنفسك ومميزًا بحق. 13. كِلوقز Kellogg’s منذ عام 1906 عرف الناس كلوقز كشركة يمكن الاعتماد عليها للمذاق الرائع، والأطعمة ذات الجودة العالية. كل ما في الموقع يتكلم عن المتعة والحماسة (الكثير من الأصفر والأحمر) وصور العائلات المبتسمة في رأس الصفحة التي تشعرك بسعادة أكبر. حتى الأطفال يحبون ذلك! فالنصوص على الموقع تتحدث عن ذلك "يسعدنا أن نعرض عليكم عروضنا الممتعة المتعلقة بمنتجاتنا." إنه ممتع! 14. غوتشي Gucci اللون البني الفاتح الطبيعي يجعلك تعتقد أن منتجات غوتشي كأنها طبيعية جدًا (بمعنى آخر لأنها مصنوعة من الجلد). ومثل لوريال الموقع المصمم بلون منفرد بينما الظلال المختلفة تشكل بقيته. ويقول الكاتب: "على الرغم من أنني ضد قتل الحيوانات من أجل الفراء والجلد، فقد أحببت موقع غوتشي، إنه مريح وطبيعي جدًا". 15. هاينز Heinz الصفحة الرئيسية للموقع فيها صورة كبيرة مستخدمة كخلفية، ويمكنك أن ترى السماء، والحقول وتتذوق الطماطم إنه ببساطة لأمر مؤثر. خلفية الموقع داخل الصفحات تتغير من صفحة إلى أخرى: البني الذي يمثل الأرض والأزرق الذي يمثل السماء والرمادي الذي يشبه السماء قبل هطول المطر. القائمون على موقع هاينز يستخدمون الألوان بشكل مؤثر جدًّا، فمغزى منتجاتهم نابع مما يزرعونه (أو مما يشترونه من طرف ثالث) إنهم يستخدمون كل الألوان الطبيعية والصور ليبينوا لك أن منتجهم هو خلاصة ما تعطيه لنا الطبيعة. 16. كونفرس Converse في حين أن منتجات كونفيرس متاحة بكل الألوان الممكنة، فإن موقعها مصمم بنمط وألوان تشبه حجارة الرصيف وبناطيل الجينز القديمة. إن النمط هنا ليس معتمدًا على الألوان ولكن على الجمهور الذين يجب أن ينجذبوا لهذا النمط من التصميم، العناصر المرسومة بخط اليد والشكل الغريب الذي يبدو عليه. 17. كلينكس Kleenex كلينكس مثال آخر رائع على تصميم المواقع باللونين الأخضر والأزرق الطبيعيين (لتشعرك بالثقة من أن المنتج طبيعي) المختلط بالعناصر البرتقالية لجذب الانتباه. إنه من الممتع أنني لم يلفت انتباهي سابقًا هذا القدر من المواقع الكثيرة التي تستخدم نفس منظومة الألوان ولكنها لا تزال لا تشير لبعضها. ربما لأننا لا ننظر إلى الألوان بطريقة أخرى تجعلنا ندرك ونتعرف على اللون، أعتقد أننا نراه كجزء مكمل للنظام. 18. دوراسيل Duracell موقع دوراسيل مصمم بثلاثة ألوان رئيسة مع ظلالها: الأسود، البرتقالي، والأخضر. الأسود ليصنع تباينًا أكثر للبرتقالي وليضيف بعض الرسمية والثبات. البرتقالي يعبر عن القوة، والطاقة، والمرح. الأخضر يمثل الطبيعة ويعمل بشكل رائع مع البرتقالي. "الطاقة الذكية" كما يصفون منتجهم، كل ما في الموقع يشعرك أن منتجات دوراسيل هي فقط ما تحتاجه، البطاريات قوية جدًّا ويمكنك الاعتماد عليها في أي موقف. وعلى كل حال فأنا أشتري بطاريات دوراسيل. ما هو الألوان التي ستستخدمونها في تصميم مواقعكم؟ وما هي ألوانكم المفضلة؟ ننتظر تعليقاتكم يا رفاق! ترجمة -وبتصرف- للمقال The Psychology of Colors in Web Design.

التعامل مع الألوان هي مهمة تستغرق الكثير من الوقت بالنسبة لمصممي الويب، بدايةً، يجب عليك أن تختار لوحة ألوان لتصميمك المفعم بالألوان، ومن يجب عليك تذكر جميع أنواع قيم الشيفرة وتحويلها من الرمز الست عشري إلى RGBa. ولتسريع الأمور وجعل حياة المصمم أكثر سهولة، هنالك بضع الأدوات المفيدة متوفرة على الإنترنت. تساعدك أدوات الألوان هذه في انتقاء، اختيار وتحويل لونك بسهولة لمشروع تصميم الويب المستقبلي. أدوات لوحات ومخططات الألوان هل أردت يومًا أن تستخدم لونًا معينًا ولكن لم تستطع معرفة اسمه أو الرمز الست عشري الخاص به؟ باستخدام مولدات الألوان هذه، بإمكانك إيجاد اللون الذي تبحث عنه بالضبط. هناك عدة خيارات سوف تساعدك في الحصول على اللون الذي ترغب به. يمكنك مثلًا أن تختار لونًا مشابهًا للون الذي تريده ومن ثم التنقل بين الظلال المتنوعة للون. بإمكانك أيضًا أن تعدّل درجة اللون، تشبع اللون وسطوعه حتى تصل للنتيجة المرضية لك. بعد كل هذا التغيير، سوف تحصل على الرمز الست عشري وعلى اسم اللون ومن ثم استخدامها في تصاميمك. هذا بسيط، أليس كذلك؟ إن كنت تبدأ عادةً بالتصميم من الصفر بدون أي خطوط ارشادية موسومة او فكرة مسبقة للون ما فقد يكون من الصعب وضع استراتيجية لون فعالة. هنالك مواقف عديدة تكون فيها مولدات لوحة الألوان مفيدة. رغم أنها غالبًا ما تُستخدم في مشاريع تصميم الويب، فإن مولدات لوحات الألوان بإمكانها أن تكون مفيدة في العديد من المشاريع المتعلقة بالتصميم. إليك بعض أدوات الألوان التي ستساعدك في تكوين مجموعة ممتازة من الألوان المضمون عملها. ColourLovers هو موطن الملايين من لوحات الألوان المقدمة من قبل المستخدمين. تصفح المجموعة وانتقِ اللوحات التي تعجبك أو قم بإيجاد ألوان أخرى بدرجة مناسبة لعملك. هذا الموقع بإمكانه أن يفيدك في المستقبل. Adobe Color CC هذا أيضًا مولد لوحات ألوان رائع بإمكانك استخدامه لصنع لوحات ألوان جميلة. بإمكانك أيضًا الولوج وحفظ لوحاتك للاستخدامات المستقبلية. هذه أداة قوية تمكنك فقط من التصفح وتقييم المجموعات الموجودة مسبقًا، ولكنها تضم أيضًا أدوات لصٌنع لوحات الألوان الخاصة بك من الصفر. Pictaulous هل تبحث عن إحساس أو أسلوب أو سياق معين من لوحة الألوان الخاصة بك؟ إليك Pictaulous الذي هو أداة ذكية تمكنك من انتقاء الألوان من الصور التي ترفعها له. Paletton ألق نظرة عن قرب على مولد لوحات الألوان الرائع هذا والذي يمكّنك من صُنع تراكيب مختلفة من الألوان. Color Hunt مولد لوحات ألوان أنيق يشتمل على لوحات ألوان متعددة لتختار منها. بإمكانك أيضًا حفظ اللوحات المفضلة لديك واستخدامها لاحقًا عندما يتطلب الأمر. Sip هو تطبيق رائع يعمل بشكل ممتاز على هواتف iPhone وأجهزة Mac. يمكّنك هذا التطبيق من توليد مخططات الألوان بسرعة من الصور ومن ثم حفظ، تنظيم ومشاركة اللوحات التي تصنعها. Palettr Color Paletter Generator لديك هنا مصدر رائع يمكنك إيجاد لوحات ألوان متعددة فيه والتي يمكنك صنعها من الصور. بإمكانك أيضًا البحث عن أي مخطط أو كلمة وستحصل على نتائج مذهلة. Color Combs بإمكان هذه الأداة أن تساعدك بسهولة في صنع لوحات ألوان مدهشة من الصفر. ألق نظرة عليها، واكتشف مزاياها واعرف ما الذي تعرضه. Colrd Color Palette Generator هو موقع رائع يمكنك استخدامه لصُنع لوحات ألوان رائعة. تشتمل هذه الأداة على مُنشئ تدرجات رائع وأداة بحث أيضًا. أدوات انتقاء الألوان يمتلك برنامج Photoshop نافذته الافتراضية لانتقاء اللون والتي متأكد من أن جميع المصممين على دراية بها، ولكن فكّر بعدد المرات التي احتجت للتغيير والتنقل بين التطبيقات لتنسخ أو تلصق أو تحفظ قيم الألوان. من المفترض أن هنالك طريقة أفضل! في الواقع، هناك طرق أفضل. Color Picker من WebpageFX هذا مصدر ممتاز يمكنك استخدامه لصُنع لوحات ألوان. اضغط على العنوان وانظر أي تراكيب الألوان بإمكانك صُنعُها. Colour Code وهو مولدُ ممتاز أخر وهو يعتمد على مؤشر الفأرة. بإمكانك استخدامه لصُنع لوحات ألوان متعددة ومن ثم تصديرها بعدّة صيَغ للملفات مثل: SCSS، أو LESS، أو PNG. Color Supply لديك هنا لوحة مذهلة لدرجات الألوان والتي يمكنك استخدامها لصُنع أمزجة مختلفة من الألوان. هذه الموقع مناسب تمامًا لأي مصمم ويب أو أي عقل مبدع آخر. Color.hailpixel.com أداة بسيطة ولكن مفيدة بشكل كبير، يمكنك هذا الموقع من استعراض نافذة المتصفح بحثًا عن أي ألوان مناسبة، ومن ثم نسخ الرمز الست عشري الخاص باللون بنقرة واحدة. CSS Color Names إذا لم تكن تحب التعامل مع الأسماء العشوائية للألوان، ربما تكون هذه القائمة المكونة من 147 اسم لون وصفي أسهل بعض الشيء في تذكرها في صفحات النمط الخاصة بك. استعرض الألوان جميعها دُفعة واحدة أو بإمكانك رؤية قيمة عشوائية مع كل نقرة فأرة. أدوات نظرية الألوان هل تذكر تعلم كل شيء عن عجلة وتماثلات الألوان والألوان المكملة والثلاثية في درس الفنون؟ بإمكانك استعمال نظرية الألوان بمساعدة أدوات مخططات الألوان هذه لصنع لوحات تعمل بالفعل ومفيدة. Sphere أداة نظرية اللون المتخيّل والمسماة بالكرة (Sphere) تُعطيك واجهة بسيطة لتختار فروقات وصبغات على عجلة الألوان. انتقي أسلوبك المفضل من اللوحة لتحدد اختيارك اللوني ولتُناسق القيم. Color Scheme Designer صمم مخططك اللوني الخاص باستخدام هذه الأداة. قم بتدوير وتعديل عجلة الألوان لاختيار لونك الأساسي، ثم لاحظ القيم الناتجة تلقائيًا حسب نوع اللوحة الخاصة بك. أدوات CSS لإنشاء الألوان وفرت أحدث تحسينات CSS3 إمكانية صُنع ألوان متعددة مباشرةً بوساطة الشيفرة، ولكن صياغة CSS أكثر صعوبة للعمل معها من عجلة الألوان المرئية. هنا بالضبط تصبح أدوات التوليد مفيدة، لتقديم الشيفرة المطلوبة لصُنع تأثيراتك التي تريدها. CSS Drive هذا الموقع هو أيضًا مولد لوحات ألوان رائع وبإمكانك استخدامه لتوليد لوحات متعددة حسب صورك الخاصة. مولد تدرجات CSS المطلق يُعرَف عن تدرجات CSS3 بأنها صعبة الكتابة في الشيفرة. فلا تحتاج فقط لمعرفة القيم المختلفة للألوان، بل تحتاج أيضًا لإضافة بادئات رقمية مختلفة لتضمن عملها في أكثر من متصفح. يُسهِّل مولد تدرج CSS المطلق عملك من خلال إعطائك واجهة شبيهة بالفوتوشوب لكي تضبط تدرجك اللوني ومن ثم إعطاؤك الشيفرة لنسخها أو لصقها. Hex 2 RGBA Color Calculator ليس من الصعب تحويل قيمة الرمز الست عشري إلى RGBa ولكنه يعد مملًا عندما تعطى كل قيمة على حدى، مما يعني أن عليك النقر المتتالي 3 مرات لنسخ الأعداد. تقوم حاسبة Devoth’s Hex 2 RGBA بتسهيل العملية بقيمة CSS الكاملة حيث يتم نسخها بنقرة واحدة فقط. اقتراحات القراء حصلت على عدّة اقتراحات وتوصيات لأدوات جيدة للألوان من القرّاء منذ نشر المقالة لم أكن على دراية بها، لذا اطلعت عليها وأضفت أفضلها إلى هذه القائمة لتطلع عليها أنت أيضًا علّك تستفيد منها في مشروع القادم. 0to255 هنالك معيار محدد عند حالة المرور فوق الروابط الخاصة بك، وهو أن تختار درجة مُعتمة من نفس اللون. موقع 0to255.com يجعل هذه العملية أكثر سهولة، فقط اختر اللون وسوف ترى مجموعة متكاملة من الخيارات، مما يجعله مثاليًا للمرور فوق الرابط، التدرج اللوني والحدود. Color Hexa وهو شبيه بموسوعة خاصة بالألوان! أدخل اللون الذي ترغب به بأي قيمة تشاء وسوف يقوم بعرض وصف خاص به بالإضافة لبعض المعلومات المفيدة. ومن الفوائد الأخرى لمصممي المطبوعات هي التحويل المباشر من الرمز الست عشري أو RGB لأقرب درجة من CMYK. Material Palette من المولدات الممتازة التي تقوم بإنشاء لوحات الألوان التي بإمكانك تحميلها وحفظها لتصاميمك المستقبلية. امتلاكك لأداة اختيار اللون المناسبة بالإضافة لمولد لوحات الألوان بإمكانه أن يُنجح مشروعك أو يُفشله. ترجمة -بتصرف- للمقال Color Picker Tools: HTML, CSS, RGB, Color Palettes and More لصاحبه Iggy

إن اختيار نظام الألوان المثالي ليس بالمهمة الصعبة. كل ما تحتاجه هو الأدوات الصحيحة لعملك وعينك لتبدأ التصميم. لا يمكنني تطوير عينيك لاختيار الألوان، لكنني أستطيع اقتراح مجموعة من أدوات الألوان المفيدة والتي من المحتمل أن تحسن ذوقك عند استخدامها. جميع هذه الأدوات مجانية 100٪، لذا يسهل وضعها في المفضلة وإعادة استخدامها مرارًا وتكرارًا. كما يمكنك استخدامها في تصميم الويب أو الهاتف المحمول أو الطباعة أو أي وسيط آخر يحتاج إلى ألوان مذهلة. 1. ColorHexa كنت أتصفح الويب في الآونة الأخيرة وعثرت على ColorHexa. إنها إلى حد بعيد إحدى أروع أدوات الألوان التي رأيتها على الإطلاق. من الناحية الفنية ليست هذه الأداة مُولّد ألوان أو أداة تصميم مخطط، بل هي مكتبة معلومات عن جميع الألوان مع تدرجات لونية مقترحة، وظلال ذات صلة، وعشرات من رموز الألوان (مثل:hex ، RGB،CMYK ،CIE-LAB ،HSL والمزيد). لن تجد قائمة من المعلومات عن الألوان أكثر كمالًا منها. فهذه الأداة مفيدة للغاية لجميع المصممين، بمن فيهم مصممي الويب، وهي مكان رائع للبدء في البحث عن الألوان لمشاريعك. 2. Colors.css إذا قمت ببعض الأبحاث في التأثير النفسي للألوان فستتعلم كيف تترابط الألوان المختلفة معًا وما الحالة المزاجية التي تعبر عنها. وهذا ما يتناقض مع أنواع محددة من الألوان وكيفية عملها معًا. غالبًا ما يأتي كل متصفح بألوان افتراضية مزعجة جدًا. Color.css ستقوم بإصلاح ذلك. إنها مكتبة CSS مجانية تعمل على إعادة تشكيل لوحة الألوان الافتراضية. هذا يعني أنه يمكنك استخدام أسماء الألوان مثل "الأزرق" و"الأحمر" بقيم مختلفة تمامًا. كما أن لدى موقع الأداة صفحة مليئة بالأفكار لمطابقة أنظمة الألوان التي من شأنها تحسين قابلية القراءة على موقعك. 3. ColorPick Eyedropper ترى كم وجدت من المواقع ذات الألوان الجميلة؟ أجد مواقع مذهلة طوال الوقت ومن الصعب تصدير هذه الألوان من ورقة الأنماط. يمكنك استخدام أدوات مطور كروم ولكن هذا يتطلب التنقيب في التعليمات البرمجية (الكود) لاختيار الألوان السداسية (الهيكسا). بدلاً من ذلك ، يمكنك استخدام إضافة ColorPick Eyedropper المصمم حصريًا لـ Google Chrome. يمكنك فقط النقر فوق نافذة التبديل في لوحة الإضافات، ثم المرور فوق أي لون تريد دراسته. تمنحك هذه الإضافة الرمز الكامل السداسي عشري مع رابط "نسخ" لنسخ اللون المحدد إلى حافظتك الخاصة. رائعة حقًّا أليس كذلك؟ إنها إضافة مجانية، لذلك لن تخسر شيئًا إن جربتها. 4. Coolors موقع Coolors عبارة عن مولد كبير لمخططات الألوان. يمكنك العثور على العشرات من المولدات على شبكة الإنترنت، ولكن هذا يختلف قليلاً لأنه يدعم برامج Adobe بإضافاتها الخاصة. يمكنك أيضًا الحصول على هذه الإضافة لكروم أو حتى كتطبيق iOS مخصص لهاتفك. حقا القيمة الحقيقية تكمن في تطبيق الويب للمتصفح هذا الذي يولد تلقائيًّا مخططات الألوان بلمح البصر. يمكنك بعد ذلك مزج الألوان ومطابقتها، وتغيير الإعدادات، وضبط العمى اللوني، وإضفاء الطابع العشوائي على المخططات الخاصة بك وفقًا لمعايير معينة. إنه تطبيق رائع، ولكنه يأتي مع منحنى تعليمي صغير. فلن يأخذ منك أكثر من 15-20 دقيقة حتى تعرف كيف يعمل كل شيء. 5. Palettte App Palettte هو أداة تحرير الألوان وإعادة رسم خرائطها. يتيح لك إنشاء مخططات ألوان تتدفق من واحدة إلى أخرى وتضبط عينات الألوان الفردية. يمكنك أيضًا استيراد مخططات الألوان الحالية وتحليلها وتحريرها. وقد أورد كاتب المقال المزيد عن دوافع ومزايا استخدام تطبيق الألوان هذا. 6. Material UI Colors من خلال بحث Google السريع، ستجد مجموعة من أدوات تصميم المواد الجميلة على الويب. يبدو أنها لا تنتهي، ويعتمد الكثير منها على أنماط الألوان الموجودة عادة في تطبيقات Android. باستخدام تطبيق الويب Material UI Colors، يمكنك العثور على مخططات ألوان مثالية تتوافق مع إرشادات Google’s material. قم بتغيير درجة جميع الألوان بسهولة باستخدام شريط التمرير الموجود في الزاوية العلوية اليسرى من الشاشة. أو اعمل على تحديد اختياراتك لتتناسب مع خيارات ألوان الموقع الحالي. يمكنك أيضًا التبديل بين hex و RGB وفقًا لأي تنسيق تريده. إنه تطبيق رائع لمحبي تصميم البطاقات ((material design. 7. Color Supply موقع Color Supply فريد من نوعه ولكنه غريب أيضًا. يمنحك مجموعة من أدوات الألوان المثيرة للاهتمام لمطابقة مخططات الألوان، واختيار الواجهات الأمامية والخلفيات، إضافة إلى طرق مختلفة لمقارنة كيف ستبدو تلك الألوان على الصفحة. لكن هذا الموقع ليس له أي دليل استخدام أو غرض محدد. إنه يعمل كمولد مخططات للألوان. ويتم إخراج ألوان مختلفة مع رموز ست عشرية (hexadecimal) بالقرب من أسفل الصفحة لنسخها. بالإضافة إلى أنه سيوضح لك كيفية عمل هذه الألوان في التدرج اللوني والأيقونات والنص. أداة رائعة ولكنها تأتي مع منحنى تعلم حرج. 8. Color Safe تعمل WCAG (قواعد إتاحة محتوى الويب) بجدّ نحو شبكة سهلة الوصول. ويعد اللون أحد أسهل الطرق لإنشاء إمكانية الوصول دون فقد اختبار الوقت. Color Safe هو تطبيق ويب مجاني يمكنه اختبار خيارات الألوان الخاصة بك. يمكنك الاختيار من مجموعة صغيرة من الخطوط والأحجام، ثم اختيار الألوان التي تريدها للمقدمة والخلفية. ستحصل من هناك على تصنيف إمكانية الوصول إلى جانب اقتراحات حول كيفية تحسين خيارات الألوان الخاصة بك (إذا لزم الأمر). أداة رائعة حقًا لأي شخص مهتم بإمكانية الوصول على الشبكة. 9. Color Hunt للاطلاع على معرض مخططات الألوان، ألق نظرة على Color Hunt. تم إطلاق هذا المشروع المجاني قبل عامين ولا يزال مصدر إلهام للتصميم. يقدم الأشخاص مخططات الألوان الخاصة بهم إلى الموقع، ثم يصوت آخرون على مخططات الألوان هذه. يمكنك الترتيب حسب الأحدث أو الأكثر شعبية وحتى التصويت على المفضلات لديك. رائع حقًّا أليس كذلك؟ إنه تطبيق ويب بسيط للغاية لذا لا تتوقع الكثير من الميزات. إنها مجرد طريقة رائعة للتصفح بصريًا عبر العديد من أنماط الألوان المختلفة دفعة واحدة. 10. أوبن كلر Open Color تبحث عن شيء أكثر ملاءمة للويب؟ إذَا قم بزيارة مكتبة Open Color. إنها مجموعة ضخمة مفتوحة المصدر من خيارات الألوان مبنية على إمكانية الوصول ودعم المتصفح. تم تحسين كل لون لسهولة المطابقة بغض النظر عن التصميم الخاص بك. لمزيد من المعلومات ولتنزيل نسخة من الأنماط زر صفحة التطبيق على موقع GetHub. 11. HTML Color Codes HTML Color Codes هو تطبيق ويب معلوماتي خاص بالألوان. يتيح لك هذا التطبيق سحب جميع أشكال كود HTML / CSS لخيارات الألوان الخاصة بك مباشرة. يمكنك البحث عن أي لون تريده، أو الاطلاع على التوصيات. بالإضافة إلى أن هذا التطبيق يحتوي أيضًا على أداة لإنشاء لوحات ألوان يمكنك تنزيلها كملفات Adobe Swatch. لا تدع الاسم يخدعك: هذا التطبيق لا يقتصر فقط على استخراج ألوان HTML بل يتعدى ذلك بكثير. إنها أداة رائعة للمصممين الرقميين من جميع التخصصات والذين يريدون الوصول بسهولة إلى أكواد الألوان ولوحات الألوان القابلة لإعادة الاستخدام. 12. أدوبي كلر سي سي Adobe Color CC لا يمكنني تجاوز تطبيق الويب المذهل Adobe Color CC. كانت هذه الأداة المجانية تسمى Adobe Kuler لكنها مرت بتكرارات قليلة على مر السنين. ولا يزال منتقي الألوان هذا مجانيًا ولكن الواجهة قد تغيرت لتسهيل قيام المصممين بإنشاء مخططات الألوان وحفظها. إذا كنت أحد مستخدمي Adobe، فهذه الأداة تستحق أن تكون في مفضلتك. يدعم أدوبي كلر ما يصل إلى 5 ألوان مختلفة في مخطط واحد، ويمكنك حتى تحميل الصور لسحب مخططات الألوان الديناميكية تلقائيًا. ترجمة -وبتصرف- للمقال ‎Top 12 Web-Based Color Tools for Web Designers لصاحبه Jake Rocheleau

على مدى السنوات القليلة الماضية، أصبحت الرسوم البيانية شائعة بشكل متزايد لأسباب كثيرة منها سهولة مشاركتها وقدرتها على إيصال المعلومة والرسالة بسهولة ووضوح، حيث تختصر الكثير من الجمل والشروحات ببضع كلمات ورسومات جميلة أخّاذة. عرّف موقع القاموس الإنجليزي Infographic على أنه عرض تقديمي مرئي للمعلومات في شكل مخطط أو رسم بياني أو صورة أخرى مصحوبة بحد أدنى من النصوص، تهدف إلى تقديم نظرة عامة سهلة الفهم، وغالبًا ما تكون لموضوع معقد. ويمكن تعريفها أيضًا على أنها طريقة لتبسيط مشكلة التواصل النصي واللفظي عبر استخدام أسلوب التصميم الرسومي. أهم القواعد والمبادئ نظرًا لأن المزيد من العلامات التجارية وفرق التسويق التابعة لهم تعمل على إنشاء ومشاركة رسوم بيانية عالية الجودة عبر الإنترنت، فإن مجرد وصف بعض الحقائق معًا وتسميتها مخطط معلومات أو رسوم بيانية، لا يكفي لتعد نفسك مصمم رسوم بيانية، بل يجب إتقان هذا الفن عبر اتباع قواعد وتطبيق مبادئ معينة لتبرز بين الكم الهائل من المنافسين، ويجب أن تكون رسوماتك البيانية غنية بالمعلومات المفيدة ومصممة بطريقة جميلة. لذلك إليك أهم القواعد والمبادئ الواجب اتباعها للحصول على رسومات بيانية متفوقة. البساطة دائمًا ما يتكرر هذا المبدأ في جميع أنواع اختصاصات تصميم الرسوميات وهو أساسًا من أهم المبادئ العامة لتصميم الرسوميات. يمكنك تطبيق هذا المبدأ عبر اختصار النصوص إلى كلمات أو عبارات قصيرة وسهلة الفهم، ويجب أن تكون الألوان المستخدمة في التصميم متناسقة لجذب انتباه المشاهدين. محاولة إظهار الكثير من التفاصيل في الرسوم البيانية تجعل الناس يشعرون بالملل والتعب من قراءتها. رسم بياني يوضح مجموعة نصائح للتسويق بالمحتوى بطريقة بسيطة وسلسلة من مقال قائمة لأهم مصطلحات التسويق بالمحتوى. العنوان أولًا الرسومات البيانية تحتاج دائمًا إلى عنوان في بداية ورأس كل تصميم، على عكس الكثير من اختصاصات التصميم الأخرى التي قد لا تحتاج لعناوين، لذلك أفضل وسيلة لإقناع للمشاهد بمتابعة مشاهدة الرسم البياني هو العنوان المقنع والجذّاب، حيث يمكن للعنوان المدروس أن يثير اهتمام المشاهد ويدفعه لمتابعة تصفح باقي أجزاء التصميم، وقد يؤدي العنوان الممل الذي لا يثير الاهتمام إلى دفع المشاهد إلى العزوف عن متابعة تصفح الرسم. رسم بياني يبرز العنوان بشكل واضح أعلى التصميم من الهيئة العامة للإحصاء في السعودية. المحاذاة هو من العناصر المؤثرة في هذا النوع من التصاميم، ويمنح المنظر العام للتصميم الأناقة والجمالية، وفي حال عدم الالتزام به سيبدو التصميم فوضويًا وغير احترافي. أفضل طريقة لتطبيق هذا المبدأ في التصميم هو تفعيل أداة عرض الشبكة Grid في برنامج التصميم المستخدم ومن ثم تفعيل خاصية المطابقة إلى الشبكة Snap to Grid وبذلك تتحقق المحاذاة بسهولة ويسر ودون بذل أي مجهود في محاولة تطبيقها. رسم بياني يوضح بروتوكولات الحج من تصميم سلمى العُمر. التباين استخدم التباين دومًا في تصاميمك وخصوصًا التباين في الألوان ولعل مخطط الألوان التكميلي قد يقدم تباينًا مميزًا وبارزًا للعناصر (راجع مقال اللون في تصميم الرسوميات ونظرية اللون لفهم مخطط الألوان التكميلي). ولكن اللون ليس الطريقة الوحيدة لتطبيق التباين في التصميم، إذ يمكن استخدام أحجام النصوص لتطبيق ذلك، فعادةً ما يكون العنوان هو أكبر نص في الرسم البياني، متبوعًا بالعنوان الفرعي ثم الفقرات. يجب أن يكون العنوان دائمًا الأكبر حجمًا حتى يعرف المشاهد موضوع الرسم البياني مباشرة بمجرد النظر إليه. استخدم المصمم تباين ألوان جميل ومريح مع تباين واضح للخطوط في تصميم أنيق من موقع الخليج أونلاين. التوازن تطبيق التوازن في تصميم الرسومات البيانية يريح العينين لأن جميع العناصر ومواضعها تتناسب بسلاسة معًا، كما يحافظ التوازن على التكوين العام للتصميم خصوصًا في الرسومات البيانية الطويلة. وهناك نوعين من التوازن، توازن متماثل وتوازن غير متماثل. التوازن المتماثل هو عندما يكون لكل جانب من جوانب التصميم وزن بصري متساوٍ، هذا التصميم فعّال في الرسومات البيانية المتعلقة بالموازنة بين أمرين أو أكثر. التوازن غير المتماثل طبيعي أكثر وأقل تجانسًا من التوازن المتماثل، إذ ينشئ علاقة أكثر تعقيدًا بين العناصر ويجعل الرسم البياني أكثر ديناميكية لأن أسلوب التركيب لا يتكرر بشكل مفرط وممل. لاحظ التوازن المتماثل بين طرفي التصميم في الرسم البياني الذي يشرح الهلع للمصمم محمد السعيدي. الهرمية يساعد تطبيق هذا المبدأ على توجيه سير المخطط البياني وتدفقه، حيث يعمل هذا المبدأ على تنظيم العناصر حسب الأهمية، وبهذا النمط يقع عنوان الرسم البياني دائمًا في الجزء العلوي من التصميم حتى يسهل رؤيته وقراءته وفهمه من النظرة الأولى، ثم تتبعه عناوين فرعية وفقرات وأيقونات ورسومات أخف من ناحية الوزن البصري بالتسلسل بحسب الأهمية. يظهر تطبيق مبدأ الهرمية بوضوح في تصميم رسم بياني يوضح رحلة الموظف الجديد للمصممة بثينة العودة. التناغم اللوني تتميز تصاميم الرسومات البيانية بتناغم ألوانها دائمًا لذلك يجب على المصمم العمل على اختيار مخطط الألوان الجيد للتصميم مع مراعاة التأثيرات اللونية وعلاقتها بمحتوى ومعاني التصميم، ثم عليه أن ينشأ لوحة الألوان الخاصة بالرسم البياني والتقيد بها للحصول على تناغم لوني مذهل ومتكامل وغير شاذ. الرسم البياني يطبق التناغم اللوني الأحادي من موقع الأمم المتحدة. مطابقة الخطوط من المعروف في قواعد التصميم الالتزام بعدم استخدام أكثر من ثلاثة خطوط مختلفة في أي تصميم. يميل المصممون المبتدؤون إلى الإفراط في استخدام الخطوط، بسبب وجود الكثير من الخطوط للاختيار من بينها ويريدون دائمًا البحث عن شيء جديد ومثير للاهتمام. ولكننا بحاجة إلى التأكد من إقرانه بشيء مألوف وقابل للتطبيق، وعادة ما يكون هناك خط مهيمن وخط مساعد. استخدم في هذا الرسم البياني نوعان متناغمان من الخطوط من موقع الأناضول. الوحدة تطبيق الوحدة البصرية للتصميم يحتاج إلى تناغم وتجانس كافة العناصر معًا، إذ يجب تلوين كافة عناصر التصميم باستخدام لوحة ألوان واحدة لتحقيق التناغم اللوني، ويجب أن تكون الأحجام متناسقة عبر تطبيق الهرمية من جهة والتوازن من جهة أخرى، ويجب أن تكون الأيقونات بذات الحجم وكذلك خطوط نصوص الفقرات والعناوين الفرعية، من الأفضل أن تكون العناوين الفرعية بنفس نوعية الخط وحجمه ولونه وكذلك الأمر بالنسبة لبقية العناصر. يوضح هذا الرسم البياني كيفية تطبيق الوحدة على جميع عناصر التصميم – تصميم نصائح للاسترخاء للمصمم وتر التصميم. أشهر الأدوات والتطبيقات لتصميم الرسومات البيانية هناك تطبيقات ويب وسطح مكتب تحتوي العديد من القوالب الجاهزة للتعديل والمعالجة لإنشاء رسومات بيانية جميلة، وقد تحوي أيضًا على عناصر رسومية وخطوط جاهزة لتختار من بينها وتضيفه إلى التصميم. وهناك برامج تصميم عالية المستوى لا توفر كل هذه المزايا إلا أنها تستطيع إنشاء أي تصميم لرسم بياني مهما كان، ويعود الأمر كليًا إلى مهارات المصمم في استخدام هذه البرامج والتي لا غنى عنها لأي مصمم رسوميات حقيقي. برامج التصميم الاحترافية برامج التصميم الاحترافية مثل الفوتوشوب والإليستريتور وكورل درو وإنكسكيب وغيرها، حيث أن إمكانات هذه البرامج غير محدودة، يمكنك تطبيق كل المبادئ والقواعد بطريقتك، ويمكنك اختيار الألوان التي تريد، لا قوالب أو عناصر جاهزة تربطك بنمط محدد في التصميم، بل على العكس فأنت تتمتع بمطلق الحرية في ابتكار قوالبك وعناصرك الخاصة، حتى وإن عنى ذلك بذل جهد مضاعف ومزيدًا من الوقت إلا أن النتائج ستكون مميزة وخاصة وتحمل بصمتك بكل تأكيد. يستطيع الفوتوشوب وجيمب وأمثالهما تصميم رسومات بيانية طبعًا، ولكن الرسومات الشعاعية أفضل بكثير لهذه المهمة، لذلك يعد الإليستريتور والإنكسكيب وكورل درو وأمثالها أفضل التطبيقات التي تستخدم لإنشاء رسومات بيانية مميزة ومبتكرة. Adobe Spark وفرت أدوبي كعادتها حلولًا لتصميم الرسومات البيانية عبر تطبيق الويب والهاتف المحمول وهو تطبيق أدوبي سبارك Adobe Spark، ويتضمن التطبيق قوالب عديدة لتصميم قصص ومنشورات ثابتة ومتحركة لمختلف وسائل التواصل الاجتماعي، وكذلك لمواقع الإنترنت والتطبيقات. يحوي العديد من العناصر والأدوات إضافة إلى القوالب القابلة للتعديل. Snappa ستمكنك أداة الرسوميات Snappa من عمل رسوم بيانية جذابة حقًا تجذب انتباه الجمهور، فقد حصلت على معدلات مرتفعة في المراجعات والتقييمات. إنها سهلة الاستخدام للغاية مع وفرة من القوالب المعدة مسبقًا ومكتبة مليئة بملايين الصور عالية الدقة. تتيح خاصية إزالة خلفيات الصور بنقرة واحدة، ولديها مجموعة من تأثيرات النص والرسومات لاستخدامها، ويمكنك حتى المشاركة على وسائل التواصل الاجتماعي مباشرة من التطبيق. Piktochart يعد تطبيق Piktochart بسيطًا وسهلًا أكثر من سواه من التطبيقات لتصميم الرسوم البيانية، حيث يحتوي على قوالب سهلة التخصيص، بمجرد إضافة بياناتك ستتمكن من تعديل التخطيط ونظام الألوان وغيرها. Visme يمتلك Visme إمكانات إنشاء عروض تقديمية جيدة، ولكنه موجه بشكل خاص نحو إنشاء رسوم بيانية جذابة، ويشتمل على أكثر من 100 خط وملايين الصور المجانية وآلاف الرموز عالية الجودة، وهناك خيارات لتضمين الفيديو والصوت (بما في ذلك القدرة على تسجيل تعليق صوتي مباشرة في المحرر، وهو أمر مفيد)، كما يمكنك أيضًا تحريك المحتوى لتوضيح الأمور. من أهم ما يميز هذه الأداة عن غيرها هو أنها تسمح للمستخدمين بإعداد رسم بياني في بضع دقائق، وذلك بفضل مكتبة عناصر يمكن سحبها وإسقاطها بسهولة في مكانها. كما يتيح أيضًا إنشاء رسوم بيانية تفاعلية ومتحركة. خاتمة الرسوم البيانية شعبية للغاية والجميع يحب مشاهدتها، إنها تنقل المعلومة الثقيلة الكثيفة بأسلوب بسيط خفيف وسهل، وأصبحت الشركات الكبرى والصحف والمجلات تستخدمها لنقل المعلومات والأفكار والرسائل بصورة لطيفة ومحببة إلى جمهورها. فقد أصبح لهذا الاختصاص من تصميم الرسوميات مجال واسع وطلب كبير في الأسواق، وهذه فرصة جيدة لك لتستغلها وتنمي مهاراتك وتثري خبرتك من خلال إنشاء تصاميم جميلة تتماشى مع المبادئ ومطابقة للقواعد للوصول إلى الاحترافية في هذا العمل.

يثير اللون الأحمر الحماس وفقًا لدراسة على الديناميكا اللونية، وهذا يفسر اللون الأحمر لموقع شركة كوكا كولا، الذي يمنحك شعورًا بيوم صيف حار مضجر، وهو الوقت الذي تشعر فيه بالحاجة إلى شرب الكولا، لكن أهمية الألوان في تصميم المواقع تتجاوز الجانب العاطفي، فيميل الناس إلى إنفاق أموالهم أكثر في الأضواء الحمراء من الزرقاء، وهذا يفسر استخدام المدن الباذخة لكثير من الأضواء الحمراء. للألوان أثر على الأداء في العمل، فتجعل الأضواء الحمراء الناس يتصرفون أسرع وتشعرهم بالقوة، إلا أن هذا ليس إيجابيًا بالضرورة، إذ أن الأزرق يجعلهم أكثر تأنيًا وتفكرًا قبل التصرف، وهذا السبب وراء اللون الأحمر لإشارات المرور الآمرة بالتوقف، إذ أن الوضع يتطلب أن تتصرف بسرعة وتوقف مركبتك قبل أن تصبح في خطر. يمكنك الإستزادة من هذا بالقراءة عن سيكولوجية الألوان في عالمي التسويق والعلامات التجارية، والتأثير النفسي للألوان في تصميم الويب، واختيار أفضل المجموعات اللونية للمواقع التي تصممها. مزج الألوان مزج الألوان أمر مُجدٍ إذا تم بالشكل الصحيح، بما في ذلك مزج الألوان المكملة، إلا أن هذا يجب أن يُفعل نادرًا، نظرًا لتأثيرها السلبي على النظر، فموقع أسود بنص وردي لهو صورة فظيعة لا أرغب ببقائها في رأسي. هناك حيلة جيدة لمزج الألوان المكملة معًا، تتضمن رسم خط رفيع في المنتصف باللون الأبيض، أو الرمادي، أو الأسود، بين الشكلين الملونين لتتمكن العين من رؤيتهما منفصلين، ويمكن ملاحظة هذا بالنظر إلى شعار شركة بيبسي في الأسفل: حيث يفرّق بين اللونين الأحمر والأزرق ليس بطبقة رقيقة من الأبيض بل سميكة. العلاقة بين الألوان والثقافات تحمل الألوان معانٍ مختلفة باختلاف الأماكن في العالم، فالأحمر يبشر بالحظ في الصين، بينما يشير إلى النقص لدى الألمان. تنفق شركات ضخمة مبالغ طائلة على دراسة آثار الألوان المختلفة على مختلف الثقافات، قبل الانخراط في أحد الأسواق. وقد يظن البعض هذا مستحيلًا لكن يمكن خسارة العملاء بسبب استخدام الألوان الخاطئة. وعلى الرغم من توظيف شركات كبيرة لخبراء للقيام بهذه الأبحاث لهم، إلا أن النتائج ليست دومًا إيجابية، فكل مصمم، بل كل شخص، يميل للون ما أو زوجٍ ما من الألوان يفضل استخدامه في مناسبات مختلفة لأنه يحبه شخصيًا، وهذه نقطة سلبية في هذه الحالة، لذا على كل المصممين أن يتجردوا من كل تفضيلاتهم الشخصية ويركزوا على العملاء واحتياجاتهم. اختيار الألوان لموقع إلكتروني اختيارك للون موقع إلكتروني ليس مجرد اختيارك للونك المفضل كواجهة له، بل يعني اختيارك اللون الصحيح الذي يحقق الاستجابة المطلوبة من الجمهور، فإذا كنت تعرف جمهورك واكتشفت اللون الذي يناسبهم فتكون هكذا قد قطعت نصف الطريق، إلا أنه من المستحيل اختيار لون يلائم كل زوار موقع فردًا فردًا، لذا فإنه من المهم تحديد اللون اللون الذي يلائم أغلبية الفئة المستهدفة. نصف الحالات التي يزور فيها الزوار الموقع مرة واحدة بلا عودة سببها لون تصميم الموقع، وفقًا لمصادر مختلفة، فأول شيء يحتاج الزوار إلى التقاطه هو الألوان الرئيسية، فإذا احتوى الموقع على عدة ألوان لا يوجد واحد منها سائد بارز على الأقل، فعليك عندها تغيير التصميم. إذا كان لديك منظومة لونية زرقاء، فستكون استجابة الناس إيجابية اعتمادًا على حسن مزاجهم، وإذا كنت ستجعلها بيضاء صافية فلا بأس لكن سيكون عليك جعلها أكثر إثارة، بوضع الأحمر الفاتح أو البرتقالي في بعض المواضع، يتماشى الأبيض والأخضر بشكل رائع، ويمكنك استخدام الأبيض والرمادي للظهور بمظهر عصري وأنيق دون الحاجة إلى الألوان الحادّة، وكل مزيج يظهر شيئًا من البريق، والنعومة، والغضاضة والصفاء. انظر النموذج الراقي في الأسفل. إذا كنت تفضل الظلال الداكنة، فكل شيء يليق بالأسود طالما أن الأسود ليس اللون المهيمن، يمكن للون الأسود في الخلفية أن يعطي الموقع مظهرًا جيدًا وراقيًا، لكن سيجعل القراءة صعبة، لذا فإن أبسط مزيجين هما الأسود مع الأبيض أو الرمادي الفاتح مع واحد منهما، ويمكن للونين شديدي التناقض كالأسود والبرتقالي أن يلقيا ببعضهما، لكن قد يحتاجان إلى الأبيض لتحقيق التوازن. إذا كنت ترغب بدمج كلٍ من الأبيض والأسود مع لون آخر، فإن الأزرق خيار جيد، واحرص على هيمنة الأبيض، وإلا ستحتاج إلى أزرق فاتح جدًا ليحل محله، ولا تعطِ الأسود حضورًا كبيرًا في هذا المزيج، ويمكنك رؤية مثال جيد في الأسفل، فالمثال الثاني فقير ككل ويظهر مدى التعديلات التي يمكن إجراؤها على هذا المزيج، فالتصميم ليس فقط قديمًا بل إن الألوان تزيد الطين بلة. يليق الأسود والأبيض بالأحمر أيضًا، لكن احرص على ألا يطغى الأحمر، جاعلًا التصميم حادًا ويسبب تعاكسًا مزعجًا مع الأسود، يمكنك رؤية مثالين جيدين في الأسفل. والمزيج الثالث الذي يُنصح به هو الأسود، مع الأبيض والأخضر، ويمكنك للمثال في الأسفل أن يظهر لك السبب. والآن بعد أن مررنا بالمنظومات اللونية المختلفة للمواقع وكيفية مزجها، هل وضعت الألوان من قبل بعين اعتبارك بصفتها عوامل مؤثرة في مدى قابلية موقعك للقراءة؟ إذا كانت الإجابة لا، فسوف يعجبك الجزء التالي. ترجمة -وبتصرف- للمقال The Website Color Schemes that Stimulate Human Sense للفريق التحريري لموقع 1st Web Designer

عندما تصمم شعارًا لمشروعك على الإنترنت، لمدونتك أو موقعك الإلكتروني، فإنك لا شكّ تريده يبدو احترافيًا، وجذابًا، ومميزًا. ولإنجاز هذا العمل الفذ، فإنّ فهم العملية الصحيحة لتصميم الشعار تعد الفيصل، ولكن لا داعي للقلق، فقد أتيت إلى المكان الصحيح. ولإنشاء شعار جذاب لا مثيل له من جميع النواحي، اتبع هذه الخطوات فقط: اختر الألوان التي تعكس شخصية علامتك التجارية عندما يتعلق الأمر بالألوان، فقد تفضِّل ألوانًا على أخرى بشكل شخصي. ولكن لعمل علامة تجارية فعّالة، يجب أن تضع ما تفضله على جنب وتختار الألوان التي تناسب علامتك. صدق أو لا تصدق، ألوان الشعار تخبر الكثير عن الشركة، إذ أن 93٪ من الناس ينظرون إلى المظهر الخارجي عند الشراء. إذًا السؤال هو: كيف تختار الألوان الصحيحة؟! إذا كنت تعرف ما هي شخصية علامتك التجارية، لن يكون اختيار الألوان المناسبة أمرًا صعبًا. مثلاً : إذا أردت أن ترمز للحب، أو العواطف أو الحماس، فإن اللون الأحمر يعد اختيارًا مثاليًا للشعار. وإذا أردت أن تنشئ علامة تجارية عن الملكية، أو التفرد أو الغموض، فإنّ اختيارك للون البنفسجي لن يكون خاطئًا. كل لون مرتبط بنوع محدد من المشاعر. وبذلك، إذا كان لديك فكرة واضحة عن المشاعر التي تريد إثارتها في زبائنك، فستستطيع اختيار الألوان المناسبة بسهولة. اختر أنواع الخطوط التي تعكس شخصية علامتك التجارية وكما يجب اختيار الألوان الصحيحة لشعارك، يجب أن تختار نمط الخط الذي يناسبها أيضًا. واجعل ما يلي في حسبانك عند اختيار أنواع الخطوط: تجنب الخطوط المعتادة التي تُستخدَم في الصحف، والمجلات وحتى في معظم المواقع الإلكترونية، وابحث عن خطوط فريدة وعريضة بدلًا من ذلك. تأكد أن الخطوط تصلح لكل الأزمنة، فمن المهم جدًا أن تكون ذات صلة وآخذة للنظر اليوم وفي المستقبل أيضًا. يجب أن يكون هناك مسافات مناسبة بين الحروف. قد ترغب أيضًا أن تبحث وتجد أنواع مختلفة من الأنماط المتاحة في السوق للعثور على الخطوط المستخدمة في الشعارات التي تفضلها. اختر نوع الشعار يمكن تقسيم كل أنواع الشعارات إلى الفئات الرئيسية التالية: الشعارات الحرفية: هي الشعارات التي تعتمد على حرف أو الأحرف الاولى من كلمات اسم الشركة، حيث يتم عرضها بطريقة تيبوجرافية تشبه الشعار الخطّي لكنّها مختصرة. يُستخدم هذا النوع من الشعارات في الشركات التي يصعب نطق اسمها، أو ذات الاسم الطويل. تتميز هذه النوعية من الشعارات بسهولة الحفظ في ذهن المتلقي مثل : MBC ، LBC CNN ، BBC وغيرها. الشعارات النصّية : وهي شعارات قائمة على النصوص والخطوط، حيث تكون هي العلامة التجارية للشركة. قد تكون جيدة إذا ما كانت الشركة تحمل اسمًا مميزًا مثل: العربية، سوق.كوم، و Samsung وغيرها. الشعارات الأيقونية أو الرمزية: تعد من أفضل الشعارات الموجودة اليوم، وتستخدم أيقونات مبتكرة لتمثيل المشروع بدلًا من اسم المشروع نفسه. مثال ذلك شعارات Nike، و Shell، و Apple وغيرها. الشعارات التجريدية: تقوم على أنماط وتصاميم تجريدية بدلًا من الأيقونات التي يتم التعرف عليها بسهولة مثل: فودافون و Pepsi حيث يستخدم دائرة مقسمة مثالًا جيدًا على هذا النوع. أضف إلى ذلك شعار Mitsubishi الذي يستخدم ثلاث جواهر متسقة على شكل مثلث. الشعار المزيج – رمزي ونصي – رمزي وحرفي: أغلب الشعارات التجارية تمزج بين الرموز والنصوص، لكي تعطي المرونة في استخدام أحدهما أو كلاهما في التطبيقات المختلفة، لذا فإن الشعارات المزيجة ذات الطابع التصميمي الجيّد هي التي تبدو جيدة سواء تم مزج عناصر الشعار (النص والرمز) مع بعضها أو تم فصلها. مثل: زين للاتصالات، و بنك البركة، و STC وغيرها. شعارات التمائم: كما تتوقع فإنّ هذا النوع يستخدم الرموز ( أي تمائم ) لتمثيل العلامة التجارية. ومن أفضل الأمثلة على هذا النوع من الشعارات: Pillsbury ، Wendy's ، Hostgator وغيرها. شعار أيقونة نصّي: هذا النوع من الشعارات أيضاً منتشر في البلاد العربية حيث يكون شعار أيقونة لكن الأيقونة هي اسم العلامة التجارية بالعربي. مثال ذلك شعار الجزيرة، إذ هذا النوع من الشعارات مناسب للشركات التي تحمل في طيات علامتها أصول أو جذور عربية أو إسلامية وهو حل ممتاز للكثير من الشركات العربية التي تتطلع للانتشار العالمي. فالشعار يكون عربي/انكليزي وذلك بكون العربي هو الأيقونة والانكليزي يشرح العربي تحته أو حوله. قناة ابو ظبي، وطيران الإمارات خير أمثلة على ذلك أيضًا. حدد النمط المناسب حتى لو اخترت نوع خط الشعار والألوان بالفعل، فإنّ هناك الكثير من المرونة التي تملكها للنمط والتنسيق. مثلًا، يمكنك الذهاب باتجاه شكل بسيط جدًا باستخدام نوع خط مميز والذي يشكل معظم الشعار وحيدًا، أو يمكنك إنشاء شعار عصري باستخدام صيحات جديدة مثل قص الأحرف، واستخدام التقنيات والأشكال بطريقة إبداعية وغيرها. وهذا يعني أنه مهما تفعل، تأكد من أنّ الشعار يناسب أهداف العلامة التجارية ويوصل الرسالة بشكل بسيط. أنشئ نماذجًا مختلفة من شعارك إذا كنت ترغب بإنشاء شعار مثالي لعلامتك التجارية، لا يجب عليك التركيز على إنشاء واحد فقط. حاول تجربة عدّة أفكار وتصاميم باستخدام النمط الرئيسي، الخطوط والألوان. لن تكون بعض شعاراتك الأولى غالبًا جذابة أو على مستوًى عالٍ، ولكن مع كل عملية مراجعة، ستلاحظ وجود تحسن وتغيير إلى الأفضل. ومن خلال تحسين التصميم عدة مرات حتى ترضى عنه 100٪، يمكنك تحقيق المثالية التي تستحقها. من السهل جدًا تجربة عناصر تصميم مختلفة بما فيها الخطوط، الأيقونات وغيرها إذا كنت تستخدم برمجية لتصميم الشعارات، وهذا لأنك تستطيع رؤية التغييرات أمام عينيك في الوقت نفسه. وبما أن أجور صانعي الشعارات رخيصة بعض الشيء، فإنه يُوصَى بتجربة أحدهم إلا إذا كنت تملك سببًا وجيهًا لعدم فعل ذلك. استشر ثم حسّن ثم انشر وحالما يصبح تصميمك النهائي جاهزًا، قد ترغب بالحصول على آراء من بعض الناس ثم أجري بعض التعديلات عليه إذا تطلّب الأمر ذلك. بعد هذا، يمكنك اعتماد التصميم النهائي والبدء في استخدامه في الأماكن ذات الصلة مثل: الموقع الإلكتروني، وبطاقة الأعمال، وصفحات التواصل الاجتماعي وغيرها. الخلاصة إنّ تصميم الشعارات يُعدُّ فنّاً. ولكن لا يجب أن تكون بالضرورة فنانًا موهوبًا لإنشاء تصميم جيد. يمكنك بالأدوات المناسبة والمعرفة الأساسية إنشاء شعار ذي جودة عالية ببساطة. حظًا موفقًا! ترجمة -وبتصرف- للمقال Logo Designing – A Beginner’s Step by Step Guide لصاحبه

يُدرك كل مصمّم جرافيك أنّ مهمّة اختيار تركيب ومزج الألوان وتناسقها هي واحدة من أهم أجزاء عمليّة التّصميم، سواء أكان ذلك التّصميم موجّه للطّباعة أم للعرض على شبكة الويب. لا يوجد أي تركيبة ألوان عالميّة وموحّدة بإمكانها أن ترضي جميع العملاء. بالنّسبة لبعض المصمّمين فإنّ عمليّة تركيب الألوان هي مسألة التّجربة وتحديد الأخطاء ثم التجربة مجدّدًا وهكذا، إلى غاية الحصول على التّركيبة المناسبة، ولكن اعتماد هذه الطّريقة يعني إهدار الكثير من الوقت الثمين. الوقت الذي يُعتبر سلعةً هامة في عالم تصميم الجرافيك والذي يسير بخطوات متسارعة. إلاّ أنّه يُمكن التّقليل من ذلك الوقت عن طريق الاعتماد على بحوث ودراسات متخصّصة ومناسبة، وكذلك من خلال استخدام الذّوق الذي تتمتّع به كمصمّم أو حدسك السّليم تجاه الأنماط. كيف تفهم أساسيات عجلة الألوان Color Wheel قبل كلّ شيء، من المهم أن تعرف أساسيّات عجلة الألوان، ويجب على كلّ مصمّم أن يطّلع عليها عن ظهر قلب. الضّوء الأبيض هو مزيج من كل ألوان الطّيف، والتي تنقسم إلى ثلاث مجموعات أساسيّة هي: الأحمر، الأزرق والأصفر، ومن خلال المزج بين تلك الألوان الثلاثة بإمكانك أن تركّب أي لون تتخيّله ويمكن للعين البشرية أن تراه. وحتّى تكون قادرا على خلق تركيبات ألوان جميلة وجذّابة يجب عليك أوّلا أن تعرف عجلة الألوان Color Wheel، حيث سأحاول شرحها لك بطريقة سهلة خالية من التّعقيدات. الألوان الأحادية monochromatic colors تجعلك تستخدم لون واحد من مجموعة ألوان مختلفة، على سبيل المثال: بإمكانك استخدام تركيبة هذه الألوان لتصميم موقع معيّن : الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا. الألوان المكملة Complementary colors من أكثر تركيبات الألوان جاذبيّة هي تلك التي تُظهر التّناقض وتلفت الانتباه. وتنتج تلك النّوعية من خلال المزج بين الألوان التي تكون متقابلة في الدّائرة اللّونيّة، حيث تتميز بكونها ألوانا جريئة، مثيرة للاهتمام وجذّابة بصريا. تأكّد خلال تركيبك للألوان الخاصة بتصاميم عملائك أن تختار تلك التي تظهر بشكل جميل حين تقوم بمزجها، بعض التّركيبات سينتج عنها ألوانا جدّ صارخة، حاول أن تتجنّبها. الألوان التماثلية Analogous colors الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم. الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل. الألوان المثلثية Triadic colors الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن. إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة كما ذكرنا سابقا فإنّه لا يمكننا إقناع جميع العملاء باستخدام نموذج ألوان معيّن، يجب أن تعرف أولا مؤسّسة عميلك (إذا كان التصميم مثلا خاص بمؤسّسته)، وقبل أي شيء آخر يجب أن تعرف ما تقوم به الشركة والمنتجات أو الخدمات التي تقدّمها، ذلك سيعطيك فكرة أولية حول نوعيّة الألوان التي ستختارها، وأيضا لا تنسى أن تطلع على مجموعة من تصاميم لشعارات ناجحة. المطاعم، الوجبات السريعة والمنتجات الغذائية بالنّسبة للشّركات التي تركّز على الغذاء والطعام، حاول أن تستخدم اللّونين الأحمر والأصفر بكثرة، لأنها تعتبر ألوانًا جذّابة وسهلة الالتصاق بذهن المتلقي (الشخص الذي يراه)، بالإضافة إلى أنه يُنصح باستخدام الألوان الحارة والصّلبة، لأن اللونين الأصفر والأحمر يحفزان على الشعور بالجوع من خلال تسريع عمليّة الأيض، الأمر الذي يؤدّي إلى فتح الشهية ورفع من نسبة الطلب على الأكل أكثر مما ينبغي، تجنب استخدام اللون الأزرق والأرجواني للمطاعم نهائيا، لأنها تعمل على التخفيف من شهية الأكل لا شعوريا. أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية: مساحيق التجميل ومواد التنظيف هنا نختار الألوان التي تعبر عن الأنوثة، النعومة والنّظافة. ألوان الباستيل مثل الأبيض، الأرجواني، الأزرق الفاتح، والزهري الفاتح هي اختيار رائع يمكنك استخدامه. تجنّب الألوان الحارّة وغير الناعمة، كما بإمكانك استخدام الألوان الأحادية والألوان الحيادية لأنها تدل على النظافة والبساطة. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف: المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكومية عند قيامك بتصميم لإحدى المؤسّسات الحكومية، أو المؤسسات العامة أو لإحدى المنظمات، عليك أن تأخذ بعين الاعتبار أنها يجب أن تظهر كمؤسسات محترمة، جديرة بالثقة وذات كرامة. لذا اختر ألوانا تكون إيجابية وجميلة في نفس الوقت، كاللون الأخضر والأزرق. تمنح هذه الألوان الجميلة نوعا من الإيجابية وتعطي صورة عن المؤسسة أنها صلبة، قوية وجديرة بالثقة. المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة). هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية: الشّعارات أو التّصاميم الجرافيكية الخاصّة بالمؤسّسات التّعليمية، شركات التّأمين والمستشفيات أيضا تتبنّى ذات القاعدة. الفنادق، المنتجعات ومنشآت الضيافة الأخرى عند قيّامك بتصاميم تخص الفنادق والمنتجعات ركز على الشعور بالراحة، الاسترخاء والضيافة واختر الألوان الترابية والطبيعية. اللون البني، الأخضر والأزرق هي من أكثر الألوان التي توحي بالاسترخاء والهدوء، تجنب الألوان الصّارخة كما بإمكانك استخدام الألوان الأحادية monochromatic colors. لكن حاول أن تستخدم الألوان بحد أدنى. الأسود، الأبيض، الفضي والذهبي هي الأخرى اختيارات رائعة لتصاميم الفنادق والمنتجعات، خاصة إذا كانت من تصنيف خمس نجوم وكانوا يرغبون في الاستفادة من الترف والرقي. الخلاصة تعتبر الألوان طريقة جيدة لجذب انتباه المشاهدين، إلا أن استخدام الكثير منها سيصرف القرّاء، لذلك حاول التقليل قدر الإمكان من استخدامها واكتف فقط باستخدام من 2-4 ألوان. عمليّة مزج وتركيب الألوان ليست مجرّد عملية تتم حسب مزاج المصمم، وإنما تتم من خلال البحث والدراسة المتأنية، وكذلك من خلال معرفة أساسيات عجلة الألوان والتركيب، كلّ ذلك سيمكنك من إنشاء الآلاف من تركيبات الألوان الرّائعة والمبهرة. ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman. حقوق الصورة البارزة: Designed by Freepik.

في حالة كنت عالقًا في كهف طيلة السنوات القليلة الماضية، دعني أخبرك هذه الأخبار الرائعة: التصاميم المسطحة (Flat Design) للمواقع هي الرائجة الآن. علينا الآن أن نودع تلك التصاميم التقليدية التي سيطرت عليها الفراشي، وتدرجات الألوان، والظلال، وكل تلك الأنواع من التصاميم. أكرر، البساطة هي التوجه الجديد. إن التوجه للتصميم المسطح هو ظهور نمط من التصميم يستخدم الأشكال المسطحة والأيقونات. وبالأساس يتمحور حول استخدام المستطيلات، والدوائر، والمثلثات وأشكال أخرى مع غياب عناصر التصميم الأخرى كالظلال، والحدود والتدرجات اللونية. لقد أصبحت معروفة بفضل مايكروسوفت التي أدخلتها ضمن أنظمة حواسيبها، خاصة نظام التشغيل الجديد ويندوز 8. بساطة المواقع مسطحة التصميم إنها حالة التصميم التي تتجنب استخدام التعقيدات. فالتصميم المسطح البسيط يبتعد عن استخدام الظلال، والحدود وعناصر التصميم الأخرى. السبب وراء ذلك هو أن الناس الآن يقدرون الأنماط البسيطة والسهلة التمييز. ومع ظهور تصفح الهاتف، حيث مساحة الشاشة محدودة، فإن استخدام الصور البسيطة سوف يضاعف استخدام البكسلات على الشاشة. النمط المصغر أيضًا يُطبّق حين يركز المصممون على التباعد بين الأيقونات، والصور والعناصر في صفحة الويب أو التطبيق. زد على ذلك، فإن الصور البسيطة والمسطحة يتم تحميلها أسرع من تلك في التصميمات المعقدة لأن المتصفح لن يحمل عناصر التصميم مجتمعة مع الصورة الرئيسية. في الوقت نفسه، فإن أسس قابلية القراءة تتحقق جميعها في النمط المصغر. ومع مزيد من "المسافات البيضاء" (أو المساحات الفارغة) فإن النص سيكون أكثر وضوحًا. ومع غياب الظلال، والحدود والتدرجات اللونية سيحقق القراءة السهلة للنص المضمّن في الصفحة. فيس بوك هي أول من تبنّى هذا التصميم. قبل سنوات غيرت فيس بوك مخططات تصميمها بشكل واضح، بحيث أتاحت للمستخدمين رؤية أيقونات بسيطة، وتصميمات أكثر راحة للعين. جوجل أيضًا اقتفت نفس الأثر بتغيير أيقوناتها إلى أخرى مسطحة بسيطة وزاهية الألوان. إنها الحقيقة، فتوجه التصميم المسطح غزا بتدريج وثقة مواقعنا، وتطبيقاتنا وحواسيبنا. وقريبًا جدًّا سوف يحكمنا تمامًا. وقبل أن يحدث ذلك فلنتعرّف على فلسفة التصميم البسيط. سوف نتكلم عن عناصر التصميم وكيفية توظيفها للاستفادة الكاملة من مساحة الشاشة. في الحقيقة هناك خمسة عناصر يتصف بها التصميم المسطح: غياب العمق استخدام العناصر البسيطة الطباعة اللون البساطة لقد انتهى العمق في التصميم لم يعد للعمق وجود الآن. اتجاه جديد للتصميم بات يحكم الجميع. فعلى عكس اتجاهات التصميم السابقة حيث لم نتمكن من العيش دون الظلال الساقطة، والحدود، والبروزات والتدرجات اللونية، يركز نمط التصميم المسطح الجديد بشكل أكبر على مخطط بسيط ثنائي الأبعاد. تتناقض فلسفة التصميم المسطح تمامًا مع التصميم الانسيابي، حيث يتم إعداد الصور لمحاكاة شكل، أو لون أو كائن حقيقي. وعادةً ما تحتوي مواقع الويب والتطبيقات انسيابية التصميم بطبيعة الحال على صور خلفية واقعية في الطبيعة. هذه المواقع تستخدم البنيات والأنماط الموجودة في العالم الواقعي. مثال جيد على هذا النوع من التصميم هو تصميم iOS6 (والإصدارات السابقة من iOS). فمن المفترض أن يكون كل تصميم تقليدًا للكائن الحقيقي. استخدام الصور ثلاثية الأبعاد المنشأة بوساطة الحاسوب، واستخدام التدرجات، والأنسجة، والحدود، والبروزات، والزخارف لجعل الصورة تبدو وكأنها حقيقية. يشبه تطبيق newsstand كشك بيع صحف حقيقي مصنوع من الخشب. على النقيض، تتم إزالة هذه العناصر في التصميم المسطح. ويزيل مخطط التصميم المسطح تلك العناصر ثلاثية الأبعاد. ويسقط العمق. ويزيل كل تلك الظلال والتدرجات والحدود الخارجية! ستبقى البساطة عنوان الجمال بإزالة العمق في التصميمات، من الطبيعي أن تصبح الصور، والأيقونات وعناصر التصميم الأخرى بسيطة بصريًا. تصنع الأيقونات الآن حتى تكون مسطحة وتستخدم أشكالًا هندسية أساسية مثل الدوائر، والمربعات، والمستطيلات. وهذا سيعطي واجهة مستخدم رسومية بسيطة وسهلة الاستخدام. لن يشعر الشخص العادي بعد الآن بالحاجة إلى دليل استخدام لأن الكائنات المرئية تقدم نفسها أثناء استخدامها. عندما ترى أيقونة " الحرف f" موضوعًا في مربع أزرق، ستعرف بسهولة أنها فيسبوك. عندما ترى رمز الترس، فسيخبرك بسهولة أنها قائمة إعدادات. التصميم المسطح يعمل هكذا. عندما ترى شكل قرص مرن، ستعلم تلقائيًا أنها أيقونة الحفظ. أو عندما ترى حرف M أصفرًا كبيرًا على خلفية حمراء، فسيتجه تفكيرك دائمًا نحو McDonald. انظر، كلما أصبح الشعار أكثر بساطة، كلما كان إدراك الأشياء أفضل. ما تراه هو ما تحصل عليه في الأساس. الطباعة، كما أخبرتكم سابقًا للطباعة مكانتها في التصاميم المسطحة. فهي تضيف نسقًا حتى مع النصوص وتمنحك واجهة سهلة القراءة. لا مزيد من تنسيق الخطوط. استخدم خطوطًا واضحة مع رسائل أقصر متناسقة مع الألوان والأشكال. لمزيد من المعلومات حول هذا، اقرأ برنامجنا التعليمي حول الطباعة. الألوان كما ذُكر سابقًا أن اللون مهم. فبإمكانه تكوين صفحتك أو تدميرها. إنه يحدد بشكل أساسي الشعور الكامل بموقعك أو صفحتك. في مبدأ التصميم المسطح، يُنصح باستخدام ألوان الحلوى قليلة الإشباع لأنها تميل إلى إضافة جمالية إلى صفحتك دون أن تجهد عيون القارئ بسبب كثرة السطوع. فتجذب ألوان الحلوى قليلة الإشباع العين بشكل أفضل لأنها جذابة، ويمكن تكاملها وتباينها بسهولة مع الألوان الأخرى. تذكر فقط أن الألوان موجودة في كل مكان؛ فلا تجعل الناس يشعرون بالملل باختيارك ألوانًا غير مناسبة. التدرجات اللونية أيضًا لم تعد جميلة. تجنب استخدام الأصفر الفاتح، الفسفوري، والأحمر الساطع والبرتقالي الساطع. لا تجعل زوار موقعك ساخطين. فن البساطة (كلما نقصت التفاصيل، ازداد الجمال) البساطة هي فن إزالة التشويش من صفحتك أو شاشتك. نشأ هذا المبدأ من مجلات الوسائط المطبوعة حيث تكون المساحات البيضاء أكثر وضوحًا من النص نفسه. أي أنها تعطي مساحة للحشو أو متنفسًا لنصوصك وطباعة سليمة. اترك الكثير من المساحات الفارغة. تخلص من العناصر غير الضرورية واحصل على إعجاب الناس. البساطة جميلة. التصميم المسطح يمكن أن يكون بسيطًا كما يبدو، لكن الإبداع يظل كل شيء. فعند التفكير في احتمالية استخدام هذا التصميم، تذكر أن تصفي ذهنك. فكر في التصميمات الأحدث والأكثر أناقة. هذا النمط من التصميم سيبقى أنيقًا، لكنّ عمل أجزاء منه لن يجعله محبّذًا. كن مبدعًا. حاول وجرب. شاهد المواقع الجذابة. جرب أن تصنع تصميمك الخاص، ارتكب الأخطاء، صححها وكن فنانًا أفضل! اعلم أنك تعرف كيف تكون بسيطًا. فلنكن جميعًا بسطاء. ترجمة -وبتصرف- للمقال Getting Started With Flat Web Design

دائمًا ما هنالك خطوة واحدة تود من زوار الموقع الخاص بك اتخاذها بنظرك تكون هي الخطوة الأهم. قد تكون متعلقة بزر الاشتراك للموقع الخاص بك، أو زر المتابعة أو حتى زر الشراء. بغض النظر عن الوظيفة المرجوة من ذلك الزر، تذكر دائمًا أن نقر زوار الموقع على الزر أو عدمه يعتمد على طبيعة الشعور الذي يحظون به أثناء تواجدهم على موقعك. للاستزادة ربما تود القراءة عن إدراك الألوان، وعلم نفس الألوان، أو المزيد عن كيف تحفز المجموعات اللونية إدراك الإنسان. 1. موقع Pinterest زاخر بالكثير من اللون الأحمر بلا شك، يعد اللون الأحمر اللون الأكثر حرارة. إذا تفقدت المجموعة اللونية الخاصة بموقع Pinterest ستلاحظ على الفور أن اللون الأحمر هو اللون الأساسي. يرتبط اللون الأحمر عادةً بالحب، وهو لونٌ ديناميكيٌ وقوي، هذا يضعك في جوٍ عالٍ من الحماس بخصوص أي شيء يتمركز حول هذا اللون. غالبًا ما يُرى اللون الأحمر في عروض التصفيات والمبيعات، حيث تضفي شدته شعورًا ملحًا على من يرى العروض بضرورة إلزامية الشراء. على الرغم من أن هذا اللون الحاد يمكن أن يترك انطباعًا حماسيًا ومشجعًا للزوار، كن حذرًا دائمًا. الكثير من اللون الأحمر يمكن أن يُقصيهم تمامًا عن نطاق رد الفعل المطلوب. يمكنك استخدام اللون الأحمر في نظام الألوان الخاص بك للتركيز على تصميم الويب خاصتك. امزجه في خليطٍ لونيٍ من اللون الأبيض أو الرمادي أو الأزرق الفاتح أو الفضي. مثال رائع لاستخدام اللون الأحمر في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأحمر 10 أشياء مرتبطة باللون الأحمر الدم الحرب النار الرجولة الشغف الإغراء الغضب القوة الطاقة الشجاعة إحداثيات اللون الأحمر حسب نظام الألوان Hex Triplet: ‏FF0000‏# RGB: ‏(0, 0, 225) 2. موقع Amazon يحتفل بقوة اللون البرتقالي اللون البرتقالي لونٌ حار، لكن ليس بحدة اللون الأحمر فهو يوحي بالدفء أكثر من الحرارة. هذا اللون النابض بالحياة والمليء بالحيوية، يحفز الناس على فعل الشيء بدلًا من دفعهم أو إجبارهم عليه بصورة عاجلة. يعد اللون البرتقالي عدوانيًا أحيانًا في الطريقة التي يشجع بها إلى اتخاذ إجراءٍ مثل الشراء أو الاشتراك أو البيع أو المتابعة. يُوصى باستخدام اللون البرتقالي إذا كنت ترغب في ترك شعورٍ بالتحفيز والبهجة والإبداع والحماس الكامل للأشخاص بعد زيارتهم للموقع. كيف ينبغي عليك استخدام اللون البرتقالي أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون البرتقالي 10 أشياء مرتبطة باللون البرتقالي التفاؤل العزم الحريق التخذير الخريف الأديان قوة الاحتمال التعاطف موسم الهالوين الحياة إحداثيات اللون البرتقالي حسب نظام الألوان Hex Triplet: ‏FF7F00‏# RGB: ‏(0, 127, 225) 3. اللون الأزرق في موقع Facebook يُشعرنا بالأمان ستجد العديد من المواقع التجارية والشركات تستخدم درجات اللون الأزرق. هذا اللون يجعلنا نفكر في شيءٍ مُحكمٍ وآمنٍ ومُعتمد ومليءٍ بالخبرة. لذلك، ليس من المفاجئ أن كل مشروعٍ تجاريٍ يهتم بشعور العملاء على المدى البعيد يفضل استخدام اللون الأزرق. يخلق اللون الأزرق شعورًا مُخالفًا تمامًا عن اللون الأحمر، فالأزرق يوحي بالهدوء ومن هنا فلا يجب أن تقلق بشأن استخدامه أكثر من اللازم. يمكنك نثر اللون الأزرق كيفما تشاء في تصميم الويب خاصتك. كيف ينبغي عليك استخدام اللون الأزرق أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأزرق 10 أشياء مرتبطة باللون الأزرق الصدق الصداقة السحر الأولاد الجليد النبل الشتاء الشرطة السماء الحياة إحداثيات اللون الأزرق حسب نظام الألوان Hex Triplet: ‏#0000FF RGB: ‏(255, 0, 0) 4. اللون الأخضر في موقع Groupon يضفي صفة القوة الجماعية تشعر بالتفاؤل الآن؟ لنخمّن -كنت تنظر إلى شيءٍ أخضر؟ ربما كنت تنظر إلى نباتٍ أخضر، بما أنك تشعر بالهدوء والتفاؤل. أي شخصٍ مرتبطٍ بالحياة الخضراء أو أي أنشطةٍ بيئيةٍ من المرجح أن يستخدم اللون الأخضر على الأقل في بعض الأجزاء خلال مرحلة التصميم. ألقِ نظرة على ورقة 100$. إنها خضراء! مواقع أخرى مثل Groupon تتبنى اللون الأخضر في علامتها التجارية، كونها تتعامل مباشرةً مع المال. اللون الأخضر منعشٌ ومريحٌ للغاية، هذا يولّد شعورًا بالتوازن والإلهام. ويعكس التوازن والانسجام في التصميم. استخدام رائع للون الأخضر في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأخضر 10 أشياء مرتبطة باللون الأخضر المال الطمع النمو الحسد الطبيعة الربيع الصحة الشباب العشب الأمل إحداثيات اللون الأخضر حسب نظام الألوان Hex Triplet: ‏#00FF00 RGB: ‏(0, 255, 0) 5. موقع Yahoo ينثر الكثير من اللون الأرجواني في شعاره غالبًا ما يوصف اللون الأرجواني بكلماتٍ مثل الخيال والإبداع والوقار والنبل والوفرة. ترتبط درجات الظلال الأرجوانية بالربيع والعاطفة القوية، في حين ترتبط الدرجات الداكنة بالرفاهية والثراء. يستخدم اللون الأرجواني بتنوعٍ في الجمال والموضة ومنتجات الملابس، لما له من تأثيرٍ كبيرٍ في إضفاء الهدوء والسكينة أكثر من أي لون آخر. كما ويعد لونٌ أنثويٌ وعاطفيٌ أكثر من كونه لونٌ ذكوري. عند النظر إلى أي شيءٍ أرجوانيٍ، يشعر الكثيرين بأنه يبدو مصطنعًا، نظرًا لندرة وجوده في الطبيعة. تمامًا مثل اللون الأحمر، يضيف اللون الأرجواني تأثيرٌ قويٌ لا يُقاوم ويشكل بعض الضغط على الأشخاص لاتخاذ ردة فعل. لذا سيكون من الحكيم الجمع بين اللون الأرجواني وأي لونٍ آخر مثل الأسود والأبيض. استخدام رائع للون الأرجواني في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأرجواني 10 أشياء مرتبطة باللون الأرجواني الثروة الملكية النبل الأناقة العاطفة الاصطناع الغرابة الروحانية الترف الأنوثة إحداثيات اللون الأرجواني حسب نظام الألوان Hex Triplet: ‏#800080 RGB: ‏(128, 0, 128) 6. استخدام عبقري للألوان المحايدة في موقع 1WD's عادةً ما تستخدم الألوان المحايدة مثل الأبيض والأسود والرماديات الفاتحة والداكنة كخلفيات في التصاميم مع إضافة ألوان أكثر قوةٍ وسطوع. ألقِ نظرةً على موقع 1stwebdesigner – 1WD. هناك استُخدم القليل من اللون البرتقالي كونه لون قوي وساطع -لكن فقط في مزيجٍ جيدٍ مع الرمادي الداكن والفاتح. والأبيض بالتأكيد (ما هو لون الخلفية في الموقع؟) تمامًا كحقيقة أن العصافير دومًا ستطير، فاللون الأسود يعبر دومًا عن الحداثة والقوة والأناقة. في حين أن اللون الرمادي هو لونٌ محايد، يعبر عن أشياء هادئةٍ وغير مرئيةٍ مثل الظلال. إذا كان اللون الرمادي يبدو متّسخًا في بعض الأحيان، فعلى العكس سيولد اللون الأبيض تأثيرًا مُعاكسًا. يعبر اللون الأبيض عن الرحابة والانفتاح والبساطة. استخدام رائع للون الأبيض في تصميم الويب أتحدى أن تكون على علمٍ بهذا مجموعة لونية جذابة بإضافة اللون الأرجواني 10 أشياء مرتبطة بالألوان المحايدة القوة الأناقة الفراغ النعومة الجنة السلام البراءة التشاؤم الكآبة الملل إحداثيات اللون الأرجواني حسب نظام الألوان اللون الأسود: Hex Triplet: ‏#000000 RGB: ‏(0, 0, 0) اللون الرمادي: Hex Triplet: ‏#808080 RGB: ‏(128, 128, 128) اللون الأبيض: Hex Triplet: ‏FFFFFF# RGB: ‏(255, 255, 255) والآن، ما هو لونك المفضل؟ ما الشعور الذي يمنحك إياه لونك المفضل؟ تطرقنا للحديث عن أكثر 5 ألوان شيوعًا. الآن حان دورك لتختبر تأثير الألوان على الحسّ الإنساني وكيف يمكن دمجها في مجموعات لونية مؤثرة في صفحات الويب التي تقوم بتصميمها. ترجمة وبتصرف للمقال Choosing the Best Color Scheme for the Websites You Design لصاحبه Editorial Team

قد يتحول التصميم الطباعي إلى حقل للألغام بالنسبة للمبتدئين، فهناك العديد من اﻷخطاء البسيطة التي يقعون فيها والتي تؤثر وبشكل كبير على جودة الطباعة النهائية، ومع كون الطباعة عملية مكلفةً جداً، فإن الوقوع في مثل هذه اﻷخطاء سيسبب خسارة كبيرة في بعض الأحيان. نأمل أن توفر لك معرفة هذه اﻷخطاء المعلومات الكافية لتحضير التصاميم بالصورة الصحيحة لعملية الطباعة. اعرف الفرق بين RGB و CMYK غالبًا ما يقع المبتدؤون في فخ عدم التمييز بين نظامي اﻷلوان RGB و CMYK، فنظام RGB (أحمر، أخضر وأزرق) نظام ألوان جمعي additive يستخدم فيه الضوء لمزج اﻷلوان، وكلما أُضيف ضوء أكثر كان اللون الناتج أكثر إشراقا وحيوية. يُستخدم هذا النّظام في التّصاميم الرقمية التي تعرض على الشاشة فقط، وذلك ﻷن الشاشات تستخدم هذا النظام في العرض، إلا أن المشكلة تظهر عند تصميم عمل فني طباعي باستخدام أدوات تعمل على هذا النظام. أما نظام CMYK (السماوي، الأرجواني، اﻷصفر واﻷسود (المفتاح)) فهو نظام ألوان طرحي subtractive، حيث تمزج اﻷحبار ﻹنتاج درجات اﻷلوان المختلفة بصورة تشبه كثيرًا مزج الرَّسام للألوان، وكلما زادت كمّية الحبر الممزوجة كان اللون الناتج غامقًا أكثر. ونظراً لكون طيف اﻷلوان الناتج عن الضوء أوسع بكثير من الطيف الناتج عن اﻷحبار، فإن برامج التّصميم تحتوي على نمط CMYK خاص لتحديد سلسلة اﻷلوان (gamut) التي يمكن الاستفادة منها في التصميمات التي ستذهب إلى الطباعة. قد يؤدّي اعتماد نظام RGB بدلاً من CMYK إلى اختيار ألوان تبدو جميلة على الشّاشة ولكن لا يمكن طباعتها على الورق (دون استخدام أحبار خاصّة)، لذا ﻻ تفاجأ إذا وصلتك المطبوعة بألوان باهتة. راقب قيم ألوان CMYK تصبح اﻷلوان في نظام CMYK أغمق كلما زادت كمية الحبر، وتتم عملية إضافة اﻷلوان باستخدام مطبعة اﻷوفست offset (أو طابعة رقمية للكميات الصّغيرة)، حيث توضع طبقات من اﻷحبار اﻷربعة السماوي، الأرجواني، الأصفر واﻷسود على نفس المساحة في الورقة وذلك ﻹكساءها بالحبر وإنتاج مدى أوسع من اﻷلوان، وتحدد الشبكة النقطية Halftone Screen كمية الحبر المستخدمة خلال الطّباعة. أما في برامج التّصميم فإن عمليّة اختيار اﻷلوان سهلة وبسيطة، إذ يمكن الاستفادة من أداة اختيار اﻷلوان Color Picker أو اختيار اﻷلوان من لوحات اﻷلوان الجاهزة Swatches أو إدخال قيم C, M, Y و K يدويًّا. يجب الانتباه كذلك إلى أن اﻷلوان النّاتجة من نسب عالية من ألوان الطباعة اﻷربعة ستصبح مشبعة جدّا، وإذا تجاوز مجموع هذه النّسب 280% فإنّ اﻷلوان ستصبح داكنة وبشعة، وقد تحدث حالة نقع الحبر set-off (عندما يبقى الحبر رطباً فينتقل من ورقة إلى أخرى)، كذلك قد تظهر ألوان التّصميم جيدةً على شاشة الحاسوب، لكنها ستبدو في الطّباعة أغمق من ألوان التّصميم اﻷصليّة. قد يؤدّي استخدام مزيج من أحبار مختلفة إلى احتماليّة جعل المطبوعة ضبابيّة، ويظهر هذا التّأثير جليًّا في النّصوص، إذ أن ألواح اﻷلوان الأربعة لا تكون متطابقة عند وضعها فوق بعضها البعض (فيما يعرف بالمطابقة Registration) والنتيجة هي نصّ ضبابيّ تصعب قراءته. يمكن تجنّب هذه الحالة باستخدام لون واحد فقط، واعتماد القيمة 100% K (اﻷسود) ستعطي نصًّا أسودا ذا حواف حادّة وواضحة. لا تستخدم اللون اﻷسود الخاص بالفوتوشوب افتح برنامج الفوتوشوب واضغط على المفتاح D في لوحة المفاتيح لإعادة تعيين اللّونين الخلفيّ واﻷماميّ إلى القيم الافتراضيّة. اختر اللّون اﻷسود الذي سيُنتجه البرنامج، إنّه أسود أليس كذلك؟ انظر اﻵن إلى قيم CMYK التي تكوِّن هذا اللون، ستجد أنّه مؤلّف من 75% سماويّ، 68% أرجوانيّ، 67% أصفر و 90% أسود (المجموع 300%) وهذه كمّيّة كبيرة جداً من الحبر ستوضع على الورق، لذا تعوّد على اختيار اللّون اﻷسود يدويًّا. يمكن اختيار النّسب 0,0,0,100 للنّصوص ذات الحواف الحادّة واللّون اﻷسود، ولكنّ هذه القيم لن تعطي نتيجة جيّدة إذا ما استُخدمت في تلوين المساحات الكبيرة، إذ سيبدو اللّون رماديًّا داكنًا، لذا يمكن استخدام ما يسمّى بـ (اﻷسود الغني Rich Black) وهناك الكثير من النّسب المقترحة لهذا اللّون ولكن اﻷكثر شيوعًا هي 50,40,40,100. تعمل اﻷلوان اﻹضافيّة على جعل اللّون اﻷسود غامقًا بما فيه الكفاية مع مراعاة عدم تجاوز مجموع النسب لـ 280%. انتبه إلى أوزان الخطوط تؤدّي الشبكات النّقطية وظيفتها بصورة رائعة وذلك من خلال السّيطرة على كمّية الحبر التي ستوضع على الورق، ويتم ذلك عن طريق استخدام عدد أقل من النّقاط الصّغيرة في المساحات التي لا تحتاج إلى تغطية كثيرة. ولكنّ المشكلة هنا هي فقدان التفاصيل وخاصّةً عندما تكون النّصوص صغيرة أو ناعمة؛ لذا - وبحكم التجربة - فإنّ الحدّ اﻷدنى لوزن الخط هو 6 نقاط وهذا الحد يتغير بتغير نوع الخط، فعلى سبيل المثال سيختفي خطّ Helvetica Ultra-Light في أوزان أعلى من هذا الحد نظرًا لنعومته الفائقة، لذا يجب الانتباه إلى هذا اﻷمر عند إعداد المطبوعات ذات المقاسات الصغيرة. استخدم الدقة الصحيحة تؤثر الدقة في الحاسوب على مقاس الصورة في الشاشة فقط، أما في الطباعة فتحدد الدقة مدى الوضوح الذي ستظهر عليه التصاميم. يُعدّ المقدار 72ppi (نقطة في البوصة) مثالياً لصور اﻹنترنت، أما للطباعة فإن المقدار القياسي هو 300ppi، وكلما زادت النقاط أو البكسلات التي يمكن وضعها في كل بوصة، زادت كمية التفاصيل التي يمكن المحافظة عليها بعد إعادة إنتاج الصورة بواسطة الأحبار. يجب التأكد دائمًا أن دقة التصميم هي 300ppi، ولو حاولت وضع صورة ذات دقة 72ppi في ملف دقته 300ppi ستلاحظ أنها أصبحت صغيرة جدًّا وذلك ﻷن البرنامج سيقوم بإعادة تحجيمها لتلائم الدقة الجديدة، لذا ستحتاج إلى صور ذات أحجام كبيرة جدّا عند التّعامل مع الملفات بدقة 300ppi، وستصبح صور الإنترنت العشوائيّة عديمة الفائدة. يجب الانتباه كذلك إلى أنّه ليس باﻹمكان زيادة الدقة لملف ذي دقة متدنّية، لذا تأكد من استخدام الدقة الصحيحة قبل الشروع بالتصميم لتتجنب إعادة العمل من جديد. ﻻ تنس التسييل Bleed ليست الدقة وحدها عاملًا مهما في التصميم الطباعي، فعليك أن تتذكر التسييل كذلك. يُعرف التسييل بأنه المسافة الزائدة حول حوافّالتّصميم والتي تمتدّعبرها عناصر الخلفيّة القريبة من تلك الحواف، ما يمنع ظهور حواف بيضاء في المطبوعة إذا ما حصل أي خطأ طفيف في عمليّة قص الورق. وتختلف مسافة التّسييل من مطبعة إلى أخرى ومن مشروع إلى آخر، لذا ﻻ تتردّد في الاتّصال بالمطبعة الّتي ستتعامل معها لمعرفة كافّة التّفاصيل. راجع التصميم وصحح اﻷخطاء على الرغم من مراجعة هذه المقالة وتصحيح اﻷخطاء فيها، إلا أنها قد تحتوي على بعض اﻷخطاء، وعملية تصحيح اﻷخطاء سهلة على اﻹنترنت، ولكن تخيل ما ستشعر به عند استلامك لخمسة آلاف نسخة من مطبوعتك لتجد فيها خطأً فادحا يتكرر في كل نسخة منها. ليس باﻹمكان تصحيح اﻷخطاء بعد الطباعة، لذا خذ الوقت الكافي لمراجعة التصميم، راجع المسافات بين الحروف والكلمات، اﻷقواس، الفواصل والنقاط، صحح اﻷخطاء اﻹملائية والنحوية قدر اﻹمكان، ولا تعتمد تمامًا على المصححات اللغوية اﻵلية، إذ قد تفوتها بعض اﻷخطاء، وبالمناسبة الصورة أعلاه ليست حقيقية. ترجمة ـوبتصرّفـ للمقال 7Beginner Mistakes to Avoid When Designing for Print لصاحبه Chris Spooner. حقوق الصورة البارزة: Designed by Freepik.

اليوم سأتحدّث قليلاً عن عملية استخدام الطباعة الفوقية Overprint بطرق إبداعية في مشاريع التصاميم المخصّصة للطباعة. اقرأ واكتشف ماذا تعني الطباعة الفوقية Overprint وكيف يمكنك استخدام هذه التقنية لإنتاج تأثيرات التداخلات اللونية في طباعتك. ما هي الطباعة الفوقية Overprint؟ كلّما أنتجتَ تصميماً للطباعة فإنّ البرمجة الافتراضية لتصميمك ستجعل العناصر تلقائياً متنافرة وتطبع كلاً منها على حدة بلون محدد منفصل عن الآخر وإن لم تكن الطابعة بالمستوى المطلوب فهذا سيسبب خللاً كبيراً بدقة وروعة التصميم. ولكنها إن تفعل ذلك فإنّ كلّ ألوان تصميمك ستُطبَع فوق بعضها البعض بنفس الأسلوب الذي صممت فيه مشروعك أي كاللون الأسود للخط فوق اللون الأزرق للسماء والنتيجة ستكون فوضى موحلة. إلَّا أننا نستطيع استخدام عملية الطباعة الفوقية لكل لون مباشرة فوق لون آخر لأغراض محددة. إحدى أغراض الطباعة الفوقية هي إزالة أي احتمالات للظلال "Ghosting". هذا قد يحدث عندما تكون لوحات الطابعة منحرفة قليلاً وتتسبب بظهور حدود رقيقة حول النص والذي يجعله يخرج من ألوان الخلفية أو الصورة. وبدلاً من جعل الطابعة تقوم بتخريم شكل النص من كل فواصله (طباعة النص بشكل منفصل عما حوله) يمكنك تعيين الإعدادات إلى الطباعة الفوقية وذلك للطباعة مباشرة فوق قمة باقي الألوان. الطباعة الفوقية أيضاً تقنية قوية عندما تعمل على الطباعة بألوان محدودة وقليلة. بإمكانك مزج لونين لإنتاج لون ثالث والذي سيوفر لك فرصاً رائعة لإنشاء عمل فني متداخل رائع. Overprint ضد Multiply (أو Darken)الطباعة الفوقية Overprint هي خاصية في ملف طباعتك للمزج بواسطة الحبر في حين أنّ Multiply وDarken هي وسائط الشفافية في برمجة تصميمك والتي تحاكي تأثير الطباعة الفوقية. الفرق الرئيسي بين هذه الخصائص الثلاث هو أن تأثير الطباعة الفوقية لن يظهر ما لم تُفعّل Overprint Preview في مستندك لأنها قبل كل شيء هي من المفترض أن تكون ميزة ما قبل الطباعة بدلاً من ميزة تصميم. إذا قمت بمداخلة المربع الأرجواني فوق المربع السماوي ووضعته في وضعية Overprint، Multiply أو Darken فإنّك سترى النتيجة ذاتها. إنّ برنامج الإليستريتورIllustrator وبرنامج إن ديزاين InDesign يستخدم نفس القواعد في إعدادات الطباعة الفوقية التي تُصدّر تلك التأثيرات لملف الطباعة ما يعني أن العناصر لن يتم فصلها. مع ذلك ضع في بالك أن هناك اختلافاً بين الوضعيات الثلاثة. بدّل كل المربعات الأرجوانية إلى زرقاء ثم خفف نسبة التعبئة إلى 50%. إنّ نتائج Overprint وDarken ما تزال متطابقة ولكن إصدار Multiply لديه منطقة تداخل داكنة. خفف قيمة التعبئة في مربعات التداخل إلى 25% وستصبح الأمور أكثر تشويشاً. إنّ أمثلة Overprint وDarken مختلفة تماماً الآن. يمكننا دائماً التحقق من عملية فصل العناصر أو الطباعة الفوقية لها في برنامج Adobe Acrobat بواسطة أداة Output Preview للتأكد من أنّ العناصر لم يتم فصلها. هذه الميزة تؤكد أن Multiply وDarken منسوخة بنفس الطريقة مثل Overprint. وإذا أردت استخدام تأثير الطباعة الفوقية فأنا أفضّل أن تقوم بهذه العملية بشكل صحيح حتى لا تتعرض للنقد من قبل بعض المزعجين اللذين لا تعجبهم هذه الأساليب من المزج. كيف تصنع تأثير الطباعة الفوقية لقد شاهدتَ للتو كيف يمكن للطباعة الفوقية أن تمزج بين لونين وتصنع لوناً ثالثاً. هذه التقنية يمكن أن تُستخدم لإنشاء تأثيرات طباعة رائعة حيث يتم دمج عملين فنّيين معاً. وهي مفيدة بشكل خاص عندما تعمل بخيارات محدودة من ألوان بانتون Pantone colours. ستجد خَيَار وضع العناصر في وضعية الطباعة الفوقية في لوحة السِمات Attributes panel. لا تنسى أن تفعّل Overprint Preview من قائمة View لتحاكي التأثير وإلا فإنّك لن تلاحظ أي تغيير يحصل فعلياً. المشاكل المحتملة ستظهر عندما تصدّر عملك الفني إلى الطباعة. ستجد افتراضياً في خيارات Print to PDF أو Postscript أنها موضوعة على "Preserve" في إعدادات Overprint ولكنك لن ترى التأثير فعلياً عند النظر إلى ملف PDF. في الإعدادات المتقدمة Advanced options لإعدادات الطباعة بدّل خَيَار Overprint وTransparency Flattener إلى "Simulate" لتسمح لملف PDF ليريك كامل تأثير الطباعة الفوقية. بدلاً من ذلك يمكنك أن ترى تأثيرات الطباعة الفوقية مع وضع "Preserve" عندما يكون خَيَار Simulate Overprinting مفعّلاً في أداة Output Preview وذلك في Acrobat. المطلوب هو أن تفعّل محاكاة الطباعة الفوقية في التصميم وستكون مرحلة ما قبل الطباعة مجازفة عندما يتعلق الأمر بحصولك على فنّك الاحترافي المطبوع، لذلك يجب أن تكون متأكداً من توصيل رغباتك إلى شركة الطباعة التي تتعامل معها. كما شاهدنا فإنّ طرق المزج Multiply و Darken تستطيع أن تحاكي تأثير الطباعة الفوقية وبالتالي سَتُزَوّر التأثير بسهولة في رسوميات مواقع الإنترنت أو الطباعة الرقمية الأساسية. ترجمة -وبتصرّف- للمقال: How to Overprint Colors to Create Cool Print Effects لصاحبه Chris Spooner.

تلقى لوحات الألوان المائية رواجًا كبيرًا بحيث يمكنك أن تضعها ضمن مجموعة تصاميمك، إلا أنك لن تحتاج لأن تكون فنانًا متمكنًا من الرسم بالألوان المائية لصنع مثل هذه اللوحات إذ إن برنامج الفوتوشوب يمكنه إنتاج تأثيرات لوحات ألوان مائية مثالية باستخدام مجموعة من المرشحات (الفلاتر) الموجودة أصلًا في البرنامج. في درس اليوم سآخذك عبر مجموعة من الإعدادات لتحويل أي صورة إلى لوحة رسم بالألوان المائية. التأثير الذي سنصنعه في هذا الدرس سيحاكي جماليات اللوحة المرسومة باليد باستخدام الألوان المائية. هناك مجموعة من المرشحات في الفوتوشوب تقوم بإنتاج أساس هذا التأثير ثم سنضيف خامة الورق مع مجموعة من الفراشي لإضافة مستوى إضافي من الواقعية بغية الحصول على تأثير أكثر إقناعًا. افتح الصورة التي اخترتَ العمل عليها في برنامج أدوبي فوتوشوب. أنا استخدمتُ صورة جسر البوابة الذهبية لباتريك تاماسو من موقع Unspalsh.com. انقر بالزر الأيمن على طبقة الخلفية واختر Convert to Smart Object لتحويلها إلى عنصر ذكي. انقر على قائمة المرشحات Filter ثم اختر Filter Gallery. افتح مجموعة مرشحات Artistic واختر Dry Brush ثم غيّر إعداداتها إلى التالي: Brush Size إلى 10 و Brush Detail إلى الخامة ا1. ثم انقر على OK لتطبيق التأثير. اختر خيار Filter Gallery مرة أخرى ولكن تأكّد من أنك لم تختر الخيار في الأعلى الذي سيعيد تنفيذ الفلتر الأخير المطبّق بدون ضبط أية إعدادات بل يجب اختيار الخيار الأساسي الذي سيمنحنا القدرة على ضبط إعدادات جديدة بأنفسنا. هذه المرة اختر Cutout واضبط الإعدادات بحيث يكون Number of Levels عند 5 وEdge Simplicity عند 4 وEdge Fidelity عند 1. في لوحة الطبقات، انقر نقرًا مزدوجًا على سطر فلتر Filter Gallery الموجود في الأعلى وغيّر خصائص المزج إلى Pin Light. انقر على قائمة Filter ثم اذهب إلى Blur > Smart Blur. أدخل الإعدادات 5 لنصف القطر Radius و100 كقيمة لـ Threshold وعدّل الدقة Quality إلى High. انقر نقرًا مزدوجًا على أيقونة الإعدادات ثم غيّر خصائص المزج لتأثير Smart Blur إلى Screen ثم خفّف التعتيم Opacity إلى 50%. اذهب إلى القائمة Filter > Stylize > Find Edges عدّل خيارات المزج واجعل نمط المزج عند Multiply لجعل الخلفية شفافة وبهذا ستبقى فقط تفاصيل تأثير الحدود ظاهرة بحيث ستظهر وكأنها خطوط مرسومة بقلم رصاص. ابحث في الإنترنت عن خامة الورق، أنا وجدتُ هذه الخامة Ivory Off White Paper Texture ذات اللون الأبيض العاجي الجميل. انسخ وألصق هذه الخامة داخل مستند الفوتوشوب ثم عدّل حجمها لتطابق حجم التصميم الذي نعمل عليه. غيّر خصائص مزج طبقة الخامة إلى Multiply. حمّل ونصّب مجموعة الفراشي المجانية للألوان المائية. أضف قناع طبقة لطبقة الخلفية ثم استخدم الاختصار Alt+Backspace لملء القناع باللون الأسود ما سيخفي ظهور الطبقة بالكامل. اختر أداة الفرشاة Brush tool واختر واحدة من فراشي الألوان المائية. اجعل لون المقدمة اللون الأبيض في شريط الأدوات ثم استخدم مفاتيح الأقواس المربعة [ ] لضبط حجم الفرشاة. استخدم الفرشاة ضمن مجال الصورة الداخلي لإعادة إظهار الصورة مع التركيز على الحواف بحيث تظهر الصورة كلوحة ألوان مائية. بعد بضعة نقرات وتغيير عدة أشكال لفرشاة الألوان المائية وضبط إعداداتها سنحصل على التأثير المطلوب. بما أننا طبقنا جميع هذه التأثيرات والإعدادات على كائن ذكي وليس على الصورة الأساسية ذاتها فإن بإمكاننا تطبيق هذه التأثيرات على أي صورة أخرى بمجرد النقر المزدوج على الصورة المصغرة للصورة الأساسية في لوحة الطبقات لفتح الصورة الأساسية واستبدالها بالصورة البديلة المطلوبة ثم حفظ التغييرات والعودة إلى المستند الحالي للحصول على هذه التأثيرات على الصورة الجديدة.

تابعنا في الجزء الأول من هذا الدرس كيفية تجهيز مستند العمل ورسم الخلفية وشكل الكويكبات. الآن سنتابع التصميم وسنبدأ أولًا بتصميم شكل النجمة. اختر أداة الشكل البيضوي ثم انقر نقرة واحدة على لوح الرسم ثم ضع القيمة 5 بكسل للعرض والارتفاع للحصول على دائرة صغيرة جدّا. ضاعف شكل الدائرة بالاختصارات Ctrl+C و Ctrl+F ثم كبّر شكل الدائرة الجديد قليلًا. حدّد الدائرتين ثم انقر نقرة إضافية على أحدهما ثم استخدم أدوات المحاذاة الأفقية والعمودية من شريط الأدوات العلوي لتتم محاذاتها بشكل مثالي. حدّد الدائرة الكبيرة ثم انقر بالزر الأيمن عليها واختر القائمة Arrange > Send to Back ليتم إرسالها إلى أسفل شكل الدائرة الصغيرة. حدّد الدائرة الكبيرة واذهب إلى القائمة Effect > Blur > Gaussian Blur ثم ضع القيمة 2.5 بكسل لنصف القطر. حدّد الدائرتين معًا ثم انقر عليهما بالزر الأيمن واختر Group ليتم تجميعهما في مجموعة واحدة. وسيكون هذا الشكل هو شكل نجمة. اسحب النجمة إلى لوحة الرموز. ثم اسحب هذا الرمز مرّات عدّة إلى لوح الرسم ووزعها بشكل عشوائي. عدّل بأحجام النجوم بشكل عشوائي أيضًا. سنبدأ الآن برسم شكل المذنب. اسحب شكل السحابة ثم انقر عليها بالزر الأيمن واختر Break Link to Symbol. ضاعف الشكل واسحب النسخة للأسفل مرتين تمامًا كما فعلنا في بداية التصميم ثم وحّد الأشكال الثلاثة معًا من خلال Unite من لوحة Pathfinder. ارسم دائرة مثالية وضعها بشكل يغطّي الجزء الأيسر من شكل السحابة ثم عدّل بالحجم والموضع لتغطي الجزء الأيسر بشكل مثالي كما فعلنا في بداية التصميم. حدّد الدائرة وانقر عليها بالزر الأيمن واختر القائمة Arrange > Send to Back افتح لوحة الطبقات ثم اقفل شكل الدائرة. حدّد النقاط اليمنى من شكل السحابة باستخدام أداة التحديد المباشر ثم اسحبها لليمين مسافة بعيدة. حدّد دوائر رؤوس الجهة اليمين واسحبها أكثر لليمين لتبدو ممدودة أكثر. حدّد نقاط الجزء الأيسر من السحابة باستثناء النقطة العلوية والسفلية ثم اضغط على Delete لحذفها. من جديد حدّد النقطة العلوية ثم استمر بالضغط على Shift وانقر على النقطة السفلية ثم حاذِهما أفقيًا. باستخدام أداة التحديد المباشر طابق بين النقطتين العلوية والسفلية للجهة اليسرى من السحابة مع النقطتين العلوية والسفلية من الدائرة. ألغِ قفل شكل الدائرة ثم حدّد الشكلين واختر unite من لوحة Pathfinder لتوحيدهما معًا. هذا هو شكل نواة المذنب وسنرسم الهالة المحيطة به تاليًا. اسحب شكل السحابة واكسر ارتباطها أيضًا ثم ضاعف الشكل نحو الأسفل واجعل الشكل الجديد يغطي النصف السفلي من الشكل العلوي. ارسم دائرة وطابقها إلى النصف الأيسر من السحابة تمامًا كما فعلنا في الخطوات السابقة. عدّل بدوائر رؤوس السحابة من الجهة اليمنى بحيث تصبح عشوائية الطول. احذف نقاط السحابة اليسرى باستثناء العلوية والسفلية ثم حاذِهما أفقيًا ثم طابق النقطتين في يسار السحابة مع نقطتي الدائرة كما فعلنا في الخطوات السابقة ثم وحّد الشكلين معًا باستخدام لوحة Pathfinder. ضع شكل الهالة فوق شكل النواة وعدّل بالحجم لتكون أكبر قليلًا. حدّد النقاط اليمن من الهالة واسحبها بعيدًا نحو جهة اليمين. ارسم دائرة أكبر من دائرة الهالة وضعها بشكل يطابق مركز دائرة الهالة. ارسم مستطيلًا يمتد من يمين الهالة إلى منتصف الدائرة الكبيرة الجديدة. سيكون الشكل الجديد ذيل المذنب. وحّد الدائرة والمستطيل معًا ثم عدّل بالحجم ليكون متناسقًا مع الهالة والنواة. عدّل ألوان الأشكال الثلاثة المُكوّنة للمذنب إلى درجات الأزرق. دوّر المذنب بذات درجة دوران شكل الكويكبات. ضعه ضمن التصميم وصغّر حجمه ليكون ملائمًا للتصميم. حدّد النقطتين في نهاية الذيل واسحبهما بعيدًا خارج حدود التصميم. استخدم أداة النص لكتابة عنوان التصميم. استخدم خطًا مناسبًا لنوعية التصميم ولونًا رماديًا فاتحًا مائلًا قليلًا للأزرق. اجعل حجم الخط كبيرًا كفاية ليملأ مساحة التصميم. حدّد النص ثم اضغط على الاختصارات Ctrl+C و Ctrl+B لنسخ النص ولصقه أسفل النص الأساسي ثم اذهب إلى القائمة Effect > Blur > Gaussian Blur ضع القيمة 6.5 بكسل لنصف القطر. وبهذا نكون قد انتيهنا من تصميم ملصق فضائي مسطح بسيط وأنيق. استخدمنا بعضًا الأدوات والتقنيات والتأثيرات مرّات كثيرة أثناء عمل هذا التصميم ما يجعلنا نعتاد استخدامها لمشاريع مستقبلية بحيث نجدها مألوفة وسهلة. هل تستطيعون إنشاء تصاميم مشابهة، يمكنكم مشاركتها معنا في التعليقات في الأسفل.

كنتيجة طبيعية لإمكانيات المنصات، كانت أول المواقع المخصصة للهواتف تُعد حلًّا وسطيًّا أكثر من كونها حلولًا احترافية. أما اليوم، فالأجهزة كاملة المواصفات تعطينا الفرصة لإنشاء تصاميم بصرية أكثر جاذبية؛ تلك التصاميم ليست جاذبة فحسب، لكنها تزيد من سهولة الاستخدام أيضًا. ومع هذه الفرص الرائعة تأتي تحديات جديدة. في الجزء الأول من السلسلة: هندسة المعلومات، أوضحنا الأسباب التي تجعل الهواتف المحمولة تختلف عن أجهزة سطح المكتب في البنية والمواصفات، كيف ومتى وأين نستخدم الهواتف؟ وكيف نشعر ونتصرف أثناء استخدامنا لها. ثم في الجزء الثاني: تصميم الإجراءات التفاعلية، شاهدنا تأثير هذه الاختلافات عند تطوير الهيكل والأداء الوظيفي؛ فهذان الجزءان يوضحان أساسيات التصميم الجيد للأجهزة المحمولة واللوحية. والآن سوف نختتم دراسة تصميم الهواتف المكونة من ثلاثة أجزاء، عبر استكشاف حلول التصميم المرئي، وأفضل الممارسات اللازمة لإنتاج تطبيقات جميلة قابلة للاستخدام. أولًا: سوف نتناول القيود المادية في عملية التصميم، وأفضل الممارسات العملية التوجيهية في ذلك؛ ثم سنتناول الجانب التواصلي في عملية التصميم، واستخدام التصميم البصري لدعم محتوى التطبيقات والمواقع الخاصة بالهاتف المحمول. الجانب المادي في عملية التصميم إن الشكل المادي والشاشة اللمسية للأجهزة المحمولة واللوحية تعطينا بعض الاعتبارات التي من السهل العمل عليها؛ فبينما يمكن لمستخدم جهاز سطح المكتب فحص مساحة واسعة من المحتويات، أو الحوم حول عنصر ما للاطلاع على مزيد من المعلومات، نجد أن مستخدمي الهواتف محددين بمنطقة أصغر، وعليهم استخلاص طرق مختلفة من التفاعل؛ وبالأخذ في الحسبان التفاصيل التي تحدد شكل الهاتف وتفاعلاته الخاصة، يمكننا بسهولة إنشاء تجربة رائعة. التصاميم الصالحة للاستعمال إن المساحة المحدودة التي توفرها شاشة الهاتف تقدم قيودًا مثيرة للاهتمام في كيفية عرض المحتوى والتفاعلات بشكل أفضل؛ وبشكل أدق، فإن على التصميم أن يكون بسيطًا ومركزًا. هيكل التصميم: لكي نقوم بتوفير أساس قوي للتصميم، فنحن بحاجة إلى استخلاص أفضل الطرق لاستخدام مساحة الشاشة المتاحة؛ ونطام الشبكة (grid system) يساعد المصممين في تحقيق ذلك؛ فهيكل الخطوط العمودية متساوية التباعد يُعدّ دليلًا لترتيب المحتوى، مما يسهل على المصممين تحديد المكان الأكثر فعالية للأزرار، العناوين، أو الصور؛ ولأن ترتيب المكونات بهذه الطريقة يرشد المستخدمين في رحلتهم، ويقدم في نفس الوقت صورة نظيفة وجميلة للمحتوى. مساحة التمرير والسحب: من المهم جدًا أن يستطيع المستخدم استكشاف المحتوى دون أن يجد نفسه قد ارتكب إجراء لا يقصده، أو يجد نفسه قد فعّل عنصرًا لا يريده أثناء تمرير الصفحة. بمعنى آخر، يجب أن تكون المساحة بين العناصر متباعدة بدرجة مناسبة؛ حتى يستطيع المستخدم التنقل بينها بحرية. التفاعلات سهلة الاستخدام إن وجود الشاشة اللمسية على واجهة الهواتف المحمولة يعني أن التصميم البصري يعزز من الإجراءات التفاعلية؛ بعبارة أخرى، ينبغي أن تضمن عملية تغيير حجم ومكان العناصر السهولة في الاستخدام، وأن تبين الأهمية والارتباط بين الإجراءات المختلفة. مناطق ضغط الزر: كما ناقشنا في الجزء الثاني من السلسلة: تصميم الإجراءات التفاعلية، فإن وجود حجم كافٍ، وتباعد مناسب بين الأزرار يُسهل من عملية تفعليها. من الناحية المثالية، فإن على الأزرار أن تكون بين 44px و57px على الشاشة القياسية، و88px إلى 114px على شاشة (retina) عالية الكثافة؛ وهذا يُعطي مساحة كافية للإصبع المتوسط أن يُفعّل هذه الأزرار بسهولة. أدوات تحكم واضحة ومن السهل الوصول إليها: إذا كانت العناصر التفاعلية المتصلة ببعضها، قريبة من بعضها وفي المتناول الوصول إليها، فإن هذا سيساعد المستخدم على التنقل السريع بينها؛ وهذا بدوره سيساعد في الحد من التشوش وقلة الوضوح التي يمكن أن تعتري المستخدم حول كيف ترتبط التفاعلات ببعضها، وسيسرع من إنجاز العمليات المعقدة. الجانب التواصلي في عملية التصميم إن القيود المادية تعتبر فقط نصف التحدي الذي نواجهه في تصميم الهواتف المحمولة، والنصف الآخر هو الجانب التواصلي. إن فلسفة الجوال أولًا (mobile first) تذكرنا أن مستخدمي الجوال لا بد أن يحصلوا على نفس القدر من الفائدة من المواقع كما يحصل عليها نظراؤهم من مستخدمي أجهزة سطح المكتب. بوضع ذلك في الاعتبار، فإن الجانب التواصلي في تصميم الهواتف سوف يؤثر على الطريقة التي سيعمل بها كل مصمم لإيصال رسالته التواصلية. ولكي نحسن الجانب التواصلي، فنحن بحاجة إلى تحقيق أفضل استفادة من كيفية فهمنا للمعلومات وفك شفراتها. إن الدماغ البشري يفسر المعلومات البصرية أسرع بكثير من الكلمات؛ وهذا يعني أنه سيكون رائعًا استخدام المرئيات والصور لتحسين التواصل؛ فالتصميم البصري الجيد سوف يضيف قيمةً، ودعمًا لغرض المحتوى أو التفاعلات، ويحسن من تجربة المستخدم ككل (للهاتف وسطح المكتب). الاتزان الرأسي (Vertical rhythm) إن أول مُحسِّنٍ لعملية التواصل علينا اعتباره هو استخدام الاتزان الرأسي؛ ومع أن هندسة المعلومات تُنشأ تدفقًا معقولًا للمحتويات، فإنه يمكن استخدام التصميم البصري لخلق مزيد من الوضوح داخل التسلسل الهرمي البصري للمحتوى، وسيؤدي الاستخدام المناسب للحجم والتباعد بين عناصر المحتوى، إلى إنشاء اتزانٍ عموديٍّ يدعم التواصل بين أجزاء التسلسل الهرمي. إضافةً إلى نظام الشبكة العمودية سالفة الذكر، فإن الشبكة الأساسية (baseline grid) تساعد كذلك في إنشاء اتزان عمودي مناسب، جاعلة قراءة وفهم المحتوى أكثر سهولة؛ خصوصًا وأنها تُنشأ بنيةً من خلال مواصفات ارتفاعات الأسطر، وهذا يعطي قواعد أفقية واضحة توضح المسافة بين قاعدة كل سطر (typography leading) وكذلك حجم الخطوط؛ كما أنها مفيدة في تحديد التباعد بين مجموعات المحتويات. إن اتباع هذه القواعد يجعل قراءة الفقرات واضحة، ويجعل المستخدم قادرًا على التفريق بين الأقسام (sections) ومجموعات المميزات (feature groups)؛ وربما يكون من الصعب تنفيذ نظام الشبكة الرئيسية بدقة في كل من HTML وCSS، إلا أنها توفر إرشادات مفيدة فيما يتعلق بتطوير التحجيم والتباعد في عملية التصميم. استخدام الألوان تعد الألوان وسيلة أخرى رائعة للتواصل، ويمكن استخدامها بطرق متعددة لدعم المحتوى والتفاعلات. درجة اللون وطرازه: إن استخدام الألوان في التصميم يُعد ذوقًا شخصيًّا بالدرجة الأولى، ويعتمد على التجربة الشخصية والثقافة؛ ومع ذلك، فإن استخدام درجات متعددة للون وبعض الظلال يمكن أن يساعد في إيصال انطباع عام عن الهدف المطلوب؛ فمثلًا: الألوان الفاتحة المكتوبة بخط سميك عريض تعبر عن المرح، ودرجات الألوان الداكنة تخلق شعورًا من الأناقة، بينما الأشكال الانسيابية بدرجات من اللون الرمادي تعطي شعورًا عتيقًا يعبر عن الماضي. إن تعلمنا المزيد عن نظرية الألوان (color theory) يمنحنا القدرة على اختيار أفضل الألوان المناسبة لأهداف التصميم. التفرقة بين الأقسام يمكن استخدام الألوان لإعطاء أهمية لعناصر المحتوى، أو لتوضيح كيف أن العناصر مرتبطة ببعضها، أو لدعم بنية المحتوى، أو لتوضيح كيف أن عناصر المحتوى منفصلة عن بعضها. التفرقة بين العناصر الثابتة والوظائف التفاعلية: إن استخدام تباين قوي بين الألوان سوف يساعد المستخدم في فهم الاختلاف بين الأغراض، أو الربط بين أجزاء المحتوى، أو الوظائف؛ واستخدام مزيج من الألوان المحايدة والألوان الفاتحة أو الداكنة، سوف يضمن أن تلك العناصر المحددة قد ظهرت وبرزت للمستخدم؛ واستخدام لون ثابت محدد- على سبيل المثال- لكل من العناصر الثابتة، النشطة وغير النشطة، في جميع أنحاء التصميم، سوف يُظهر أيضًا الفرق بين المحتوى والوظائف بشكل أكثر وضوحًا. التعريف بأحوال مختلفة: يمكن استخدام الألوان بذكاء لتظليل الرسائل، الإشعارات، والأخطاء التقنية بعد تفاعل المستخدم معها؛ فعلى سبيل المثال، تستخدم العديد من المواقع اللون الأخضر للرسائل الناجحة، والأحمر لرسائل الخطأ؛ وهذا يساعد في سهولة فهم التصميم المخصص لنقل معلومات عبر استخدام الألوان المتسقة. استخدام التجسيد أو التشبيه (Using metaphor) أخيرًا، فإن استخدام التجسيد يمكن أن يكون حلًّا قويًّا في التصاميم البصرية؛ ويتيح للمستخدمين أن يفهموا المحتوى والوظائف بصورة أسرع من خلال استحضار عنصر بصري مألوف؛ ويُعتبر استخدام الـ Skeuomorphism (أي: التصميم الذي وُضع ليُحاكي عنصرًا آخر) هو أقصى استخدام للتجسيد البصري في الوسط التقنيّ؛ حيث يتم تصميم عناصر الواجهة لتبدو حقيقة تمامًا مثل نظيراتها في العالم الحقيقيّ؛ ورغم أن الاتجاه قد حصل مؤخرًا على سمعة سيئة في نظام Windows 8، وفي نظام iOS7 الذي بدأ بالتراجع عنه؛ فلا زالت هذه الأنظمة، والمواقع والتطبيقات المخصصة للهواتف تستخدم نموذجًا أبسط من التجسيد في واجهة المستخدم، مثل تجسيد سلة المهملات لوظيفة الحذف، وآلة تصوير لكاميرا الويب، ومظروف للبريد؛ فيمكن إذًا للتجسيد أن يُستخدم بأكثر من طريقة لدعم توصيل رسالة أو فكرة. دعم موضوع أساسيّ: أفضل من حصر التجسيد في عنصر واحد من عناصر التصميم، يمكن استخدامه ليكون الفكرة الأساسية للتصميم أو الوظائف؛ فداخل تطبيق Flipboard، تعتبر تحولات الشرائح جزءا مدمجًا في تفاعلات المستخدم، وهذا الأداء السلس كان عاملًا مهما في نجاح التطبيق؛ فاستخدام التجسيد بهذه الطريقة يُسرّع من عملية إيصال الفكرة للمستخدم، كما يساعد في جعل التطبيق فريدًا من نوعه. الأزرار والتفاعلات: إن استخدام تجسيدٍ بسيط في تصميم الأزرار يُعد طريقة سهلة لمحاكاة تفاعلات العناصر في الحياة الحقيقية وجعل الوظائف أكثر وضوحًا؛ فالأمر لا يساوي شيئا إذا طُلب من الأشكال السطحية غير المجسدة أن تتناسب داخل تصميم واختلفت ألوانها عن ألوان العناصر الثابتة؛ موقع Wunderlist مثلا يستخدم أزرارًا ذات تصاميم واقعية. الرموز المصورَّة (Iconography): يمكن للرموز أن تكون مفيدة في تصميم الهواتف، فمساحة الشاشة الصغيرة تسمح بتواصل سريع مع أكثر من عنصر في نفس الوقت؛ فاستخدام التجسيد البصري للرموز (وخصوصًا تلك الرموز التي صارت مَعَايِيرًا، مثل رمز الحذف، كاميرا الويب، والبريد) يعنى أنها يمكن استخدامها دون تسميتها؛ فمعناها يُفهم بمجرد رؤيتها. إن تصميم رموز بسيطة وواضحة يمكن أن يكون تحديًا؛ لذا من المهم أن تفهم كيف أن الرموز تؤثر على مدى وضوح التصميم الخاص بك. مستقبل الهواتف المحمولة إن الفهم الواضح للمعايير والقيود، كالمذكورة في هذه السلسة، هو أمر مهم وقيّم لكل مصممي الهواتف؛ ورغم ذلك، فبمجرد إتقاننا هذه المعايير، نستطيع امتلاك القدرة على التحليق فوقها، وكسر قواعدها، وتجاوز حدود الإبداع لصنع شيء رائع وفريد من نوعه؛ وبالتزامن مع إدراكنا حاجةَ المستخدم، نستطيع صنع التوازن الأمثل بين الفاعلية والجمال. إن عملية تصميم الهواتف مثيرة حقًّا وتحمل الكثير من الفرص والتحديات؛ وإن تطور التكنولوجيا والتغير المستمر في حاجات المستخدمين يعني أن قيود اليوم قد لا تتواجد غدًا؛ ويساعدنا التفكير الابتكاري والإبداعي على استكشاف طرقٍ جديدة للنظر في هذه التحديات، ويسمح لنا كذلك بمواصلة العثور على حلول جديدة وجميلة وقابلة للاستخدام لمشاكل التصميم التي تواجهنا. ترجمة- وبتصرف- للمقال Designing for Mobile Part 3: Visual design لصاحبته Elaine McVicar حقوق الصورة البارزة محفوظة لـ Freepik

من الممتع دومًا استخدام أدوبي إليستريتور لتصميم رسومات منمنمة ولطيفة من الأشكال العشوائية. القيام بهذا الأمر يُعدّ تمرينًا جيدًا يساعدك على تجربة الأدوات والتقنيات الجديدة التي ستستفيد منها في مشاريعك المستقبلية. اتبع خطوات هذا الدرس خطوة خطوة لتتعلّم كيفية إنشاء مجموعة من رسومات مصاصات الآيس كريم اللذيذة باستخدام برنامج أدوبي إليستريتور. سنستخدم مجموعة من الأدوات المفيدة لإنشاء المصاصة الأولى الملونة ثم سنبني على كل تصميم لاحق باستخدام تقنيات جديدة تساعد على زيادة تنوع وتخصيص العمل الفني. سنقوم في هذا الدرس بإنشاء خمسة تصاميم لمصاصات الآيس كريم بحيث يكون لكل منها مظهر بسيط وملوّن. إن استخدام الأشكال الأساسية يعطي التصميم مظهرًا منمقًا لطيفًا. سنخصص كل تصميم بإضافة جديدة ما يمنحنا الفرصة للتعامل مع الأدوات والتقنيات المختلفة، ثم سنقوم بإضافة بعض اللمسات المناسبة باستخدام خامات دوائر الألوان المائية المجانية. افتح برنامج أدوبي إليستريتور وأنشئ مستندًا جديدًا. اختر أداة رسم المستطيلات Rectangle tool وارسم شكلًا مستطيلًا على لوح الرسم ليكون شكل المصاصة الأولى. في الإصدار الأخير من برنامج الإليستريتور يمكنك إضافة انحناء للزوايا بحيث تستطيع جعل الجهة العلوية مستديرة. أما بالنسبة لمستخدمي الإصدارات الأقدم فعليهم باستخدام تأثير الزوايا المستديرة Round Corners أو البدء برسم مستطيل مستدير الزوايا منذ البداية. حدّد النقطتين السفليتين من المستطيل واجعلها زوايا مستديرة بدرجة صغيرة فقط. ألغِ الحدود الافتراضية من الشكل عبر النقر على أيقونة none من شريط الأدوات ثم استبدل لون التعبئة بلون من لوحة حوامل الألوان Swatches. ارسم مستطيلًا جديدًا لصنع المقبض الخشبي الحامل للمصاصة. إن تفعيل الأدلة الذكية سيساعد على مطابقة الحامل مع أسفل منتصف شكل المصاصة. امنح هذا الشكل لونًا مناسبًا كمقبض خشبي ثم حدّد النقطتين السفليتين واجعل زواياها مستديرة باستخدام ويدجات الزوايا. استخدم أداة القلم Pen tool لرسم مثلث أعلى شكل الحامل الخشبي ولكن أسفل شكل جسم المصاصة لتشكيل الظلال. طابق كل نقطة مع المسارات الموجودة ثم لوّنها باللون الأسود. غيّر خصائص المزج إلى Multiply ثم خفّف التعتيم Opacity إلى 20%. ابحث عن أداة القوس Arc ضمن أيقونة أداة الخط Line في شريط الأداوت. استمر بالضغط على Shift أثناء سحب نقطتي القوس للمحافظة على نعومة الشكل المثالية. امنح هذا الشكل حدودًا بيضاء بحجم 4pt وزوايا مستديرة. المظهر الحالي للتصميم بالألوان المسطحة يبدو رائعًا ولكن في هذا الدرس سنضيف مظهرًا مثيرًا للاهتمام باستخدام مجموعتي المجانية من خامات دوائر الألوان المائية. اذهب إلى القائمة File > Place واختر واحدة من صور الألوان المائية. عدّل حجم الصورة ثم ضعها بجانب التصميم. حدّد شكل جسم المصاصة ثم انسخه CMD+C وألصقه في المقدمة CMD+F ثم انقر بالزر الأيمن للفأرة على الشكل الجديد واختر القائمة Arrange > Bring To Front حرّك خامة الألوان المائية إلى اتجاه شكل جسم المصاصة بحيث تغطي كامل الجسم ثم حدّد الخامة مع الشكل المضاعف الجديد واختر الخيار Make Clipping Mask من القائمة التي ستظهر بالنقر على الزر الأيمن للفأرة. غيّر خصائص المزج إلى Overlay بالنسبة للخامة من لوحة الشفافية Transparency panel للسماح للخامة بالتفاعل مع لون الشكل الأساسي. اتبع ذات الخطوات السابقة لرسم مصاصة ثانية ولكن مع تغيير حجم المصاصة ولونها. حدّد الشكلين اللذين يشكّلان المقبض ثم استمر بالضغط على Alt أثناء سحبهما لصنع نسخة عن المقبض ووضعها تحت شكل المصاصة الثانية. اعثر على خامة الألوان المائية المناسبة للون الذي لوّنت به المصاصة الثانية ثم ضاعف شكل المصاصة واستخدمه كقناع كما فعلنا مع المصاصة الأولى تمامًا. ارسم شكلًا جديدًا على لوح الرسم لصنع مصاصة جديدة. دوّر الزوايا العلوية من الشكل بدرجة صغيرة هذه المرة لصنع شكل مختلف. استخدم وظيفة المطابقة للأدلة الذكية لرسم مستطيل بداخل شكل المصاصة. لوّنه بلون مخالف للون جسم المصاصة. اختر أداة التحديد Selection Tool واستمر بالضغط على Shift وAlt أثناء سحب شكل المستطيل للأسفل لصنع نسخة جديدة على نفس الخط العمودي، حاول قدر الإمكان جعل المسافة بين الشكلين مساوية لارتفاع شكل المستطيل. كرّر هذه العملية باستخدام الاختصار CMD+D عدّة مرّات لصنع عدّة نسخ بذات المسافة بين النسخ. الميزة الرائعة لويدجات الزوايا المستديرة هو إمكانية تكبير أو مد شكل المستطيل بدون تشويه شكل الزوايا المستديرة. مدّد شكل المستطيل للأسفل بعد آخر شكل شريط أفقي بحجم المسافة ذاتها بين الشرائط. استخدم أداة المستطيل لرسم زوج من الأشكال الطويلة والرفيعة متداخلة مع شكل جسم المصاصة. حدّد الشكلين الجديدين ومع الضغط على Shift حدد شكل جسم المصاصة لتحديد جميع هذه الأشكال معًا ثم اختر الخيار Unite من لوحة Pathfinder لدمج هذه الأشكال في شكل واحد. اختر أداة التحديد المباشر Direct Selection tool وارسم تحديدًا حول النقاط التي تشكّل المستطيلات الصغيرة. دوّر هذه النقاط باستخدام ويدجات الزوايا المستديرة. حدّد النقاط التي تصل أشكال المستطيلات مع المخطط الرئيسي باستخدام أداة التحديد المباشر، استمر بالضغط على Shift أثناء تحديد النقاط نقطة نقطة. دوّر هذه النقاط باستخدام الطريقة ذاتها. العملية الأخيرة باستخدام أدوات Pathfinder قامت بتغيير ترتيب تراص العناصر في التصميم لذلك استخدم الزر الأيمن للفأرة واختر القائمة Arrange > Send to Back لوضع الشكل خلف أشكال الشرائط المستطيلة. ضع خامة ألوان مائية مناسبة للون الخاص بجسم المصاصة وضاعف شكل جسم المصاصة ثم أنشئ قناعًا بذات الطريقة التي اتبعناها سابقًا. هذه الخامة وهذا اللون سيبدوان أفضل بكثير لو جعلنا خصائص المزج عند Screen بدلًا من خاصية Overlay المستخدمة سابقًا. ابدأ برسم جسم مصاصة جديدة مع شكل جديد ولون جديد. هذه المرّة سنضيف الشوكولا السائلة اللذيذة فوق المصاصة. ضاعف جسم المصاصة عبر تحديده واستخدام الاختصارات CMD+C وCMD+F. لوّن الشكل المضاعف الجديد بلون الشوكولا البني ثم ارسم شكلًا مستطيلًا يتقاطع مع جسم المصاصة وحدّد الشكلين واختر الخيار Minus Front من لوحة Pathfinder. استخدم أداة رسم المستطيلات لرسم مستطيل طويل ونحيف ممتد من أسفل الحافة السفلية لشكل الشوكولا. استخدم أداة التحديد ومفتاح Alt لسحب نسخة عن المستطيل إلى الجهة المقابلة مع المحافظة على مسافات متساوية بينها. حدّد الأشكال الثلاثة ثم استخدم أداة بناء الأشكال Shape Builder tool مع الاستمرار بالضغط على ALt والنقر على المستطيل الأول لمسح شكل المستطيل من مجموع الأشكال الثلاثة ثم انقر فوق المستطيل الثاني لتوحيد الأشكال معًا. بما أن الشكل الجديد مازال محدّدًا اختر أداة التحديد المباشر Direct Selection tool لتحويل النقاط السفلية إلى زوايا مستديرة، واجعل نصف قطر الاستدارة إلى أقصى حد لصنع شكل شوكولا سائلة مثالية. لا تنسَ إضافة لمعان طرف الشكل من خلال أداة القوس بذات الطريقة المستخدمة مع شكل المصاصة الأولى. استخدم نسخة مضاعفة عن جسم المصاصة الرئيسي لقص شكل خامة الألوان المائية المناسبة باستخدام تقنية القناع كما فعلنا مع الأشكال السابقة. خاصية المزج Ovelay قد تبدو رائعة مع جسم المصاصة الرئيسي ولكنها ليست كذلك مع شكل الشوكولا السائلة. من القائمة التي تظهر بالنقر على الزر الأيمن للفأرة اختر Arrange > Send Backward أو استخدم الاختصار ]+CMD لوضع الخامة تحت الشكل البني. اصنع نسخة عن شكل غطاء الشوكولا ثم أدرج خامة ألوان مائية إضافية من أجل هذا العنصر. عدّل حجم الخامة ليغطي فقط شكل غطاء الشوكولا. غيّر خصائص المزج إلى Multiply مما يجعل الخامة تبدو أفضل مع الألوان الداكنة. استخدم اختصار الإرسال للخلف Send Backward لوضعه أسفل شكل القوس لمنع تفاعل خاصية المزج مع هذا العنصر. ارسم مستطيلًا جديدًا يمثّل المصاصة الأخيرة في تصميمنا. هذه المرة اجعل الزوايا الأربعة مستديرة بذات قيمة نصف القطر. ارسم مستطيلًا يغطي ثلث الشكل تقريبًا محاذيًا منتصف الشكل، حدّد كلا الشكلين وباستخدام أداة بناء الأشكال Shape Builder tool انقر نقرة واحدة على كل شريحة من الشرائح الثلاثة لتقسيم الشكل إلى ثلاثة قطع. لوّن الأشكال بألوان بديلة بحيث يكون الجزء العلوي بذات لون الشوكولا البني المستخدم سابقًا. استخدم أداة الخط Line tool لرسم مسار قصير على المساحة الرمادية بجانب لوح الرسم. اجعل سماكة حدود المسار 4pt والنهايات مستديرة ولوّنه باللون البرتقالي. اسحب نسخة من هذا الشكل باستخدام أداة التحديد والاستمرار بالضغط على Alt أثناء السحب ثم استخدم الاختصار CMD+D لانتاج نسختين إضافيتين. استبدل ألوان حدود الأشكال الجديدة بألوان أخرى مختلفة لكل شكل كالأبيض والأصفر والوردي. استمر بالضغط على Alt أثناء سحب نسخِ عدّة من هذه الأشكال إلى فوق الجزء البني من شكل المصاصة. اسحب نسخًا مختلفة عشوائية من الألوان ووزعها بشكل عشوائي فوق السطح البني. حدّد جميع الأشكال الملونة ثم استمر بالضغط على Shift وانقر على الجسم البني لإزالته من التحديد. اذهب إلى القائمة Object > Transform > Transform Each غيّر زاوية الدوران إلى 360 درجة ثم فعّل الخيار Random العشوائي. انقر على أيقونة المعاينة Preview لمشاهدة كيفية الاستدارة العشوائية لكل عنصر من العناصر. انقل ودوّر أية أشكال موضوعة بشكل غير طبيعي أو متداخلة مع أشكال أخرى للمحافظة على الفراغات بين الأشكال. حدّد الشكلين الأوسط والسفلي من جسم المصاصة ثم انسخ وألصق نسخة عنها. وحّد الشكلين بالخيار Unite من لوحة Pathfinder لتشكيل شكل موّحد ومقاطعته بتقنية القناع مع خامة الألوان المائية المناسبة. اختر خاصية المزج Screen لهذه الخامة والتي ستبدو أفضل مع الألوان الفاتحة. اصنع نسخة من الشكل الأعلى بين الأشكال واستخدم تقنية القناع ذاتها مع خامة أخرى. باستخدام خامة منفصلة ستسمح بوضع خاصية المزج Multiply لهذا القسم من الرسم. استخدم ذات الطريقة مع استخدام ألوان وخامات وأشكال مختلفة لصنع تصاميم مميزة من المصاصات. كما استخدمنا تقنيات مختلفة لصنع تأثير الشوكولا السائلة ورشات السكر اللذيذة. ترجمة -وبتصرف- للمقال How To Create a Vector Popsicle in Adobe Illustrator لصاحبه Chris Spooner

انتشر هذا الأسلوب في التصميم مؤخرًا عبر مواقع التصميم العالمية وبات عدد من المصممين يستخدمونه في إنشاء تصاميم فضائية مميزة لإبراز مهاراتهم أو لاستخدامه في التصميم الإعلاني أو الطباعي على حد سواء لذلك نرى Nina Geometrieva قد استخدمته في تصميمها بعنوان Meteor. المصدر: Nina Geometrieva وكذلك Filip Benda الذي استخدم هذا الأسلوب لتصميم واجهة موقع معرض أعماله. المصدر: Filip Benda وأيضًا صمم Simonas Mačiulis تصميمًا بعنوان النظام الشمسي باستخدام الأسلوب ذاته المصدر: Simonas Mačiulis ولهذا سنتطرق في هذا الدرس لكيفية التصميم بهذا الأسلوب باستخدام برنامج أدوبي إليستريتور. ابدأ مستندًا جديدًا بحجم 700 في 600 بكسل قبل البدء سنحتاج إلى تفعيل الأدلّة الذكية لتسهيل مهمة التصميم حيث ستساعدك هذه الأدلّة على مطابقة الأشكال بسهولة أكبر. اذهب إلى القائمة View > Smart Guides تأكد من أنها مفعلة بوجود إشارة الصح بجانبها. وحتى تبدأ العمل كمصمم محترف يجب أن تحدد لوحة ألوان التصميم الذي ستعمل عليه، ويمكن القيام بهذه الخطوة قبل أو بعد التصميم، ولكنني سأبدأ بتجهيز لوحة ألوان التصميم هنا قبل البدء بالتصميم للحصول على نظام ألوان موحد للعمل ولهذا استخدم أداة المستطيلات وارسم مع الاستمرار بالضغط على مفتاح Shift مربعًا صغيرًا خارج لوح الرسم ثم ألغِ لون الحدود ولوّن المربع باللون الأحمر الداكن. الآن استخدم أداة التحديد ثم استمر بالنقر على مفتاح Alt أثناء سحب نسخة عن المربع إلى الجانب ومع الاستعانة بالأدلة الذكية ضع المربع الجديد بجانب القديم تمامًا. لوّن المربع الجديد بلون أحمر فاتح. ولتكرار العملية وإنشاء عدة نسخ جديدة بذات الطريقة المتّبعة اضغط على الاختصار Ctrl+D عدّ’ مرّات ليتم إنشاء مجموعة مربعات جديدة إلى نفس الاتجاه وبنفس المسافة والترتيب. أضف ألوانًا جديدة إلى هذه المربعات كما في الصورة. إذا أردت استخدام ذات الألوان فيمكنك نسخ هذه الصورة ولصقها ضمن المستند الذي تعمل عليه بجانب لوح الرسم. استخدم أداة المستطيلات من شريط الأدوات لرسم مستطيل بكامل حجم لوح الرسم ليكون خلفية التصميم. انقر مرة واحدة باستخدام هذه الأداة على لوح الرسم لتظهر لك نافذة تحديد حجم المستطيل المراد رسمه. ضع حجم العمل ذاته 700 في 600 بكسل. ثم اضغط OK. سينتج عن ذلك مستطيل بحجم العمل ولكنه لا يغطي مساحة العمل بشكل صحيح، لذلك استخدم أداة التحديد وبالاستعانة بالأدلة الذكية المفعّلة حرّك المستطيل ليغطي كامل مساحة العمل. ثم لوّنه بلون داكن وهو اللون الأخير من جهة اليسار في لوحة الألوان. تستطيع الحصول على اللون ذاته عبر استخدام أداة ماصة الألوان . افتح لوحة الطبقات بالاختصار F7 وقم بإنشاء طبقة جديدة من خلال النقر على أيقونة Create New Layer أسفل اللوحة ثم انقر بجانب الطبقة الأولى التي تحوي الخلفية ولوحة الألوان لإظهار رمز القفل وبذلك نكون قد أقفلنا الطبقة ولم نستطيع تعديلها أو تحريكها حتى نزيل إشارة القفل من جديد. والآن سنقوم بإنشاء الشكل المتموّج الذي بداخل الكويكبات. استخدم أداة المستطيلات لرسم مستطيل نحيف عرضيًا. ثم استخدم أداة التحديد مع الاستمرار بالضغط على مفتاح Alt لسحب نسخة عن المستطيل نحو الأسفل وبالاستعانة بالأدلة الذكية اجعل المستطيل الجديد ملاصق للقديم. اضغط على الاختصار Ctrl+D عدة مرات لتكرار عملية النسخ عدة مرات. حدّد المستطيل الثاني من الأعلى لنقوم بتغيير عرضه. في حال لم تظهر أدوات حدود المستطيل لتعديل الحجم اضغط على الاختصار Shift+Ctrl+B حتى تظهر لك تلك الأدوات المساعدة. والآن استمر بالضغط على مفتاح Alt أثناء النقر على المربع الصغير على أحد جانبي المستطيل وسحبه للداخل وذلك لتصغير عرض المستطيل بشكل متناظر. عدّل الآن على باقي المستطيلات بحيث تصبح متفاوتة في حجم العرض لكل منها. والآن حرّك بعضا المستطيلات إلى اليمين وأخرى إلى اليسار بحيث تكون غير متناسقة.استمر بالضغط على مفتاح Shift أثناء التحريك للمحافظة على ثبات المحور الأفقي. اضغط على الاختصار Shift+Ctrl+F9 لإظهار لوحة Pathfinder. حدّد جميع المستطيلات ثم انقر على الخيار Unite من لوحة Pathfinder لتوحيد جميع المستطيلات في شكل واحد. اختر أداة التحديد المباشر ثم حدّد الشكل ولاحظ ظهور أدوات تدوير الزوايا. انقر على أداة تدوير الزوايا الموجودة ضمن الشكل الجديد ثم اسحبها إلى أقصى درجة لتتحوّل الزوايا المضلعة للشكل إلى زوايا مستديرة. سنحتاج إلى هذا الشكل في تصميم العديد من العناصر ضمن هذا التصميم لذلك سنقوم بحفظه كرمز ضمن لوحة الرموز Symbols. افتح لوحة الرموز بالاختصار Shift+Ctrl+F11 ثم اسحب هذا الشكل إلى داخل لوحة الرموز لتظهر نافذة حفظ رمز جديد حيث يمكنك تسمية هذا الرمز وتحديد بعض من خصائصه، اترك كل شيء في النافذة على حاله وانقر OK. أصبح هذا الشكل (السحابة الفضائية) ضمن لوحة الرموز. احذف الشكل الأصلي ثم اسحب هذا الشكل إلى لوح الرسم. اختر أداة التحديد ثم استمر بالضغط على Alt+Shift أثناء سحب نسخة عنه للأسفل، استعن بالأدلة الذكية لجعل الشكل الجديد ملاصق للشكل الأساسي. كرّر العملية بسهولة عبر الضغط على الاختصار Ctrl+D وبذلك يتم إنشاء نسخة جديدة بذات الطريقة أسفل الشكل الأخير. حدّد جميع هذه الأشكال ثم انقر على الخيار Unite من لوحة Pathfinder لتوحيدها معًا في شكل واحد. اختر أداة التحديد المباشر ثم حدّد النقاط في الجهة اليسرى من الشكل باستثناء أعلى نقطة وأسفل نقطة في تلك الجهة. احذف هذه النقاط بالضغط على مفتاح Delete لتبقى الجهة اليسرى بخط مستقيم مشطوب. حدّد النقطة العلوية في الجهة اليسرى ثم استمر بالضغط على مفتاح Shift وانقر على النقطة السفلية من ذات الجهة ثم حاذِهما أفقيًا عبر النقر على خيار المحاذاة الأفقية في شريط الأدوات العلوي. حدّد نقاط دائرة رأس العلوية من الجهة اليمنى للشكل ثم اسحبها نحو اليمين مسافة طويلة. كرّر العملية ذاتها مع دائرة الرأس السفلية. استخدم أداة رسم الأشكال البيضوية لرسم دائرة تغطي الجزء الأيمن المتعرج من الشكل وذلك عبر الاستمرار بالضغط على Shift أثناء سحب الشكل لنحصل على دائرة مثالية. عدّل بحجم الدائرة وحرّكها لتغطي الجزء الأيمن من شكل السحابة مع مطابقة أعلى وأسفل نقطتين من الدائرة مع أعلى وأسفل نقطتين من السحابة (استعن بالأدلة الذكية). حدّد الشكلين ثم انقر على الخيار Divide من لوحة Pathfinder ليتم تقطيع الأشكال إلى أشكال أصغر بحسب تقاطع حدود الأشكال معًا. حدّد كل ماهو خارج إطار الدائرة ثم احذفه بالضغط على المفتاح Delete. حدّد الجانب الأيمن من الدائرة ثم استخدم أداة ماصة الألوان واختر لونًأ من لوحة الألوان الخاصة بالتصميم، أنا اخترت الأحمر الفاتح. ولوّن الجانب الأيسر بالأحمر الداكن بذات الطريقة. ارسم دائرة جديدة وحاذِها بواسطة أدوات المحاذاة في شريط الأدوات العلوي أفقيًا وعموديًا مع الدائرة القديمة واجعلها أكبر حجمًا بشكل طفيف جدًّا ثم لوّنها باللون الأبيض. حدّد الدائرة البيضاء الكبيرة واذهب إلى القائمة Effect > Blur > Gaussian Blur ضمع القيمة 10 لنصف القطر. وبذلك يكتمل لدينا شكل الكويكب مع تأثير الهالة المحيطة به. حدّد شكل الكويكب ثم ضع المؤشر بالقرب من أحد الزوايا ليتغير شكله إلى سهمين معقوفين وذلك استعدادًا لتدوير الشكل ثم دوّر الشكل لنحو 40 درجة. حدّد شكل الكويكب ثم اسحبه إلى لوحة الرموز ليصبح رمزًا نستطيع استخدامه فيما بعد. احذف شكل الكويكب ثم اسحب رمزه من لوحة الرموز عدة مرات لإنشاء مجموعة كويكبات (كواكب) ثم عدّل بأحجامها ومواضعها بشكل عشوائي. حدّد أحد الكويكبات ثم انقر بالزر الأيمن عليه واختر Break Link to Symbol. ثم أعد تلوين الكويكب بنسق ألوان جديدة من لوحة الألوان. بما أننا جعلنا اللون الفاتح إلى اليمين والداكن إلى اليسار في التصميم الأولي للكويكب الأول فمن الأفضل الاستمرار على ذات التنسيق لبقية الكويكبات حتى يظهر تناسق بالنسبة لمسألة الإضاءة والظلال. كرّر العملية السابقة بالضغط بالزر الأيمن على الكويكب التالي وعدّل ألوانها جميعًا. سنتابع في الجزء الثاني تصميم النجوم والمذنب والنص الرئيسي للتصميم. مصادر الأمثلة تصميم Meteor للمصممة Nina Geometrieva تصميم Space Portfolio Website | Hero للمصمم Filip Benda تصميم Solar System Illustration للمصمم Simonas Mačiulis

المخططات البيانية مهمة جدًّا لتتبع سير العمل ومدى النجاح والإخفاق في المشاريع، أو لشرح أفكار أو نظريات وحتى لتوضيح بيانات معينة، فمجالات استخدام المخططات البيانية واسع جدًّا. تقدّم البرامج والتطبيقات المختلفة أدوات خاصة لرسم هذه المخططات البيانية بأسلوب بسيط كحزم برامج المكتب وغيرها، ولكننا قد نحتاج في بعض الأحيان إلى رسم مخطط بياني أنيق وأكثر حيوية من المخططات البيانية البسيطة لجذب الانتباه أو لاتباع نمط معين في العرض التقديمي على سبيل المثال. وباستخدام برنامج أدوبي إليستريتور يمكننا رسم مخطط بياني مميز وحفظه بصيغة فكتور ما يمنحنا الحرية في تكبير حجم المخطط وتصغيره بحسب التصميم الذي نعمل عليه بالإضافة إلى سهولة تعديل الخطوط البيانية وتغيير ألوانها وإضافة أو إزالة بعض الخطوط بحسب الحاجة. كما نرى فهذا مخطط بياني لبيان عدد الزيارات التي تمت لمواقع إحدى الشركات وذلك لتتبع الأيام الأكثر زيارة والقيام بنشر أهم البيانات عليها للحصول على الاهتمام الأكبر من قبل الزائرين للموقع وخصوصًا إذا كان الموضوع يتعلق بإعلان معين. وسنقوم في هذا الدرس باستخدام الأدوات الأساسية مع خصائص المظهر وبعض التأثيرات كالظلال والتحريك البسيط للحصول على خطوط بيانية بارزة وحيوية أكثر من الخطوط العادية البسيطة مع إضافة تدرج لوني بسيط وجميل للخلفية في نهاية الدرس. افتح برنامج أدوبي إليستريتور وقم بفتح مستند جديد بحجم 800 في 800 وفي خيار Advanced قمت باختيار نمط ألوان RGB مع دقة 72ppi وذلك لأن تصميمي سيكون مخصصًّا للعرض على الشاشة وليس للطباعة. أمّا إذا كنت تنوي طباعة المخطط فيجب عليك اختيار نمط ألوان CMYK ودقة تصل إلى 300ppi للحصول على نتائج أفضل في الطباعة. من المهم أن تعوّد نفسك كمصمم على استخدام الشبكة Grid للعمل على التصاميم بدقة أكبر. لذلك قم بتفعيل إظهار الشبكات وفعّل ميزة المطابقة إلى الشبكات عبر الاختصارين ”+Ctrl و”+Shift+Ctrl أو عبر القائمتين التاليتين على التوالي: View > Show Grid View > Snap to Grid علينا الآن تخصيص إعدادات الشبكة عبر الذهاب إلى القائمة Edit > Preferences > Guides & Grid وفي حقل Grid ضع القيمة 10px في خانة Gridline every وذلك حتى يتم إعداد خطوط الشبكة كل 10 بكسل، ثم ضع القيمة 1 عند خانة Subdivisions وذلك لجعل خانة من خانات الشبكة بدون تقسيم. والآن سنرسم مربع الخلفية عبر استخدام أداة رسم المستطيلات Rectangle Tool ثم النقر نقرًا مزدوجًا على لوح الرسم لتفتح نافذة إنشاء المستطيلات. ضع القيم 800 للعرض والطول معًا وذلك لأننا جعلنا حقل الرسم بهذا الحجم عند إنشاء المستند ليغطّي كامل مساحة لوح الرسم. لوّن هذا المربع باللون الأحمر الداكن المائل للبني ذو القيمة اللونية 440000#. ولجعل المربع المرسوم يطابق لوح الرسم بشكل مثالي وخصوصًا أنهما بذات الحجم افتح لوحة المحاذاة Align من قائمة Window ثم اضغط على الأيقونة في الزاوية السفلية اليمنى من اللوحة واختر من القائمة خيار المحاذاة إلى لوح الرسم Align to Artboard وذلك لنقوم بمحاذاة المربع إلى لوح الرسم تحديدًا ثم حدّد المستطيل وحاذه إلى الوسط أفقيًّا وعموديًّا. افتح لوحة الطبقات Layers من قائمة Window ثم أنشئ طبقة جديدة من الأيقونة أسفل لوحة الطبقات ثم قم بالنقر بجانب رمز العين لطبقة الخلفية لوضع قفل للطبقة وبذلك لن نستطيع تعديل أو تحريك الخلفية ممّا يُسهّل علينا العمل لاحقًا فوق هذه الخلفية بسهولة. سنرسم الآن جدول المخطط البياني لذلك استخدم أداة رسم الشبكة المستطيلة Rectangular Grid Tool التي تجدها بالضغط المستمر على أداة الخط Line لتظهر بقية الأدوات المرتبطة في القائمة أسفل أداة الخط. انقر نقرًا مزدوجًا على لوح الرسم باستخدام هذه الأداة لتفتح نافذة أدوات إنشاء الشبكة. اختر حجم الشبكة ليكون بعرض 600 وارتفاع 400 بكسل وبعدد 10 أقسام أفقية و12 عمودية ثم اضغط OK. ضع الشبكة في النصف السفلي من المخطط لوضع العنوان وبيانات الشرح في الأعلى لاحقًا. حدّد هذه الشبكة ثم انقر بالزر الأيمن واختر Ungroup من القائمة. قم بحذف الإطار الخارجي المحيط بالشبكة عبر تحديده هو فقط والضغط على مفتاح Delete من لوحة المفاتيح . وسنقوم بجعل خطوط شبكة المخطط منقطّة وذلك عبر تحديد جميع الخطوط الطولية والعرضية ثم فتح لوحة الحدود Stroke، أبقِ على جميع الإعدادات الأولية على حالها ثم فعّل خيار Dashed Line ثم ضع القيمة 5px في dash وgap الأولى فقط وشاهد النتيجة بنفسك. يُعتبر dash هو الخط في التنقيط وgap هو الفجوة التي تلي الخط dash ويمكن تخصيص شكل تنقيط معيّن عبر تعبئة باقي الخانات للخطوط والفجوات المتبقية في لوحة الحدود ولكننا في هذه الحالة نريد أن يكون حجم الخط في التنقيط 5 بكسل مع وجود فجوات بين الخطوط بحجم 5 بكسل أيضًا لذلك اكتفينا بالخانتين الأوليتين ليتم تكرار هذه القيم على طول الخطوط المُحدّدة. خفّف مستوى ظهور هذه الشبكة عبر تحديدها والذهاب إلى لوحة الشفافية Transparency ثم تخفيف التعتيم Opacity لنحو 32%. سنضيف تأثيرًا إضافيًّا على هذه الشبكة بإنشاء ظل خفيف لها. حدّد الشبكة ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow في نافذة خيارات الظلال اختر النمط Soft Light ثم خفّف التعتيم Opacity إلى 30% ثم ضع القيمة 1px في خانتي الإزاحة على المحورين x وy وباللون الأسود لهذه الظلال اضغط على OK. الآن سنرسم الخط البياني الأوّل. في هذا الدرس سنتعلّم فقط كيفية تصميم رسوميات المخطط البياني ولن نهتم لدقة البيانات والخطوط بينما في العمل الحقيقي سيتوجب علينا أولًا تحديد القيم على المحورين العمودي والأفقي أوّلًا ثم تحديد القيمة الحقيقية للبيانات ومن ثم رسم الخط البياني بدقة بناء على ما هذه البيانات. في هذا الدرس سنختصر الوقت ونرسم خطًّا عشوائيًّا غير دقيق. استخدم أداة القلم Pen Tool وابدأ برسم خطٍّ عشوائيٍّ على شبكة المخطط وستشعر بأنك مقيّد الحركة ضمن نقاط محدّدة وذلك لأننا فعّلنا خيار المطابقة على خطوط الشبكة لذلك ستتحرك أداة القلم للرسم بمستوى 10 بكسل في كل حركة بناءً على الإعدادات التي خصصّناها في بداية الدرس. اختر لونًا مميزًا وليكن اللون السماوي 00CFFF#. هذا الخط حاد جدًّا عند المنحنيات لذلك سنقوم بتنعيم هذه المنحنيات. حدّد الخط البياني السماوي ثم اذهب إلى لوحة الحدود Stroke ثم اختر الخيار الأوسط (المنحني) في Corner ولاحظ النتيجة. وسنجعل نهايات الخط مستديرة عبر ذات اللوحة (Stroke)، اختر الخيار الأوسط (المستدير) في Cap ولاحظ النتيجة أيضًا. سنقوم الآن بإضافة تأثيرات البروز الحيوية. افتح لوحة المظهر Appearance من قائمة Window ثم حدّد الخط البياني وستشاهد عناصر مظهر هذا الخط وهي التعتيم الافتراضي ولون التعبئة لا يوجد ولون الحدود السماوي بحجم 4 بكسل. حدّد الحدود ثم انقر على أيقونة New لإنشاء نسخة عن عنصر الحدود. انقر على أيقونة اللون للحدود الجديدة ثم اختر لونًا سماويًّا كلون الحدود الأساسي ثم انقر عليه نقرًا مزدوجًا لتفتح نافذة تعديل اللون بحيث يمكنك الآن تعديل اللون وتخصيصه. سنجعل اللون الجديد داكنًا أكثر لذلك ضع القيم التالية R:0 G:133 B:222 وستلاحظ الفرق بين اللون القديم والجديد في المربعين الصغيرين على يسار النافذة بحيث يظهر اللون القديم في المربع العلوي والجديد في السفلي. خفّف سماكة الحدود الجديدة إلى 3 بكسل. تأكّد من أنك تُحدّد الحدود الجديدة في لوحة المظهر ثم اذهب إلى القائمة Effect > Distort & Transform > Transform وفي نافذة Transform Effect أضِف إزاحة بمقدار 1px على المزلاج العمودي وألغِ تفعيل الخيارات أسفل النافذة باستثناء خيار Transform Objects. وبذلك سيتم تحريك الحدود الجديدة عموديًّا إلى الأسفل بمقدار 1 بكسل فقط. وبعد هذه الخطوة فقط بدأ الخط البياني يصبح أفضل مظهرًا، ولكننا لم ننتهِ بعد. ضاعف الحدود الأخيرة من لوحة المظهر بنفس الطريقة المُتّبعة سابقًا. هذه المرّة خفّف سماكة الحدود الجديدة إلى 1px وغيّر اللون إلى لون أكثر قتامةً من السابق بالقيم التالية R:0 G:97 B:216. ومجدّدًا اذهب إلى القائمة Effect > Distort & Transform > Transform وقم بذات التعديلات السابقة من إزاحة مزلاج المحور العمودي بمقدار 1px وأبقِ على خيار Transform Objects فقط مفعّلًا. وهكذا سيبدو الخط البياني مع التعديلات والمزايا المُضافة كما في لوحة المظهر. ومن لوحة المظهر حدّد الحدود الأولى ذات اللون السماوي الفاتح والحجم 4 بكسل ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow واجعل النمط Soft Light ومستوى التعتيم Opacity 50% وإزاحة المحور X 0 وإزاحة المحور Y بمقدار 2 مع اختيار اللون الأسود. وبهذه الظلال المُضافة أصبح الخط حيويًّا ونابضًا بالحياة وبعبارة أخرى أصبح غير مسطّح وجميل المظهر. وعلى الرغم من أننا جعلنا الانحناءات ناعمة ومستديرة وغير قاسية إلا أن المظهر العام للخط يبدو قاسيًّا عند المنحنيات لذلك سنقوم بجعلها أكثر انحناءً. حدّد كامل مسار الخط البياني من لوحة المظهر Path ثم اذهب إلى القائمة Effect > Stylize > Round Corners ضع القيمة 10px عند خانة نصف القطر. ولاحظ زيادة الانحناء للمنعطفات في الخط البياني. الآن أصبح الخط البياني جاهزًا. وإذا كنّا سنقوم برسم خطوط بيانية أخرى فيجب علينا حفظ هذا النمط من التعديلات الرسومية على الخط في لوحة Graphic Style وذلك حتى لا نضطّر لإعادة جميع المراحل السابقة على كل خط بياني جديد سنقوم برسمه. حدّد الخط البياني ثم افتح لوحة Graphic Style من نافذة Window ثم اضغط على أيقونة نمط جديد أسفل اللوحة ليتم حفظ النمط المستخدم على هذا الخط ضمن الأنماط الموجودة في اللوحة. ارسم خطًّا بيانيًّا جديدًا بشكل عشوائي (لا تنسَ أننا نرسم خطوطًا عشوائيةً في هذا الدرس لشرح عملية التصميم ولكن في المخططات الحقيقية يجب عليك اتباع قيم البيانات التي تعمل عليها لرسم الخطوط البيانية). حدّد الخط البياني الجديد ومن لوحة Graphic Style انقر على النمط الذي سبق وأن حفظناه في الخطوة السابقة. ستلاحظ أن الخط الجديد أصبح يمتلك بروزًا وظلالًا كالخط القديم تمامًا وبنقرة واحدة فقط. هذه العملية مفيدة جدًّا خصوصًا عندما نعمل على تصميم عناصر كثيرة في التصميم الواحد ويكون الكثير منها مرسومًا بذات النمط وله نفس التأثيرات المختلفة بحيث لن نضطّر لإعادة القيام بكل تلك الخطوات بل سنكتفي بنقرة واحدة للقيام بذلك. كل ما علينا القيام به هنا هو الذهاب إلى لوحة المظهر Appearance وتغيير ألوان الحدود الثلاثة للخط الجديد فقط لتمييزه عن الخط القديم مع الانتباه إلى جعل الحدود قاتمة أكثر بالتدريج من الأسفل إلى الأعلى كما في نمط الخط الأول. في هذه الحالة اخترت سلسلة من الألوان البنية لتلوين الخط الجديد. ارسم خطًّا بيانيًّا ثالثًا. طبّق عليه النمط أيضًا. غيّر ألوان الحدود الثلاثة إلى سلسلة من الألوان الخضراء. والآن لسنا مضطّرين لإبقاء عملية الرسم على الشبكة Grid بمستوى 10 بكسل في كل حركة. سنعيد ضبط إعدادات الشبكة من القائمة Edit > Preferences > Guides & Grid ثم ضع القيمة 1 بكسل في خانة Gridline every. استخدم أداة النص بالخط الذي تراه مناسبًا لتصميمك. أنا اخترت خط Adobe Arabic القياسي وبحجم 30px ثم اكتب القيم على المحور العمودي.وباعتبار أننا نرسم مخطّطًا بيانيًّا لبيان عدد الزيارات اليومية لمواقع الإنترنت فسنضع القيم من 100 إلى 1000 كما في الصورة. وكما قلنا فهو مخطط بياني لعدد الزيارات اليومية لذلك سنضع أسماء الأيام في الخط الأفقي أسفل المخطط. حدّد جميع النصوص وطبّق ظلًّا عليها من خلال الذهاب إلى القائمة Effect > Stylize > Drop Shadow اجعل النمط المستخدم Soft Light كالعادة والتعتيم 85% والإزاحة على المحورين بقيمة 2px. أصبحت النصوص حيوية أكثر بوجود الظلال تحتها. اكتب عنوان المخطط أعلى التصميم مع زيادة حجم الخط إلى 42 ولتطبيق ذات التأثير الأخير اضغط الاختصار Shift+Ctrl+E أو اذهب إلى القائمة Effect > Apply Drop Shadow ارسم ثلاثة خطوط صغيرة فوق بعضها أسفل العنوان مباشرة إلى جهة اليمين وطبّق عليها النمط المستخدم على الخطوط البيانية واستخدم ألوان الخطوط البيانية الثلاثة. حدّد الخطوط الثلاثة ثم افتح لوحة المحاذاة Align وغيّر خيار Align to أسفل يسار اللوحة إلى Align to Selection ثم اختر الخيار الخيار العمودي من Distribute Spacing بحيث ستقوم هذه العملية بتوزيع المسافات بالتساوي بين الخطوط. أكتب أسماء المواقع الثلاثة الافتراضية بجانب الخطوط الثلاثة. اذهب إلى لوحة الطبقات Layers ثم ألغِ القفل من طبقة الخلفية. استبدل لون التعبئة الجامد للخلفية بتدرج لوني ثم قم بتعديل اللون الأيسر للتدرج اللوني عبر النقر المزدوج عليه واختيار اللون 440000#. ثم غيّر اللون الأيمن من التدرج اللوني إلى اللون 220000#. استخدم أداة التدرج اللوني من لوحة الأدوات ثم ارسم اتجاه التدرج بشكل قطري من الركن العلوي الأيسر إلى الركن السفلي الأيمن. وبهذا نكون قد انتهينا من تصميم مخطط بياني أنيق وحيوي وجميل ومفعم بالألوان والتأثيرات المتنوعة. تعلّمنا في هذا الدرس أهمية حفظ كامل النمط من تأثيرات وتعديلات على المظهر من لوحة المظهر عبر وضعها في نمط واحد يمكن الرجوع إليه وإعادة تطبيقه مجدّدًا على عناصر جديدة من خلال لوحة Graphic Style، كما تعلمنا كيفية إضافة حدود على العنصر وتلوينها وتحريكها وتعديل أحجامها للحصول على بروز وتأثير جميل على العنصر بالإضافة إلى تطبيق تأثير الظلال على العناصر المختلفة.

لا شك في أننا جميعا مُلمّين بالتقنيات الكلاسيكية التي كانت تستخدم في معالجة الصور الفوتوغرافية، وذلك من خلال مشاهدتنا لمجموعة أمثلة لصور تتميز بألوانها البنية الداكنة. لكن وطيلة السنوات الماضية استخدم المصورون الرقميين بعض الأحبار الكيميائية بغرض خلق تأثيرات على صورهم ومعالجتها. ومن بين تلك التقنيات نجد تقنية split tone والتي تخلق تأثيرًا لونيّا أزرق غامق ونحاسي على الصورة . في درسنا هذا سنستخدم برنامج فوتوشوب Photoshop لعمل تلك التأثيرات الكلاسيكية بشكل رقمي عن طريق استخدام خاصية Color Balance adjustments وعمل تعديلات لونية وأيضا خلق نفس التدرجات الزرقاء والصفراء. استخدامنا لتأثير لوني بني داكن سيضيف للصورة مظهرًا كلاسيكيًا برتقاليًا/بني اللون وبالتالي فإن النتيجة التي سنحصل عليها ستكون أكثر دفئا ونعومة من استخدمنا للتأثير اللوني الأبيض والأسود. وعلى الجانب الآخر فإن استخدام تقنية Split toning ينتج عنه تأثيرات تجعل الصورة أكثر وضوحا عن طريق خلق تركيبات لونية مميزة. من أشهر التقنيات المستخدمة في معالجة الصور نجد تقنية تفتيح الأجزاء المُضاءة باستخدام اللون البني الداكن، ثم معالجة الأجزاء المضللة باستخدام selenium لخلق مزيج حاد بين اللونين الأزرق والأصفر فينتج لنا تأثير باهت على الصورة. تعتبر هذه التقنية مناسبة لصور الأماكن المهجورة أو المناطق الحضرية. وهذا مثال لذلك النوع من التأثيرات مطبق على صورة لصديق لي تأثير Sepia/Selenium split سيظهر بشكل جيد لو تم تطبيقه على صورة لمناطق خالية أو معزولة لإعطائها بعض الأجواء القاتمة. في درسنا هذا سنستخدم صورة من ذلك النمط والتي قام بالتقاطها صديق لي. الغرض من تعتيم الصورة الفوتوغرافية هو إضافة بعض الألوان إلى الصورة البيضاء والسوداء قبل إضافة الألوان المتاحة على الشريط. لذلك فإن أول خطوة سنقوم بها باستخدام فوتوشوب هو تحويل صورتنا الرقمية الحديثة إلى صورة أحادية اللون. أفضل طريقة لفعل ذلك دون أن نفقد جودة الصورة هو عن طريق الضغط على زر New adjustment layer الموجود أسفل لوحة الطبقات، ثم نحدد الخيار أسود وأبيض Black & White. نضيف خاصية Adjustment Layer مرة ثانية ونحدد الخيار Color Balance. هناك أيضا طرق أخرى لتغيير ألوان الصورة مثل خاصية Gradient Maps أو خاصية Curves adjustments. إلا أن الخيار Color Balance يُعتبر الأسهل لتحديد قيم الألوان كاللونين الأزرق السماوي والأصفر نتأكد من أننا حددنا خانة الحفاظ على اللمعان Preserve Luminosity، بعدها نُحدّد الخيار Shadows للخاصية Tone. نزيد من قيمة اللونين الأزرق السماوي Cyans والأزرق العادي لخلق التأثير Selenium effect عن طريق سحب المؤشر وتحديد القيمة 30 للأزرق السماوي و40 للأزرق العادي. بعدها نحدد الخيار Highlights، ثم نغير المؤشر لإظهار اللون البني الداكن أي نحدد قيمة اللون الأحمر 25 والقيمة 35 للون الأصفر. بدأنا فعلا بتطبيق التأثير split toning الغامق على الصورة لكن التعديلات النهائية يمكننا عملها عن طريق اختيار الخاصية Midtones ونضيف القيمة +10 بجانب اللون الأحمر والذي سيظهر اللون البني الداكن قليلا، أو انتهاج طريقة معاكسة بإضافة المزيد من اللون الأزرق. أنهينا عمل التأثير اللوني الغامق split toning، لكني دائما أحب أن أجعل الصورة أكثر وضوحا وأيضا أن استخدم المُرشّح High Pass filter. ننقر على CMD+A لتحديد الصورة كاملة ثم نتبع المسار: Edit > Copy Merged ونلصق نسخة الصورة في طبقة جديدة تكون أعلى باقي الطبقات. نتبع المسار: Filter > Other > High Pass ثم نعدل على المؤشر إلى غاية ظهور تفاصيل الصورة على الخلفية الرمادية. نُغيّر نمط الطبقة من high pass إلى Linear Light ثم نخفض قيمة الشفافية إلى 30% للتخفيف من درجة التأثير فتبدو الصورة طبيعية أكثر. حين نستخدم التأثير اللوني sepia/selenium split فإننا نغير جميع ألوان الصورة إلى اللونين الأزرق والأصفر بالإضافة إلى إنشاء تأثير لوني قاتم والذي سيعزز هذا النمط خصوصا إذا استخدما صورًا لأماكن مهجورة. ترجمة -وبتصرف- للدرس: How To Give Your Photos a Gloomy Split Toning Effect لصاحبه: Chris Spooner.

لعد تعرّفنا في درس سابق على كيفية إدراج الصور في مستندات وورد، كيفية اقتطاع جزء منها، وكيفية التحكّم في أبعادها. كما تعلّما كيف نضغط الصور لتقليل أحجامها عند حفظ المستند. سنغطّي في هذا الدرس كيفية استخدام الأوامر والخيارات الأخرى في تبويب تنسيق Format السياقي لنتحكّم في أنماط الصور وتغيير موضعها ومحاذاتها مع النص ومع الورقة نفسها. تنسيق الصورة يوفّر وورد مجموعة من الأنماط الجاهزة والخيارات لتعديل مظهر الصور، وستجد نفس هذه الخيارات على برامج أوفيس الأخرى عند إدراج الصور عليها، مثل اكسل وبوربوينت. لتعديل نمط الصورة نقوم بتحديدها أولًا لإظهار تبويب تنسيق، ثم نفتح معرض الأنماط الجاهزة من مجموعة Picture Styles: بمجرّد تمرير مؤشر الفأرة فوق النمط، سيُطبّق على الصورة بشكل مباشرة كمعاينة. وكما نلاحظ توجد العديد من الأنماط المضمّنة، منها بحدود بسيطة، وأخرى ذات انعكاس، وأخرى بإطارات بيضوية أو ناعمة الحواف. ننقر على النمط لتطبيقه على الصورة. ولا ينتهي تنسيق الصورة باختيار أحد الأنماط، إذ توجد مجموعة خيارات أخرى بإمكاننا استخدامها لتخصيص كل نمط حسب الرغبة. فمن قائمة Picture Border يمكننا تغيير لون حد الصورة، سمكه، ونمطه: تختلف الألوان الافتراضية باختلاف ألوان نُسق Theme المستند، وبإمكاننا دائما الوصول إلى المزيد من الألوان بالنقر على More Outline Color. وكذلك نستطيع تطبيق تأثيرات أخرى على الصورة، كالظل Shadow، التوهّج Glow، الانعكاس Reflection، أو استدارة ثلاثية الأبعاد 3D Rotation من قائمة Picture Effect: ويمكن أن نحصل على تأثيرات رائعة عندما ندمج أكثر من تأثير معًا. على سبيل المثال عندما نطبّق التأثير Cool Slant من مجموعة Bevel والتأثير Prospective Contrasting Left من مجموعة 3D Rotation: سنحصل على تأثير جميل وكأنّ للصورة بعد ثالث: وللتحكّم أكثر في خيارات كل تأثير على حدة، نفتح جزء تنسيق الصورة ونتلاعب في القيم إلى أن نحصل على التأثير المرغوب. سنقوم هنا مثلا بزيادة الارتفاع Height من قسم 3-D Format> Top Bevel إلى 20 pt لإعطاء الصورة عمق أكبر: وهكذا يمكن استخدام الأنماط الجاهزة كنقطة بداية تنسيق الصورة ومن ثم التعديل عليها، أو استخدام الخيارات المتوفرة في قائمة Picture Effect والتلاعب بإعداداتها من جزء تنسيق الصورة لخلق التأثير المرغوب. أما قائمة تخطيط الصورة Picture Layout فيمكننا استخدامها لتحويل الصورة إلى عنصر SmartArt بشكل مباشر وتسهيل ترتيبها وإضافة التسميات التوضيحية لها: عند تطبيق أحد الخيارات المتاحة، سنُلاحظ ظهور تبويب تصميم Design السياقي الذي يحتوي على مجموعة خيارات مفيدة لتصميم SmartArt وتخصيصه: لننتقل الآن إلى مجموعة Adjust التي تحتوي على المزيد من الأوامر لتعديل مظهر الصورة. من قائمة تصحيحات Corrections وبالتحديد من مجموعة Soften/Sharpen يمكننا أن نجعل الصورة مموّهة أكثر أو ذات تفاصيل واضحة أكثر بالنقر على درجة النعومة/الحدّة المرغوبة: أما من مجموعة Brightness/Contrast فيمكننا التحكّم في إضاءة الصورة ودرجة تباين ألوانها: بالطبع يكون وقع هذه التأثيرات مختلفًا من صورة إلى أخرى. على سبيل المثال، قد تكون ألوان الصورة غامقة وتحتاج إلى إضاءة لتفتيحها، في هذه الحالة يمكننا استخدام خيار السطوع 20% أو أكثر، لكن إذا كانت ألوان الصورة فاتحة من الأصل، في هذه الحالة سيؤدي تطبيق تأثير السطوع إلى تشويه منظر الصورة. إذًا، كل ما علينا فعله هو تجربة مختلف الخيارات للحصول على المظهر المطلوب من قائمة Color يمكننا التحكّم ببعض خصائص ألوان الصورة مثل التشبّع Saturation ودرجة اللون Color Tone (أو درجة حرارة اللون). إذ يمكننا أن نجعل شدّة ألوان الصورة عالية جدًا أو منخفضة جدًا. كما يمكننا جعل الصورة ذات ألوان دافئة أو باردة: أما مجموعة خيارات إعادة التلوين فيمكننا استخدامها لجعل الصورة بلون مختلف تمامًا عن ألوانها الأصلية. ويمكننا الاستفادة من هذه الخيارات لجعل ألوان الصورة ملائمة لبقية عناصر المستند. ويظهر تأثيرها جليًا على العناصر الجرافيكية ذات الألوان المصمتة مثل القصاصات الفنية: أمّا الخيارات في قائمة Artistic Effects فيمكننا استخدامها لتطبيق تأثيرات لجعل الصورة ذات مظهر بلاستيكي، أو لجعلها وكأنّها مرسومة بألوان مائية، أو غيرها من الخيارات. وربّنا ستجد هذه الخيارات مألوفة إذا اعتدت العمل على برنامج فوتوشوب: وكما قلنا سابقًا، يمكن أن تكون هذه التأثيرات ملائمة لصورة معيّنة، وغير ملائمة لأخرى، حسب نوع الصورة ودرجة ألوانها وإضاءتها. إزالة أجزاء من الصورة من الأدوات الجيّدة التي يوفرها ميكروسوفت وورد هي Remove Background التي تُستخدم لإزالة الأجزاء غير المرغوبة من الصورة تلقائيًا. على سبيل المثال نريد إزالة خلفية الصورة أدناه ونحتفظ بالزهرة فقط: سنحدد الصورة وننقر على Remove Background من تبويب تنسيق السياقي: ستتم إحاطة الصورة بإطار ذي مقابض بالإضافة إلى تظليل بعض الأجزاء باللون البنفسجي، وهذه هي الأجزاء التي سيتم حذفها من الصورة. ويعتمد تظليل هذه الأجزاء على تباين ألوانها مع بقية أجزاء الصورة: سنستخدم المقابض لتكبير الإطار ليحتوي صورة الزهرة بأكملها. وكما نلاحظ في الصورة أدناه، ما يزال هناك جزء صغير على يمين الزهرة لا نرغب في الاحتفاظ به: في هذه الحالة ننقر على الأداة Mark Area to Remove ونستخدم القلم لتأشير الأجزاء التي نريد حذفها: وبنفس الطريقة يمكننا استخدام الأداة Mark Area to Keep لتأشير الأجزاء التي نريد الاحتفاظ بها إذا قام وورد بتظليل تلك الأجزاء باللون البنفسجي. بعد الانتهاء ننقر على زر Keep Changes: بالطبع لن تكون عملية القص مثالية جدًا، لكنّها ما تزال أداة مفيدة في حالات معيّنة وتساعد على إزالة الأجزاء غير المرغوبة بسرعة وسهولة: تعديل موضع الصورة ومحاذاتها في تبويب تنسيق نفسه، وبالتحديد في مجموعة Arrange توجد الأوامر التي تُستخدم للتحكم في موضع الصورة في الورقة ومحاذاتها بالنسبة للهامش أو الورقة، بالإضافة إلى طريقة توزيع النص أو التفافه حول الصورة. من قائمة Position يمكننا اختيار الموضع الذي نريد أن تظهر فيه الصورة على الورقة، سواء كان في الوسط، أعلى اليمين، في وسط اليسار أو غيرها من الخيارات. علمًا أنّه سيتم تغيير التفاف النص حول الصورة تلقائيًا حسب ما يتناسب وموضعها: ومن قائمة Text Wrap نختار الطريقة التي يتوزّع فيها النص حول الصورة. المثال أدناه يوضّح بعض طرق التفاف النص، ويعتمد اختيارنا لإحدى الطرق على التفضيل الشخصي وحسب ما يلائم تنسيق المستند: أمّا قائمة Align فنستخدمها لتحديد طريقة محاذاة حدود الصورة مع هوامش الورقة الجانبية أو العلوية/السفلية Align to Margin. أمّا إذا رغبنا في أن تتم المحاذاة مع حدود الصفحة، فنؤشر الخيار Align to Page ثم نختار نوع المحاذاة: الصورة أدناه توضّح الفرق بين المحاذاة إلى اليمين مع هوامش الصفحة والمحاذاة إلى اليمين مع حدود الصفحة: الخياران Distribute Horizontally وDistribute Vertically يُستخدمان لتوزيع المسافة بين الصورة بصورة متساوية أفقيًا أو عموديًا على التوالي، وهذا في حال قمنا بإدراج أكثر من صورة. نحدد جميع الصور بالضغط على مفتاح CTRL أثناء التحديد، ثم ننقر على Distribute Horizontally إذا كانت الصورة موضوعة على مسار أفقي أو Distribute Vertically إذا كانت موضوعة على مسار عمودي: تدوير الصور لتدوير الصورة 90 درجة باتجاه اليمين أو اليسار، ننقر على قائمة Rotate ونختار Rotate Right 90 أو Rotate Left 90: أمّا إذا رغبنا في تدويرها بزاوية محدّدة، ننقر على More Rotation Options ثم ندخل الزاوية المرغوبة في حقل Rotation: كما بإمكاننا قلب الصورة حول المحور الأفقي أو المحور العمودي بتحديد أحد الخيارين Flip Horizontal أو Flip Vertical: خاتمة لقد تعلّمنا في هذا الدرس مختلف الأوامر والخيارات التي يوفّرها وورد لتحسين مظهر الصور وجعلها متناسقة أكثر مع نُسق المستند. كما تعرّفنا على كيفية محاذاتها وموضعتها لتصبح ملائمة لتخطيط المستند. وبالرغم من أننا استخدمنا الخيارات الافتراضية المضمّنة في كل قائمة، إلّا أنّه يمكننا أن نذهب إلى حد أبعد ونخصّص هذه الخيارات يدويًا باستخدام جزء تنسيق الصورة (كما فعلنا مع الصورة المجسّمة) ومربع الحوار Layout (كما فعلنا عند تدوير الصورة).

تحدّثنا في الجزء الأول من سلسلة أساسيّات التصميم الجرافيكي هذه عن العناصر الأساسية للتصميم، كالأشكال، الخطوط، الخامات والعناصر الأخرى. وفي هذا الجزء سنلقي نظرة، وبشكل مفصّل أكثر، على مبادئ التصميم التي من المهّم التعرّف عليها، لأنها هي التي تفصل بين المصمّم الجيّد والمصمّم الرائع. بعض المبادئ التي سنغطّيها اليوم يتّم تطبيقها لا شعوريًّا، لكنّها موجودة بالتأكيد، وسنقوم بعرض بعض الأمثلة من المواقع لكي نوضّح المفاهيم. 1. التوازنالتوازن هو طريقة توزيع عناصر التصميم في مخطط الصفحة. وإذا كان التوازن جيّدًا يمكن تحقيق المتانة في التصميم، على الرغم من أنّ بعض المصمّمين في الآونة الأخيرة يفضّلون التصاميم غير المتوازنة لأنها مُفعمة بالحركة وتعرض وجهة نظر مختلفة تمامًا. وتعتبر الصفحات الشخصيّة هي الأكثر ملائمة للمخططات غير المتوازنة، وسنرى بعض الأمثلة لاحقًا. يجب أن تعرف الأنواع الثلاثة من التوازن لكي تكون قادرًا على ملاحظة أي نوع من التوازن يمتلك الموقع الّذي تعاينه. وهذه الأنواع هي: المتناظر symmetrical.غير المتناظر asymmetrical.الشعاعي radial.النوع الأول يعني أن جانبيّ التصميم هما بنفس الشكل، الخطوط، الخامات، وهكذا. ونقصد بجانبيّ التصميم؛ الأيمن والأيسر، لأن هذا النوع من التناظر يكون غالبًا حول المحور العمودي، وهو الشائع في التصميم هذه الأيام. توجد بعض الأمثلة عن التناظر حول المحور الأفقي، أو المحورين معًا، ولكنّ هذا الأمر نادرًا. التصاميم المتناظرة هي الغالبة في مواقع الأنترنت حتّى خمس سنوات مضت. النوع الثاني من التناظر يحدث عندما يكون جانبّي الموقع لا يشبهان بعضهما، لكن مع ذلك تبقى بعض العناصر متشابهة. وعلى الرغم من أن هذا النوع يسمى غير متناظر ألا إنه يحتوي على بعض سمات التناظر، كما في النوع الأول من التوازن، ولكن بمستوى أقلّ. والمواقع غير المتناظرة تصبح أكثر وأكثر شعبيّة هذه الأيام (لاحظ مخططات وورد بريس التي تملك جهة للمحتوى وجهة للشريط الجانبي). التوازن الشعاعي يحدث عندما تكون عناصر التصميم موزّعة بشكل دائري. وهذا النوع يعطي إحساسًا بالحركة والحيويّة. لكن هذا النوع لا يستخدم بكثرة، لأن المصمّمين، وحتّى الخبراء منهم، يواجهون المشاكل في تخطيط التصاميم من هذا النوع. وكما ذكرنا سابقًا، يمكن تحقيق التوازن من خلال الأشكال، الألوان، الخامات، الخطوط، والعناصر الأخرى التي تحدّثنا عنها في الجزء الأول. صفحة Florida Flourish تعتبر مثالًا جيّدًا على موقع متناظر كلّيًّا. في موقع Duplos تم استخدام النوع غير المتناظر وقد عمل بصورة جيّدة جدًا. 2. السيادة والأولوية (Dominance and Priority)تمّ جمع هذين المبدئَين معًا لأنّهما مرتبطان بشكل وثيق. فكلاهما يتعلّق بتجربة المستخدم، لأن عدم وجود الأولويّة والسيادة لبعض العناصر قد يؤدّي إلى الإرباك. إنّ مستوى السيادة هو الّذي يحدّد أهمّية العناصر المختلفة، مثل القائمة، الشعار، المحتوى، أو ذيل الصفحة. وبالطبع يمكن تحقيق ذلك أيضًا عن طريق التلاعب بنوع الخط والحجم. مع ذلك لنتعمّق أكثر للتعرّف على معنى ودور كل من السيادة والأولويّة. هنالك ثلاث مستويات رئيسية للأولوية، وأوّلها العنوان أو نقطة التحويل (تسمّى أيضًا الدعوة إلى الإجراء CTA) والّذي يُعتبر كعنصر أساسي. تأتي بعده العناصر الثانوية مثل الصور التي تستخدم للتعبير عن شيء معيّن، أو تستخدم، في أغلب الأحيان، للتصّفح. من الواضح إن هذه العناصر ليست الأكثر أهمية في الموقع، لكن مع ذلك لا يمكن إنشاء أيّ موقع بدونها. العناصر التي تأتي في المرتبة الثالثة هي المعلومات؛ مثل روابط الذيل أو المعلومات الوصفية في المدوّنات أو العناصر المختلفة، ويمكن أن يقوم الموقع بدون هذه العناصر (الثالثة). مع ذلك تستخدم هذه العناصر في كثير من الأحيان لأنها تُكمل التصميم؛ إما بتوفير المزيد من المعلومات، أو بإكمال المخطط مع بعض العناصر. في موقع Area17 تمّ التشديد على العنصر السائد في الزاوية العلويّة اليسرى. كما تجذب عبارة الترحيب الانتباه بسبب اللون. 3. التناسب Proportionالتناسب مهمّ، وهو الذي يمثّل حجم العناصر مقارنة ببعضها البعض. للتناسب تأثير قويّ على المستخدم، وهو مرتبط أيضًا بالمبدأ السابق. من البديهي أن تكون العناصر الأكبر ذات وقع على المستخدم أقوى من العناصر الصغيرة. تعمل السيادة، الأولوية، والتناسب معًا على تأكيد رؤية المستخدم للمعلومات على الموقع بصورة صحيحة. فمثلًا، من الخطأ أن تجعل حجم الخط في الذيل أكبر منه في المحتوى، لأن ذلك يعني عدم أخذ هذه العناصر الثلاثة بالاعتبار. يستخدم موقع Bluecated Interactive مبدأ التناسب لغرض جذب الانتباه إلى الصورة. 4. التباين Contrastمبدأ آخر من المبادئ المهمّة، ليس فقط في التصميم، وإنّما في التصوير والفنون البصريّة الأخرى. لا نظن أن هنالك حاجة للتعمّق في هذا المبدأ، لأن كل شخص يعرف معنى التّباين. فعندما يكون هنالك تباين كاف بين العناصر، فإن ذلك يعني أنّ بعضها يبرز أكثر من الأخرى. وإذا رغب المصمّمون بدمج العناصر معًا، فإنّهم يقومون بذلك عبر التباين الضئيل بين هذه العناصر. ويمكن تمييز العناصر بعضها عن بعض باستخدام درجة عالية من التباين. إذا كان التوازن يتحقق من خلال الأشكال والخطوط، فإنّ التباين يتحقق من خلال الألوان. مع ذلك، فإنّ مبدأ التباين تغيّر مؤخّرًا بواسطة الخامات وأسلوب تنسيق النصوص Typography، لذلك يصبح أكثر وأكثر شعبيّة. عندما يكون للتصميم أسلوبًا مثاليًا لتنسيق النصوص، فإنّ ذلك يؤدّي، ليس إلى تباينٍ مثاليّ فحسب، وإنما إلى التناسب، السيادة والأولوية كذلك. من السهل ملاحظة أنّ المبادئ الثلاثة الأخيرة مرتبطة نوعًا ما مع بعضها، بطريقة أو بأخرى. فلو حصل وتحدّثنا بصورة عامّة عن هذا الموضوع، يمكننا أن نُدرج هذه المبادئ معًا في نفس الفقرة. في موقع i love typography أعلاه، تجد حسن استعمال التباين مباشرة في العنوان الرئيسي للموقع، حيث أن اللون الأخضر تباين بشكل ملحوظ مع اللون الرمادي الغامق. قد يكون التباين أيضا لإبراز زر معين أو زر إجراء (Call to action). 5. الإيقاع Rhythmقد يكون هذا المبدأ جديدًا على القارئ. إيقاع الصفحة هو المبدأ الذي يجعل عين الإنسان تتحرك من عنصر باتّجاه الآخر. يضمن الإيقاع حركة العين وبأي ترتيب يجب على المستخدم رؤية العناصر. قد يكون هذا المبدأ صعب لتحقيقه، لأن كل شخص لديه طريقة خاصّة للنظر إلى الموقع، وعملية جعل كل شخص ينظر بنفس الطريقة قد تكون مرهقة جدّا. هنالك نوعان من الإيقاع: السلس والتدريجي. النوع الأول هو التفاوت، وأبسط مثال هو حركة المياه التي تجري في الأساس بنفس الاتّجاه لكن هنالك الكثير من التفاوت في طريقة تحرّكها. أمّا الإيقاع التدريجي فيحدث عندما يكون هنالك تسلسل واضح في الطريقة التي يجب أن تتحرك بها العين بين العناصر. في معرض أعمال David Desandro تمّ اتّباع إيقاع منتظم جدّا وتدريجي. 6. الانسجام والوحدةإنّ الحصول على تصميم مذهل لا يمكن أن يتحقق، حتى وإن طبّقنا جميع المبادئ أعلاه بصورة صحيحة، بدون الانسجام والوحدة، وهذا ما نراه غالِبًا في الحياة الواقعية. فكثيرًا ما نسمع عن الأغنياء الذين يمتلكون كلّ شيء يريدونه، لكنّهم يفتقرون إلى الانسجام والألفة في حياتهم. القاعدة نفسها تسري في التصميم؛ فإذا كانت جميع العناصر مرتبطة بصورة صحيحة نكون بذلك قد حققنا ما نسمّيه بالوحدة. لكن أن تضع جميع هذه العناصر في الصفحة دون ربطها ببعضها لا ينتج لك تصميمًا، وإنّما صفحة ذات كومة من العناصر. وبالعكس؛ إذا كانت العناصر مُكملة لبعضها البعض، والموقع سهل على العين ويتيح تجربة جيّدة للمستخدم فهذا يعني أن عملك قد انتهى إلى حدّ ما. لا يوجد هنالك داع للمثال هنا، نحن نعلم جميعًا أنّ المواقع ذات الانسجام والوحدة يمكن إيجادها في كل مكان؛ فلتفكّر في موقع يُعجبكَ كثيرًا وتستحضره في ذاكرتك دائمًا. على الأرجح هذا الموقع يتّسم بالانسجام والوحدة. الخلاصةدار المقال الثاني من السلسلة حول عملية تحليل المبادئ الأساسية للتصميم والتي يجب أن تعرف عنها كمصمّم. بعد قراءتك للمقالين الأولين تكون قد حصلت على الدراية الكافية لكي تبدأ تصميم مخططك الخاص، لكن تمهّل قليلًا! المقال الثالث من هذه السلسلة سيُغطّي أساسيات التكوين، كالنقطة المحورية، نظرية الشبكة، وقوانين جِشتالت (gestalt laws)، وغيرها التي تستخدم في تصميم منتجات أخرى كالمجلّات، النشرات، أو الكتيّبات. ترجمة -وبتصرّف- للمقال Graphic Design Basics Part 2: Design Principles لصاحبه: James Richman. حقوق الصورة البارزة: Designed by Freepik.

سنتعلم في هذا الدرس كيفية تصميم لوحة لوجه طفل بأسلوب الفن الراقي الحديث WPAP ART وكما ترى في صورة النتيجة النهائية فإن اللوحة مفعمة بالألوان والأشكال المضلعة ما يجعلها مميزة وجميلة ومن السهل تصميم هذا النوع من الفنون، سنقوم بذلك في برنامج الإليستريتور. ما هو فن WPAP ART؟ هو فن متميز بإعادة رسم الوجوه بشكل خاص وبطريقة فنية مبتكرة ويمكن رسم شخصيات أو حيوانات أو حتى أشكال جامدة بهذا الأسلوب إلّا أن روّاد هذا الفن يقومون برسم الوجوه في الغالب. اختصار WPAP هو لعبارة Wedha’s Pop Art Potrait وذلك لأن هذا الفن منسوب باسمه بالكامل لمؤسسه الفنان المصمم وضاح عبد الرشيد وهو إندونيسي يستخدم الإليستريتور في التصميم وهذا الفن مميّز بكثرة ألوانه والمضلعات المتكسرة بحيث يبدو منبثقًا بطريقة ما من فن البكسل. وجميع اللوحات المصممة بهذا الأسلوب تعتبر تصاميم مسطحة. بكل الأحوال لا يحتاج إلى أية أدوات خاصة فقط برنامج الإليستريتور أو الفوتوشوب أو الإنكسكيب أو الكوريل درو أو أي برنامج قادر على رسم أشكال فكتور سيكون قادرًا على رسم هذه التصاميم. كيفية الرسم بأسلوب WPAP ART؟ سأعتمد في هذا الدرس على أسلوب مؤسس هذا الفن المصمم وضاح عبد الرشيد. سنحتاج إلى صورة أساسية لنقوم بتحويلها إلى لوحة WPAP ART لذلك حمّلت هذه الصورة المجانية لطفل صغير من موقع Flicker. افتح برنامج الإليستريتور ثم افتح ملفًّا جديدًا وهو بأبعاد 1067×1600 بكسل كما في الصورة التالية. وسندرج الصورة الأساسية عبر القائمة File > Place ثم نختار الصورة المطلوبة ونضعها بشكل تملأ لوح الرسم. وحتى نستطيع العمل فوق الصورة الأساسية بكل حرية سنقوم بقفل طبقة هذه الصورة من لوحة الطبقات. ثم سنقوم بإنشاء طبقة جديدة وهي الطبقة التي سنعمل عليها. يمكنك أن تستخدم أداة رسم المستطيلات Rectangle Tool لرسم أجزاء كثيرة من اللوحة وفي هذه اللوحة سنقوم بالرسم اعتمادًا على أداة القلم Pen Tool بالكامل. ابدأ برسم مسار حول الأجزاء الداكنة من العين وهي بؤبؤ العين بشكل موصول مع الرموش العليا. كما تشاهد فطريقة الرسم ليست دقيقة على الإطلاق بل هي تعبيرية وتجريدية أكثر بحيث ستشعر بالراحة والحرية أثناء الرسم وهو ما يجعل الرسم بهذه الطريقة سهلًا وممتعًا على عكس ما قد يبدو من خلال النتائج النهائية للوحات المصممة بهذا الأسلوب، إذ قد تبدو للوهلة الأولى معقدة وصعبة. من أهم مميزات هذا الأسلوب أن جميع خطوط الرسم مستقيمة فلا انحناءات فيها. فكما تشاهد في الصورة السابقة قمتُ برسم الرموش بشكل تقريبي فوق الرموش الأصلية كما أن حدود البؤبؤ مضلعة وليست دائرية. يمكنك في أي وقت أثناء عملية التصميم أن تقوم بإزالة إشارة العين من جانب طبقة الصورة الأصلية المقفلة في لوحة الطبقات لإخفائها والإبقاء فقط على طبقة التصميم لتشاهد كيفية ظهور التصميم والتعديل عليه إن اضطررت لذلك. قم بإزالة اللون من حدود الشكل والإبقاء فقط على لون التعبئة. الآن ارسم بياض العين بلون فاتح جدًّا وبنفس الطريقة عبر أداة القلم وبخطوط مضلعة فقط. والآن سننتقل إلى جفون العين وهنا سنبدأ بالإبداع بطريقتنا الخاصة حيث أننا لسنا مضطرين إلى رسم الجفن كله كجزء واحد كما فعلنا مع العين بل سنقوم برسم الجفون بعدّة أشكال مضلعة متداخلة ملونة بألوان مختلفة. ابدأ برسم الشكل الأول ولوّنه باللون الذي تريده. كما تلاحظ قمتُ برسم هذا الشكل متداخلًا مع أشكال العين وفوق بعض مساحة العين وذلك حتى لا أترك أي فراغات بين الأشكال. لهذا يجب علينا بعد الانتهاء من رسم كل شكل إرسال هذا الشكل الجديد خلف بقية الأشكال وذلك عبر الضغط على الاختصار ]+Ctrl+Shift في كل مرة أو بالذهاب إلى القائمة Object > Arrange > Send to Back والآن سنتابع بنفس الأسلوب بحيث سنرسم شكلًا جديدًا يكون متراكبًا قليلًا فوق الأشكال المحيطة المرسومة سابقًا لتجنب وجود أي فراغات في التصميم ثم نرسله للخلف وهكذا مع تغيير الألوان في كل مرّة. وسنتابع مع مراعاة بعض الأجزاء الأساسية في اللوحة الأصلية كالحاجبين بحيث سنقوم برسمها بشكل تقريبي مضلع وبلون داكن يمثّل وجودهما. أمّا باقي الأشكال الأخرى فستكون أيضًا متداخلة وملوّنة. ويمكنك في أي وقت أن تغيّر ألوان بعض الأشكال التي رسمتها في حال وجدتها غير متناسقة بالطريقة التي تريد رسم اللوحة بها. ولستَ مضطرًّا لرسم الأجزاء الكبيرة كالأنف والفم بشكل واحد كبير بل يجب أن يتم رسم عدّة أشكال بحيث تغطّي مساحة العنصر مع توضيح وجود هذا العنصر. هنا رسمتُ الأنف بشكلين منفصلين مع ترك المساحة الوسطى فارغة ما يجعلها تظهر في النتيجة النهائية باللون الأبيض بما أن لون الخلفية النهائي سيكون باللون الأبيض في هذا التصميم كما رسمتُ فتحتي الأنف بشكل منفصل أيضًا. يمكننا أن نرسم أشكالًا مضلعة رقيقة فوق منطقة الشعر للدلالة على اتجاه الشعيرات مثلًا أو قد يمكننا القيام بذلك فوق مساحات انعكاس الإضاءة على الشعر ولكنها في النهاية ستبقى أشكالًا مضلعة وغير منحنية، ولا ننسى تغيير الألوان. سنرسم الشعر بعدة أشكال متداخلة كما سنرسم الأذن أيضًا بعدة أشكال متداخلة مع مراعاة الشكل الأصلي والرسم فوق تفاصيل أجزاء العضو. نلاحظ أننا قمنا برسم الشعيرات الصغيرة قبل رسم كتل الشعر الكبيرة وذلك حتى لا تكون الأشكال الصغيرة خلف الأشكال الكبيرة لأننا نقوم بإرسال كل شكل جديد للخلف. ارسم الآن حلي الطفل. الدقة غير مطلوبة بحيث من الممكن أن نجعل الحلي على شكل مستطيلات فقط للتعبير عن وجودها. ارسم الشفتين واللسان وداخل الفم والسن الصغير الظاهر مع رسم بعض الأشكال المتعرجة فوق الشفاه للدلالة على انعكاس الإضاءة. تابع رسم باقي أشكال الوجه الملونة المتداخلة. والآن انتهينا من رسم أشكال الوجه كاملًا. يمكنك في أي وقت أن تعدّل ألوان الأشكال المرسومة. من الممكن الاكتفاء بهذا القدر من الرسم وذلك بحسب طبيعة التصميم الذي تعمل عليه في حال كنت بحاجة إلى الوجه فقط. ارسم أشكال الملابس بذات الطريقة مع مراعاة انحناءات الملابس وأجزاءها. الآن قم بإخفاء طبقة الصورة الأصلية وشاهد التصميم النهائي. أية تعديلات على الأشكال يمكنك القيام بها عبر أداة التحديد المباشر Direct Selection Tool كما يمكنك القيام بالتعديلات على الألوان أيضًا. وبعد الانتهاء من كافة التعديلات سنقوم بوضع اللمسة الأخيرة وهي الخلفية بحيث يمكنك جعلها بلون مختلف مع رسم بعض المضلعات العشوائية أو المربعات والمستطيلات العشوائية الملونة فيها أو أن تقوم برسم أشكال كبيرة بسيطة تغطي بعض الأجزاء منها كما فعلتُ هنا حيث رسمتُ شكلين كبيرين يغطيان مساحة كبيرة من الخلفية مع ترك باقي الخلفية باللون الأبيض. يمكننا بعدها نقلها إلى الفوتوشوب للقيام ببعض التعديلات كإضافة تأثير الجرونجي بالخامة المناسبة عبر وضع طبقة خامة الجرونجي فوق طبقة التصميم ثم تغيير خصائص مزج هذه الطبقة إلى Multiply مع تخفيف التعتيم للنصف تقريبًا حتى لا يطغى تأثير الخامة على التصميم الأساسي ومن ثم إضافة التوقيع أو الشعار. هذه لوحة مرسومة بأسلوب فن WPAP ART بسيطة وسهلة وجميلة. يمكنكم أيضًا القيام بذلك فالأمر سهل وغير معقّد. المصادر: صورة الطفل من موقع Flicker مجانية بالترخيص CC BY 2.0 للمصوّر GeniusDevil. صورة خامة الجرونجي مجانية ضمن حزمة Mega Freebie Bundle من موقع AlienValley.com.

عندما نكتب عادةً درساً عن معالجة الصور فإن الهدف يتمحور حول التعديل الدقيق للمستويات Levels وتوازن الألوان Colour Balance وذلك حتى نتمكن من إحياء المشهد، ولكن أحياناً يكون من الأفضل القيام بتعديلات إضافية لتحسين الصورة وزيادة التأثيرات الواقعية. سنقوم بتطبيق صبغة الألوان وتعديل التباين وإضافة تأثيرات الإضاءة لإعطاء الصورة شكلاً نموذجياً يشبه صور المجلات ولوحات الإعلانات. بعد أن أنهيت مشروع تعديل دراجتي مؤخراً قام صديقي ريك (Urbanpixels) باستخدام مهاراته في التصوير حيث صَوَّر بعض اللقطات الرائعة لي ولدراجتي في قصرٍ جورجيٍ أثري (لمشاهدة مجموعة الصور كاملة). لقد قام صديقي ريك بعمل ممتاز من خلال معالجة الصور والقيام بتعديلات دقيقة للإضاءة، التباين وتوازن الألوان ولكن لدي أفكار خيالية لإضافة بعض التأثيرات المذهلة للألوان والإضاءة وانعكاساتها لتحسين الصورة بمهارة عالية. هذه هي الصورة التي سنعمل عليها في هذا الدرس. إنها نسخة عن مشهد حياة حقيقية ولكن إضافة بعض تأثيرات الإضاءة ستجعل الدراجة تنبض بالحياة وتزيد من روعتها وتأثيرها. افتح الصورة ببرنامج فوتوشوب واتبع تعليماتي خطوة خطوة. أولاً أضف طبقة مستويات Levels Adjustment Layer في الفوتوشوب. قص بعض الظلال لإضفاء التأثير الداكن على الصورة. يمكنك أيضاً إدراج بعض الإشراقات Highlights في الداخل لزيادة التباين ولكن احذر من المبالغة في هذا الأمر. أضف طبقة خريطة تدرجات Gradient Map adjustment layer. قم بتعيين التدرج اللوني ليبدأ من الأزرق الداكن 020413 # إلى الأزرق الرمادي 2b4a61 # إلى الأصفر الباهت fce9bb #. كل ألوان الصورة سيتم استبدالها بالقيم التي قمت بتحديدها هنا. غيّر خصائص المزج لطبقة التدرجات اللونية إلى وضعية Overlay لتسمح للألوان الجديدة بالتفاعل ولتغير نغمة الصورة الأصلية، وتولّد ملامح الألوان الجديدة ببراعة. خفف Opacity لتخفيف التباين ولتخفيف آثار التأثيرات. الدراجة النارية هنا هي الموضوع الأساسي الذي نعمل عليه في هذه الصورة، إذاً فلنُشَغّل الإضاءة الأمامية ونجعلها تعمل. افتح تأثير توهج Lens Flare المناسب وألصقه في داخل المستند. عدّل مستويات الصورة Levels لتتأكد من أنّ الخلفية سوداء تماماً، بكل الأحوال لن تبقى مرئية بعد الخطوة التالية. بدّل خصائص المزج للتوهج إلى Screen لتحويل الخلفية السوداء إلى شفافة، والآن غيّر حجم وموقع التوهج فوق المصباح لتزوير إنارة هذا المصباح. غيّر Opacity لتضبط إضاءة المصباح ولإعادة بعض التفاصيل الخاصة بالمصباح. انسخ طبقة الإضاءة وبدّل الحجم والموقع لتكون فوق المصباح الصغير الثاني. اضغط CMD+T وغيّر دوران صورة الضوء حتى لا تبدو أنها صُنِعَت بصيغة نسخ/لصق. افتح التوهج الأصفر من حزمة التوهجات البصرية وألصقها فوق المصباح الرئيسي. هذه الصورة الاستثنائية لديها توهج إضافي يحتاج للإزالة. ارسم تحديداً حوله واحذفه. أضف توهجاً إضافياً يمثّل الانعكاس في عدسة النظارات الشمسية. افتح صورة توهج عشوائية وغيّر حجمها لتتسع فوق الصورة بأكملها. حدد التوهج الذي يناسب تكوين الصورة حيث سنستخدم المناطق البرّاقة لرسم التركيز على تلك المناطق في الصورة. بدّل طبقة التوهج الكبير إلى Soft Light وخفف Opacity لضبط التأثير. هذا يساعد على تفتيح الموضوع الرئيسي للصورة بينما نضيف أيضاً صبغة لونية طفيفة إضافية. أضف طبقة تعبئة لونية Color Fill adjustment layer مستخدماً الأزرق الداكن 0c1329 #. بدّل خصائص المزج لهذه الطبقة إلى Lighten حتى تحصر هذا اللون في الظلال وتحولهم من الأسود إلى ذلك الأزرق الداكن. هذه التعديلات اللونية الخفيفة وتأثيرات الإضاءة المُزَوَّرة تعطي الصورة تأثير مجلة روك أند رول بكفاءة عالية. ترجمة -وبتصرّف- للمقال: How To Enhance a Photo with Color & Lighting Effects لصاحبه Chris Spooner.