اذهب إلى المحتوى

أساسيات التصميم الجرافيكي - الجزء الثالث: التكوين Composition


Huda Almashta

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

graphic-design-3.thumb.png.22272c21b8a49

العنصر البصري المفرد Single Visual

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

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

veen.thumb.jpg.62fd3870215ea6dce7adceab3

صفحة Jeffrey Veen هي مثال جيد على استخدام نمط العنصر البصري المفرد

النسبة الذهبية

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

02.thumb.jpg.a7ebaa85ef79074c4726034e4f6

حلزون فيبوناتشي

النقطة المحورية (أو البؤرية)

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

03.thumb.jpg.1ef3a010457306abc73747c649e

يستخدم موقع Girlfriend Agency النقطة المحورية بصورة جيّدة وذلك بالتشديد على العنوان

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

التصميم الشبكي

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

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

  • 04.thumb.jpg.3ebb1bfa7bbfbb2463eed7d2db5

النظام الشبكي

قوانين جشتالت Gestalt Laws

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

توجد خمسة مبادئ خاصّة بقوانين جشتالت:

  • الإغلاق closure
  • التشابه similarity
  • الاستمرار continuation
  • المحاذاة alignment
  • التقارب proximity

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

05.thumb.jpg.00595c8a211d9d1097c24016ab4

قانون جشتالت للإغلاق

06.thumb.jpg.4e63022a77938dff9ada64a4357

قانون جشتالت للتقارب

في الواقع توجد المزيد من قوانين جشتالت، لكن ليست جميعها مهمّة بالنسبة للمصمّمين.

التخطيط على شكل Z و F

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

07.thumb.jpg.e6828e9495c7156caf9626405ce

تخطيط على شكل Z

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

08.thumb.jpg.2e4d3b4fe027b5adae832499c5d

صفحة Goal Arena مخطّطة على شكل الحرف F

الخلاصة

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

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

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

ترجمة -وبتصرّف- للمقال: Graphic Design Basics Part 3: Composition لصاحبه: James Richman.

حقوق الصورة البارزة: Designed by Freepik.


تفاعل الأعضاء

أفضل التعليقات

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

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

مجهود رائع تُشكرين عليه أختي هدى.

بالتوفيق

رابط هذا التعليق
شارك على الشبكات الإجتماعية

 

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

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

شكرا على مشاركتك زاهر، وبالتوفيق لك :)

رابط هذا التعليق
شارك على الشبكات الإجتماعية



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...