اتجاهات تصميم الويب لهذا العام. فوائد الطباعة الجيدة. فوائد استخدام الألوان الزاهية

مرحبًا بك في دليل اتجاهات تصميم الويب لعام 2016!

عند وصف كل الاتجاهات ، سنشرح سبب نجاحها وكيف يمكنك إتقانها شخصيًا. سنقدم أيضًا أكثر من 40 مثالًا لمواقع من شركات مثل Intercom و Google و Beoplay و Sennheiser وغيرها.

خطة المراجعة لدينا هي كما يلي:

  1. مقدمة
  2. التفاعلات الدقيقة
  3. البطاقات
  4. تصميم أضيق الحدود
  5. هجين من تصميم مسطح ومادي
  6. الرسوم المتحركة الغنية
  7. الطباعة
  8. الوان ساطعة
  9. التمرير الطويل
  10. رسومات عالية الدقة
  11. الرسوم التوضيحية
  12. الموجودات

لنبدأ سريعًا باستكشاف كيف يمكن للتفاعلات الصغيرة أن تخلق تجربة لا تُنسى للزوار.

التفاعلات الدقيقة

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

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

فوائد التفاعلات الدقيقة المصممة جيدًا

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

التفاعلات الدقيقة هي عنصر أساسي لبناء العادات لدى الزوار. تتكون هذه العملية من ثلاثة عناصر:

  • إشارة (تفاعل دقيق) - مشغل يبدأ إجراءً ؛
  • الإجراءات المتكررة - ترتيب الإجراءات المألوف للمستخدم ؛
  • المكافأة هي نتيجة إتمام الأعمال.

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

  1. تصميم للاستخدام المتكرر.

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

  1. قم بعمل عرض مرئي مشترك للمشغلات باستخدام واجهة المنتج.

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

  1. استخدم الرسوم المتحركة.

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

  1. تجنب التفاعلات غير المرغوب فيها.

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

  • شاشات التحميل
  • الرسوم التوضيحية المتحركة التي يتم تنشيطها عند تحريك الماوس فوق الماوس.

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

  1. استخدم الفكاهة في نصوصك.

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

البطاقات

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

  1. تضيء الرسوم المتحركة في التمهيد الانتظار.

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

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

الطباعة

دقة أعلى للجهاز وإنترنت أسرع وإمكانية الوصول إلى مكتبات خطوط الويب الجديدة ( خطوط جوجل، Adobe Typekit ، إلخ) جعل عصرنا العصر الذهبي للطباعة.

فوائد جودة الطباعة

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

مبادئ الاستخدام

  1. الوضوح فوق كل شيء.

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

  1. خط بسيط ولكنه مثير للإعجاب.

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

  • زيادة حجم الخط.
  • التباين بين لون الخط والخلفية المحيطة به ؛
  • استخدم الكتابة الجريئة في الأماكن الرئيسية.

لا ينبغي الخلط بين مفهومي "مثير للإعجاب" و "منمق". تساعد الخطوط البسيطة في نقل الرسالة بثقة ووضوح.

  1. خطوط معقدة وبسيطة: Serif مقابل Sans Serif.

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

خطوط sans serif الشائعة:

  • بروكسيما نوفا
  • فوتورا
  • أفينير
  • افتح Sans
  • هيلفيتيكا نيو

خطوط serif الشعبية:

  • كاسلون
  • جاراموند
  • نص الشحن
  • تابع
  • FF ميتا Serif

  1. تراكب الخطوط المكتوبة بخط اليد.

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

  1. نص يتجاوز المساحة المخصصة.

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

  1. الخطوط الافتراضية.

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

الوان ساطعة

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

فوائد استخدام الألوان الزاهية

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

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

من الواضح أن الثنائي هو مزيج من لونين. يمكن أن تكون ظلال من نفس اللون أو نغمات معاكسة تمامًا.

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

ضع في اعتبارك النقاط التالية:

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

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

  1. تراكب.

هناك اتجاه آخر مثير للاهتمام في استخدام الألوان الزاهية وهو تراكبها على الصور الفوتوغرافية.

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

  1. التدرجات الفعالة.

يعد مزج الألوان مع التلاشي التدريجي خيارًا شائعًا للعديد من المصممين المعاصرين. لا داعي لأخذ أكثر من لونين أو ثلاثة ألوان للخلط - فهذا لا لزوم له.

  1. تسليط الضوء على الكلمات الرئيسية والأزرار.

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

على نفس المنوال ، يمكنك جعل بعض الأزرار أكبر من غيرها من خلال إبرازها بإطار ملون أو خلفية. هذا يعمل بشكل رائع.

  1. تغيير حالة العنصر عند التمرير.

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

  1. استخدم اللون المناسب لإثارة المشاعر المرغوبة.

تثير الألوان المختلفة مشاعر مختلفة. فيما يلي ورقة غش صغيرة لبعض الألوان الشائعة الاستخدام على مواقع الويب:

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

التمرير الطويل

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

ميزات استخدام التمرير الطويل

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

  1. استخدم الإشارات المرئية.

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

  1. الشاشات مثل الصفحات.

لا يمكن أن يكون التمرير سلسًا فحسب ، بل يمكن أن يكون أيضًا صفحة بصفحة. التمرير - وتغيرت الشاشة بأكملها. إنه أنيق وجميل.

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

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

  1. قائمة التنقل الثابتة.

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

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

  1. تنشيط الرسوم المتحركة عن طريق التمرير.

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

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

  1. التخفيف من عيوب تحسين محركات البحث لصفحة التمرير الطويلة.

مواقع التمرير اللانهائية لها قيود تحسين محركات البحث الخاصة بها. لكن يمكن تخفيفها. يقدم نيل باتيل نصائح مفيدة حول هذا الموضوع.

رسومات عالية الدقة

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

فوائد استخدام رسومات عالية الجودة

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

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

  1. تحضير صور عالية الجودة.

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

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

  1. SVG أو رسومات نقطية؟

تتمتع تنسيقات الرسومات النقطية (.jpg ، .gif ، .png) بدقة بكسل معينة في الأصل ، بينما يمكن أن تنمو الرسومات العددية أو تتقلص لتلائم الشاشة دون فقدان الجودة.

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

  1. خلفية الفيديو في الرؤوس.

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

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

يجذب الفيديو المستخدمين من أول ثانية من دخولهم للموقع وهذا سبب جاد لاستخدامه.

الرسوم التوضيحية

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

فوائد استخدام الرسوم التوضيحية

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

  1. قم بمحاذاة الرسم التوضيحي مع الموضوع العام للتخطيط.

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

  1. أضف تأثيرات إبداعية.

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

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

  1. استخدم الرسوم التوضيحية في التعليمات والأدلة.

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

  1. استخدم التصميم المسطح في الرسوم التوضيحية الخاصة بك.

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

الموجودات

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

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

تصميم المواد وشقة 2.0

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

تغييرات هيكل الموقع

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

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

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

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

تصميم ديناميكي

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

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

محتوى مرئي فريد

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

مزيد من الاهتمام بالألوان

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

استخدام مقاطع الفيديو الكبيرة

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

الدور المتنامي للطباعة

محتوى معلومات عالي الجودة

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

الجمع بين مظهر الموقع ووظائفه

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

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

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

الموقع جذاب بخلفيات متحركة وتأثيرات تفاعلية

حتى الطباعة أجمل

مهدت الواجهات المبسطة الطريق لفكرة الطباعة الجميلة (بالإضافة إلى أدوات الويب سهلة الاستخدام مثل Google Fonts و Adobe Typekit - لتوسيع إمكانيات التطوير من خلال مكتبات ضخمة عبر الإنترنت). إن بساطة النقوش (التي يمكن قراءتها ويسهل فهمها) في مفهوم "الخط" تحرر مساحة لعناصر أخرى. ما يجب محاولة ربطه هو الخط المقروء والجدة الممتعة للخيارات.

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

الرسوم التوضيحية والرسومات

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

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

يحتوي الموقع على تكرارات دقيقة ورسوم توضيحية لطيفة. و "Baby-style" للموقع بأكمله يحولان التصميم إلى لعبة

ألينا فيلاتوفا

07/16/2015 | | 2 تعليقات

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

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

لذلك ، في 2015-2016 ، لا تزال في الاتجاه:

  1. صور كبيرة وجميلة

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

  3. تصميم شقة

    في نهاية عام 2013 - بداية عام 2014 ، عصر التصميم المسطح ، بدأ ما يسمى بـ "نمط المترو".
    تم تحديد اتجاهات الموضة الجديدة في السوق من قبل وحوش مثل Microsoft و Apple ، واختار جميع المشاركين الآخرين بسعادة أحدث الاتجاهات. لا يزال الاتجاه نحو التصميم المسطح قوياً في عام 2015. يسمح هذا التصميم النظيف والخفيف الوزن لمواقع الويب أن تبدو حديثة جدًا.

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

  4. المحتوى العاطفي

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

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

  5. أفضل طباعة

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

  6. الرسوم التوضيحية والصور المخصصة ؛ الرسوم التوضيحية مرسومة باليد

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

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

  7. فيديو

    منذ عام 2014 ، كانت مقاطع الفيديو الكبيرة عالية الدقة مؤثرة للغاية على مواقع الويب.

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

  8. فيديو سينمائي أو متكرر

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

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

  9. شبكة

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

  10. رأس ثابت

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

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

  11. تصميم متكيف

    ربما يكون الاتجاه الأكثر أهمية لهذا الموسم هو التصميم التكيفي. وفقًا لـ Google ، فقد ارتفع عدد المستخدمين الذين يصلون إلى الإنترنت من الأجهزة المحمولة إلى 50٪ بنهاية عام 2014!

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

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

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

لكن قبل أن نبدأ ، دعونا نتذكر ما كان مناسبًا منذ سنوات عديدة ، وكيف بدأ كل شيء.

Skeuomorphism

وقت طويل Skeuomorphismكان الاتجاه السائد في التصميم. إذا ماذا Skeuomorphism؟المصطلح الدقيق من ويكيبيديا هو: "Skevomorphism" هو زخرفة مادية أو عنصر تصميم يتم نسخه من شكل كائن آخر ، ولكنه مصنوع من مواد أو طرق مختلفة. " ببساطة - هو تقليد سطح أو كائن بمساعدة آخر.

كل هذا يمكن أن يعزى إلى تصميم الويب والواجهات المتنقلة.

في تصميم الويب ، كان لدى Skeuomorphism عدد من المزايا.

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

2. أزرار واقعية وعناصر واجهة.كانت الواجهات أقرب ما تكون إلى الواقعية قدر الإمكان. على سبيل المثال ، لديك مشغل موسيقى - ستبدو واجهته كمشغل بكرة قديم جيد.

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

لكن التطور لا يزال قائما وهناك اتجاه جديد قادم.

مستوي

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

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

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

باوهاوس

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

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

أسلوب الطباعة الدولي

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

أعطانا مزيج من هذه التوجيهات مستوي -نظيف ، خفيف ، خالي من الظلال العميقة والضخمة ، التصميم.

المزيد من التاريخ

الآن دعونا نلقي نظرة على ما كان رائعًا وعصريًا قبل عامين:

1. الظلال الطويلة (الظلال الطويلة)

في 2013-14 ، بدأ فجر الظلال الطويلة. استخدامها الرئيسي هو الرموز والرسوم التوضيحية والعناوين.

جعل استخدام الظلال الطويلة من الممكن جعل العناصر والأيقونات أكثر ضخامة دون استخدام skeuomorphism.

2. الألوان الزاهية كلكنات

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

3. طباعة بسيطة

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

4. زر الشبح

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

والآن دعونا نلقي نظرة على ما سيكون مناسبًا في المستقبل القريب.

مستويسيطور التصميم ويتطور ، ويتضمن المزيد والمزيد من العناصر الجديدة. دعونا نلقي نظرة على الإيجابيات والسلبيات الرئيسية مستويالتصميم.
المزايا الرئيسية هي:

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

العيوب الرئيسية هي:

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

الآن دعنا نتحدث عن الاتجاهات نفسها. من أولى الاتجاهات التي تكتسب المزيد والمزيد من الشعبية هذا العام:

الايقونية الإبداعية

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

تنمو الأيقونات في الحجم لتشمل المزيد من التفاصيل وبالتالي تصبح عنصرًا فنيًا داعمًا كبيرًا للتعبير عن الفكر.

طباعة حادة

شاع مستويالتصميم ، أصبحت الطباعة الآن مليئة بالاتجاهات الجديدة ، لتصبح البطل الرئيسي للعناوين الرئيسية.

يتزايد استخدام الطباعة الرائعة والخطوط المخصصة والحروف الهادفة.

ألوان مميزة

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

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

تصميم واحد خط واحد

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

تميل الخطوط إلى أن تكون بسيطة وغير معقدة. يضمن استخدام نفس الخط طوال الوقت بقاء التركيز على المحتوى وليس على الحروف.

صور عالية الدقة في الرؤوس

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

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

بطاقات واجهة المستخدم

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

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

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

1. دبابيس
تم إنشاؤها على Pinterest ، الدبابيس هي تخطيط البطاقة الأكثر شهرة اليوم.

في وقتي ووردجمعت أفضل 100 نموذج مصنوع في بينتيريستنمط.

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

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

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

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

العيوب الرئيسية هي:

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

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

تأثير الغمر

أو ، بعبارة أكثر بساطة ، يتطور التفاعل أكثر فأكثر ويتولى تدريجياً الدور الرائد في تصميم الويب.

"التصميم التفاعلي الجيد هو ما يحدث في كل لحظة من التفاعل بين الشخص والجهاز (أو النظام أو الخدمة) الذي يتفاعل معه." ستيفن ب. أندرسون

التفاعل هو أفضل طريقة للوصول إلى المستخدم. ولهذا تستخدم طرقًا عديدة:

  1. التمرير الطويل أو التمرير المنظر.
  2. بطاقات واجهة المستخدم.
  3. الفيديو والرسوم المتحركة.
  4. الضرب والنقر.
  5. التفاعلات الدقيقة.
  6. دفع الإخطارات.
  7. السيطرة على إخفاء وعرض المحتوى.

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

يجب أن تعمل جميع الميزات أولاً بشكل جيد قبل أن تتمكن من إرضاء المستخدم عاطفياً.

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

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

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

الفيديو والرسوم المتحركة

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