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

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

1. تخطي تصميم لوحات العمل أثناء عملية التصميم

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

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

2. محاولة إرضاء جميع المستخدمين

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

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

3. سؤال المستخدمين النهائيين عن رغباتهم

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

4. عرض البيانات بدون سياق

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

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

5. التصميم بأكثر من ثلاثة ألوان

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

6. إظهار جميع المعلومات للمستخدم بنفس الوقت

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

7. تجاهل تقييمات المستخدم ومدى تقبله

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

8. أن تسأل المستخدمين عن أنماط تمثيل البيانات

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

9. استخدام الألوان وتنسيقات في المخطط الشبكي

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

10. المقاييس التناظرية

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

11. وضع محتوى ثابت على لوحة التحكم

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

12. تفضيل التنويع عن سهولة الاستخدام

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

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

13. ترتيب البيانات على نحو غير فعال

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

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

14. إبراز البيانات المهمة على نحو سيء

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

15. التفاصيل الزائدة أو الدقة المفرطة في العرض

أحد أهداف لوحات التحكم، هي عرض البيانات الملائمة بأكثر قدر ممكن من الوضوح في التنسيق. لكن معظم المصممين يخطؤون في فهم هذا على أنه عرض البيانات حتى آخر فاصلة عشرية من أجل تحري الدقة. وفي هذه الحالة، فإنك تربك المستخدِمين بمعلومات غير ضرورية لقراءتها والتعامل معها، وهذا لن ينفعهم. فعلى سبيل المثال، يمكن تمثيل البيانات المدخَلة ذات القيمة 2345.67890 دولارًا أمريكيًا على أنها 2346 دولارًا أمريكيًا، أو 2.3K بدون فواصل عشرية زائدة.

16. استخدام إجراءات متأخرة على لوحة التحكم

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

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

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

ترجمة وبتصرّف للمقال 16 Things Not to Do While Designing Dashboards لصاحبه Harsh Raval.

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

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

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

حساب حسوب الموحّد

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

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

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

ستظهر لك صفحة تشير بنجاح عملية التسجيل، ولتفعيل حسابك الجديد هذا، عليك أن تفتح بريدك الإلكتروني وأن تفعّل الحساب من خلال الرسالة التي ستصلك من حسوب لأجل ذلك.

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

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

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

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

ولتأكيد هويتك انقر على أيقونة القائمة أعلى يمين الصفحة ثم اختر خيار تأكيد الهوية.

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

املأ البيانات بدقة كما هو مذكور في البطاقة الشخصية أو جواز السفر.

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

كرر العملية بالنسبة للوجه الخلفي للوثيقة.

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

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

والآن سنبدأ بالتعرّف على منصات العمل الحر والبداية ستكون مع منصة خمسات.

منصة خمسات

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

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

إضافة خدمة

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

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

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

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

نصائح لتحقيق النجاح ضمن منصة خمسات

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

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

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

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

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

" سأصمم لك شعارًا احترافيًا مميزًا بخمسة دولارات فقط ، وسيكون احترافيًا وفي يوم واحد…. الخ"

بل اشرح واستفسر بطريقة المتمرسين المحترفين فعلًا مثل:

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

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

منصة مستقل

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

لوحة التحكم في مستقل

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

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

معرض الأعمال

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

يجب أن تعمل على تنفيذ تصاميم عالية الجودة ومبتكرة مع أسلوب عرض مميز لها مثل النماذج المحاكية (MockUp) لزيادة جاذبية ورونق التصميم، فإن عرضك لتصميم غلاف كتاب سيظهر أجمل إن عُرِض على غلاف كتاب حقيقي.

لا تعرض أعمالًا منخفضة الجودة، بغرض زيادة عدد أعمالك فالعملاء لا يهتمون إن كان لديك 100 عمل في معرض أعمالك، لأنهم غالبًا لن يشاهدوها جميعها، فليكن عدد الأعمال وسطيًا بين 25 إلى 50 عملًا، وركّز على وضع أفضل أعمالك ضمن الأعمال العشرة الأوائل التي ستظهر في المعرض، ويمكنك تحقيق ذلك عبر إضافة أفضل أعمالك العشرة كآخر أعمالك في معرض الأعمال.

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

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

تصفح مشاريع التصميم

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

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

كيف تحصل على نسب قبول عالية لمشروعك

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

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

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

نصائح أثناء تنفيذ المشاريع

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

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

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

منصة بعيد

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

آلية عمل المنصة

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

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

كيفية التقدم الصحيحة للحصول على وظيفة

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

اضغط على زر "تعديل".

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

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

خاتمة

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

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

اقتباس

 هوية العلامة التجارية هي وسيلة للتواصل مع العالم، وتمييز العلامة عن منافسيها، وإنتاج تجربة مميزة تشجع الناس على التفاعل معها.

تصميم هوية بصرية بعنوان 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

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

التكامل في تطبيق عناصر الهوية البصرية على مواد العلامة التجارية

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

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

خاتمة

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

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

قواعد استخدام الصور

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

التحضير

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

هذه الصورة من موقع piqsels وهي مجانية ولكنها بحجم كبير جدًا 3989x5983px لذلك لا يمكننا استخدامها بحجمها الحالي للتصميم.

صُغّرت حجم الصورة وعولجت ألوانها لتتناسب مع غرض التصميم

الاقتران

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

هذه الصورة الأولى للرجل الذي يشعر بالضيق - الصورة بوساطة Alex Green من موقع Pexels

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

التعليق

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

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

مراعاة لوحة الألوان والهوية البصرية

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

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

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

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

وأحضرنا مجموعة أيقونات جاهزة كما في الشكل التالي.

مجموعة الأيقونات الرسومية هذه من موقع Freepik.

ثم أدخلنا الأيقونات المطلوبة ضمن الموقع دون تعديل، ستبدو كما يلي.

نلاحظ أن ألوان الأيقونات لا تتناسب مع نمط ألوان الموقع لذلك سنعمل على تعديل ألوان الموقع كما يلي.

الآن أصبحت رسومات الأيقونات متناسبة ومتناسقة مع نمط ألوان الموقع وحققنا مبدأ الوحدة في التصميم.

التركيز على الجمهور

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

مراعاة التصميم المتجاوب

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

الصورة بواسطة Italo Melo من موقع Pexels

التأكد من حقوق الملكية

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

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

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

مصادر الصور والرسوميات

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

مصادر الصور والرسوميات ذات حقوق ملكية

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

1. Shutterstock: يحتوي على صور فوتوغرافية ورسوميات نقطية وشعاعية.
2. Adobe Stock: يحوي صور وفيديوهات ورسوميات وصوتيات ونماذج ثلاثية الأبعاد.
3. Getty Images: يحوي صور فوتوغرافية وفيديوهات فقط.
4. DepositPhotos: يحوي صور وفيديوهات ورسومات شعاعية ورسوميات فنية.
5. Creative Market: ويحوي كل شيء تقريبًا من الصور والخلفيات والخامات والملمس والرسوميات الشعاعية والفنية والأنماط والأيقونات والشعارات والقوالب لكل أنواع التصاميم والنماذج ثلاثية الأبعاد والخطوط وغيرها.
6. StockUnlimited: يضم الصور الفوتوغرافية والرسوميات الشعاعية والأيقونات.
7. istockphoto: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات.
8. fotolia: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات أيضًا.
9. iclipart: يحوي قصاصات فنية (كليب آرت) وصورًا وفيديوهات ورسوميات شعاعية وفنية ورسومات متحركة وغيرها.
10. Bigstock: يحوي صور وفيديوهات فقط.
11. dreamstime: يحوي صور وفيديوهات عالية الدقة.
12. 123rf: يحوي صور وفيديوهات ورسوميات شعاعية وصوتيات.

مصادر الصور والرسوميات المجانية

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

هذا رسم توضيحي يبين أنواع تراخيص المشاع الإبداعي وسمات كل منها.

وإليك أهم مصادر الصور المجانية بمختلف التراخيص:

1. Freepik: يتضمن مجموعة كبيرة من الصور ولكنه مختص أكثر بالرسوميات الشعاعية والفنية النقطية، وهو من أشهر المصادر التي يعتمد عليها المصممون. ومع أن غالبية محتوياته مجانية للتحميل إلا أن ذلك بشرط إسنادها إلى الموقع.
2. Unsplash: يحوي صورًا مذهلة من المصورين المحترفين والمبتدئين.
3. Pixabay: أكبر مجموعة من الصور والرسوميات الشعاعية والفنية المجانية عبر الإنترنت.
4. Gratisography: مجموعة من الصور للمصور الموهوب ومصمم الرسوميات Ryan McGuire.
5. Pexels : صور مجانية ضمن النطاق العام من جميع أنحاء العالم.
6. Pikwizard: مصدر ممتاز إذا كنت بحاجة إلى صور ذات مظهر طبيعي للأشخاص.
7. Negative Space: موقع صور مجانية من المصورين الصاعدين.
8. StockSnap.io: يضيف الموقع مئات الصور يوميًا ويتم إصدار جميع الصور ضمن النطاق العام للمشاع الإبداعي CC0.
9. Burst: هو مصدر من شوبيفي Shopify يوفر صورًا مجانية لصالح رجال الأعمال. بعض الصور مرخصة بموجب الترخيص Creative Commons CC0 بينما تندرج الأخرى تحت رخصة الصورة الخاصة بشوبيفي.
10. Reshot: هي مكتبة ضخمة من الصور المجانية المنتقاة بعناية والتي لن تجدها في أي مكان آخر.
11. unDraw: أنشأت كاترينا ليمبيتسوني مكتبة من الرسوم البيانية المذهلة والقابلة للتخصيص والمرخصة من معهد ماساتشوستس للتكنولوجيا، إنها مجانية وليس هناك حاجة للإسناد أيضًا.
12. flaticon: يضم أكثر من 4 ملايين أيقونة على شكل رسوميات شعاعية ونقطية.
13. Vector4Free: تضاف كل يوم الرسوميات الشعاعية المجانية بواسطة فنانين من جميع أنحاء العالم وتتراوح من الرسوم الكرتونية الهزلية إلى الرموز والرسوم البيانية الخاصة بالأعمال والتكنولوجيا. ترخيصهم يفرض الإسناد إليهم.
14. Vecteezy: يحتوي Vecteezy على أكثر من 100000 من الرسوميات الشعاعية المجانية، ويدّعي أنه أكبر مجتمع للرسوميات الشعاعية في العالم، بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية.
15. Free Vector: يحوي مجموعات من الشعارات والرسوميات الشعاعية والأيقونات والفئات لتسهيل البحث. هناك أكثر من 16000 صورة متوفرة. بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية.

خاتمة

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

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

ما هو عنصر النص أو أسلوب الطباعة التيبوغرافي؟

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

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

المبادئ الأساسية لفن تصميم النصوص

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

1. المحارف والخطوط Typeface and Fonts: يجب الانتباه جيدًا عند انتقاء نوعية الخط المستخدم بحيث يجب أن تكون مميزة للعلامة التجارية أو للهدف من التصميم، ويجب أن نستخدم عائلة الخط ذاتها في التصاميم المتعددة للهدف ذاته مثل تصميم الهوية البصرية لعلامة تجارية وتصميم المنشورات الترويجية على مواقع التواصل الاجتماعي، مع مراعاة وزن الخط وتأثيره النفسي على القارئ حيث يختلف تأثير الخط الثخين عن سواه على سبيل المثال، ويمكن استخدام خطوط من عائلات خطية مختلفة شريطة التوافق فيما بينها. وللعلم فقط فالمحرف هو نوعية الخط فقط مثل Arial والخط هو تفصيل نوعية الخط مثل Arial Bold 12point.
2. انسيابية السطور Leading: وهي المسافة بين السطور بحيث يجب أن تكون موحدة وغالبًا ما تكون بارتفاع أعلى من ارتفاع خط النص نفسه.
3. التتابع Letter Spacing: وهي المسافة الموجودة بين الكلمات في النصوص العربية وبين الحروف ذاتها في النصوص اللاتينية.
4. طول سطر النص Line length: وهو الطول المستخدم لكل سطر في النص، فلا يجب أن يكون ممتدًا من بين حافتي التصميم ولا أن يكوّن من النص عمودًا نحيفًا.
5. الهرمية Hierarchical: وهو نفس المبدأ الخاص بالتصميم ولكنه يتعلق هنا بالنص فقط، حيث يجب ترتيب النصوص بحسب الأهمية فيكون النص الأهم هو الأثقل من ناحية الوزن البصري مثل أن يكون أكبر حجمًا وأبرز لونًا وأثخن وغير ذلك، ثم النص الذي يليه من حيث الأهمية يجب أن يكون أخف من ناحية الوزن البصري، ثم الذي يليه وهكذا.
6. اللون Color: يساعد على زيادة بروز النص وتأثيره مع الانتباه لقواعد الألوان وتطبيق أسسه الصحيحة على النص.
7. المحاذاة Alignment: هو التأثير الأبرز في تحسين جماليات تصميم النصوص ويجب تطبيق المحاذاة على محور معين ضمن التصميم بطريقة مدروسة.
8. التباين Contrast: لا يتعلق الأمر هنا بتباين ألوان النص مع محيطه أو مع بقية النصوص فقط، بل ويتعلق بتباين الأحجام والمسافات والمواقع أيضًا.

أنواع الخطوط

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

الخطوط العربية

تتألف الخطوط العربية من أنواع أساسية تتفرع عنها بقية الخطوط المعروفة وهي كثيرة ومن أهمها الكوفي، الثلث، النسخ، الفارسي، الديواني، الرقعة، المغربي والحر وغيرها الكثير، وسنتعرّف تاليًا على أهمها.

• الخط الكوفي: من أقدم الخطوط في بلاد العرب، ويمثل مظهرًا من مظاهر جمال الفنون العربية، وقد تسابق الكُتَاب في تطويره والتفنن في زخرفة حروفه، وله عشرات الأنواع المتفرعة عنه بما قد يتجاوز الخمسين نوعًا، من بينها البسيط، الفاطمي، الإيراني، المورّق، المزخرف، المعماري والكوفي المربع. هذه صور تمثل بعضًا من أنواع هذا الخط.

وهنا بعض الخطوط الحاسوبية المشتقة من الخط الكوفي.

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

وهذه بعض الخطوط الحاسوبية المشتقة من خط الثلث.

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

وهذه بعض الخطوط الحاسوبية المشتقة من خط النسخ.

• الديواني: يتميّز باستدارة حروفه وبمرونة التقاء الحروف وتلاصقها، فهو خط لين مطواع، وسهل الاستخدام. قام الأتراك بتطوير هذا الخط في عهد السلطان محمد الفاتح ووضعت قواعده بعد فتح القسطنطينية ببضع سنوات.

وهذه بعض الخطوط الحاسوبية المشتقة من الخط الديواني.

• الفارسي: عُرف هذا الخط عند العرب بالخط الفارسي نسبةً للفرس وعرف عند الأتراك بخط التعليق وهو الخط الرئيسي في الهند وإيران وباكستان وأفغانستان. ويتميز بأن خطوطه ليست مستقيمة فكل الحروف بها انحناءات.

وهذا خط حاسوبي مشتق من الخط الفارسي.

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

وهذه بعض الخطوط الحاسوبية المشتقة من خط الرقعة.

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

وهذه بعض الخطوط الحاسوبية المشتقة من الخط المغربي.

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

وهذه بعض الخطوط الحاسوبية المشتقة من الخط الحر.

الخطوط اللاتينية

وهي الخطوط المستخدمة في اللغات الغربية مثل الإنجليزية والفرنسية وغيرها، ولهذه الخطوط أنواع أساسية يطلق عليها اسم عائلات الخطوط ويُشتق منها العديد من الخطوط، ومن أهم هذه الخطوط Serif وSans Serif وSlab Serif وScript وDecorative.

1. Serif: تعد خطوط Serif تقليدية وسهلة القراءة للغاية، لذا فهي عادةً أفضل نوع من الخطوط لاستخدامها للعناوين والتصاميم الكبيرة، وهي شائعة لتصاميم شعارات العلامات التجارية، إلا أن ذلك لا ينطبق دائمًا على شاشات الهاتف المحمول. وكلمة Serif تعني تلك الأجزاء النافرة من الحروف بينما Sans Serif تعني عدم وجود تلك الأجزاء. استُخدم هذا النوع من الخطوط بما في ذلك جميع الخطوط التابعة لعائلته في العناوين و في شعارات علامات تجارية شهيرة مثل هاربرز بازار Harper’s Bazaar ومجلة إيللي Elle Magazine وجيورجيو أرماني Giorgio Armani. ومن أشهر الخطوط التابعة لعائلة Serif خطوط Garamond، Baskerville وDidot.

بعض من خطوط Serif.

2. Sans Serif: تزايدت شعبية هذه الخطوط بصورة كبيرة في السنوات الأخيرة، وتتميز بالشخصية الرئيسية دون أي حدود نهائية زخرفية. يُنظر إلى هذه الأنواع من الخطوط على أنها من أكثر خيارات الخطوط وضوحًا وبساطة وحداثة، وتعد أفضل خط يمكن استخدامه لقراءة النص على الشاشات. يسهل على الأجهزة عرض خطوطها الواضحة والحادة، وتظهر بوضوح على الشاشة البيضاء الساطعة. وقد استخدمت هذه العائلة من الخطوط مجموعة من العلامات التجارية الشهيرة أمثال تارجت Target وباناسونيك Panasonic وجيب Jeep وتويوتا Toyota، كما بدّلت جوجل Google شعارها من خط Serif إلى خط من Sans Serif عام 2015. من أشهر خطوط هذه العائلة Futura، Graphik، Circular و GT Americ.

بعض من خطوط Sans Serif.

3. Slab Serif: وهي فرع من عائلة خطوط Serif الشاملة التي تحدثنا عنها سابقًا. إلا أنها مربعة ومتكتّلة بشكل أكبر من خطوط Serif التقليدية، كما أنها أثخن وأكثر حداثة وتعد خيارًا جيدًا للعلامات التجارية التي تتميز بالجرأة والدرامية، ومن هذه العلامات التجارية هوندا Honda، سوني Sony وفولفو Volvo. ومن أشهر الخطوط التي تنتمي لهذه العائلة Sentinel، Adelle، Shift و Bodoni Egyptian.

بعض من خطوط Slab Serif.

4. Script: هو خط يتميز بالرسمية والشكليات ويحاكي الكتابة بخط اليد إلى حد ما. ويتوفر منه خطوط ذات ميزات متنوعة من الخيالي والمتطور إلى العصري والمريح. يعد من أقل الخطوط استخدامًا في التصاميم كونه لا يناسب النصوص الطويلة، لكنه جيد إلى حد ما في العناوين والشعارات. ومن أشهر العلامات التي تستخدم هذه النوعية من الخطوط إنستغرام Instagram، بي إنترست Pinterest، كوكاكولا Coca-Cola وكاديلاك Cadillac. ومن أشهر الخطوط التي تنتمي لهذه العائلة Southern Aire، Milles، French Script و Billenia.

بعض من خطوط Script.

5. Decorative: وتعني الخطوط الزخرفية، وهي مميزة في التصاميم الزخرفية والفنية أكثر مما تستخدم في النصوص والعناوين، وتستخدم في الشعارات والمنشورات الإعلانية كنوع من التزيين، وغالبًا ما تكون من أكبر عناصر التصميم لإبراز زخارفها. لها نمطان منتشران وهما النمط القديم التاريخي والحديث المستقبلي. ومن أشهر الشعارات التي استخدمت هذه الخطوط تويز آر أس Toys R Us، ليجو Lego وفانتا Fanta. ومن أشهر خطوط هذه العائلة Helios وThe Roseberry وMotters و Xaviera.

بعض من خطوط Decorative.

قواعد تصميم النص

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

التقنين Kerning

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

انعدام التقنين عبر زيادة التباعد في الحروف يؤدي إلى تصميم سيء

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

صورة توضح النص بدون ومع تقنين – الصورة من مدونة خطوط أدوبي

التواصل بين الخطوط Font Communication

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

لاحظ الخط المستخدم في العنوان غير ملائم لمعنى النص وغير متناسق مع الخط المستخدم في العنوان الثاني

الخطوط هنا ملائمة للمحتوى ومتناسقة مع بعضها بالنسبة لكلا العنوانين

تطبيق المحاذاة Alignment

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

تطبيق المحاذاة بطريقة صحيحة منح تصميم النص أناقة وجمالية وراحة للنظر

عدم تطبيق المحاذاة أساءت للتصميم ككل وأصبح غير مريح للنظر

تطبيق مبدأ الهرمية Hierarchy

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

لاحظ التدرج من حيث الأهمية من العنوان الرئيسي بالتتالي.

أهمية الحجم Size

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

لاحظ المثال في الأعلى غير مثير للاهتمام بينما في المثال الثاني في الأسفل الأمر مختلف مع أن المحتوى متطابق تمامًا.

التركيز في الفقرات النصية Emphasis

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

لاحظ أن النص العلوي ممل وغير مثير للاهتمام بعكس السفلي – النص مقتبس من ويكيبيديا

تجنب المسافات الزائدة Distances

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

لاحظ النص العلوي غير مريح للنظر وللقراءة معًا ويشعرك بالغرابة – النص مقتبس من ويكيبيديا

تجنب الأرامل النصية والأيتام النصية

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

لاحظ الأيتام النصية (1) في الصفحة اليسرى والأرامل النصية في اليمنى (2) وهو ما يجب تجنبه.

تجنب الأخطاء الإملائية واللغوية

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

لاحظ الفرق الشاسع بين الإعلانين من حيث التدقيق اللغوي، أنت بالتأكيد لن تتقبل الإعلان الأول بسلاسة.

خاتمة

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

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

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

أدوبي فوتوشوب Adobe Photoshop

التصنيف: تحرير ومعالجة الصور والرسم الفني

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

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

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

أدوبي إليستريتور Adobe Illustrator

التصنيف: رسومات شعاعية Vector

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

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

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

أدوبي إن ديزاين Adobe InDesign

التصنيف: تصاميم طباعية ونشر

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

السمات العامة: غير مجاني ويحتاج إلى اشتراك شهري، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز وماكنتوش.

كورل درو CorelDraw Graphics Suite

التصنيف: رسومات شعاعية Vector

الصورة من موقع Corel

برنامج مخصص لإنشاء وتحرير الرسومات الشعاعية Vector بطريقة احترافية. يحوي أدوات تصميم قوية لمساعدتك على العمل بشكل أسرع وأكثر ذكاءً، كما يحوي العديد من خيارات التخصيص، سواء كنت تعمل على الشعارات أو تصميم مواقع الويب أو مشاريع الطباعة. ويحتوي على أدوات Photo-Paint لتحرير الصور وCorel Font Manager لإدارة الخطوط. يحتوي البرنامج على أدوات رسم ويب وإعدادات مسبقة لتطوير محتوى ويب إبداعي، يمكنك النشر مباشرة من خلاله في موقع Wordpress. لديه توافقية ملفات ساحقة حيث يدعم البرنامج أكثر من 100 تنسيق ملف.

لديه مكتبة رقمية على الإنترنت والتي من خلالها يمكن للمستخدمين المسجلين الوصول إلى آلاف الصور عالية الدقة كما يوفر أكثر من 2000 قالب، و 1000 خط، وأكثر من 500 إطار تفاعلي، وأكثر من 600 تدرج، ورسومات شعاعية، ورسومات نقطية وغيرها. يمكنه أيضًا فتح 35 نوعًا من الملفات، بما في ذلك EPS وHTML وAutoCAD وPDF وPowerPoint وSVG وحتى ملفات FreeHand القديمة.

السمات العامة: غير مجاني ويحتاج إلى اشتراك شهري، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز وماكنتوش.

سكتش Sketch

التصنيف: رسومات شعاعية Vector

الصورة من مدونة Sketch

برنامج تصميم رسومي يعمل على نظام ماكنتوش فقط ويركز بشكل أساسي على التصميم الرقمي. ويعتمد التصميم فيه على رسومات شعاعية Vector وتُستخدم هذه التصميمات الرقمية لإنشاء مواقع الويب والتطبيقات والواجهات. على عكس الفوتوشوب لم يتم تصميم سكتش لتحرير الصور أو أعمال الطباعة. ولكنه الأنسب لتصميم التطبيقات والويب والواجهات ولإنشاء نماذج أولية تفاعلية لأغراض تصميم واجهة المستخدم UI وتجربة الاستخدام UX. يمكنك إنشاء نموذج أولي من خلال التعاون مع مصممين آخرين على النظام الأساسي نفسه. يحتوي البرنامج على ميزة تخطيط ذكية يتم فيها تغيير حجم المكون تلقائيًا بناءً على المحتوى. هناك المئات من المكونات الإضافية في البرنامج والتي ستتيح لك تحرير الرسومات الشعاعية وأعمال التصميم الأخرى بدقة وصولاً إلى البكسل.

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

السمات العامة: غير مجاني ويمكن شراؤه مرة واحدة للاستخدام الفردي أو باشتراك سنوي للفرق، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ماكنتوش فقط.

Affinity Designer

التصنيف: رسومات شعاعية Vector بشكل أساسي مع إمكانية العمل على الرسومات النقطية

الصورة من موقع Affinity Designer

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

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

السمات العامة: غير مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز وماكنتوش وأجهزة iPad.

جيمب GIMP

التصنيف: تحرير ومعالجة الصور والرسم الفني

الصورة من Wikimedia بترخيص GNU General Public License

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

السمات العامة: مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز ولينوكس وماكنتوش.

جرافيت ديزاينر Gravit Designer

التصنيف: رسومات شعاعية Vector

الصورة من موقع Gravit Designer

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

السمات العامة: مجاني مع توفر نسخة احترافية مدفوعة بميزات إضافية، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز ولينوكس وماكنتوش وChrome OS.

إنكسكيب Inkscape

التصنيف: رسومات شعاعية Vector

الصورة من موقع Inkscape بترخيص المشاع CC BY-SA 3.0

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

السمات العامة: مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز ولينوكس وماكنتوش.

كريتا Krita

التصنيف: رسم إبداعي – رسومات نقطية

الصورة من موقع Krita

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

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

السمات العامة: مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز ولينوكس وماكنتوش.

بكسلر Pixlr

التصنيف: تحرير الصور والرسم الفني

الصورة من موقع Pixlr

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

إذا كنت تريد أداة تحرير صور سريعة وسهلة، فإن Pixlr X هي الأداة المناسبة، إنه مصمم لتقديم تعديلات بنقرة واحدة وتأثيرات فنية لتعزيز بصري فوري. ويمنحك Pixlr E مجموعة من أدوات التحرير الأكثر تفصيلاً بأسلوب Photoshop. وإذا كان كل ما تريده هو إزالة الخلفية من صورة ما، فتطبيق Pixlr BG هو أداة تعمل بالذكاء الاصطناعي وستقوم بذلك تلقائيًا في ثوانٍ فقط. ومع أنها تطبيقات مجانية إلا أنه يتوفر أدوات ومزايا إضافية للنسخة المدفوعة منها.

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

ثري دي ماكس Autodesk 3DS Max

التصنيف: تصميم ثلاثي الأبعاد

الصورة من موقع Autodesk

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

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

السمات العامة: غير مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على نظام ويندوز فقط.

بلندر Blender

التصنيف: تصميم ثلاثي الأبعاد

الصورة من موقع Blender

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

السمات العامة: مجاني، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز ولينوكس وماكنتوش.

أدوبي أفتر إفّكتس Adobe After Effects

التصنيف: تحرير فيديو وتصميم رسومات بيانية متحركة (موشن جرافيك)

الصورة من موقع Adobe

يعد أفضل وأقوى برنامج إنشاء تصاميم للرسومات البيانية المتحركة (موشن جرافيك) كما أنه محرر فيديو ممتاز. يعتمد برنامج الرسوم المتحركة هذا على الطبقات والشرائح ويعمل كمزيج من محرر الفيديو ومحرر الصور مثل الفوتوشوب. يعمل بشكل جيد مع أنظمة التحرير الأخرى مثل Avid Media Composer وFinal Cut Pro X. كما أنه يتكامل بمرونة مع التطبيقات ثلاثية الأبعاد مثل 3ds Max وMaya وCinema 4D. وهو مميز في إنتاج تأثيرات بصرية نوعية وإنشاء وإدارة أعمال الرسوم المتحركة وإنشاء تأثيرات للرسوم المتحركة ثنائية الأبعاد والتخطيط والتركيب وتتبع الحركات وحذف الكائنات وتأثيرات النماذج والجسيمات وإنشاء قوالب وإجراء تصحيح الألوان وتحريرها.

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

السمات العامة: غير مجاني ويحتاج إلى اشتراك شهري، يمكن تحميله من الموقع الرسمي، ويعمل على أنظمة ويندوز وماكنتوش.

خاتمة

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

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

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

يسرع إعطاء المحتوى أولوية كبرى من الإنتاج

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

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

التصميم السليم للنص السليم

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

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

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

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

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

يبني المحتوى جسور الفهم أثناء العمل وبعد إطلاقه

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

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

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

التصميم هو التواصل

بالتفكير بالأمر، فإن معظم مشاكل التصميم في مشاكل تواصل، ومعظم الواجهات مصممة لتسهيل التواصل بين الناس.

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

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

ترجمة -وبتصرف- للمقال Why content comes first لصاحبه John Moore Williams

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

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

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

مزج الألوان

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

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

العلاقة بين الألوان والثقافات

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

وقد يظن البعض هذا مستحيلًا لكن يمكن خسارة العملاء بسبب استخدام الألوان الخاطئة.

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

اختيار الألوان لموقع إلكتروني

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

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

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

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

والمزيج الثالث الذي يُنصح به هو الأسود، مع الأبيض والأخضر، ويمكنك للمثال في الأسفل أن يظهر لك السبب.

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

ترجمة -وبتصرف- للمقال The Website Color Schemes that Stimulate Human Sense للفريق التحريري لموقع 1st Web Designer

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

جميع هذه الأدوات مجانية 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

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

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

كيف تعمل سيكولوجية الألوان؟

تنقسم الألوان إلى مجموعتين رئيستين:

• الألوان الدافئة:هي الألوان في المنطقة الحمراء مثل: الأحمر، والبرتقالي، والأصفر.
• الألوان الباردة: وهي الألوان التي تقع في المنطقة الزرقاء مثل: الأزرق، والقرمزي، والأخضر.

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

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

• الأحمر: يزيد من نشاط الدورة الدموية وبالتالي ينشط الجسم والعقل.
• الأصفر: يحفز الأعصاب وينعش الجسد.
• البرتقالي: يزيد من طاقتك.
• الأزرق: يعالج الآلام.
• النيلي: يخفف من مشاكل وأمراض الجلد.

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

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

والآن بمعرفتنا لما تعنيه الألوان والمشاعر التي تستحضرها، فلنحاول إجراء تحليل بسيط لمخططات الألوان التي تستخدمها 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.

في حالة كنت عالقًا في كهف طيلة السنوات القليلة الماضية، دعني أخبرك هذه الأخبار الرائعة: التصاميم المسطحة (Flat Design) للمواقع هي الرائجة الآن. علينا الآن أن نودع تلك التصاميم التقليدية التي سيطرت عليها الفراشي، وتدرجات الألوان، والظلال، وكل تلك الأنواع من التصاميم. أكرر، البساطة هي التوجه الجديد.

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

بساطة المواقع مسطحة التصميم

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

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

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

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

في الحقيقة هناك خمسة عناصر يتصف بها التصميم المسطح:

• غياب العمق
• استخدام العناصر البسيطة
• الطباعة
• اللون
• البساطة

لقد انتهى العمق في التصميم

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

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

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

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

ستبقى البساطة عنوان الجمال

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

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

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

الطباعة، كما أخبرتكم سابقًا

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

الألوان

كما ذُكر سابقًا أن اللون مهم. فبإمكانه تكوين صفحتك أو تدميرها. إنه يحدد بشكل أساسي الشعور الكامل بموقعك أو صفحتك.

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

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

فن البساطة (كلما نقصت التفاصيل، ازداد الجمال)

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

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

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

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

اعلم أنك تعرف كيف تكون بسيطًا. فلنكن جميعًا بسطاء.

ترجمة -وبتصرف- للمقال Getting Started With Flat Web Design

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

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

للاستزادة ربما تود القراءة عن إدراك الألوان، وعلم نفس الألوان، أو المزيد عن كيف تحفز المجموعات اللونية إدراك الإنسان.

1. موقع Pinterest زاخر بالكثير من اللون الأحمر

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

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

غالبًا ما يُرى اللون الأحمر في عروض التصفيات والمبيعات، حيث تضفي شدته شعورًا ملحًا على من يرى العروض بضرورة إلزامية الشراء.

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

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

مثال رائع لاستخدام اللون الأحمر في تصميم الويب

أتحدى أن تكون على علمٍ بهذا

اقتباس

ترى عين الإنسان اللون الأحمر عندما تنظر إلى ضوء بطول موجي يتراوح بين 630 و700 نانومتر. يُطلق على الأشعة الضوئية التي تتعدى هذا النطاق بالأشعة تحت الحمراء، وهي لا تُرى بعين الإنسان، بالرغم من ذلك يمكن استشعارها كحرارة. -المرجع

مجموعة لونية جذابة بإضافة اللون الأحمر

10 أشياء مرتبطة باللون الأحمر

1. الدم
2. الحرب
3. النار
4. الرجولة
5. الشغف
6. الإغراء
7. الغضب
8. القوة
9. الطاقة
10. الشجاعة

إحداثيات اللون الأحمر حسب نظام الألوان

• Hex Triplet: ‏FF0000‏#
• RGB: ‏(0, 0, 225)

2. موقع Amazon يحتفل بقوة اللون البرتقالي

اللون البرتقالي لونٌ حار، لكن ليس بحدة اللون الأحمر فهو يوحي بالدفء أكثر من الحرارة.

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

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

كيف ينبغي عليك استخدام اللون البرتقالي

أتحدى أن تكون على علمٍ بهذا

اقتباس

لون الويب البرتقالي المعرف كـ FFA500، هو اللون الوحيد المسمى والمعرف في CSS بينما ليس معرفًا في HTML 4.01. -المرجع

مجموعة لونية جذابة بإضافة اللون البرتقالي

10 أشياء مرتبطة باللون البرتقالي

1. التفاؤل
2. العزم
3. الحريق
4. التخذير
5. الخريف
6. الأديان
7. قوة الاحتمال
8. التعاطف
9. موسم الهالوين
10. الحياة

إحداثيات اللون البرتقالي حسب نظام الألوان

• Hex Triplet: ‏FF7F00‏#
• RGB: ‏(0, 127, 225)

3. اللون الأزرق في موقع Facebook يُشعرنا بالأمان

ستجد العديد من المواقع التجارية والشركات تستخدم درجات اللون الأزرق. هذا اللون يجعلنا نفكر في شيءٍ مُحكمٍ وآمنٍ ومُعتمد ومليءٍ بالخبرة.

لذلك، ليس من المفاجئ أن كل مشروعٍ تجاريٍ يهتم بشعور العملاء على المدى البعيد يفضل استخدام اللون الأزرق.

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

كيف ينبغي عليك استخدام اللون الأزرق

أتحدى أن تكون على علمٍ بهذا

اقتباس

أُجريت دراسة في ألمانيا نشرت عام 2009 وجدت أن اللون الأزرق لونٌ مفضلٌ لـ 46% من الذكور و44% من الإناث. -المرجع

مجموعة لونية جذابة بإضافة اللون الأزرق

10 أشياء مرتبطة باللون الأزرق

1. الصدق
2. الصداقة
3. السحر
4. الأولاد
5. الجليد
6. النبل
7. الشتاء
8. الشرطة
9. السماء
10. الحياة

إحداثيات اللون الأزرق حسب نظام الألوان

• Hex Triplet: ‏#0000FF
• RGB: ‏(255, 0, 0)

4. اللون الأخضر في موقع Groupon يضفي صفة القوة الجماعية

تشعر بالتفاؤل الآن؟ لنخمّن -كنت تنظر إلى شيءٍ أخضر؟ ربما كنت تنظر إلى نباتٍ أخضر، بما أنك تشعر بالهدوء والتفاؤل.

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

ألقِ نظرة على ورقة 100$. إنها خضراء! مواقع أخرى مثل Groupon تتبنى اللون الأخضر في علامتها التجارية، كونها تتعامل مباشرةً مع المال.

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

استخدام رائع للون الأخضر في تصميم الويب

أتحدى أن تكون على علمٍ بهذا

اقتباس

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

مجموعة لونية جذابة بإضافة اللون الأخضر

10 أشياء مرتبطة باللون الأخضر

1. المال
2. الطمع
3. النمو
4. الحسد
5. الطبيعة
6. الربيع
7. الصحة
8. الشباب
9. العشب
10. الأمل

إحداثيات اللون الأخضر حسب نظام الألوان

• Hex Triplet: ‏#00FF00
• RGB: ‏(0, 255, 0)

5. موقع Yahoo ينثر الكثير من اللون الأرجواني في شعاره

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

يستخدم اللون الأرجواني بتنوعٍ في الجمال والموضة ومنتجات الملابس، لما له من تأثيرٍ كبيرٍ في إضفاء الهدوء والسكينة أكثر من أي لون آخر.

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

تمامًا مثل اللون الأحمر، يضيف اللون الأرجواني تأثيرٌ قويٌ لا يُقاوم ويشكل بعض الضغط على الأشخاص لاتخاذ ردة فعل. لذا سيكون من الحكيم الجمع بين اللون الأرجواني وأي لونٍ آخر مثل الأسود والأبيض.

استخدام رائع للون الأرجواني في تصميم الويب

أتحدى أن تكون على علمٍ بهذا

اقتباس

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

مجموعة لونية جذابة بإضافة اللون الأرجواني

10 أشياء مرتبطة باللون الأرجواني

1. الثروة
2. الملكية
3. النبل
4. الأناقة
5. العاطفة
6. الاصطناع
7. الغرابة
8. الروحانية
9. الترف
10. الأنوثة

إحداثيات اللون الأرجواني حسب نظام الألوان

• Hex Triplet: ‏#800080
• RGB: ‏(128, 0, 128)

6. استخدام عبقري للألوان المحايدة في موقع 1WD's

عادةً ما تستخدم الألوان المحايدة مثل الأبيض والأسود والرماديات الفاتحة والداكنة كخلفيات في التصاميم مع إضافة ألوان أكثر قوةٍ وسطوع.

ألقِ نظرةً على موقع 1stwebdesigner – 1WD. هناك استُخدم القليل من اللون البرتقالي كونه لون قوي وساطع -لكن فقط في مزيجٍ جيدٍ مع الرمادي الداكن والفاتح. والأبيض بالتأكيد (ما هو لون الخلفية في الموقع؟)

تمامًا كحقيقة أن العصافير دومًا ستطير، فاللون الأسود يعبر دومًا عن الحداثة والقوة والأناقة. في حين أن اللون الرمادي هو لونٌ محايد، يعبر عن أشياء هادئةٍ وغير مرئيةٍ مثل الظلال.

إذا كان اللون الرمادي يبدو متّسخًا في بعض الأحيان، فعلى العكس سيولد اللون الأبيض تأثيرًا مُعاكسًا. يعبر اللون الأبيض عن الرحابة والانفتاح والبساطة.

استخدام رائع للون الأبيض في تصميم الويب

أتحدى أن تكون على علمٍ بهذا

اقتباس

في التصوير الرقمي، تعبر كلمة monochrome -التصوير الأحادي- عن التقاط المستشعر للظلال السوداء، أو عن عملية المعالجة اللاحقة لصورةٍ ملونةٍ تَظهر فقط درجة السطوع المتوقعة من خلال جمع قيم القنوات المتعددة لإظهار الصورة بتدرجات رمادية. -المرجع.

مجموعة لونية جذابة بإضافة اللون الأرجواني

10 أشياء مرتبطة بالألوان المحايدة

1. القوة
2. الأناقة
3. الفراغ
4. النعومة
5. الجنة
6. السلام
7. البراءة
8. التشاؤم
9. الكآبة
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

كثيرا ما نتلقى أسئلة كهذه:

اقتباس

في شركتنا، تنظم إدارة التصميم على غرار كذا وكذا، فهل هذا طبيعي؟

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

لذلك، أجرينا أكبر استطلاع للرأي في مجال التصميم (2200 شركة تعمل في 24 مجال في 77 دولة) لاكتشاف كيفية تطور علم تصميم المنتجات الرقميّة وإلى أين وصل في الوقت الحاضر. إنه بحث غير مسبوق في بيئة تصميم المنتجات الرقمية وتأثيرها على عالم الأعمال.

العبرة هي: كلما تبنت المؤسسة ممارسات التصميم وأدمجتها، كانت النتائج إيجابية.

يمكنك الاطلاع على التقرير بالكامل هنا، الذي نوضح فيه ما الذي تفعله الشركات التي تتمتع بخاصية "نضج التصميم"، لكننا نذكر في هذا المقال عدد قليل (جدا) من نتائج هذا البحث:

في البداية، تعرف على المشاركين في استبياننا:

كانت الشركات المشاركة في الاستبيان من كل حجم ونوع ومجال. تناول تقريرنا شركات تعمل في مجال الدعاية، التأمين، التعليم، وغيرها.

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

العبرة هي أنه كلما تبنت الشركة ممارسات التصميم ودمجتها كانت النتائج إيجابيّة.

إليك بعض النقاط الأساسيّة:

الحقيقة الأولى: 41% من الشركات لديها مصمِّم في مستوى المدير، أو أعلى

نحو ربع المشاركين لم يكن لديهم أي مصمِّمين في مستوى القيادة، بينما لدى عدد كبير منهم مصمِّمين في مستوى القيادات التنفيذيّة العليا.

الحقيقة الثانية: متوسط عدد المصمِّمين في كل شركة 27

كان متوسط عدد المصمِّمين في كل شركة من الشركات المشاركة 27، لكن نحو ثلث العدد المشارك لم يكن لديهم سوى مصمِّمين اثنين أو أقل.

الحقيقة الثالثة: 79% من المصمِّمين يقولون إن المشروعات تتضمن التصميم "بصورة شبه دائمة" أو "بكثرة"

لم يعد إدماج التصميم عملية إنتاجيّة مستحدثة في الشركات التي تتَّصف بنضج التصميم، بل أصبح عاملًا أساسيًا. الغالبية العظمى من الشركات المشاركة في الاستبيان تستخدم التصميم عند إنتاج منتج جديد، و66% منهم يرون أن التصميم "مدمج بصورة جيدة في عمليّة تطوير المنتج" في مؤسساتهم.

الحقيقة الرابعة: 16% من الشركات عدد المصمِّمين لديها أكثر من عدد المهندسين

يقال أن عدد المهندسين يفوق عدد المصمِّمين بما لا يوازن في معظم الشركات. لكن بحثنا يظهر أن هذا ليس صحيحًا تمامًا. فلدى 43% من الشركات تكون نسبة المصمِّمين إلى المطورين 1 إلى 4 أو أكثر.

إن تحقيق الاستفادة الأمثل من التصميم تتطلب استخدام التصميم بصورة صحيحة أكثر مما تتطلَّب الحصول على موارد تصميميّة كافية.

الحقيقة الخامسة: في 33% من الشركات يتبع المصمِّمون رئيس مجلس الإدارة مباشرة

ذكرت 60% من الشركات أن لديها هيكل مركزي التصميم. لكننا وجدنا أن هيكل الشركة لا يرتبط بقوة بنضج التصميم. فلدينا أمثلة لهياكل مختلفة معمول بها في شركات مختلفة. لا توجد طريقة معينة هي وحدها "الصواب".

(المجموع لا يساوي المئة لأن المصمِّمين في العديد من المؤسسات يتبعون لإدارات عدَّة)

الحقيقة السادسة: كلما زاد تبني الشركة للتصميم، جنت الفوائد

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

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

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

لقد رأينا هذا في Design Systems Video Series: حين يتعاون المطوِّرون والمصمِّمون عن قرب، تظهر النتيجة الإيجابية على المنتج، ويستفيد المستخدم.

التبعية للتسويق تحقق المكاسب في قمع المقاييس وسهم العلامة التجارية. لكن من الحكمة أن ينتبه المصمِّمون الذين يتبعون التسويق دائمًا لتأثير عملهم.

في النهاية، من الجيد أن تكون بالقرب من القمة.

وازن بين مؤسستك وبين نموذج نضج التصميم الجديد الخاص بنا، (فقط 5% من الشركات تتسم بنضج التصميم) وفكِّر فيما يمكنك فعله لتطوير التصميم في مؤسّستك.

مترجم بتصرف عن Facts about design today بقلم Sean Blanda

هل تساءلت يومًا ما الذي يجعل تصميمًا ما رائعًا؟ سوف تتعرَّف من خلال هذا المقال على العناصر الستَّة للتصميم، وكذلك على العنصر السابع المقترح لعصر التصميم الرقميّ. سوف نحلِّل الأساسيَّات ونشرح لك كيفيَّة استخدامها بكفاءةٍ في عملك.

ما هي عناصر التصميم؟

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

في كتابه "الفن كتجربة" (Art As Experience)، خلص الفيلسوف وعالم النفس الأمريكي جون ديوي إلى أن كل ما يصمِّمه الفنّانون والمصمّمون له تأثير ضخم على تجارب الناس اليوميّة. من أجل تحليل عناصر التصميم، علينا أن نتَّبع نصيحته السديدة:

اقتباس

حتى تفهم الجمال في صُوَرِه العليا والمقبولة، يجب أن تبدأ من عناصره الأساسية، من الأحداث والمشاهد التي تجذب العين والأذن — جون ديوي، فيلسوف وعالم نفس أمريكي

بعبارة أخرى: ابدأ بالأساسيَّات.

البِنية (Form)

لكل شيء بِنية، بصورة أو بأخرى. حين نتحدث عن البنية، نحن لا ركز على محتواها، لكن على البِنية ذاتها.

البِنَى ثلاثيَّة الأبعاد، ومنها نوعان: هندسيّة (من صنع الإنسان)، وطبيعيّة (عضوية). البِنَى الرقميّة أو الماديّة يمكن قياسها بالطول والعرض والعمق. يمكن تكوين البنية عن طريق تجميع أشكال، ويمكن تعزيزها باللون أو الملمس. قد تكون إما للزينة أو للمنفعة، طبقًا لاستخدامها.

بالنسبة للتصميم الرقمي، تعد البِنية هي العنصر الذي تصمِّم من أجله. لذا، إذا كنت تصمِّم جهاز هاتف محمول، فالهاتف هو البِنية.

الشكل (Shape)

تتكون كل الأشياء من أشكال، وكل عناصر التصميم ما هي إلا أشكال. قد تكون الأشكال داخل بِنية. على سبيل المثال، الزر على موقع الإنترنت هو شكل يعيش في داخل الحاسوب (وهو البنية).

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

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

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

الخطّ (Line)

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

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

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

الملمس (Texture)

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

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

في مجال التصميم الرقميّ، لا توجد حتى الآن شاشات لمس تحاكي الملمس الحسيّ. لذلك، علينا الاكتفاء بالملمس البصري.

اللون (Colour)

اللون هو من أكثر العناصر التي يصعب التحكم بها، ومن أكثرها صعوبة على الفهم. لكن الأساسيّات سهلة نسبيًا.

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

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

رغم أن الألوان عالمية، إلا أن لها دلالات مختلفة في الثقافات المختلفة. على سبيل المثال، يرمز اللون الأبيض للنقاء في بعض الثقافات، بينما يرمز للموت في ثقافات أخرى.

الفراغ (Space)

يحتل شكل أو بنية مكان في الفراغ. بِعدِّه عنصرًا من عناصر التصميم، يعرَّف بأنه المساحة أعلى وأسفل وحول الجسم.

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

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

الحركة (Movement)

العنصر السابع المقترح في عصر التصميم الرقميّ هو الحركة.

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

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

لماذا يجب عليك أن تفهم عناصر التصميم الأساسيّة؟

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

مترجم بتصرف عن المقال Elements of design

في سعينا المستمرّ لإنشاء مواقع خفيفة قدر الإمكان، تلعب تحسين الصور دورًا مهمًا.

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

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

TinyPNG

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

ImageOptim

ImageOptim هو تطبيق مجاني مفتوح المصدر لنظام التشغيل MacOS يقوم بتحسين الصور مع حذف معلومات التعريف غير الضرورية أيضًا. لإزالة التعريف فائدة أخرى، وهي حماية خصوصيتك. كما يوجد أيضًا وضع التصغير الفقود الذي يقلص حجم صور PNG و GIF و JPG و SVG تقليصًا كبيرًا - بما في ذلك صور PNG و GIF المتحركة.

gulp-image

إذا كنت تستخدم برنامج تشغيل المهام Gulp، فسيعمل gulp-image تلقائيًا على تحسين صور GIF و JPEG و PNG و SVG من خلال سكربت. إنه خيار رائع لمن لديهم الكثير من الصور التي تحتاج إلى معالجة. تفضل استخدام Grunt؟ سيؤدي grunt-image المهمة بكفاءة.

Pngcrush

Pngcrush هو برنامج لواجهة الأوامر النصيّة يمكن تشغيله على كل من MSDOS و Linux. يفحص البرنامج ملفات PNG الخاصة بك ويجرب مستويات الضغط المختلفة وطرق التصفية لتقليل حجم الملف.

APNG Assembler

استخدم APNG Assembler لإنشاء ملفات PNG متحركة عالية التحسين. يتضمن هذا التطبيق المستقل إصدارات لكل من Windows و MacOS و Linux.

Compressor.io

Compressor.io هي خدمة مجانية عبر الإنترنت تعمل على تحسين ملفات GIF و JPG و PNG و SVG. يمكنك الاختيار من بين أنواع الضغط غير المفقودة أو المفقودة.

Simple Image Optimizer

تستطيع مع Simple Image Optimizer تحسين الصور وتغيير حجمها عن طريق واجهة إنترنت بسيطة. كما توجد خيارات منفصلة لتغيير حجم الصور أو تحويلها.

إضافة ووردبريس Smush

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

إضافة دروبال Image Optimize

Image Optimize عبارة عن إضافة لمواقع Drupal تستخدم نصوص تحسين الصور الموجودة على خادم الويب الخاص بك، مثل OptiPNG أو jpeglib. تتكامل الوحدة أيضًا مع بعض خدمات التحسين من قبل طرف ثالث.

إضافة ماجنتو Apptrian Image Optimizer

يعد Apptrian Image Optimizer إضافة لماجنتو يستخدم الضغط بدون فقد لتحسين ملفات GIF و PNG و JPG. يستطيع معالجة الصور دفعة واحدة، وإعداد مهمة cron لمسح التحميلات الجديدة وتهيئتها بشكل دوري.

توفير الوقت والمساحة

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

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

مترجم بتصرف عن ‎10 Free Tools and Apps for Optimizing Images لصاحبه Eric Karkovack

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

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

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

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

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

1. في يوم من الأيام

في هذا المشهد ستصف شخوص المستخدم. من الشخصية الأساسية في حكايتك؟ كيف يبدو؟

ما أهمية ذلك؟

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

2. أشياء يفعلها كل يوم

عرف بعض المهام الأساسية التي يقوم بها المستخدم بانتظام. ما الذي يفعله كل يوم؟ ما هي مسؤولياته الأساسية في الحياة وفي العمل، فيما يتعلق بالمنتج أو الخدمة التي تقدمها؟

ما أهمية ذلك؟

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

3. مشكلة يواجهها المستخدم باستمرار

حدد المشكلة الأساسية التي واجهها المستخدم حين يحاول القيام بمهامه. ما هي الأمنية أو الحاجة التي لم تلبى في هذه القصة؟

ما أهمية ذلك؟

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

4. إنه يحاول حلها

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

ما أهمية ذلك؟

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

5. لكنه كان يرجو

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

ما أهمية ذلك؟

إن عيوب منافسيك تعد فرصة بالنسبة لك. إذا ما عالجت تلك النقاط، ستستطيع طرح منتجك كحل أمثل.

6. عندما حان الوقت

صف كيفية تعرف العميل على منتجك لأول مرة. ما الذي حدث في ذلك اليوم؟

ما أهمية ذلك؟

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

7. بخلاف الحلول الأخرى

اذكر بعض الجوانب المتعلقة بتجربة المنتج التي تجعلك مختلفًا عن منافسيك. ما هو الاختلاف بين ما تقدمه وبين ما يستخدمه العميل حاليًا؟

ما أهمية ذلك؟

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

8. الأمنية التي تحققت

حدد الأمنية التي يحققها منتجك. ما هي الأمنية التي يتمناها عميلك؟

ما أهمية ذلك؟

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

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

مترجم بتصرف عن The Designer’s Guide to Building a Brand Story لصاحبته Laura Busche

هذا خلاصة التصميم بمساعدة المطور الخاص بك، درس إلكتروني من InVision للكاتب كيفين توماسو.

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

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

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

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

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

"التصميم بمساعدة المطور يعني العمل ضمن فريق".

أيضًا يُعنَى التصميم مع التطوير بمعرفة الأهداف النهائية واتخاذ قرارات صعبة من خلال المعرفة الواسعة بالصورة الكلية.

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

ما الذي لا يعبر عن التصميم مع التطوير

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

ما يجذب المستخدمين ويبقيهم في موقعك هو التصميم وتجربة المنتج. فبدون تصميمٍ جيد، ستأمل أفضل المواقع والتطبيقات أن تنجح بغض النظر عن مظهرها (أنا أنظر إليك، كرايجلست).

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

لا يضيف إعادة تعديل الصور من خلال ضبط levels & curves واستخدام أداة burn في برنامج الفوتوشوب، الكثير للمطور؛ لأنه في الوقت الذي ينتهون فيه منها، سيكون عليهم إضافة الصورة النهائية للموقع.

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

أنت هو المصمم. ستكون محط اهتمام الجميع في حال كنت تعرف القليل حول كيفية قيام طاقم البناء بعمله.

اتبع هذه الخطوات البسيطة لتصبح مصممًا رائعًا

يُعنَى هذا الدرس التعليمي بمساعدتك على التصميم مع وضع التطوير في الذهن. أما بالنسبة لما لم يتم تناوله هنا، فيعني أن عملك الأول والرئيسي هو التصميم مع وضع المستخدمين في الذهن. أنت تعرف بهذا ولست بحاجة لسماعه مني، أنت رائعٌ في هذا. الهدف هو جعلك أفضل في الصورة الكبرى، بحيث يتحسن المنتج مع كل قرار تتخذه بطريقةٍ أو بأخرى.

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

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

يمكن كتابة الشيفرة بشكل أفضل بمساعدة المصمم.

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

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

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

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

ترجمة ـوبتصرف- للمقال What does it mean to design for development لكاتبه Kevin Tomasso

جمعت لك مجموعة ضخمة من المواقع ذات تصميم مميز وسهلة الاستخدام التي سوف تلهمك، وتتكون هذه المجموعة من 50 موقع. اختيرت هذه التصاميم من زوايا مختلفة، من مواقع مشهورة مثل موقع National Geographic، أو Marni، أو The Winter Olympic Games، حتى أفكار المواقع التي لم تنشأ بعد أو مشاريع تصميم الويب الصغيرة التي وجدناها على موقع Behance.

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

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

هذه المواقع السهلة الاستخدام أكثر من كونها جميلة فهي لديها مميزات أساسية ومفيدة للتصميم الكلي.

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

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

National Geographic

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

Uncrate 2.0

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

Madewell

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

Sikora Ibizan Hounds

هذا الموقع لديه تخطيط واضح بمعلومات مختصرة وصور عالية الجودة. يظهر كل من الشعار ومعلومات التواصل بسهولة.

Aquawa on Behance

هذا تصميم متجاوب تمامًا وسوف يقوم بمناسبة محتواه تلقائيًا بشكل مثالي مع أي حجم شاشة.

WAVERIDER

تصميم هذا الموقع هو أيضًا تصميمٌ بسيط ويشمل مميزات سهلة الاستخدام. حيث يتضمن قائمة ظاهرة وشعار، وتخطيط سريع الاستجابة 100%، وعناوين كبيرة بمعلومات دقيقة …إلخ.

Kara

فكرة التصميم هذه رائعة جدًا وتمتلك تصميمًا ملفتًا للانتباه والذي سوف يُبقي مستخدميك متفاعلين بكل تأكيد.

Drew Watts

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

STP – Simple, Clean, Masonry

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

Nike: Tights of the Moment

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

Hireinfluence

ترى هنا موقعًا ممتازًا ويمتلك تصميمًا جذابًا ومميزات رائعة.

The French Cuisse

يعد هذا التصميم بسيطًا بشبكة تخطيط منظمة جدًا، وسريع الاستجابة كليًا ويشمل مميزات رائعة تجعل منه سهلًا للاستخدام.

The new Heroes & Pioneers

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

Ok Kid – Grundlos Extended

تصميم هذا الموقع هو تصميم دنيوي برسومات خفيّة. تعد التفاصيل البسيطة والتصميم الإبداعي من الأسباب التي تعطيه مظهرًا فريدًا من نوعه.

Onlab – Font for the HBC

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

The Woman

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

SocioDesign

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

Tatte- Amanda Jane Jones

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

Scotland Can Make It! Designed by Graphical House

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

Ouur Collection

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

And And Web Design

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

Shotfolio PSD Theme

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

Marni

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

Frú Frú

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

World of Swiss

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

Twiggy Bar

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

Lala Berlin

تصميم موقع مذهل ويحتوي أيضًا على متجر إلكتروني. اضغط على الرابط وألقِ نظرة على التصميم الكامل والميّزات.

Bureau of Visual Affairs

يمتلك هذا الموقع تصميم قائمة إبداعي، تأثيرات زَيْغ (تحريك الصور الثابتة)، رسومات أنيقة وتصميم مذهل. هذه الميّزات تجعل الموقع سهل الاستخدام وسهل الوصول لجميع الزوار.

Johann Lucchini

موقع رائع على شكل معرض بتصميم سهل الاستخدام. استعراض الأعمال يتم عرضه في شبكة منظمة تمكنك من رؤية الأعمال بشكل أفضل.

Everlane

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

THISISPAPER

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

Brave People

يمتلك هذا الموقع تصميمًا احترافيًا بميّزات قوية مثل تأثير الزّيْغ، ورسومات، وتخطيط كامل الشاشة ...إلخ.

GC Watches

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

Escape Committee

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

Nixon

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

Doug Aitken: The Source

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

Crop the Block

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

Castscarf

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

Falve

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

Intersection

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

Harry’s

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

Squarespace

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

Jonathan Decosta

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

IWC Schaffhausen

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

Spotify

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

Google Glass

تصميم هذا الموقع بسيط ولكن فعال. اكتشف العديد من المميزات في هذا الموقع واستخدمها في تصاميمك.

Jack Daniels

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

Symbolset

يمتلك هذا الموقع خلفية بألوان متغير تشُد الانتباه وأسلوب طباعة مرسوم.

Simone Marcarino

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

Pulse

هذا التصميم معقد بعض الشيء ويشمل عدّة ميزات رائعة وتصميم مدروس كليًا مع ألوان جميلة ورسومات مذهلة.

الخلاصة

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

ترجمة -بتصرف- للمقال ‎50 User-Friendly Website Designs That Work لصاحبه Iggy

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

يستمتع الناس بالسيناريوهات الممتعة للنظر. فهي قاعدة يمكن تطبيقها بالتساوي على العالمين الحقيقي والوهمي.

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

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

تصميم موقع للتجارة الإلكترونية

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

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

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

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

جعله سهل الاستخدام يعني تسهيل عملية الشراء، حيث أنها لن تستغرق أكثر من بعض النقرات لشراء المنتج الذي تريده.

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

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

ومن الواضح أن التسوق الإلكتروني غير محبذ من جميع الناس، ولكن معظمهم يجدونه مناسبًا وبأسعارٍ معقولة.

نظرة عامة على التصميم المتعلق بالتجارة الإلكترونية

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

ولكن هناك مبادئ محددة يجب يجب أخذها بالحسبان وتحديدها قبل البدء بعملية التصميم.

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

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

يعود الخيار للمصمم هنا، فإما أن يبقى على هذا المفهوم، أو يذهب لحلٍّ جديدٍ كليًا (شعار جديد، رموز، صور وغيرها). وغالبًا ما سيعتمد هذا القرار على الميزانية.

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

هل تحاول تصميم الموقع الإلكتروني المثالي للتجارة الإلكترونية؟ تأكد من حصولك على إجابات للأسئلة التالية:

1. هل نوع المنتجات التي أقدمها يصبح معروفًا للزوار من الثواني الخمس الأولى؟
2. هل أثق بهذا الموقع بشكلٍ كافٍ لإدخال معلومات البطاقة الائتمانية؟
3. هل يحقق موقعي الهدف؟ هل تكفي 30 ثانية ليصل الزبائن للمعلومات التي يريدونها؟
4. هل أقدم اقتراحات/خيارات كافية للزوار العشوائيين؟
5. هل المحتوى أصلي وجذاب للزوار؟

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

العناصر الثلاثة الرئيسية لكل متجر على الإنترنت

الثقة

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

البساطة وسهولة الاستخدام

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

الشفافية

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

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

اقتراحات وممارسات يوصى بها لمواقع التجارة الإلكترونية

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

ولكن، هناك مجموعة من الممارسات الممتازة التي تطبق على كل موقع للتجارة الإلكترونية وكل منتج متاح للشراء عن طريق الإنترنت. انظر في عدد قليل منها:

لا تدع مجالًا للتفكير مرةً أخرى في تقديم المعلومات الشخصية

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

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

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

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

انجح مع الصور

نعم، تحتاج لمجموعة هائلة من الصور بجودة عالية جدًا لتقديمها لزبائنك المحتملين.

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

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

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

وفر وقت مستخدميك

كما تعرف من تجربتك الشخصية، فإن 90٪ من المستخدمين يتصفحون المواقع بدون هدف. من يهمونك كمنتِج، هم هؤلاء ال 10٪ الذين يصلون إلى موقعك بفكرةٍ واضحةٍ لما يرغبون به.

أقل ما يمكنك فعله هو تسهيل التصفح ومساعدتهم في إيجاد معلوماتهم بأقل من 30 ثانية.

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

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

حدد المنتجات المرتبطة

اربط صفحات المنتج الواحد مع المنتجات المرتبطة به (الأحذية مع الحقائب، والأقراط مع القلائد وغيرها)، إلا إذا كنت متخصصًا في منتجٍ واحد.

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

التميز يأتي مع الترابط

ولا يزيد معدل نسبة رجوع الزائرين الذين زاروا موقعًا حديثًا، عن 40٪.

وبمفهوم المصممين، فإن 40٪ من الناس سيغادرون موقعك في اللحظة التي دخلوا إليه فيها. السؤال المهم هو: كيف أبقيهم في الموقع؟

كن مميزًا عند وصف منتجاتك. قد تبدو الوصوفات مبتذلة، ولكن هذا لا يعني أنها تفقد قوتها.

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

أخيرًا - وليس آخرًا - الصفحة الأخيرة

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

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

تقودهم من تعقيدٍ لآخر، وبالتالي فهم على الأغلب سيتركون عملية الشراء.

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

اختبر موقعك أولًا

هنا بعض الاختبارات السهلة التي قد تجريها على موقع التجارة الإلكترونية خاصتك قبل إطلاقه:

1. اختبر زر "أضف لسلة التسوق" من ناحية الحجم، واللون والمكان؛
2. اختبر كل فئة من فئات المنتجات التي تظهر خلال تصفح المستخدم للموقع، وحاول إضافة واحدة جديدة وانظر كيف تبدو؛
3. اختر المنتج الأكثر مبيعًا وضعه في الصفحة الرئيسية؛
4. قدم عرضًا خاصًا: اطلب الاشتراك وادعو الناس لتجربته؛
5. حاول استخدام القسائم الشرائية وقدر تأثيرها على النسب التحويلية.

طلب الإجراء

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

وبشكلٍ عام، يطبق تصميم مواقع التجارة الإلكترونية إجرائين أساسيين: محددة لكل منتج (عندما يبيع الموقع أكثر من منتج واحد)؛ أو إجراء موحد لكل المنتجات المتاحة في كل صفحة.

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

الخاتمة

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

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

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

مجددًا هذا أمرٌ قاسٍ، ولكن يعتمد نجاح تصميمك واتخاذ المستخدمين قرارًا بالتسوق من متجرك، على المرئيات والمظاهر كليًا.

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

ترجمة ـ وبتصرف ـ للمقال Guide on How to Design an eCommerce Website and Online Store لكاتبه Iggy

هل تبحث عن أيقونات مصممة وفق التصميم المادي (Material Design Icons) ذات جودة عالية لإضافتها لمشاريعك؟ أنت في المكان الصحيح! لقد جمعت لك قائمة ضخمة من أيقونات مصممة وفقًا للتصميم المادي (Material Design Icons) التي يمكنك توظيفها في تصاميمك المستقبلية.

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

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

Material Design Icons Custom Shape

هذه مجموعة كبيرة تضم 431 أيقونة تصميم من الفوتوشوب. يمكن تحميل هذه التصاميم واستخدامها بالمجان.

Android L Icon Pack by Icons8

لديك هنا مجموعة ضخمة تحتوي على 840 أيقونة مصممة وفق التصميم المادي (Material Design Icons) وهي متاحة بصيغة PNG. وتشمل أيقونات التواصل الاجتماعي، والأسهم، والخدمات ...إلخ.

Material Design Icon Grid

صمَّم هذه الأيقونات المصمم Jiangping Hsu ويمكن تحميلها بصيغة ملفات PSD. بإمكانك استخدامها في أشرطة العمل كأيقونات بدء.

Google Material Icons

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

Material Design Powerpoint & Keynote Icons

يوجد هنا مجموعة كبيرة مكونة من 425 أيقونة بإمكانك استخدامها في برنامج Powerpoint و Keynote. بإمكانك تغيير الألوان حتى تناسب ما تريد وضعها معه.

Isometric Material Icons

وهي مجموعة رائعة تشمل أيقونات مصممة تصمميًا جيدًا. بإمكانك تحميلها بأكثر من صيغة ملف مثل PNG، و PSD، و AI.

Material Design Icons with Bounds

250 أيقونة تصميم مادي (Material Design Icons) بإمكانها أن تندمج بداخل مشاريع Sketch الخاصة بك. تفقد هذه الأيقونات وحدد إن كنت تستطيع استخدامها في تصاميمك الحالية.

Material Design Icon Templates

سوف تجد هنا العديد من قوالب أيقونات التصميم المادي (Material Design Icons) المختلفة والتي بإمكانك استخدماها في تصاميمك الحالية أو المستقبلية.

Material Icons Pack

وهي مجموعة كبيرة أخرى مكونة من 435 أيقونة مصممة وفق التصميم المادي (Material Design Icons). بإمكانك تحميل هذه العناصر في برنامج Sketch وصيغة SVG.

Material Design System Icons

أيقونات النظام هذه تم صُنعها بواسطة Walmyr Carvalho. ستجد في الرابط الموجود بالعنوان 20 أيقونة جميلة بإمكانك استخدامها في كل من Sketch وبصيغة PNG.

Material Design Icons by Google

لديك 900 أيقونة مصممة وفق التصميم المادي (Material Design Icons) بين يديك وجاهزة للاستخدام فورًا. هذه الأيقونات لديها تصاميم بسيطة ولكن مذهلة وسوف تترك انطباعًا إيجابيًا لدى مستخدميك.

Mprphing Material Design SVG Icons – SVG Morpheus

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

Material Design Webfont Icons

هذه مجموعة مميزة وتضم أكثر من 1900 أيقونة مصممة وفق التصميم المادي (Material Design Icons). هذه المجموعة تشمل تصاميم أيقونات متعددة الاستخدام ومتوفرة بعدّة صيغ وألوان وأحجام.

Material Design Icons

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

Material Design Icon Templates

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

Free Set of Server – Hosting Material Design Icons

تشمل هذه المجموعة 12 أيقونة جميلة مصممة وفق التصميم المادي (Material Design Icons) والتي تتعلق بالخوادم والمستضيفات. بإمكانك تحميلها بصيغة PSD أو PNG ويمكنك أيضًا استخدامها في كلا المشاريع المجانية والتجارية.

Google Maps & Streetview Icons

تجد هنا بعض الأيقونات المرسومة الخاصة بخرائط جوجل (Google maps) ووضع رؤية الشارع (Streetview) والتي يمكنك استخدامها في مشاريعك الحالية أو القادمة.

Angular Material Icons (eps)

لديك هنا مجموعة رائعة من الأيقونات الزاويّة التي يمكنك تحميلها واستخدامها بالمجان. هذه العناصر لديها تصاميم مفصّلة بألوان جميلة.

Material Design +420 Free Icons (SVG, EPS, PSD, PNG Files)

أيقونات التصميم هذه متواجدة بصيغة vector مما يجعلها مثالية لأي مشروع، مهما كان حجمه. بإمكانك الاختيار بين أكثر من 420 أيقونة مجانية وتأتي بصيغة SVG، و PNG، و PSD وصيغ ملفات أخرى.

ترجمة -بتصرف- للمقال ‎7000+ Material Design Icons - Ultimate Icon Roundup لصاحبه Iggy