fb
  • 1

أفضل 10 نصائح في التصميم المسطح

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

يمكنك أن تجد في المواقع التالية أمثلة عظيمة تتعلق بالتصميم المسطح لتكون أكثر وضوحاً حول التصميم المسطح الحديث: flat design web layouts,flat icons,templatesEnvato Market

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

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

أفضل 10 نصائح في التصميم المسطح

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

أفضل 10 نصائح في التصميم المسطح

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

2- تاريخ التصميم المسطح

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

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

وفي عام 2010 قامت شركة مايكروسوفت بإصدار Windows phone 7، حيث صممت واجهة مستخدم بسيطة ذات تصميم مسطح وحواف حادة ورسومات واضحةن استمدت من (Zune) إحدى منتجات مايكروسوفت. وفيما بعد، أصدرت مايكروسوفت Windows 8 OS على غرار تصميم طراز مترو Metro-style flat design graphics.

أفضل 10 نصائح في التصميم المسطح

ولقدوصل التصميم المسطح الى ذروة شهرته في عام 2013، عندما كشفت Apple عن نظام التشغيل iOS 7، حيث قدمت تصميمها الجديد وغيرت جميع عناصر واجهة المستخدم السابقة، مثل الأيقونات والخطوط. ويمكنك الدخول الى الموقع التالي، حيث يوضح القواعد إرشادية لكل من تصميم الأيقونات وواجهة المستخدم descriptive guidelines on both UI and icon design.

أفضل 10 نصائح في التصميم المسطح

بعد ذلك، قامت Google بتغيير شكل صفحات الويب وتطبيقاتها الى التصميم المسطح، وأطلقت عليه (Material Design). حيث يحتوي Google على قسم كامل يتعلق بالتصميم المادي (Material Design) ويتضمن أهداف ومبادئ وإرشادات رائعة حول تصميم أيقونات التصميم المادي وواجهة المستخدم ونماذج... وما إلى ذلك section dedicated to Material Design.

أفضل 10 نصائح في التصميم المسطح

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

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

  • تصميم مترو من Microsoft

  • تصميم Apple iOS 7

  • التصميم المادي من Google

3- حافظ على بساطة تصميمك

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

أفضل 10 نصائح في التصميم المسطح

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

4-اجعل تصميمك مثالياً

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

أفضل 10 نصائح في التصميم المسطح

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

للحصول على رسومات مثالية اتبع الإرشادات الرائعة حول إنشاء عمل فني مثالي في Adobe Illustrator من خلال هذا الموقع great guide on creating pixel-perfect artwork in Adobe Illustrator.

أفضل 10 نصائح في التصميم المسطح

5- أحسن اختيار الألوان

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

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

أفضل 10 نصائح في التصميم المسطح

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

أما أداة Adobe Color CC (أداة Kuler سابقاً)، تتميز بالمرونة وتسمح لك بتكوين لوحة ألوان خاصة بك أو استخدام لوحات الألوان المصممة. وتعتبر هذه الأداة مناسبة لجميع أنواع التصاميم والرسومات التوضيحية دون أن تقتصر على التصميم المسطح، وبإمكانك الوصول إلى الأداة من خلال موقع الويب أو مباشرة من خلال برامج Adobe.

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

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

يمكنك أيضاً العثور على مجموعة كبيرة ومتنوعة من لوحات ألوان وعينات من خلال هذا الموقع Google's Material Design guide

6- الظلال الطويلة

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

أفضل 10 نصائح في التصميم المسطح

7- اختيار الخطوط المناسبة

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

وللحصول على الكثير من الخطوط المجانية من أحد برامج Adobe Typekit، وغير ذلك، يوجد مصدر آخر للخطوط المجانية وهو Adobe Typekit المناسب لجميع انواع التصاميم، لكن عند الاستخدام التجاري اقرأ التراخيص أولاً.

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

أفضل 10 نصائح في التصميم المسطح

9- إيجابيات وسلبيات التصميم المسطح

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

من الايجابيات والسلبيات في التصميم المسطح:

أفضل 10 نصائح في التصميم المسطح

الإيجابيات

  • توجه التصميم

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

  • البساطة

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

  • الألوان الحيوية

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

السلبيات

يوجد الكثير من المميزات الأخرى للتصميم المسطح، لكن لا يوجد تصميم مثالي خالي من العيوب.

ومن العيوب التي يجب ذكرها:

عدم الاستجابة

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

مشاكل الكتابة

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

الصورة المرئية الضعيفة

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

9- الاتجاهات المستقبلية للتصميم المسطح

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

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

أفضل 10 نصائح في التصميم المسطح

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

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

10- كيف تبدأ؟

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

أفضل 10 نصائح في التصميم المسطح


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

اليك بعض خطوات عمل الأيقونات التي قد تساعدك في التصميم إذا كنت تستخدم برنامج Adobe Illustrator:

http://design.tutsplus.com/tutorials/how-to-create-a-set-of-flat-animal-icons-in-adobe-illustrator--cms-24710

http://design.tutsplus.com/tutorials/create-a-set-of-apple-watch-icons-in-adobe-illustrator--cms-24125

وحاول أن تضع مزيداً من التفاصيل مثل، الإضاءة والنقوش والتدرجات، لجعل التصميم أعمق.

http://design.tutsplus.com/tutorials/create-a-set-of-flat-precious-gems-icons-in-adobe-illustrator--vector-26188

http://design.tutsplus.com/tutorials/how-to-create-a-stylised-textured-flat-camera-in-adobe-illustrator--cms-24885

قم برسم عناصر مسطحة أكثر، لإنشاء صورة مسطحة بشكل كامل.

http://design.tutsplus.com/tutorials/how-to-create-a-flat-winter-scene-in-adobe-illustrator--cms-25369

واجعل المدينة مفصلة أكثر كما في هذا التصميم.

http://design.tutsplus.com/tutorials/how-to-create-a-flat-grayscale-cityscape-in-adobe-illustrator--cms-23227

وإذا كنت تستخدم برنامج Affinity Designer، إليك بعض الخطوات المفيدة التي ستساعدك:

http://design.tutsplus.com/tutorials/how-to-create-a-detailed-lighthouse-flat-icon-in-affinity-designer--cms-24100

شاهد الفيديو التعليمي، لكي تصمم المجموعة الكاملة من الأيقونات.

http://design.tutsplus.com/tutorials/how-to-create-a-set-of-flat-hiking-icons-in-affinity-designer--cms-24202

أو انتقل إلى شيء آخر مثل تصميم الملصق مع إضافة عناصر مسطحة:

http://design.tutsplus.com/tutorials/create-a-flat-style-vegetable-poster-in-affinity-designer--cms-24440

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

http://design.tutsplus.com/tutorials/how-to-create-stylish-flat-space-icons-in-adobe-photoshop--cms-22984

وفي النهاية، إذا كنت تريد أن تطور مهارتك في التصميم وأن تتعلم كيف تضيف عناصر معقدة، يمكنك الدخول الى هذا الموقع Creating Flat Workspace Elements for Advertisements video-course، حيث يوضح شرح مفصل خطوة بخطوة لرسم أي شيء تريده من البداية وحتى النهاية.

أفضل 10 نصائح في التصميم المسطح





ما رأيك بهذه المقالة ؟


اشترك معنا أو قم بـ تسجيل الدخول لكي تستطيع التعليق .

Ghassan
14-12-2018

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