اذهب إلى المحتوى

مدخل إلى تصميم الويب المسطح Flat Design


أحمد النجار3

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

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

website-sample-flat-02.jpg

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

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

النمط المصغر أيضًا يُطبّق حين يركز المصممون على التباعد بين الأيقونات، والصور والعناصر في صفحة الويب أو التطبيق. زد على ذلك، فإن الصور البسيطة والمسطحة يتم تحميلها أسرع من تلك في التصميمات المعقدة لأن المتصفح لن يحمل عناصر التصميم مجتمعة مع الصورة الرئيسية. في الوقت نفسه، فإن أسس قابلية القراءة تتحقق جميعها في النمط المصغر. ومع مزيد من "المسافات البيضاء" (أو المساحات الفارغة) فإن النص سيكون أكثر وضوحًا. ومع غياب الظلال، والحدود والتدرجات اللونية سيحقق القراءة السهلة للنص المضمّن في الصفحة.

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

facebook-changes-flat.jpg

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

في الحقيقة هناك خمسة عناصر يتصف بها التصميم المسطح:

  • غياب العمق
  • استخدام العناصر البسيطة
  • الطباعة
  • اللون
  • البساطة

skeumorphic-04.jpg

لقد انتهى العمق في التصميم

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

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

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

skeumorphic-02-comparison-flat.jpg

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

ستبقى البساطة عنوان الجمال

بإزالة العمق في التصميمات، من الطبيعي أن تصبح الصور، والأيقونات وعناصر التصميم الأخرى بسيطة بصريًا.

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

settings-icon-flat-01.jpg

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

facebook-icon-flat.png

الطباعة، كما أخبرتكم سابقًا

typograph-sample.jpg

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

الألوان

كما ذُكر سابقًا أن اللون مهم. فبإمكانه تكوين صفحتك أو تدميرها. إنه يحدد بشكل أساسي الشعور الكامل بموقعك أو صفحتك.

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

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

color-palette-for-flat-design.jpg

فن البساطة (كلما نقصت التفاصيل، ازداد الجمال)

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

اترك الكثير من المساحات الفارغة. تخلص من العناصر غير الضرورية واحصل على إعجاب الناس. البساطة جميلة.

sample-typography-flat.jpg

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

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

اعلم أنك تعرف كيف تكون بسيطًا. فلنكن جميعًا بسطاء.

ترجمة -وبتصرف- للمقال Getting Started With Flat Web Design


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...