علم نفس التصميم: تشكيل صورتك على الإنترنت

نشرت: 2023-02-15

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

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

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

  • خطوط
  • الدوائر والأشكال البيضاوية
  • مثلثات
  • الأشكال الرباعية
  • المضلعات
  • أشكال مجردة

خطوط مستقيمة ومنحنية

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

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

لقطة شاشة من موقع ويب Affinity تعرض شعارها الثلاثي المستدير
تعمل الحواف الدائرية لشعار Affinity على تخفيف تأثيره العام على المستخدمين

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

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

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

لقطة شاشة من موقع The Inlay تتميز بخلفية بيضاء وثلاثة خطوط متعامدة
الاستوديو الإبداعي The Inlay يستخدم خطوطًا رفيعة ومستقيمة لتفكيك موقعهم البسيط والحفاظ على حركة عينيك

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

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

الدوائر والأشكال البيضاوية

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

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

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

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

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

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

مثلثات

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

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

لقطة شاشة لمعاينة صورة Rick Astley ، ضرب "Never Gonna Give You Up" مع رمز التشغيل الثلاثي في ​​المنتصف
تستخدم صورة المعاينة هذه لفيديو YouTube رمز "تشغيل" مثلث

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

لقطة شاشة لصفحة HGTV الرئيسية تعرض شعارها
يعرض "تلفزيون المنزل والحديقة" المنزل بمثلث بسيط أعلى شعاره

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

الأشكال الرباعية

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

غالبًا ما تستخدم المربعات والمستطيلات من قبل العلامات التجارية التي تريد أن تظهر على أنها واقعية أو واقعية. من National Geographic إلى LinkedIn إلى Dominos ، تعد المربعات والمستطيلات شائعة - خاصة للشعارات - عبر مجموعة واسعة من الصناعات.

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

لقطة شاشة لنمط متوازي الأضلاع على موقع تصميم مختار صغافي
لقطة شاشة من موقع تصميم مختار صغافي

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

لافتات شوارع على شكل كتلة مزخرفة بشعار Lego
تصوير فايز زكي

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

الخماسيات والسداسيات والمثمنات

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

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

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

لقطة شاشة من صفحة Built By Buffalo الرئيسية حيث يتم عرض مشاريعهم المميزة في نمط قرص العسل
يتيح استخدام هذا النمط لعرض عملهم لـ Build By Buffalo عرض الكثير من المشاريع في القليل جدًا من عقارات الويب

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

لقطة شاشة من صفحة "حول" على موقع جولات البنتاغون. تقطع ثلاثة خطوط قطرية صورة جولة كعنصر رسومي
تم تقليد الخطوط القوية لشعار Pentagon Tours باستخدام المعالجات الرسومية للصور الموجودة على الموقع

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

الأشكال المجردة

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

النقط

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

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

لقطة شاشة من قائمة التنقل في Buzzworthy مع شكل بصلي الشكل يعرض صورة بجانب الكلمات "العمل. الاستوديو. الفريق. الاتصال. الترفيه."
يظهر شكل "بوبا" متحرك عند فتح قائمة التنقل في Buzzworthy u

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

الصلبان

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

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

لقطة شاشة من موقع الصليب الأحمر الأمريكي تظهر شعار "الصليب الأحمر" الأيقوني
لقطة من موقع الصليب الأحمر الأمريكي

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

اللوالب

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

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

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

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

أشكال عضوية

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

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

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

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

العقل وراء التصميم

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

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

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

الجزء 1
الجزء 2