ماذا يمكن أن يتعلم مصممي الويب من تصميم الماتريال لجوجل – MATERIAL DESIGN

تصميم الماتريال هو أسلوب التصميم المرئي الجديد لجوجل. تم عرضه في مؤتمر I/O في شهر يونيو 2014 ، ولقي رواجا كبيرا في جميع مجالات التصميم.

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

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

مبادئ جوجل التوجيهية لتصميم الماتريال:المقدمة

المبادئ الـ3 لتصميم الماتريل

القيم الأساسية لتصميم الماتريال هي أكثر من مجرد تطور لاتجاهات (trends) التصميم الحالية.

  • إستعارة الماتريال “الخامات أو المواد” (Material is the metaphor)
  • الوضوح،الجرافيك،القصد (Bold, graphic, intentional)
  • الحركة توفر المعني (Motion provides meaning)

من المنطقي أن نتقدم خطوة للأمام من التصميم المسطح(Flat Design). ولكن تصميم الماتريال أكثر من مجرد خطوة لأنه استعارة (metaphor) فهو يوفر أساس جديد للتصميم مشابه للجذور. فتصميم الماتريال يركز علي الفيزياء في العالم الحقيقي.

بالاضافة إلي ذلك، مكونات الجرافيك العميقة، الجريئة، المقصودة تمنح أسلوب التصميم مظهر التوقيع (signature). والأفضل من ذلك أنها توفر مظهر جمالي واضح. ولكن هناك المزيد …

شاشات ومنتجات موحدة

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

61

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

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

 كل شيئ مرن

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

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

4

اتجاه جديد لجوجل

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

ولذلك، من المثير للاهتمام أن نري جوجل تقوم بانشاء أسلوب تصميم مثير للإعجاب. مع تصميم الماتريال أصبحت جوجل رائدة التصميم. وقد أظهروا قدرتهم علي إنشاء تصميم بصري (visual design) كبير.

5

قدرات الأجهزة الجديدة

بالعودة للوراء والتفكير كيف كانت تبدو واجهات المستخدم في 1980 ثم 1990. وبمقارنة ذلك بكيف كان يبدو شكل أول هاتف أيفون وبمقارنتهم مع أي جهاز اليوم. التكنولوجيا تتطور وتتيح عرض رقمي (digital display) أفضل. فالأجهزة قديما كانت غير قادرة علي عرض الظلال علي شاشات “DOS” لأنها كانت غير قادرة علي تقديم هذا. فالهواتف الذكية الأولي كانت سيئة جدا في تقديم رسوم متحركة من أي نوع.

1

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

أكثر من تصميم  مسطح (Flat)

والشئ المدهش الآخر في تصميم الماتريال هو التزامها وإلهامها المأخوذ من العالم الحقيقي.

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

3

إمكانيات الاستخدام هي المفتاح (الأساس)

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

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

ما يجعل هذا جانب مذهل ومهم لتصميم الماتريال هو حقيقة أنه لا توجد أساليب ولغات تصميم أخري شائعة تركز علي إمكانيات الاستخدام من خلال الحركة (motion). الهدف العام منه جعل الحياة أسهل للمستخدمين. وذلك من خلال “motion is simply innovative” الحركة هي مجرد ابتكار.

222

 

 المصدر

مقالات ذات صلة

7 تعليقات

  1. صلاح الإمام
    18 نوفمبر,2014 في 11:40 م - Reply

    مقال رائع , تسلم علي مجهودك يا محمد

  2. a7med
    19 نوفمبر,2014 في 3:50 ص - Reply

    مقال رائع جداا مشاء الله هل من الممكن نقل المحتوي لنشره في اماكن اخري شكر ا لك .

    • محمد ماهر
      20 نوفمبر,2014 في 4:23 م - Reply

      نعم تستطيع نقله ولكن مع ذكر المصدر

  3. Mustarfa ismail
    19 نوفمبر,2014 في 1:48 م - Reply

    رائع

  4. A7MED
    20 نوفمبر,2014 في 3:54 م - Reply

    لم ترد علي او تعطني اجابه اخي هل من الممكن نقل الموضوع الي اماكن اخري لكي تعم الافادة شكراا لك

  5. محمود حنفي
    24 نوفمبر,2014 في 12:45 م - Reply

    الموضوع شكله شيق؛ لكن حتى الىن مش فاهم أو مش متصور كيف سيكون الربط بين العالم الافتراضي وبين العالم الواقعي باستخدام تصميم الماتيريال… وماهيته نفسها مش واضحة لي بعد.. ممكن روابط تقرّب الفكرة أو تعطيني Overview واضح للموضوع؟ ولو بالعربية إن تكرمت؟

  6. اسئلة واجوبة
    23 يونيو,2015 في 5:59 ص - Reply

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