من المؤلف:تحيات أصدقاء! سنتحدث اليوم عن ما هو التصميم المسطح، أو تصميم موقع الويب المسطح. لقد استحوذ هذا المصطلح على قلوب مصممي الويب منذ فترة طويلة ولا يزال رائجًا اليوم بثقة. وتستخدمه أكبر الشركات (Google، YouTube، Microsoft، Apple Inc.، وغيرها) لتصميم مواقعها الإلكترونية وتطبيقاتها. هل مازلت لست من فئة مؤيدي تصميم المواقع المسطحة؟ ثم نذهب إليك!
ما هو في رأيك سبب هذه الشعبية الكبيرة للتصميم المسطح؟ سأجيبك باختصار: إنه يعمل حقًا! في هذه المقالة، سأشرح لك ما هو هذا النمط، وأخبرك عن إيجابياته وسلبياته، وأعرض لك بعض الأمثلة الممتازة لتصميم مواقع الويب المسطحة التي ستلهمك بالتأكيد للقيام بأشياء رائعة. إذا هيا بنا!
بدأ كل شيء مع skeuomorphism
بالنسبة لأولئك الذين لا يعرفون، فإن skeuomorphism ليست كلمة قذرة، ولكنها نمط آخر من تصميم الويب. غالبًا ما يتم تقديم التصميم المسطح على أنه عكس الشكل المسطح، وهو، في رأيي، ليس صحيحًا تمامًا. وهذا بالأحرى تبسيط وليس عداء.
حتى عام 2010، كان التشكل الشكلي هو الأسلوب السائد في تصميم الواجهة. لقد عرض العناصر كما تبدو في الواقع، باستخدام القوام والظلال والانعكاسات والسمات الأخرى للصورة ثلاثية الأبعاد. بذلت شركة Apple جهودًا خاصة في هذا الصدد، حيث قامت بنسخ معظم الكائنات البرمجية بعناية من كائنات حقيقية.
وسرعان ما توقفت الأيقونات المحدبة الزائفة عن جذب غالبية المستخدمين ومطوري الويب، مما يمثل بداية عصر تصميم مواقع الويب المسطحة. لقد توصل العالم إلى نتيجة مفادها أنه يجب إزالة جميع العناصر الزخرفية، ويجب أن يبقى فقط ما يناسب المستخدم النهائي للتفاعل معه.
"أفضل تصميم هو أقل تصميم ممكن"
كيف نظر ديتر رامز إلى الماء - مصمم صناعي مشهور يعارض التصميم المتطفل وتأثيرات الرسوم المتحركة وما إلى ذلك. في يونيو 2013، أعلنت شركة Apple Inc. قدمت نظام التشغيل iOS 7 الثوري، والذي حصل على جميع سمات أسلوب تصميم الويب المسطح. ومع ذلك، فإن الطائرة لم "تهزم" الواقعية والحجم على الفور.
لفترة طويلة، لم يتمكن المستخدمون من نسيان سحر ستيف جوبز والأيقونات "التي تريد أن تلعقها". حتى أن الكثيرين قالوا وداعًا لـ "الفقراء السبعة" وتحولوا إلى "Android المشع". ما زاد الطين بلة هو العدد الكبير من الأخطاء الموجودة في نظام التشغيل iOS 7، والتصميم الأبيض الشفاف مع الرسوم المتحركة المنظر و"المخاط" عند فتح التطبيقات.
أولئك الذين استسلموا للواقع الحتمي وظلوا مع نظام التشغيل Apple أدركوا في النهاية أن تصميم الويب المسطح لا يبدو مثيرًا للاهتمام فحسب، بل يجلب أيضًا النظام والأسلوب المرئي الموحد لجميع التطبيقات.
إيجابيات وسلبيات التصميم المسطح
تشمل مزايا استخدام هذا النمط ما يلي:
وضوح التكوين وإيجاز المساعدات البصرية. واجهة سريعة الاستجابة بأسلوب "لا شيء غير ضروري"، والتي بفضلها يدرك المستخدمون بسرعة ما يريدون نقله إليهم؛
التركيز على الطباعة الجيدة. المحتوى يأتي أولاً، وهو أمر مهم للغاية في ظل وفرة المعلومات اليوم؛
حجم أصغر لصفحات الويب وأداء أسرع للموقع بسبب الحد الأدنى من التأثيرات المرئية. يعد هذا مفيدًا بشكل خاص عند إنشاء إصدارات قابلة للتكيف، لأنه كلما كانت النماذج أبسط، كان من الأسهل عرضها على الشاشات الصغيرة للأجهزة المحمولة.
تصميم الويب المسطح له أيضًا عيوبه:
الحد من خيال مصمم الويب لتبسيط الألوان والطباعة والأيقونات. ولذلك، فإن خطر إنشاء موقع ويب ممل وغير معبر أعلى؛
إن الافتقار إلى الأبعاد الثلاثية والظلال يجعل من الصعب أحيانًا فهم ما إذا كان العنصر قابلاً للنقر أم لا؛
عدم وجود قواعد ثابتة محددة.
إذا قررت استخدام هذا النمط على موقعك، فتهانينا - فهذا يدل على اهتمامك بتجربة المستخدم ومواكبة العصر. إذا كنت بدأت للتو كمصمم ويب ولا تعرف كيفية استخدام التصميم المسطح بشكل صحيح لجعل موقعك يبدو ملائمًا دون أن تكون مبسطًا، فجرّب هذه النصائح:
انسَ "جدران الطوب" والخلفيات المشرقة. يميل تصميم الويب المسطح إلى استخدام صور بسيطة وسلسة وناعمة للخلفية.
الاتجاهات والأساليب الحديثة في تطوير الويب
تعلم خوارزمية النمو السريع من الصفر في إنشاء مواقع الويب
لا توجد تدرجات أو أيقونات ثلاثية الأبعاد أو انتقالات متحركة أو تأثيرات خاصة أخرى. كل هذا سيجعل موقعك أثقل ويضيف ضجة - هل تحتاجه؟
استخدم أيقونات مسطحة ذات حدود واضحة لإضافة الراحة والأداء الوظيفي.
استخدم لوحة ألوان مشرقة وغنية. الاتجاه الآن هو نغمات الطيف الشمسي: الأصفر الفاتح والوردي والأخضر. الشيء الرئيسي هو عدم المبالغة في ذلك - يجب ألا يكون هناك أكثر من 3 ألوان في الصفحة.
التركيز على الطباعة. في التصميم المسطح، يتم إعطاء الأفضلية للنقوش الساطعة والأصلية التي تنشئ عبارة تحث المستخدم على اتخاذ إجراء وتوفر سهولة التنقل حول الموقع. ومن المهم هنا أيضًا عدم المبالغة في ذلك. انسَ أمر "المكتوبة بخط اليد" والخطوط الفاخرة الأخرى. يمكن استخدام الحروف الكبيرة لتسليط الضوء على العناوين.
لا تتردد في استخدام مجموعة متنوعة من الأشكال الهندسية. لن تؤدي المربعات والدوائر والخطوط والأشكال الأخرى إلى تحسين بنية موقع الويب فحسب، بل ستؤدي أيضًا إلى إنشاء تسلسل هرمي واضح وتقسيم المحتوى. سيقدر المستخدمون هذا، صدقوني.
تبسيط قائمة التنقل وعناصر الموقع الأخرى قدر الإمكان. بالنسبة للأزرار، استخدم مستطيلات عادية بدون ظلال أو تمييز.
وهكذا، على مر السنين، أصبحت مواقع التصميم المسطح هي المعيار المقبول من قبل الجميع على الإطلاق. انظر إلى معظم مواقع الويب الحديثة، فهي مسطحة حتى النخاع.
أخيرًا، سأقدم الأمثلة الموعودة للتصميم المسطح الناجح، والتي يمكن أن تكون بمثابة مصدر إلهام لك لإنشاء روائعك الخاصة.
1. الموقع الإلكتروني http://dunked.com.
منصة شعبية لنشر المحافظ تستهدف ممثلي مختلف المهن الإبداعية. يثير تصميم الويب المسطح البسيط الشعور بالخدمة الموثوقة والمفهومة التي لا تشتت الانتباه بمؤثرات خاصة غير ضرورية.
2. واجهة مايكروسوفت.
Microsoft هي إحدى الشركات التي جعلت الأسلوب المسطح شائعًا جدًا. ربما تتذكر مشغل Zune، المنافس لجهاز iPod، الذي أطلقته Microsoft في منتصف العقد الأول من القرن الحادي والعشرين؟ لذلك، كان تصميم هذا المنتج مختلفًا بشكل حاد عن معظم التطبيقات في ذلك الوقت، ويرجع ذلك إلى حد كبير إلى الطباعة الكبيرة والأيقونات المسطحة والأشكال الكبيرة والمشرقة.
هذه الواجهة، التي كانت تسمى مترو، انتقلت لاحقًا إلى أجهزة الكمبيوتر الشخصية (نظام التشغيل Windows 8)، وواجهة Xbox 360 ومنتجات برامج Mircosoft الأخرى.
3. الموقع الإلكتروني http://www.vox.com.
حسنا، هل أنت ملهم؟ يسقط الجماليات ثلاثية الأبعاد الواقعية الزائفة!
هذا كل شئ. اشترك وشارك مقالاتنا مع الأصدقاء على الشبكات الاجتماعية. تحويلات عالية لك!
الاتجاهات والأساليب الحديثة في تطوير الويب
تعلم خوارزمية النمو السريع من الصفر في إنشاء مواقع الويب
سنركز اهتمامنا اليوم على أحد أكثر مجالات التصميم الجرافيكي الحديث شيوعًا، وهو ما يسمى بالتصميم المسطح.
قال الفنان الشهير إدغار ديغا ذات مرة: "الفن ليس ما تراه، بل هو ما تدع الآخرين يرونه". وينطبق هذا أيضًا على التصميم الجرافيكي، والذي يمكن تعريفه أيضًا على أنه فن يحل مشكلة معينة. يتمتع التصميم الجرافيكي بالقدرة على تغيير الحالة المزاجية والرسالة من خلال أقل التغييرات في الأشكال والظلال والحروف والمسافات. الاتجاهات في هذا المجال التي أصبحت جزءا لا يتجزأ من الحياة اليومية، لأنها تؤثر على عملية صنع القرار وحل مشاكل تقديم منتج حديث، كما أنها تشكل أذواق المستخدمين.
اليوم، يُستخدم مصطلح “التصميم المسطح” في الرسومات للعديد من الأغراض والمهام التي لها سمات أسلوبية مشتركة. التصميم المسطح هو اتجاه وجد العديد من المظاهر في مجال المنتجات الرقمية، وذلك بفضل الاستخدام المقتضب للوسائل التعبيرية المرئية.
في الوقت الحاضر، يُستخدم المصطلح على نطاق واسع باعتباره عكس "التصميم الغني" نظرًا للبساطة المتناغمة التي تم اتخاذها كأساس لهذا النهج. الميزة الأكثر بروزًا التي أعطت هذه الحركة اسمها هي استخدام التفاصيل المرئية المسطحة ثنائية الأبعاد، على عكس الصور الواقعية والمفصلة للغاية. لقد تطور التصميم المسطح بشكل نشط على مدار السنوات الماضية، حيث يغطي المزيد والمزيد من مجالات التصميم الجرافيكي، والتي تجد تطبيقات واسعة ومتنوعة في مجال التصميم الرقمي لواجهات الويب والجوال. يمكن اعتبار هذا الأسلوب أسلوبًا يعزز سهولة الاستخدام والتناغم البصري في واجهات المستخدم.
تاريخ التصميم المسطح
من الواضح أن التصميم المسطح لم يظهر من فراغ. عادة ما يعتبر أصله هو النمط السويسري. النمط السويسري، المعروف أيضًا باسم النمط المطبعي الدولي أو النمط الدولي باختصار، هو حركة نشأت في عشرينيات القرن العشرين ولكنها قوبلت بانتقادات كبيرة ثم شهدت ولادة جديدة دراماتيكية في التصميم الجرافيكي في سويسرا في الأربعينيات والخمسينيات من القرن الماضي أساس قوي للتصميم الجرافيكي في منتصف القرن العشرين في جميع أنحاء العالم. مؤسسو هذه الحركة الإبداعية هم جوزيف مولر بروكمان وأرمين هوفمان.
وبحسب موقع Design Is History، فإن ملخص السمات الرئيسية لهذا الأسلوب هو كما يلي: “… الأسلوب الذي يركز على البساطة وسهولة القراءة والموضوعية. إرث هذا النمط هو استخدام خطوط sans-serif والشبكات والتخطيطات غير المتماثلة. تبرز الصور الفوتوغرافية أيضًا كوسيلة للتواصل البصري. وقد تم تصميم الأعمال المؤثرة الكبرى على شكل ملصقات، والتي اعتبرت أكثر الوسائل فعالية لتقديم المعلومات.
تُظهر الملصقات المقدمة كأمثلة أن أتباع هذا الأسلوب أحبوا الأشكال البسيطة والخطوط الجريئة والصارمة بدرجة عالية من الوضوح والمجموعات الهندسية من التفاصيل والرسوم التوضيحية المسطحة والتسلسل الهرمي البصري الواضح. سرعان ما أصبح التصميم السويسري يتمتع بشعبية متزايدة في مختلف البلدان واكتسب حياة جديدة في فن أوائل القرن الحادي والعشرين.
وعلى الرغم من أن هذا الأسلوب قد تلقى العديد من التعبيرات في مجال التصميم المرئي للطباعة: الملصقات والطوابع والبطاقات وأغلفة الكتب والمجلات وغيرها، إلا أنه وسع آفاقه بشكل كبير في عصر التصميم الرقمي، وخاصة في مجال تصميم واجهة المستخدم .
لقد فتحت مواقع الويب وتطبيقات الأجهزة المحمولة منظورًا رائعًا ومثمرًا لهذا النهج البسيط والوظيفي لحلول التصميم. كان النمط يسمى "التصميم المسطح"، والذي أصبح شائعًا على الفور وبدأ اتجاهًا جديدًا في التصميم الجرافيكي.
اتخذت Microsoft الخطوة الأولى نحو زيادة شعبية واجهة المستخدم المسطحة في المنتجات الرقمية، وبدأت هذه الحركة في أوائل العقد الأول من القرن الحادي والعشرين وتطورت على نطاق واسع في المنتجات في عام 2010، ولا سيما في تطوير واجهات الهاتف المحمول لنظام Windows Phone 7. التصميم مثل الأشكال البسيطة البديهية، والطباعة الجريئة والواضحة، والألوان المتناقضة الساطعة، والظلال الطويلة، ونقص التفاصيل والأنسجة المعقدة، ترسخت بشكل جيد. حدثت الزيادة التالية في شعبية التصميم المسطح في عام 2013، عندما أصدرت شركة Apple نظام التشغيل iOS 7 باستخدام مبادئ الرسومات المسطحة كأساس لواجهات مريحة وبديهية. يمكنك أيضًا القول أن بعض المبادئ الأساسية للتصميم المسطح وجدت طريقها إلى تصميم المواد من Google.
لذا فإن السمات الرئيسية للتصميم المسطح هي:
- بساطة الأشكال والعناصر.
- تقليلية؛
- وظائف؛
- طباعة جريئة وسهلة القراءة؛
- تسلسل هرمي مرئي واضح وصارم؛
- مزيج من الألوان المتناقضة التي توفر الإدراك البصري السريع؛
- وتجنب القوام والتدرجات والأشكال المعقدة؛
- تطبيق مبادئ الشبكة والنهج الهندسي والتوازن البصري.
فوائد التصميم المسطح
يتمتع تصميم فادات بعدد من المزايا التي تحدد شعبيته وتنوعه في التصميم الرقمي. من بين أهمها:
- مقروئية؛
- تسلسل هرمي مرئي واضح باستخدام الأشكال والألوان والخطوط؛
- التنظيم الفعال للتنقل السريع والبديهي في واجهات الويب والجوال؛
- سهولة التوسع للتصميم سريع الاستجابة؛
- تحميل ضئيل للنظام الرقمي.
مع كل ما قيل، يوفر التصميم المسطح مجالًا واسعًا للاستكشاف الإبداعي والمفاهيم الأسلوبية.
التصميم المسطح - التطبيق العملي
إن تنوع أنماط التصميم المتاحة والمتطورة هذه الأيام يفسح المجال بشكل جيد للتصميم المسطح نظرًا لمرونته وحريته الفنية.
حتى في المرحلة الأولى من التخطيط للتخطيط العام والمنطق والانتقالات، يمكن تطبيق مبادئ التصميم المسطح. تسمح أدوات وبرامج التصميم الرقمي المستخدمة في هذه المرحلة الحاسمة للمصممين بتقديم تخطيط واحد للعملاء والفرق لجميع شاشات التطبيقات أو صفحات الويب، وحتى هذا التخطيط الأساسي يحتوي بالفعل على ميزات تصور رئيسية نموذجية للتصميم المسطح. في هذه المرحلة، يعد مثاليًا لعرض حلول التصميم بسرعة وكفاءة في تخطيط بسيط أحادي اللون.
تصميم واجهة المستخدم
أصبحت واجهات المستخدم بالتأكيد مجالًا واسعًا وملائمًا للتصميم المسطح. لقد وجدت تطورها في كل من المفاهيم المجردة لتفاعل المستخدم وفي مجموعة متنوعة من الواجهات الأصلية والأيقونات وعناصر الواجهة والرسوم التوضيحية.
توفر هذه الأنواع من الرسوم التوضيحية دعمًا إضافيًا للمنتجات الرقمية وتميل إلى أن تكون أكثر تعقيدًا من حيث التفاصيل وتلبي الاحتياجات الجمالية للمستخدمين، وفي الوقت نفسه تنشئ اتصالًا فوريًا بموضوع معين.
الرسوم التوضيحية المطبوعة
كما أثر تنوع أغراض التصميم المسطح الحديث وشعبيته المتزايدة في المنتجات الرقمية على مجالات أخرى من التصميم، وخاصة تصميم المنتجات المطبوعة مثل الملصقات وأغلفة الكتب، والتي نشأ منها هذا النهج.
العلامة التجارية
في هذه الأيام، نجح تصميم العلامة التجارية أيضًا في تطبيق مبادئ التصميم المسطح نظرًا لمرونته، حيث يتم تقديم العديد من المنتجات على الأجهزة أو تلقي الدعم الرقمي عبر الإنترنت. غالبًا ما يتم تمثيل التصميم المسطح في العلامات التجارية في الشعارات وأيقونات التطبيقات.
كل الحقائق والفوائد المذكورة حول التصميم المسطح لا تعني بالتأكيد أن هذا النمط قد انتصر على أساليب التصميم الأخرى. أي أسلوب واتجاه للتصميم له مزاياه وعيوبه. ومع ذلك، فقد فتح التصميم المسطح آفاقًا جديدة، خاصة في مجال الحلول المخصصة التي تقدم توازنًا متناغمًا بين الجمال والوظيفة.
في الآونة الأخيرة، اكتسب أسلوب معين في تصميم مواقع الويب وواجهات المستخدم شعبية هائلة، والذي يُطلق عليه اسم Flat بسبب أسلوب عناصره.
إذا نظرت إلى موقع ويب تم إنشاؤه وفقًا للقواعد المسطحة، فلن ترى أي انتقالات متدرجة، ولا ظلال، ولا أدنى تلميح للحجم أو الملمس. المبادئ الأساسية للأسلوب المسطح هي البساطة والإيجاز والبساطة. السمات المميزة الرئيسية هي تلك الأشياء التي يمكنك التركيز عليها - الألوان الزاهية غير العادية، والطباعة غير القياسية، والأوليات الرسومية.
اليوم، المزيد والمزيد من المصممين يستخدمون هذا الاتجاه في عملهم، ولكن النمط المسطح اكتسب شعبية خاصة مع انتشار أنظمة تشغيل الهواتف المحمولة الحديثة Windows Phone و iOS 7، حيث أنهم أتباع لهذا الاتجاه، على الرغم من أنهم لا يلتزمون به. تماما.
تتمتع شركتنا بالفعل بخبرة في إنشاء مواقع الويب بالنمط المسطح، وسنكون سعداء بمساعدتك في إنشاء موقع ويب مسطح!
في هذه المقالة، سنسلط الضوء على المبادئ الأساسية للتصميم المسطح التي يجب عليك اتباعها إذا كنت تريد استخدام المسطح باعتباره النمط الرئيسي لمشروعك.
أدناه سنقوم بتحليل وإعطاء أمثلة لبعض المواقع التي تستخدم النمط المسطح.
1. قم بإزالة جميع التأثيرات
المبدأ الأساسي للتصميم المسطح هو إنشاء صورة ثنائية الأبعاد تكون مسطحة في حد ذاتها بالفعل. في الوقت نفسه، تحتاج إلى التخلص من جميع العناصر التي يمكن أن تضيف على الأقل بعض العمق إلى الصورة: التدرجات، والانتقالات السلسة، والظلال، والشطب، والحجم، والقوام، وما إلى ذلك. جميع عناصر الصورة لها حواف صلبة وأيضًا لا تبرز أو تتمتع بعمق مقارنة بعناصر الصورة الأخرى.
في التصميم المسطح لن تجد عناصر تحاول أن تبدو واقعية (skeuomorphism)، أو رسوم متحركة ثلاثية الأبعاد، أو أيقونات واقعية، وما إلى ذلك. ومع ذلك، يحاول التصميم نفسه أن يظل مشابهًا للتصميم التقليدي، ولكن أصبحت الملصقات والأزرار والتنقل في المقدمة الآن.
للوهلة الأولى، قد يبدو الموقع الذي يستخدم التصميم المسطح بسيطًا للغاية، على الرغم من أن هذا النمط يتميز في الواقع بتسلسل هرمي واضح للعناصر، وموضع مناسب لجميع أدوات تفاعل المستخدم، وبالتالي يتمتع بمعدل قابلية استخدام مرتفع.
2. استخدم عناصر بسيطة
لتحقيق أهدافهم في التصميم المسطح، يستخدم المصممون الأزرار والأيقونات. وينبغي أن تكون بديهية وقابلة للنقر عليها قدر الإمكان. مثل جميع عناصر الواجهة الأخرى، يجب أن تكون مسطحة وبسيطة، دون أي تأثيرات إضافية. غالبًا ما يستخدم المصممون أيضًا أشكالًا هندسية بسيطة - المستطيلات والدوائر والمربعات، مما يسمح لكل شكل بأن يكون كائنًا منفصلاً.
3. دعونا نركز على الطباعة
نظرًا لأن الرسومات في التصميم المسطح بسيطة وفقًا للمبدأ السابق، فإن الطباعة هي عنصر مهم للغاية - تصميم النقوش. في التصميم المسطح، تأتي الطباعة في المقدمة مع الأزرار.
يجب أن تكون الخطوط قابلة للقراءة، وبالطبع، متسقة مع التصميم، كما هو الحال مع التصميم البسيط، ستبدو الخطوط المزخرفة للغاية في غير مكانها. ومع ذلك، لا ينبغي عليك استخدام الخطوط العادية، فمن الأفضل تجربتها واختيار الخط الذي سيجذب انتباه المستخدم.
يمكنك التفكير في دمج خط sans-serif البسيط مع بعض الخطوط الجديدة التي سيتم اعتبارها عنصرًا فنيًا. يجب أن تساعد الخطوط في جعل التصميم أكثر بساطة ووضوحًا، في حين يجب أن تعمل الأزرار والعناصر الأخرى فقط على تعزيز التفاعل.
4. دعونا نجذب الانتباه بالألوان
يلعب اللون الدور الرئيسي تقريبًا في التصميم المسطح. إذا كنت تدرس بعناية المواقع التي تم إنشاؤها على أساس هذا المفهوم، فإن أول ما يلفت انتباهك هو لوحة الألوان الزاهية. يتكون عادة من عدة ألوان نقية (بدون ظلال) متناقضة، اثنان أو ثلاثة، على الرغم من أن هذا العدد يمكن أن يصل إلى ثمانية. علاوة على ذلك، عادة ما يتم استخدام كل هذه الألوان بالتساوي.
الألوان الأكثر شعبية هي الألوان الأساسية والثانوية. أي الألوان الأساسية (السماوي والأرجواني والأصفر والأسود) وتلك التي يتم الحصول عليها بناءً على مزجها. في كثير من الأحيان أيضًا، يتم استخدام الألوان القديمة في نظام الألوان عند إنشاء تصميم مسطح، مثل السلمون والأرجواني وما إلى ذلك.
5. بساطتها
التصميم المسطح بسيط بطبيعته ويتناسب بشكل جيد مع الأسلوب البسيط.
في التصميم العام للموقع، تحتاج إلى تجنب الكثير من الأجراس والصفارات. وبطبيعة الحال، قد لا تكون الألوان والنصوص البسيطة كافية. لذلك، إذا كنت ترغب في إضافة تأثيرات بصرية، فأنت بحاجة إلى اختيار صور بسيطة. تستخدم بعض مواقع منتجات البيع بالتجزئة التصميم المسطح لوضع منتجاتها على خلفية بسيطة وغير مشتتة للانتباه.
وتجدر الإشارة إلى أن بعض الصور لها عمق طبيعي، ولكنها بشكل عام تتناسب مع مستوى التصميم العام
ما هو التصميم المسطح؟ يعد اتجاه التصميم هذا أحد أكثر الاتجاهات التي تمت مناقشتها على الإنترنت. باختصار، التصميم المسطح هو أسلوب مبسط للغاية، تعود جذوره إلى البساطة. ولكن هذا ليس بالضبط بساطتها، لأن هذا النمط يمكن أن يتخذ أشكالا مختلفة اعتمادا على متطلبات التصميم. لفهم ما هو التصميم المسطح بشكل أفضل، من الأفضل الرجوع إلى الوراء وتحديد ما هو ليس كذلك بالتأكيد.
هذه ليست 3د. تتيح لك الرسومات ثلاثية الأبعاد نفسها الحصول على صور واقعية للغاية، ولكن في نفس الوقت ثنائية الأبعاد. على عكس التصميم ثلاثي الأبعاد، لا يهتم التصميم المسطح كثيرًا بالتفاصيل التي تخلق العمق والأبعاد، مثل الظلال والإبرازات والأنسجة.
هذه ليست skeuomorphism. ظهر التصميم المسطح كبديل لعناصر التصميم ذات الحجم الزائف التي تحاكي الأشياء أو العمليات الحقيقية. يتضمن Skeuomorphism الاستخدام النشط للتأثيرات المختلفة: الظلال والانعكاسات وردود الفعل والأنسجة الواقعية. لا يوجد شيء من هذا في التصميم المسطح ولا يمكن أن يكون كذلك.
بدأ الناس يتحدثون لأول مرة عن التصميم المسطح في الفترة 2012-2013، عندما ظهر هذا النمط لأول مرة. كان الاتجاه ملحوظا للغاية وتسبب في الكثير من الضوضاء، حيث كانت Microsoft واحدة من أول من طور هذا الاتجاه. أدى إصدار Windows 8 بواجهة جديدة إلى تغيير التصميم إلى الأبد وتحديد اتجاه تطوير الويب إلى حد كبير، على الأقل مكونه المرئي.
ولم تقف شركة Apple جانباً أيضًا، حيث تخلت أيضًا عن العناصر الحجمية الزائفة في تصميم واجهات أجهزتها. خلقت Microsoft وApple واقعًا جديدًا لا مكان فيه للمواقع ذات التصميمات القديمة. في الوقت نفسه، لم تتصرف شركة Apple بشكل جذري مثل منافسها الأبدي، وتخلصت تدريجياً من عناصر التشكل.
التصميم المسطح في حد ذاته ليس جيدًا أو سيئًا، مصممو الويب هم من يجعلونه مريحًا أو غير مريح. ولكن لنكن صادقين، في أشكاله المتطرفة، لا يبدو التصميم المسطح ممتعًا من الناحية الجمالية. من المحتمل أن تكون منطقة الإدراك الأفضل في هذه الحالة في مكان ما في المنتصف بين العناصر المسطحة والزائفة الحجم.
ومن المحتمل جداً أن يتم استبدال الاتجاه نحو التبسيط الشديد الذي كان سائداً خلال السنوات القليلة الماضية بشيء آخر. هناك بعض المتطلبات الأساسية لذلك - على سبيل المثال، اتجاه تصميم المواد الذي أنشأه مصممو Google.
متوافق مع التصميم التكيفي
كان لابتعاد Microsoft وApple عن التشوه الشكلي في تصميم الواجهة عواقب وخيمة. تم اعتماد النمط الجديد على الفور تقريبًا كنهج جديد لتجربة المستخدم. منذ ذلك الحين، أصبح التصميم المسطح هو الاتجاه السائد الذي لا يزال ذا أهمية. اليوم، أصبحت العناصر المسطحة موجودة في كل مكان، ونراها على مواقع الويب والتطبيقات وعلى شاشات الأجهزة المختلفة.
تنطبق مبادئ التصميم المسطح على مجموعة واسعة من فئات التصميم، ولكن شبكاته الصارمة ورسوماته المبسطة يتم عرضها بشكل أفضل على الأجهزة ذات أحجام الشاشات الصغيرة.
لقد أدى الاتجاه نحو التبسيط إلى تبسيط عمل المصممين إلى حد كبير - فقد أصبح من الأسهل عليهم تصميم واجهات يتم عرضها بشكل صحيح على أي نوع من الأجهزة. في حالة العناصر الحجمية الزائفة، لم يكن كل شيء كذلك - في بعض الأحيان تحولت الواجهة، التي بدت مذهلة على شاشة سطح المكتب، إلى شيء غير مفهوم على جهاز محمول.
إحدى المزايا الرئيسية للتصميم المسطح هي قابلية التوسع. تبدو العناصر المسطحة جيدة بغض النظر عن حجمها، وعلى عكس التصميم المثالي للبيكسل، فإن التعامل معها أسهل بكثير.
منصة مرنة
يتميز التصميم المسطح، في سعيه للبساطة، بمرونة جيدة: يتم إنشاء جميع العناصر، كقاعدة عامة، من أشكال هندسية متجانسة، مما يبسط إنشاء تخطيط متوازن، حيث يكون لكل وحدة أو كتلة مكانها. يمكن تمييز جميع العناصر بسهولة، والأهم من ذلك، أنه يمكن تبديلها بسرعة أثناء التشغيل دون انتهاك الإعدادات الأصلية.
تتمتع الشبكات أيضًا ببنية مرنة يمكن توفيرها في مجموعة متنوعة من التكوينات. يتيح ذلك للمصممين إنشاء أفضل الأساليب التي تعرض المحتوى الموجود على أفضل وجه. يؤدي غياب القيود والحاجة إلى ضبط الشبكة في حالة تغيير عناصر جديدة أو إضافتها إلى تسريع سير العمل بشكل كبير.
الطباعة القابلة للقراءة
لقد غيّر التصميم المسطح بشكل كبير طريقة تفكير المصممين في الطباعة. يتطلب النمط الجديد أسلوبًا مختلفًا في اختيار الخطوط وجودة التخطيط. ونتيجة لذلك، أدى غياب الظلال والمؤثرات المختلفة إلى تسهيل قراءة النصوص.
يتميز التصميم المسطح بالاستخدام المكثف لخطوط sans-serif، ومع ذلك، فإن هذا ليس أكيسوما ويمكن أن تبدو الخطوط الرقيقة جيدة أيضًا مع العناصر المسطحة. ستكون خطوط Serif مناسبة تمامًا كعنوان، ويمكن استخدامها أيضًا في النص الرئيسي، إذا كانت الطباعة لا تنتهك الوحدة التركيبية.
السلبيات
قد يبدو أن التصميم المسطح ليس له عيوب، ولكن الأمر ليس كذلك. في سعيهم للتأكيد على الخطوط والأشكال النظيفة، يقع بعض المصممين في فخ التركيز على الجماليات مع إهمال سهولة الاستخدام. إن التصميم البسيط والجميل، الذي لا يوجد فيه أي شيء غير ضروري، ليس مناسبًا دائمًا، وتكون مثل هذه الأخطاء واضحة بشكل خاص عند استخدام الأجهزة المحمولة.
في التصميم المسطح، غالبًا ما يكون من الصعب تحديد العنصر التفاعلي والعنصر غير التفاعلي. كل شيء هو نفسه، لا توجد اختلافات واضحة، جميع العناصر تقع في نفس المستوى. سعيًا لتحقيق البساطة، قد يقوم المصممون عن غير قصد بإخفاء ميزات أو إجراءات مهمة أو إخفاءها عن غير قصد، وقد يفقد المستخدم، الذي لا يرى المطالبات المعتادة، التوجيه على الموقع.
لنأخذ هذا الموقع كمثال. ما هي العناصر الموجودة فيه تفاعلية. الجميع؟ أو بعض فقط؟ غير واضح. لا يمكن معرفة ذلك إلا بشكل عشوائي، ولكن هذه حركات غير ضرورية، وهو أمر غير مرغوب فيه.
فقدان الفردية
بالنسبة لأي علامة تجارية أو عمل أو مشروع تصميم، فإن التفرد له أهمية قصوى. سواء كان موقعًا إلكترونيًا أو تطبيقًا أو كتيبًا أو ملصقًا أو بطاقة عمل، يجب أن يكون التصميم أصليًا ويمكن التعرف عليه جيدًا.
أحد عيوب التصميم المسطح هو أسلوبه البصري. غالبًا ما يؤدي استخدام الأشكال الهندسية البسيطة إلى تصميمين مختلفين تمامًا يظهران متشابهين جدًا مع بعضهما البعض. المصممون الذين يستخدمون العناصر المسطحة محدودون في خياراتهم لأنه ليس لديهم مجموعة كبيرة من الخيارات المقبولة تحت تصرفهم. في الآونة الأخيرة، يمكنك رؤية العديد من مواقع النسخ على الإنترنت والتي ليست في الواقع نسخًا. إنها مجرد صدفة. علاوة على ذلك، فإن الصدفة غير سارة، لأن الموقع يفقد شخصيته التي تشتد الحاجة إليها، ويضيع على خلفية الموارد الأخرى ذات التصميم المماثل.
في بعض الأحيان يصبح الأمر مضحكا. عند النظر إلى هذه الصور، قد تعتقد أننا ننظر إلى أقسام مختلفة من نفس التطبيق. لكن لا، عمل المصممان ماركو لا مانتيا وسيمون ليبوليس بشكل مستقل عن بعضهما البعض. يتم استخدام الأشكال الهندسية الأساسية وخط sans-serif الأبيض كعناصر التصميم الرئيسية - وهو قرار أكثر من منطقي. لكن النتيجة كارثية - فنظام الألوان نفسه حرم التصميم تمامًا من تفرده. وهناك الكثير من هذه الحالات.
مطاردة الموضة
سيظل التصميم المسطح أحد أهم الاتجاهات لفترة طويلة، وذلك ببساطة لأنه يبدو جيدًا على شاشات الأجهزة المحمولة. لكن العديد من المصممين يختارون شقة ليس فقط لأنها تسمح لهم بحل معظم المشاكل بسرعة، ولكن أيضا بسبب رغبتهم في إنشاء شيء حديث وعصري.
ومع ذلك، في السعي وراء الموضة، يمكنك ارتكاب خطأ فادح: إذا كنت تتبع جميع الاتجاهات بلا تفكير، فمن الممكن أن تنسى فائدة التصميم. يمكن أن تكون الشقة جميلة جدًا وأنيقة وحتى رشيقة، ولكن لا يزال اختيار المصمم يجب أن يتحدد من خلال الوظيفة وليس من خلال الرغبة في الجمال. في بعض الأحيان، فإن الرغبة في "دفع" شيء عصري إلى التصميم تؤذيه فقط، على سبيل المثال، الظلال الطويلة، وهي واحدة من أكثر السمات المميزة للتصميم المسطح.
أمامنا أعمال المصممين ألكسندر لوتوتسكي وإريك مالمسكيلد. هذه أمثلة نموذجية لاستخدام الظلال الطويلة في التصميم. لن يفاجئ هذا أحدًا، ولكن في وقت ما، وتم إنشاء كلا العملين في عام 2013، عندما كان التصميم المسطح قد بدأ للتو في الظهور، كان النمط المرئي الجديد مثيرًا للاهتمام وجذابًا للغاية. ونتيجة لذلك، ظهرت العديد من الرموز المشابهة لدرجة أن استخدام الظلال اليوم يعد حلاً صيغيًا وغير مثير للاهتمام. لقد كان من المألوف ذات يوم، ولكن ليس بعد الآن. الظلال مثل الظلال. لا يوجد أي معنى فيها، فهي لا تؤدي أي وظيفة مفيدة.
اختيار سيء للخط
يحلم كل مصمم بإنشاء شيء جميل وعملي في نفس الوقت. ولكن في السعي وراء الجماليات، يمكنك اتخاذ خيارات سيئة تؤثر على سهولة الاستخدام. ومن الأمثلة على ذلك جنون الخطوط الرفيعة والخفيفة. يبدو هذا النوع من الطباعة واضحًا وخفيفًا، ولكن من الصعب أيضًا قراءته.
في بعض الأحيان يكون اختيار خط رفيع له ما يبرره - على سبيل المثال، للاستخدام في العناوين. ولكن عند كتابة النص الرئيسي بنفس الخط، غالبًا ما يكون من المستحيل قراءته. يمكن ملاحظة مثل هذه الأخطاء بشكل خاص على الأجهزة المحمولة - حيث يقلل حجم الشاشة الصغير بشكل حاد من إمكانية قراءة المحتوى.
شقة 2.0
على مدى السنوات القليلة الماضية، قام المصممون بتجربة العناصر المسطحة وجلبوا الكثير من الأشياء الجديدة إلى التصميم المسطح. تم تشكيل النمط بشكل كامل، ومثل أي أسلوب آخر، له إيجابياته وسلبياته.
في فجر ظهورها، تميزت الشقة بالبساطة البصرية الصارمة، ولم يكن هناك أي تلميح للظلال أو الهياكل. حتى التدرجات لم تكن تحظى بتقدير كبير، على الرغم من أنها لا تتعارض بأي حال من الأحوال مع مبادئ التصميم المسطح.
لكن المصممين بدأوا تدريجياً في الابتعاد عن الحلول البسيطة للغاية، محاولين إيجاد نوع من الحل الوسط بين المسطحة والشكلية. والنتيجة هي نمط جديد يسميه بعض المصممين Flat 2.0. بدأت الظلال والتدرجات وحتى الهياكل الخفيفة غير المرئية تظهر تدريجيًا في عناصر التصميم. من الواضح أن التصميم المسطح يفتقر إلى العمق، وقد بدأ المصممون في استخدام الأساليب الهجينة. على سبيل المثال، قم بترتيب العناصر بصريًا على مستويات مختلفة، وقم بتجربة الظلال والظلال. مثال آخر شائع الاستخدام للنهج المختلط هو استخدام ليس فقط الأيقونات والرسوم التوضيحية المتجهة المسطحة، ولكن أيضًا الصور الفوتوغرافية.
لقد فعلت Google الكثير للترويج لـ Flat 2.0. تعد إرشادات التصميم متعدد الأبعاد محاولة لإنشاء لغة مرئية جديدة تجمع بين عناصر التصميم المسطحة وثلاثية الأبعاد. توصيات Google مفصلة للغاية وسهلة المتابعة. في الوقت نفسه، لا تصر Google على الالتزام الصارم بجميع القواعد المنصوص عليها في المبادئ التوجيهية - يمكن للمصممين تجربة وإنشاء مشاريعهم الأصلية، والتي يمكن أن تجمع بين مجموعة متنوعة من العناصر.
خاتمة
اليوم، Flat 2.0 في مرحلة التشكيل، لكن الاتجاه الذي سيتطور فيه هذا النمط أصبح واضحًا بالفعل. لا يُتوقع حدوث تغييرات كبيرة - لن تتخلى شركات جوجل وأبل ومايكروسوفت الرائدة في مجال الموضة. إذا كانت هناك تغييرات، فستكون ضئيلة - ستظهر أساليب جديدة، وسوف يأتي شخص ما ب "خدعة" مثيرة للاهتمام، وستستمر المحاولات في الحصول على الأفضل من Skeuomorphism. ولكن بالمعنى العالمي، ليست هناك حاجة لتوقع شيء جديد حقًا - فالتصميم المسطح هو اتجاه طويل الأمد والأسلوب الذي يناسب التقنيات الجديدة التي لم تكن موجودة بعد هو الوحيد الذي يمكن أن يحل محله من مواقعه المحتلة.
كلمة "مسطحة" مترجمة من الإنجليزية وتعني "مسطحة". منذ بدايته، استمر ما يسمى بالتصميم المسطح في الاحتفاظ بمكانته لعدة سنوات، محتلاً مكانة رائدة في السوق.
حيث بدأ كل شيء
لقد تغير تصميم الويب عددًا كبيرًا من المرات منذ بدايته. لقد قطعت شوطا طويلا من العناصر البسيطة والمملة إلى العناصر ثلاثية الأبعاد والمحدبة والمادية تقريبًا. يمكن رؤية ذلك بسهولة في مثال تغيير مظهر نظام التشغيل Windows. يتطور المكون البصري بالتوازي مع تطور التكنولوجيا. لكن اتجاهاتها الجديدة تشير بالأحرى إلى العودة إلى البساطة والبساطة.
من skeuomorphism إلى التصميم المسطح
كان النمط الذي سبق الشقة هو skeuomorphism. لقد كان اتجاه التصميم الرئيسي لفترة طويلة جدًا. Skeuomorphism هو أسلوب حجمي زائف، تحاكي جميع عناصره مظهر الأشياء الحقيقية (دفتر ملاحظات، ساعة منبه)، باستخدام الظلال والأنسجة الطبيعية وأشياء أخرى. تم العثور على أمثلة ملفتة للنظر في واجهات الهواتف الذكية المبكرة. بدأت تفقد مكانتها بعد عام 2010، عندما بدأ مصممو الشركات الكبيرة يتطلعون إلى التبسيط، وعند تطوير واجهات المستخدم، بدأوا في التخلص من السمة الرئيسية للشكلية - ثلاثية الأبعاد.
مثال مرئي ممتاز للاختلاف في الأنماط هو الصورة أدناه. الصورة الموجودة على اليسار عبارة عن تصميم مسطح، في حين أن الصورة الموجودة على اليمين عبارة عن skeuomorphism.
خصائص النمط المسطح
المسطح هو نمط ثنائي الأبعاد. ليس لها أي تأثيرات بصرية على الإطلاق، مثل التحولات اللونية السلسة أو الظلال أو الأنسجة ثلاثية الأبعاد. باختصار، كل ما يجعل الصورة ثلاثية الأبعاد.
محتوى المعلومات الرئيسي موجود في الأيقونات (أيقونة التصميم المسطح). ويجب أن تكون واضحة قدر الإمكان للمستخدم عندما يتعلق الأمر بتطبيقات الهواتف الذكية. بالنسبة لمواقع الويب، تعتبر الأيقونات هي العناصر الرئيسية التي تعكس خصوصيتها ورسالتها المعلوماتية. كقاعدة عامة، يتم تقديمها في شكل أشكال هندسية بسيطة، دائرة أو مربع، مع صورة تقليدية مميزة.
عند تطوير التصميم المسطح، يتم الاهتمام أيضًا بنظام الألوان. يجب أن تكون رتيبة وغير تطفلية ولا تشتت انتباه المستخدم. في أغلب الأحيان، يتم استخدام لون واحد نقي والعديد من الظلال المتناقضة. وبالمناسبة، هناك العديد من خدمات الإنترنت التي تحتوي على مجموعات من ألوان التصميم المسطح التي يمكنك استخدامها عن طريق نسخ الرموز السداسية للألوان التي تفضلها.
لا يقل أهمية عن شيء مثل الطباعة (النص). نظرًا للبساطة العامة، يبرز مكون النص بشكل خاص. وهذا يعني أنه يجب أن يكون قابلاً للقراءة ولا يتعارض مع الأسلوب العام. سيعتمد هذا على الاختيار الناجح للخط ولونه.
أمثلة على التصميم المسطح
لنبدأ بحقيقة أن أيقونات العديد من موارد الإنترنت والشبكات الاجتماعية المعروفة قد تغيرت بشكل أكثر تملقًا. منذ وقت ليس ببعيد، قام العملاقان Google وYouTube أيضًا بتغيير تصميمهما إلى التصميم المسطح. نظام التشغيل ويندوز، بدءاً من الإصدار الثامن، تخلى تماماً عن كافة علامات الحجم في الأيقونات، الأمر الذي أسعد أعين بعض المستخدمين في الإصدارات السابقة، وبدأ في الالتزام بالتصميم المسطح. وحذا حذوه مطورو تطبيقات الهاتف المحمول لنظامي التشغيل iOS وAndroid.
تستخدم مواقع الويب المكونة من صفحة واحدة (الصفحات المقصودة) على نطاق واسع مزايا التصميم المسطح، والذي لا يلعب الدور الحاسم فيه من خلال المظهر الطنان، ولكن من خلال الوظيفة وسهولة القراءة.
تطور التصميم المسطح
في البداية، كان التصميم المسطح مسطحًا تمامًا، مما خلق صعوبات معينة للمستخدمين الذين اعتادوا على الأزرار المحدبة. إذا كانت إمكانية النقر على الأزرار ملحوظة على الفور في skeuomorphism، ففي الأشكال الأولى للتصميم المسطح، لم يكن من الممكن دائمًا تحديد تفاعل العناصر في المرة الأولى.
بعد أن أصدرت Microsoft نظام التشغيل Windows 8، المصمم بأسلوب مسطح، لم يتمكن جميع المستخدمين من اكتشاف الواجهة الجديدة والرموز التي يمكنهم النقر عليها على الفور. لم يشير ظهور العناصر بأي شكل من الأشكال إلى التفاعل المحتمل معهم. كان هذا التصميم أكثر ملاءمة لتطبيقات الهاتف المحمول التي التقطت هذه الفكرة. وكانت شركة Apple أول من فعل ذلك مع نظام التشغيل iOS 7.
ومع ذلك، فإن التصميم المسطح لا يقف ساكناً ويتطور نحو المزيد من التعقيد. اليوم، يبدو بشكل متزايد وكأنه تصميم شبه مسطح، أو، كما يطلق عليه أيضًا، Flat 2.0. وبدأت تظهر فيه تأثيرات العمق والظلال والتدرجات. يتم تحقيق العمق في التصميم المسطح من خلال ترتيب العناصر على مستويات مختلفة أو في زوايا مختلفة.
مهما كان الأمر، فإن هذا الأسلوب في ذروة شعبيته ويتزايد الطلب عليه. لذلك، إذا كنت تخطط لتصميم موقع الويب الخاص بك، فيمكنك اختيار التصميم المسطح بأمان. وإذا كنت بحاجة إلى بعض العناصر المفقودة لموقع الويب الخاص بك، فيمكنك العثور على الإنترنت على عدد كبير من عناصر واجهة المستخدم ذات التصميم المسطح المجاني (يمكن تنزيلها مجانًا)، مثل الرموز والخطوط والقوالب والمكونات الضرورية الأخرى لواجهة المستخدم.
إيجابيات وسلبيات الأسلوب
مما لا شك فيه، في حياة اليوم سريعة الخطى، يعد هذا الأسلوب الرصين والغني بالمعلومات أكثر ملاءمة من سابقه. التصميم المسطح لديه عدد من المزايا التي لا يمكن إنكارها.
ربما يكون الشيء الأكثر أهمية هو التحميل السريع لصفحات الويب. يتم فتح مواقع الويب التي تستخدم التصميم المسطح بشكل أسرع بكثير من تلك المثقلة بالرسوم المتحركة والأشياء الثقيلة الأخرى. يعد وقت التحميل مهمًا بشكل خاص لتحسين محركات البحث وترويج موقع الويب إلى الأعلى.
المظهر المبسط يجعل قراءة النص أسهل ويسمح لك بالتركيز على المحتوى الرئيسي.
يبدو التصميم متناغمًا وشاملاً، مما يخلق انطباعًا لطيفًا بشكل عام.
لا شيء يمكن أن يكون مثاليًا والتصميم المسطح ليس استثناءً. على الرغم من بساطته الواضحة، فإن تطوير تصميم ويب مسطح ناجح حقًا ليس بالأمر السهل. هناك إمكانية لجعلها مملة وغير جذابة. أو على العكس من ذلك، تبالغ في التصميم وتنسى الوظيفة. المهمة الرئيسية عند تطوير التصميم المسطح هي الحفاظ على التوازن المثالي بين الجمال وسهولة الاستخدام.
