نحن بحاجة إلى تصميم أنيق بأسلوب مسطح. التصميم المسطح - التطبيق العملي

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

فيما يلي أمثلة على العناصر التي تحدد .

الحياة بعد الويب 2.0

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

تصميم تعويم

الطباعة في قلب الاسلوب

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

كودروال

إقرأ أيضاً: 12 لونًا أساسيًا وأمثلة على إدراكهم من قبل المستخدمين

لوحة ألوان التصميم المسطح

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

الحد الأدنى من القرد

مساحة حرة، عناصر كبيرة

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

تصميم اللحية

التصميم المسطح للأيقونات والأزرار والرسوم التوضيحية

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

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

إقرأ أيضاً: أكثر من 20 موقعًا ملهمًا تحتوي على رسوم توضيحية مسطحة في التصميم

أمثلة على قوالب مواقع الويب ذات التصميم المسطح واجهة المستخدم المسطحة

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

هوية

83 التصميم الجماعي

مجنون

مجموعة المظلة

مؤسسة سكل

شعرت

بهزاد

اتلانت

بسيطة مثل الحليب

عائلة ويراندا

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

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

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

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

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

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

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

متوافق مع التصميم التكيفي

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

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

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

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

منصة مرنة

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

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

الطباعة القابلة للقراءة

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

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

السلبيات

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

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

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

فقدان الفردية

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

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

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

مطاردة الموضة

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

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

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

اختيار سيء للخط

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

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

شقة 2.0

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

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

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

لقد فعلت الكثير للترويج لـ Flat 2.0 شركة جوجل. تعد إرشادات التصميم متعدد الأبعاد محاولة لإنشاء لغة مرئية جديدة تجمع بين عناصر التصميم المسطحة وثلاثية الأبعاد. توصيات جوجلمفصلة للغاية وسهلة المتابعة. في الوقت نفسه، لا تصر Google على التقيد الصارم بجميع القواعد المنصوص عليها في المبادئ التوجيهية - يمكن للمصممين تجربة وإنشاء مشاريعهم الأصلية، والتي يمكن أن تجمع بين مجموعة متنوعة من العناصر.

خاتمة

اليوم، Flat 2.0 في مرحلة التشكيل، لكن الاتجاه الذي سيتطور فيه هذا النمط أصبح واضحًا بالفعل. لا يُتوقع حدوث تغييرات كبيرة - لن تتخلى شركات Google وApple وMicrosoft الرائدة في مجال الموضة عن هذا الأمر. إذا كانت هناك تغييرات، فستكون ضئيلة - ستظهر أساليب جديدة، وسوف يأتي شخص ما ب "خدعة" مثيرة للاهتمام، وستستمر المحاولات في الحصول على الأفضل من Skeuomorphism. ولكن بالمعنى العالمي، ليست هناك حاجة لتوقع شيء جديد حقًا - فالتصميم المسطح هو اتجاه طويل الأمد، ولا يمكن أن يحل محله من مواقعه التي تم احتلالها إلا الأسلوب الذي يناسب التقنيات الجديدة التي لم تكن موجودة بعد.

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

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

باستطاعتك العثور أمثلة جيدةتصميم مسطح على الموقع http://market.envato.com/. هناك الكثير من التخطيطات والأيقونات والقوالب التي ستمنحك فهمًا واضحًا لما يبدو عليه التصميم الحديث .

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

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

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

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

2. القليل من التاريخ

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

بدأ التصميم المسطح بالشكل الذي نراه الآن يكتسب شعبية بعد أن بدأت شركة Microsoft في إنتاج منتجات بما يسمى بأسلوب المترو. Metro هو تصميم لواجهة مستخدم من Microsoft يتميز بأسلوبه وبساطته.

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

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

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

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

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

تصميم مترو مايكروسوفت

تصميم أبل iOS 7

تصميم المواد من جوجل

3. تذكر أن تنظف

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

علاوة على ذلك، في التصميم المسطح، يتم تصوير الأشياء بطريقة مبسطة ومنمقة للغاية.

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

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

4. اجعله يصل إلى الكمال

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

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

بخصوص برامج أدوبييستخدم Illustrator رسومات متجهة مكونة من منحنيات وخطوط تسمى المتجهات، والتي يتم تعريفها بواسطة صيغ رياضية.

كان ياما كان أدوبي المصورلم يكن كثيرا برنامج مناسبلإنشاء رسومات بكسل مثالية. والخبر السار هو أن أحدث الإصداراتالمصور الصلب أداة عظيمةلإنشاء رسومات جيدة.

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

5. اللون

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

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

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

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

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

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

ويمكنك أيضًا العثور على مجموعة أكبر ومتنوعة من الألوان واللوحات دليل تصميم المواد من جوجل.

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

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

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

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

7. العمل مع الخطوط

تلعب الطباعة دورًا كبيرًا في التصميم المسطح. غالبًا ما يصبح النص هو العنصر الرئيسي في التكوين.

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

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

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

8. إيجابيات وسلبيات التصميم المسطح

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

الايجابيات

شعبية

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

بساطة

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

سطوع

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

عيوب

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

عدم تجاوب

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

مشاكل الطباعة

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

مرئيات ضعيفة

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

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

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

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

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

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

الاستنتاجات

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

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

بعد كل شيء، ما الذي يمكن ذكره أيضًا حول التصميم المسطح؟

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

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

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

كيف لا ترسم أيقونات مسطحة

أصبح تصميم مواقع الويب "المسطحة" عصريًا إلى جانب الواجهات ويندوز الجديد. تم تسهيل الشعبية المتزايدة لهذا النمط في روسيا من خلال زيادة عدد مصممي الويب الذين تعلموا أنفسهم والذين لا يعرفون أن واجهة موقع الويب وواجهة "الإصبع" (الهواتف الذكية) ليسا نفس الشيء (من السهل التمرير أسفل الصفحة بإصبعك - وعلى العكس من ذلك، ستحتاج إلى الكثير من الصبر والاهتمام الحقيقي بقلب عجلة الماوس لأسفل بمقدار 3-4 شاشات). في المواقع المسطحة الروسية يمكنك غالبًا العثور على الرموز التالية:

المثال هو مجرد ألوان زاهية لا تتطابق مع بعضها البعض + أيقونات ذات جودة رديئة (أخذت المثال من مجموعة مدفوعة، ولكن دائمًا ما يستخدم المستقلون أيقونات تم تنزيلها مجانًا من مجموعات مختلفة لا تتطابق أيضًا مع بعضها البعض).

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

مثال على الأيقونات المسطحة الجيدة:

لا ينبغي دمج الألوان والأيقونات مع بعضها البعض فحسب، بل يجب أيضًا أن تشكل كلًا واحدًا.

مشاكل التصميم المسطح منخفض الجودة

1. التنقل وسهولة الاستخدام

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

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

2. لفافات قدم مسطحة طويلة

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

3. أزرار مربكة

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

4. أيقونات مرسومة بشكل سيء

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

أفترض أن العمل على إنشاء الرموز يسير على النحو التالي: وفقًا للمواصفات الفنية، هناك حاجة إلى أيقونة "النهج الفردي للعملاء". شخصيًا، لدي صورة لمدير وعميلين، يقود كل منهما سهم بلون مختلف (سهم أزرق يؤدي إلى عميل أزرق، وسهم أحمر يؤدي إلى عميل أحمر). إذا كان المصمم لا يعرف كيفية الرسم، فسوف يبحث عن أيقونة في مجموعات جاهزة (في أفضل الأحوال، سيشتريها من بنك الصور، في أسوأ الحالات، سيقوم بتنزيلها من الإنترنت) و فاستخدم الأنسب في المعنى. على الأرجح، سيكون رمزًا لرجل يرتدي ربطة عنق أو حقيبة. بشكل عام، لم أذهب بعيدًا جدًا، ولكن لا يزال في تصميم الموقع سيكون من الواضح أن الحقيبة " النهج الفرديللجميع" والساعة "10 سنوات في السوق" (بالمناسبة، لقد رأيتها حقًا!) - غش المصمم.

5. التركيز على المحتوى الزائف

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

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

فهل التصميم المسطح ضروري لمواقع الويب على الإطلاق؟

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

لا يفهم معظم العملاء جودة الرسومات، وعند الموافقة على تصميم موقع ويب، يسترشدون بذوقهم الشخصي (إعجاب/عدم إعجاب). وهنا تلعب الموضة دورًا.

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

مثال على التصميم المسطح عالي الجودة:

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