مبادئ التصميم المادي Material Design

التصميم المادي

[mhc_section admin_label=”section”][mhc_row admin_label=”row”][mhc_column type=”4_4″][mhc_image admin_label=”صورة” src=”https://shortcutadv.com/new/wp-content/uploads/2020/08/مفهوم-التصميم-المادي.jpg” alt=”التصميم المادي” title_text=”التصميم المادي” show_in_lightbox=”off” url_new_window=”off” animation=”right” hoverfx=”none” sticky=”off” image_mask=”off” border_radius=”0″ align=”right” force_center_on_mobile=”on”]

 

[/mhc_image][mhc_text admin_label=”نص” background_layout=”light” text_orientation=”right”]

مبادئ التصميم المادي ( Material Design )

انتشر استخدام التصميم المادي (Material Design) بشكل كبير هذه الأيام؛ حيث بدأ المصممون فى تضمينه فى تصميماتهم، ليس فقط لتطبيقات الأندرويد بل لتصميمات الويب أيضا.
تم طرح مفهوم التصميم المادي لأول مرة من قِبل Keynote _ Google I\O 2014 ،سنوضح فى هذه المقالة ماهيَّة التصميم المادي، كذلك بعض المبادئ التى ينبغي أن نعرفها حتى يخرج هذا التصميم بشكل مميز.

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

بادر بالاتصال بها الآن عبر الهاتف: 0540907692

التصميم المادي

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

ستتعلم

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

وإليك بعض المبادئ التي يلزم معرفتها والاهتمام بها ومنها:

1-استخدام الرموز لإبراز الهرميَّة المرئية

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

السطوح والحواف والظلال والإضاءة هي الأدوات الرئيسية للتصاميم المادية، ولكن عند إضافة العمق

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

2-استخدام الألوان الجريئة

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

3-استخدام لوناً أساسياً مع اخر ثانوي

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

4-استخدام الفراغات فى التصميم المادي

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

مثال على ذلك وهو استخدام خطوط كب

يرة للعناوين مع إضافة مساحات كبيرة فارغة حولها.

5-استخدام الحركات فى التصميم المادي

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

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

6-استخدام الصور من الحافة إلى الحافة

تُستخدم الصور في التصميم من الحافة إلى الحافة بطريقة تٌسمى full-bleed ،بمعنى عدم وجود حاشية بين حافة الصورة وحافة الشاشة.
تظهر أهميتها فى إعطاء المستخدم تجربة فريدة ومنح المصممين بعض الأدوات الإضافية بجانب مجموعة الظلال والألوان والطبقات.

[/mhc_text][/mhc_column][/mhc_row][/mhc_section]

BLOG

related articles

Eget nulla phasellus odio sit porttitor enatibus aliquam blandit gravida ultricies eleifend varius tempor vulputate malesuada tristique.
comments

post a comment

Eget nulla phasellus odio sit porttitor enatibus aliquam blandit gravida ultricies eleifend varius tempor vulputate malesuada tristique.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

لا تفوتك العروض الكبرى! خصم 50% على جميع الخدمات
This is default text for notification bar