Skip to main content

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

1- النقطة، الخطّ، الشكل

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

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

مثال بسيط: إذا قمت برسم 3 نقاط وربطها بخطوط مستقيمة، تحصل على مثلّث!

2- الألوان

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

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

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

3- الخطوط

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

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

4- المسافات

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

5- التوازن والتناغم والتباين

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

يمكن أن يوفّر ضبط الوزن المرئيّ للكلمات الانسجام والتباين.

6- الحجم

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

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

7- التصميم الشبكيّ والمحاذاة

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

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

8- الإطار

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

محاولة لتوجيه العين إلى ما يهمّ

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

9- الأنماط والنسيج

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

10- المفهوم البصريّ

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

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

كتابة الرسائل التي تحفز على العمل: الإرشادات والأخطاء الشائعة

كتابة الرسائل التي تحفز على العمل: الإرشادات والأخطاء الشائعة

تعلم كيفية كتابة النصوص الصغيرة التي تحفز المستخدمين على اتخاذ إجراءات معينة. سواء كان ذلك…
الوصولية في النماذج: كيفية تصميم نماذج سهلة الاستخدام والوصول

الوصولية في النماذج: كيفية تصميم نماذج سهلة الاستخدام والوصول

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

موضوع المقالة: مميزات النص وأنواع الخط في CSS

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