Flat Design

1. ‫التصميم‬‫المسطح‬
FLAT
DESIGN

2. ‫المحاضرة‬ ‫هذه‬ ‫تغطيه‬ ‫الذي‬ ‫ما‬
•‫مقدمة‬.
•‫ما‬‫هو‬‫التصميم‬‫المسطح‬.
•‫ظهور‬‫التصميم‬‫المسطح‬.
•‫عناصر‬‫التصميم‬‫المسطح‬.
•‫مميزات‬‫و‬‫عيوب‬‫التصميم‬‫المسطح‬.

3. ‫مقدمة‬
•‫في‬‫عصر‬‫تتسارع‬‫فيه‬،‫التقانة‬‫وتتعدد‬‫الطرق‬‫في‬‫الحصول‬‫على‬،‫المعلومة‬‫و‬‫مع‬‫التنوع‬‫الكبير‬‫ف‬‫ي‬‫األجهزة‬
‫المستخدمة‬‫في‬‫تصفح‬‫مواقع‬‫الويب‬‫وأنظمة‬،‫تشغيلها‬‫أصبح‬‫التصميم‬‫اب‬ّ‫ذ‬‫الج‬‫ال‬‫يكفي‬‫للحصول‬‫على‬‫عدد‬‫كبير‬‫من‬
‫الزائرين‬‫للموقع‬.
•‫أصبح‬‫التصميم‬‫المستجيب‬‫لمواقع‬‫الويب‬‫من‬‫العوامل‬‫األساسية‬‫لزيادة‬‫عدد‬‫المستخدمين‬‫والزائرين‬‫لما‬‫وفره‬ُ‫ي‬‫من‬
‫سهولة‬‫في‬‫الوصول‬‫للمعلومة‬‫وعرض‬‫محتويات‬‫الموقع‬‫بصورة‬‫تتوافق‬‫مع‬‫شاشة‬‫العرض‬‫المستخدمة‬.
•‫في‬‫هذه‬‫المحاضرة‬‫سنتحدث‬‫عن‬‫عنصر‬‫آخر‬‫اكتسح‬‫عالم‬‫تصميم‬‫مواقع‬‫الويب‬‫والبرمجيات‬‫والذي‬ُ‫ي‬‫عرف‬‫بالتصميم‬
‫المسطح‬‫فقد‬‫أصبح‬‫حديث‬،‫المصممين‬‫كما‬‫جعل‬‫عمالقة‬‫الشركات‬‫تدمن‬‫عليه‬‫في‬‫تصاميم‬‫كل‬‫تقنيات‬‫ها‬.

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

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

7. ‫المسطح‬ ‫التصميم‬ ‫ظهور‬
•‫في‬‫العام‬2006‫أطلقت‬‫شركة‬‫ميكروسوفت‬‫مشغل‬‫الموسيقى‬Zune music player‫على‬‫الرغم‬‫من‬‫أنه‬‫لم‬
‫يكن‬‫ناجحا‬‫تجاريا‬‫إال‬‫أن‬‫واجهاته‬‫أحدثت‬‫ثورة‬‫كبيرة‬‫في‬‫عالم‬‫التصميم‬‫المسطح‬.
•‫مصطلح‬‫التصميم‬‫المسطح‬‫أصبح‬‫ذو‬‫شعبية‬‫بعدما‬‫كتب‬‫المصمم‬Allan Grinshtein‫من‬LayerVault
‫منشورا‬‫يوضح‬‫فيه‬‫بأن‬‫الواجهات‬‫األنيقة‬‫مع‬‫عدد‬‫أقل‬‫من‬‫العناصر‬‫لها‬‫التأثير‬‫األكبر‬‫على‬‫المستخد‬،‫مين‬‫هذا‬‫المنشور‬
‫لقي‬‫اهتماما‬‫كبيرا‬‫وردود‬‫أفعال‬‫كثيرة‬‫من‬‫قبل‬‫المصممين‬‫والذين‬‫بدورهم‬‫قاموا‬‫بتقديم‬‫عدد‬‫هائل‬‫من‬‫ال‬‫مقترحات‬
‫والتطبيقات‬‫التي‬‫تتميز‬‫بجمالية‬‫وروح‬‫التصميم‬‫المسطح‬.
•‫تعتبر‬‫شركة‬‫مايكروسوفت‬‫في‬‫طليعة‬‫الشركات‬‫المستخدمة‬‫لهذا‬‫النمط‬‫من‬‫التصميم‬‫بعد‬‫صدور‬‫نظ‬‫ام‬‫تشغيلها‬‫الثامن‬
‫الذي‬‫جاء‬‫بتصميم‬‫مسطح‬‫مبهر‬.‫هذا‬‫التصميم‬‫الخاص‬‫بنظام‬‫التشغيل‬Win 8‫يطلق‬‫عليه‬Metro UI.

10. ‫المسطح‬ ‫التصميم‬ ‫عناصر‬
.1‫األلوان‬ ‫عنصر‬:
‫يعتبر‬‫اختيار‬‫األلوان‬‫المناسبة‬‫للموقع‬‫عملية‬‫مجهدة‬،‫وصعبة‬‫كما‬‫أن‬‫اختيار‬‫األلوان‬‫المناسبة‬‫للموقع‬‫عطي‬ُ‫ت‬‫الموقع‬
ُ‫ه‬‫جماليت‬‫وتزيد‬‫من‬‫استمرار‬‫المستخدم‬‫في‬‫تصفح‬‫الموقع‬‫فترة‬‫أكبر‬.‫التصميم‬‫المسطح‬‫ستخ‬َ‫ي‬‫دم‬‫ألوان‬‫مشرقة‬‫براقة‬‫تشد‬
‫العين‬‫إليها‬.‫يمكن‬‫لك‬‫الحصول‬‫على‬‫األلوان‬‫المناسبة‬‫لموقعك‬‫عن‬‫طريق‬‫استخدام‬‫برنامج‬‫الفوتوشوب‬،‫كما‬‫توجد‬
‫مواقع‬‫هل‬ّ‫س‬ُ‫ت‬‫عملية‬‫اختيار‬‫األلوان‬‫وتعينك‬‫على‬‫اختيار‬‫األلوان‬‫المناسبة‬‫لموقعك‬‫ومنها‬
‫موقع‬FlatUIColors.com

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

18. .3‫المتجهة‬ ‫الرسومات‬Vector Graphic:
‫يمثل‬‫هذا‬‫النوع‬‫من‬‫الرسومات‬‫اللغة‬‫التي‬‫يفهمها‬‫الجميع‬.‫بمعنى‬،‫آخر‬‫تعتبر‬‫الرسومات‬‫واألشكال‬‫الم‬‫رسومة‬‫على‬
‫تصميم‬‫الموقع‬‫هي‬‫العنصر‬‫الذي‬‫يمثل‬‫البساطة‬‫في‬‫التصميم‬‫والسهولة‬‫في‬‫وصول‬‫المعلومة‬.‫الرسومات‬‫المتجهة‬
(Scalable Vector Graphics)‫هو‬‫نوع‬‫من‬‫الرسم‬‫الذي‬‫ال‬‫يعتمد‬‫على‬‫التعقيد‬‫وإنما‬‫البساطة‬‫في‬‫الرس‬‫م‬.
‫توجد‬‫الكثير‬‫من‬‫البرامج‬‫المستخدمة‬‫في‬‫رسم‬‫الرسوم‬‫المتجهة‬‫ومن‬‫أشهرها‬Adobe Illustrator.

21. .4‫المعتمة‬ ‫الخلفيات‬ ‫استخدام‬:
‫في‬‫التصميم‬‫المسطح‬‫يمكن‬‫أن‬‫تضيف‬‫خلفية‬‫شفافة‬‫معتمة‬‫نوعا‬‫ما‬‫عطي‬ُ‫ت‬‫الموقع‬‫ا‬‫ال‬‫جما‬‫وبساطة‬.‫المقصود‬‫بالخلفيات‬
‫المعتمة‬‫هي‬‫عبارة‬‫عن‬‫صور‬‫تم‬‫إضافة‬‫لون‬‫معين‬‫عليها‬‫مع‬‫تغيير‬‫نسبة‬‫اإلضاءة‬‫والشفافية‬.‫هذه‬‫اإلض‬‫افة‬‫قد‬‫خفي‬ُ‫ت‬
‫بعض‬‫التفاصيل‬‫لكنها‬‫تضيف‬‫لمسة‬‫جمالية‬‫على‬‫الصورة‬.

24. .5‫بينها‬ ‫فيما‬ ‫الفراغات‬ ‫من‬ ‫والكثير‬ ‫كبيرة‬ ‫عناصر‬:
‫رف‬ّ‫ع‬ُ‫ن‬‫هذه‬‫العملية‬‫بأنها‬‫تقوم‬‫بجعل‬‫عناصر‬‫الموقع‬‫كبيرة‬‫مع‬‫ترك‬‫مسافات‬‫كبيرة‬‫بين‬‫كل‬‫عنص‬‫ر‬‫والعنصر‬‫الذي‬
‫يليه‬.‫هذه‬‫العملية‬‫سائدة‬‫بشكل‬‫كبير‬‫في‬‫تصميم‬‫المواقع‬‫المسطحة‬‫والتي‬‫تجعل‬‫الموقع‬‫ا‬‫ا‬‫نظيف‬‫وأ‬‫كثر‬‫ا‬‫ا‬‫وضوح‬.

27. .6‫باستخدام‬ ‫الحركة‬ ‫اضافة‬HTML5‫و‬CSS3:
‫باستخدام‬‫التقنيات‬‫الجديدة‬‫التي‬‫تتميز‬‫بها‬‫لغة‬HTML5‫و‬CSS3‫يمكن‬‫أن‬‫نعطي‬‫الموقع‬‫جانبا‬،‫جماليا‬‫ومن‬
‫ضمن‬‫هذه‬‫التقنيات‬‫عنصر‬‫الحركة‬‫لعناصر‬‫الموقع‬‫بصورة‬‫جميلة‬.

28. .7‫الجاهزة‬ ‫العناصر‬ ‫استخدام‬:
‫عند‬‫تصميم‬‫موقع‬،‫الويب‬‫تحتاج‬‫إلى‬‫استخدام‬‫عناصر‬‫تم‬‫بنائها‬‫وتصميمها‬‫ا‬‫ا‬‫سابق‬.‫هذه‬‫العملية‬‫تس‬‫اعدك‬‫في‬‫إنهاء‬
‫التصميم‬‫بسرعة‬‫أكبر‬‫وبجهد‬‫أقل‬.‫توجد‬‫الكثير‬‫من‬‫القوالب‬‫التي‬‫تحتوي‬‫على‬‫عناصر‬‫مسطحة‬.‫من‬‫ه‬‫ذه‬‫األدوات‬‫هو‬
‫القالب‬(UI Kit)‫والذي‬‫يمكن‬‫تنزيله‬‫بصورة‬‫مجانية‬.

30. ‫المسطح‬ ‫التصميم‬ ‫مميزات‬
•‫يعتبر‬‫التصميم‬‫المسطح‬‫تصميما‬‫عصريا‬‫يجعل‬‫تجربة‬‫المستخدم‬‫للتصميم‬‫مريحة‬‫وممتعة‬.
•‫حتى‬‫مع‬‫عدم‬‫وجود‬‫العناصر‬‫الثالثية‬،‫األبعاد‬‫التصميم‬‫المسطح‬‫يعتبر‬‫أفضل‬‫نظرا‬‫لوجود‬‫عناصر‬،‫محدودة‬‫و‬‫خطوط‬‫وألوان‬
‫مسطحة‬‫تعطي‬‫الواجهة‬‫بساطة‬‫و‬‫فعالية‬‫أكبر‬.
•‫التصميم‬‫المسطح‬‫يعتبر‬‫أفضل‬‫لكل‬‫من‬‫المستخدمين‬،‫والمطورين‬‫فهو‬‫يسهل‬‫عملية‬‫تصميم‬‫واجهات‬‫تتماشى‬‫مع‬‫المتصفحات‬
‫واألجهزة‬‫المختلفة‬‫من‬‫دون‬‫الحاجة‬‫إلى‬‫أساليب‬‫التصميم‬‫المستجيب‬(Responsive Design).
•‫عدم‬‫وجود‬‫عناصر‬‫كثيرة‬‫وتفاصيل‬‫كبيرة‬‫يسرع‬‫من‬‫عملية‬‫تحميل‬‫المواقع‬‫والتطبيقات‬.
•‫التصميم‬‫المسطح‬‫يعطي‬‫الواجهات‬‫تصميما‬‫حادا‬‫خاصة‬‫على‬‫الشاشات‬‫العالية‬‫الوضوح‬.‫أيضا‬‫يعتبر‬‫مناسب‬‫ج‬‫دا‬‫لشاشات‬
‫اللمس‬‫حيث‬‫يعطي‬‫للمستخدم‬‫سهولة‬‫في‬‫الوصول‬‫إلى‬‫المعلومة‬‫وإتمام‬‫اإلجراءات‬.
•‫التصميم‬‫المسطح‬‫في‬‫الوقت‬‫الحالي‬‫يعتبر‬،‫اتجاه‬‫فالعديد‬‫والعديد‬‫من‬‫الشركات‬‫والمؤسسات‬‫اتجهت‬‫نحو‬‫هذا‬‫ا‬‫التجاه‬.

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