$hide=post-404

$type=ticker$count=15$cols=5$cate=1$readmore=hide$show=home$hide=mobile$label=hide

Movavi WW

فرق بين التصميم المسطح "Flat Design" و التصميم المادي "Material Design" و مميزاتهما




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

في السنوات الأخيرة ظهر أسالوبين أو أنماطين في التصميم حققا شهرة بسرعة، حيث أن كل المصممين اتجهوا لهذين النمطين وهما : التصميم المادي "Material Design" و التصميم المسطح "Flat Design" ،ولكن ما هو الفرق بينهما؟ و هل يمكن التفضيل واحد على الآخر؟ وما هو تعريف كل واحد منهما؟  دعونا نبدأ :

أنصحك أيضا ب :
هذا هو نوع من التصميم ثنائي الأبعاد لا يدخل فيه أي عنصر متعددة الأبعاد. ولهذا  يسمى بتصميم المسطح أي على سطح واحد. و بتالي يتميز التصميم المسطح "Flat Design" أنه بسيط بدون ظلال، قوام، وتدرجات فقط خطوط ورموز وألوان لكن بطريقة إحترافية. ولكن لماذا؟
 
التصميم المسطح غالبا يكون خفيف بدون تفاصيل مملة و الثقيلة عكس Skeuomorphic (طبقات، التدرجات، ظل ...) و هذا يجعله أصغر بكثير و مستهدف(مركز و بدون تشويش)، إضافة إلى هذا فعناصر تصميم المسطح تبدو بنفس القدر من الجاذبية على كل الأحجام سواء الكبيرة و صغيرة و أيضا على الشاشات عالية الدقة و الشاشات ذات الدقة المنخفضة.
ظهر التصميم المسطح "Flat Design" سنة 2013 و انتشر بسرعة وفعالية، إذا قارنت بين تصاميم السنوات القديمة والآن ستجد فرق كبير فقد تخلت المواقع على قوالبها القديمة و تحولت إلى تصاميم المسطحة.
التصميم المادي " Material deisgn " هو عبارة عن مجموعة من معايير التي وضعتها جوجل. و تم تطويره إنطلاقا من التصميم المسطح فهذا التصميم يتميز بكتير  الأشياء، ولكن أكتر مايميزه هو استخدامه لمحور ز "Z" لاثي الابعاد). حيت أنه يضيف قليلا من تفاصيل Skeuomorphism مثل ظل الخفيف أو العمل على محور ز "Z"...
يقول منتقدو تصميم مسطح أنه ذهب بعيدا جدا في تبسيط. و أنه أكثر راديكالية في إزالة جميع تفاصيل Skeumorphs حتى تلك مفيدة. و يأتي التصميم المادي تفاصيل خفيف تضفي حيوية لتصميم (الظلال، الحافات، والرسوم المتحركة...).
هذا تصاميم يشبه كتيرا الأوراق فجميع أيقونات المعمول بتصميم المادي تشبه الأوراق المطوية. وظهر التصميم المادي " Material deisgn " سنة 2014 و هو من إنتاج الشركة العملاقة جوجل "Google"، وهو المستخدم في كل إصدارات الأندرويد  و مواقع " Google " وما إلى ذلك.

الفرق بين التصميم المادي "Material Design" والتصميم المسطح "Flat Design"


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

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



  

تعليقات

الاسم

3D,2,آلة حاسبة,1,إبتسامة,1,أخبار,11,اخبار,5,أخبار التصميم,18,أداة,1,إزالة خلفية,1,أزرار,1,أستايلات,4,أكشن,3,الأبيض,1,الأحمر,1,الأخضر,1,الأزرار,1,الأزرق,1,الألعاب النارية,1,الأنترنت ، البحت ، server database، حاسوب ، مكبرة ، مكيفات الهواء،icon,2,البحر,1,التسويق الرقمي,1,التسويق عبر البريد الالكتروني,1,التصميم,3,التصميم الغرافيكي,1,التصوير الفوتوغرافي,9,الحجر,1,الرأس,1,الرمادي,1,الزهور,1,الستريتر,8,السحاب,1,الصيف,1,الطباعة عند الطلب,1,الظل,1,الفيديو,7,القرش,1,إلكترونية,1,الكلب,1,المورثة,1,الوان الطيف,1,الوجه,2,إنعكاس الماء,1,أيقونة,2,باترن ( Pattern ),3,برامج المونتاج,1,بريد,1,بزنس و التصميم,7,بسيطة,1,بفوتوشوب,2,بنفسجي,1,تأثير ،المشعر ،مزغب ،نص فروي,1,تأثيرات الصور,77,تأثيرات النصوص,20,تحت الماء,1,تحطم,1,تسويق,7,تسويق إلكتروني,1,تصميم الخطوط,1,تصميم الشعارات,5,تصميم المواقع,2,تصميم واجهة المستخدم,1,تصميم ويب,1,تطبيقات,3,تطوير الويب,1,تعليم الرسم,14,تفاحة,2,تلاعب,2,تلاعب بالصور,58,تلوين,1,تواصل الإجتماعي,3,تويتر,2,ثأتير خط,6,ثأتير نص,1,ثأتيرات صور,16,جمجمة,1,جوز الهند,1,حذاء,1,حمامة,1,حيوانات,8,خراب,1,خط,78,خط Qontra,1,خطوط,96,خطوط أجنبية,68,خطوط اجنبية,18,خطوط البرمجة,1,خطوط عربية,23,خلفيات,1,دراجة,1,درس,117,دروس,198,دروس أفتر أفكت,2,دروس التصميم,11,دروس اليستريتور,64,دروس فوتوشوب,186,رجل,1,رسالة,1,رسم,1,رمز,1,رمضان,2,رموز,2,ريشة,1,زجاجية,1,ساعة,1,ساموراي,1,سايبورغ,1,ستايل,4,سفر,1,سيارات,1,سيارة,1,شجرة,1,شخصيات,1,شخصية,1,شعار,4,شعارات,26,شعارات و رموز,68,شمسية,1,شمعة,1,صحن,1,صفحة الهبوط,1,صور و خلفيات,23,صورة قطبية,1,ضخمة,1,طبق,1,طبيعة,1,طيار,1,عجوز,1,عجوز وجه,1,عرض تصاميم,3,عروض,25,علم,1,عمل حر,1,عيد الأضحى,1,عين,1,غلاف الكتاب,2,فرش,11,فرش (Brush),15,فرشاة,2,فن,1,فوتوشوب,43,فيكتور,8,قالب,1,قصر,1,قلعة,1,قوس قزح,1,كاميرا,1,كرتون,1,كرتونية,2,كلب,1,كوب ، تلاجة ، مغرفة، سكين المطبخ، مقلاة، صحن,1,كورسات,2,كوكب,1,كوكب الأرض,1,لحية,1,مآزر المطبخ,1,متجر إلكتروني,1,مجانا,2,مجانيات,6,محطم,1,مخطوطات,4,مسابقات,75,مشاعر,1,معدات الغوص,1,معضوض,1,مقالا,1,مقالات,417,مقالات التصوير,19,مقالات العاب,6,مقالات برمجة,25,مقالات تصميم,107,مقالات After Effect،,1,مقالات Illustrator,19,مقالات Indesign,7,مقالات photoshop,24,مقالات SEO,9,مكسور,1,مميزات,1,منزل,2,منظر طبيعي,1,مواقع لتنزيل صور PNG,1,موقع,4,نصائح,1,نفاثة,1,نوتة ، الموسيقى، فرش، مزمار,1,نينجا,1,هيكل عظمي,1,واتساب للأعمال,1,واقعية,3,وكالة,1,يد,1,يضيء,1,ABR,1,action,3,After Effect,2,Ai,3,Alien,1,alphabet,1,Alphabets,1,Android,1,App,1,Application,1,arrow,1,Austria,1,Back card,1,background,5,Bahrain,1,Ball,1,Balls in box,1,Bee,1,Belgium,1,Bitmap,1,blue,3,Blue background,2,book cover,1,Box Closed,1,Box Opened,1,Boxes,1,Brown,1,Brush,10,Brushes,9,Burkina faso,1,Business card,1,Buttons,3,Calc,1,Calculator,1,China,1,Circle,1,Circles,2,Clock,1,Cote d'ivoire,1,Croatia,1,Currency,1,Cyborg,2,czech,1,Dent,1,Dental,1,design,2,Disk,1,dog,1,Dollar,1,download,1,Drop Water,1,Earth,1,economy,2,Egypt Uganda,1,Emirates,1,emoticons,1,eps,7,EPS vector art,6,Euro,2,Flag,1,flute,2,font,1,France,1,Front card,1,G,1,galaxy,2,Game Development,5,Games,4,Gaza,1,Germany,1,Ghana,1,gift,1,gold,1,golden color,1,Golf,1,green,2,Guitar,1,H,1,head,1,Headphone,1,Health,1,heart,1,Hero,1,High Price,1,Hong Kong,1,Hour,1,Icon,1,Icon application,1,Illustrator,121,India,1,Iran,1,Iraq,1,Ireland,1,Italy,1,Japan,1,Japanese Yen,1,Jordan,1,jpeg,3,jpg,1,Kenya,1,Kid,1,Korea,1,Kuwait,1,landing page,1,Lebanon,1,Libya,1,light,2,Lithuania,1,Logo,5,Magnifier,1,Magnifying Glass,1,mail,1,Mali,1,Medal,1,medals,1,Metal,2,Metal Texture,1,microphone,1,money,2,Morocco,1,Mozambique,1,music,1,Netherlands,1,Nigeria,1,Ninja,1,note,1,Notebooks,1,Notes,1,Oman,1,orange,1,Palestine,2,Pc,1,Photoshop,161,piano,1,Picture,2,planet,1,plug-in,1,PNG,32,Poland,1,Portugal,1,Pound,1,price,1,PSD,115,rainbow,1,rainbow colors,1,received,1,red,2,Republic of congo,1,Romania,1,Rwanda,1,Saudi Arabia,1,search,1,Senegal,1,sent,1,Silver,1,Slovakia,1,South Africa,1,Space,2,Spain,1,SpeedArt,2,Sprocket,1,star,3,Style,2,Styles,3,Sudan,1,Sun,1,Superhero,1,Switzerland,1,symbol,6,Symbols,1,Syria,1,Tablet,1,Taiwan,1,Tanzania,1,Technologies,1,technology,1,tiny effect,1,Togo,1,Tooth,1,Touch,1,trophy,1,Tunisia,1,Turkey,1,Tutorial,2,UFO Logo,1,Ufo Symbol,1,United Kingdom,1,Vector,31,Vector ( فيكتور ),173,Vector material,4,video,1,Watch,1,white,2,Yemen,1,Zambia,1,
rtl
item
اشكوش ديجيتال | Hcouch Digital: فرق بين التصميم المسطح "Flat Design" و التصميم المادي "Material Design" و مميزاتهما
فرق بين التصميم المسطح "Flat Design" و التصميم المادي "Material Design" و مميزاتهما
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-g_Ton9iM3LUB-_8oZtAS_rMbLWX1DDeEr4DSy3971YmCe9ew67NZRbA4-5tWrAnmSgqR0Io80Rk7K94Te-Hbp4pzdPw7FHW_x5v24DU5kluseTiRpT1Lce40UfEg5LBAl_HfBjvNEY/s400/-.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-g_Ton9iM3LUB-_8oZtAS_rMbLWX1DDeEr4DSy3971YmCe9ew67NZRbA4-5tWrAnmSgqR0Io80Rk7K94Te-Hbp4pzdPw7FHW_x5v24DU5kluseTiRpT1Lce40UfEg5LBAl_HfBjvNEY/s72-c/-.png
اشكوش ديجيتال | Hcouch Digital
https://www.hcouchd.com/2017/02/different-between-material-design-and-flat-design.html
https://www.hcouchd.com/
https://www.hcouchd.com/
https://www.hcouchd.com/2017/02/different-between-material-design-and-flat-design.html
true
3088230440467509860
UTF-8
تحميل جميع المشاركات لم يتم العثور على أي مقال عرض الكل قراءة المزيد رد إلغاء الرد حذف بواسطة الصفحه الرئيسيه الصفحات مقالات مشاهدة الكل قد ترغب فئة أرشيف بحث جميع المقالات لم يتم العثور على أي منشور مطابق مع طلبك رجوع لصفحة الرئيسية الأحد الاثنين الثلاثاء الأربعاء الخميس الجمعة السبت الأحد الاثنين الثلاثاء الأربعاء الخميس الجمعة السبت يناير فبراير مارس أبريل ماي يونيو يوليو أغسطس سبتمبر اكتوبر نوفمبر ديسمبر يناير فبراير مارس أبريل ماي يونيو يوليو أغسطس سبتمبر اكتوبر نوفمبر ديسمبر في هذة اللحظة منذ دقيقة واحدة $$1$$ minutes ago قبل ساعة $$1$$ hours ago يوم أمس $$1$$ days ago $$1$$ weeks ago منذ أكثر من 5 أسابيع متابعون متابعة هذا المحتوى المميز مقفل الخطوة 1: شارك على شبكة اجتماعية الخطوة 2: انقر على رابط على الشبكة الاجتماعية انسخ كل الأكواد حدد كافة الأكواد تم نسخ جميع الرموز إلى الحافظة الخاصة بك لا يمكن نسخ الرموز / النصوص ، يرجى الضغط على [CTRL] + [C] (أو CMD + C مع نظام التشغيل Mac) للنسخ فهرس