اهم خصائص التصميم المسطح وكيف تحول تصميماتك الى مسطحة

انتشر التصميم المسطح على نطاق واسع في السنوات الأخيرة ، فالتصميم المسطح لايحتاج الى أدوات او برامج خاصة ، وانما يحتاج للالتزام بخواص ومعايير معينة
وقت القراءة المقدر: 2 دقائق
خصائص التصميم المسطح

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

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


خصائص التصميم المسطح:

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

1 عدم إضافة تأثيرات للتصميم المسطح

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

2 استخدام عناصر بسيطة:

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

اقرأ ايضا: افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا

3 استخدم نمط خط متناسق مع التصميم:

يفضل ان يكون الخط عادي (مثل: sans-serif) للإنجليزية والعربية (مثل: Arial) وليس من الخطوط المزخرفة بالمطبات الملتوية.
أيضا لون وحجم الخط والفراغات بين الكلمات والسطور هذه لها دور كبير يعتمد على التصميم الذي تصممه والعناصر المجاورة للنص والألوان.

4 استخدام الألوان المخصصة:

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

5 المنهج الإصلاحي (minimalist approach):

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

كيف تحول تصميماتك الى مسطحة

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


كانت هذه مجموعة من اهم الخصائص والقواعد التي ستساعدك في فهم وتصميم تصاميم مسطحة (flat design) ، واهم نقطة يجب التركيز عليها أخذ الإلهام من تصميمات سابقة ، واذا كانت لديكم أرآء أخرى حول التصميم المسطح يمكنكم مشاركتها في تعليق ليستفيد الجميع ، دمتم بخير!

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة !
2 - أن لا تضع أي روابط خارجية!
3 - أي سؤال خارج محتوى التدوينة يتم حذفه !
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
موافقة ملفات تعريف الارتباط
نحن نقدم ملفات تعريف الارتباط على هذا الموقع لتحليل حركة المرور وتذكر تفضيلاتك وتحسين تجربتك.