التصميم المسطح - مشروع إثراء

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

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

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

ما هو التصميم المسطح؟

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

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

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

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

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

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

 ششش

 

ظهور التصميم المسطح

في العام 2006 أطلقت شركة ميكروسوفت مشغل الموسيقى (Zune music player) وعلى الرغم من أنه لم يكن ناجحا تجاريا إلا أن واجهاته أحدثت ثورة كبيرة في عالم التصميم المسطح.

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

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

عناصر التصميم المسطح

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

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

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

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

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

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

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

مميزات التصميم المسطح

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

عيوب التصميم المسطح

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

عن الكاتب

أحمد أبوالشرود

عضو هيئة تدريس بجامعة مصراتة كلية تقنية المعلومات

(12) تعليق



اضف تعليق

لن يتم نشر عنوان بريدك الإلكتروني.


يمكنك استخدام HTML وسوم واكواد : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>