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

1. مبدأ الهاتف المحمول أولاً

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

2. الرسوم التوضيحية مرفوعة

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

مثال توضيحي من موقع dropbox.com

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

3. الرسوم المتحركة

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

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

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

4. الألوان الجريئة

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

مثال على استخدام الألوان الغامقة على Spotify.com

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

5. التمرير غير العادي والمنظر

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

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

6. الأنماط غير المتكافئة

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

مثال على التصميم غير المتماثل (isaidicanshout.com)

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

7. الظلال

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

ظلال عميقة عند المرور فوق الصور (abduzeedo.com)

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

8. الخطوط الكبيرة والجريئة

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

مثال على استخدام الخط الكبير (bigyouth.fr)

9. الحد الأدنى

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

بساطتها المطلقة (mathieuboulet.com)

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

10. مزج النص الأفقي والرأسي

يؤدي تغيير الترتيب الأفقي المعتاد للنص إلى "تحديث" الموقع ويحفزك على قراءة ما هو مكتوب هناك.

مثال على اتجاه نص غير عادي (takewhatyoucancarry.com)

يرجى ملاحظة أن المزيج تم بشكل جيد - لا توجد عناصر مربكة غير ضرورية. تتم كتابة كلمة "خذ" عموديًا - وهذا يكفي لعرض المحتوى ذي العلامة التجارية.

11. "التعديل"

في هذه الحالة، يجب أن يتباين النص مع صور الخلفية حتى لا يتم دمجها.

13. نغمتان

يعتمد تصميم الموقع على لونين أساسيين. تبدو أنيقة وعصرية. على سبيل المثال، تم تصميم موقع راديو التصميم الأسترالي على هذا النمط بالضبط:

14. الخطوط الهندسية

في هذه الحالة، يتم دمج الخطوط مع مجموعة متنوعة من الأشكال الهندسية. خطوط مثل Futura وITC Avant Garde وProxima Nova مناسبة لهذا الغرض.

مثال على استخدام الخطوط "الهندسية" (hugeinc.com)

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

دعونا نلخص ذلك

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

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

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

تم نشر مقال جديد →← اقرأ واستلهم!

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

ما هي الاتجاهات في تصميم الويب التي تنتظرنا في عام 2017؟

01. تصميم شبه مسطح

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

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

مشروع: الموارد | أداة UI/UX لخدمات الويب
المؤلفون: رسلان لاتيبوف; رسومات إل إس؛ انطون ميشين؛ فاليري جوركوف

مشروع: قائمة تشغيل المستمع

02. الصور المتحركة (الصور السينمائية)

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

03. المزيد 3D

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

مشروع: أحببتها

مشروع: الجوائز السنوية المفتوحة

مشروع: حذاء اير ماكس ’17

مشروع: نايكي إف سي. | الكرات الذهبية ثلاثية الأبعاد في العالم الحقيقي

مشروع: أفضل لك العلامة التجارية

04. الرسوم المتحركة

أصبحت الرسوم المتحركة موجودة بشكل متزايد في تصميم الويب، ويمكن أن يكون التنسيق بأي شكل من الأشكال - WebGL CSS أو GIF أو SVG أو الفيديو. لقد كانت الرسوم المتحركة واحدة من أهم اتجاهات تصميم الويب في العام الماضي، فلا تخجل من استخدامها.

مشروع: أطفال نيكلوديون يختارون الرئيس

مشروع: تطبيق AR Virtual Fitness Coach

مشروع: زه أورو- ريو 2016

05. المواقع/الصفحات المقصودة المكونة من صفحة واحدة

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

إذا كنت بحاجة إلى صفحة مقصودة، يمكنك طلبها مني →

06. الأشكال الهندسية والأنماط والخطوط والدوائر

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

مشروع:

مشروع: DRAP.agency العلامات التجارية

مشروع: فايزر - نشط و50+ لصحيفة نيويورك تايمز

07. الألوان الشجاعة

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

مشروع: إدريس - الشعار من تصميم MiLo

مشروع: Rendered - موقع ويب تجريبي مستجيب لبرنامج Adobe

مشروع: b2mach

08. التمرير المبتكر واختلاف المنظر

هذه فكرة مرئية رائعة ستضيف التفرد إلى أي موقع ويب. من اختلاف المنظر متعدد الطبقات إلى اختلاف منظر الفيديو، أصبح كل شيء ممكنًا باستخدام البرنامج الإضافي D.ex Multilayer Parallax. تم تطوير هذا المنتج بالكامل بواسطة استوديو Milothemes تحت إشراف Loredana Papp وMihai Baldean. وهي متاحة للشراء في سوق إنفاتو/codecanyon.net

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

09. انتقالات اللون

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

10. تصفح الهاتف المحمول (التصميم سريع الاستجابة)

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

مشروع: الرسوم المتحركة لموقع الويب المستجيب

11. الرسومات والرسوم التوضيحية المخصصة

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

12. الاستخدام الإبداعي للمساحة المحايدة والشبكة

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

13. احكي القصص (رواية القصص)

بدأت مواقع الويب الآن في سرد ​​القصص لكسب العملاء. يميل الناس إلى تذكر القصص أكثر من قراءة المعلومات البسيطة (الجافة).

المزيد من مقاطع الفيديو حول رواية القصص من أعمال الشباب:

14. التحميل التدريجي للمحتوى (Lazy Loading)

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

15. تقسيم المحتوى

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

16. نماذج ملء الشاشة

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

17. مقاطع الفيديو في كل مكان

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

مشروع: هيلسونج

18. تحسين محركات البحث مهم! (SEO مهم)

يعد تحسين محركات البحث (SEO) أمرًا مهمًا جدًا لموقع الويب، لذا فإن موقع الويب الجميل الذي لا يحتوي على تحسين محركات البحث (SEO) الجيد سيظل غريبًا.

19. التنقل المخفي

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

20. تفاصيل التصميم الصغيرة

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

مشروع: Barometa - منصة عمل الجيل التالي

21. اتجاهات تصميم الشعار

21.1. تقليلية

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

21.2. مرسومة باليد

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

21.3. مساحة سلبية

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

21.4. الاقتصاص

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

21.5. الهندسة

هذا الاتجاه هو المدرسة القديمة، لكنه أحد تلك الأنماط التي لن تموت أبدًا.

21.6. فن الخط

يحظى هذا الاتجاه بشعبية كبيرة بين شركات الجيل الجديد

المؤلفون: سام هيلي; أندريا شلافر؛ جاسيك جانيتشاك

21.7. أنماط

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

المؤلفون: نيك إيدلين; ستانيسلاف ألينيكوف؛ لوكاس جيل تورنر

21.8. الشعارات المتحركة

يعد تصميم الحركة اتجاهًا شائعًا اليوم، ويمكننا رؤيته في جميع مجالات التصميم.

المؤلفون: خافيير ميراندا نييتو; شركة العمل

21.9. كلاسيكي

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

المؤلفون: رومان دودونوف; أفكار مينغو لأعلى؛ سوف نحاول كذلك

21.10. انتقالات اللون

التدرجات موجودة في كل مكان هذا العام، والشعارات ليست استثناءً.

21.11. الرسوم التوضيحية في الشعارات

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

المؤلفون: بودي دانيال؛ جاسيك جانيتشاك

21.12. التصوير في الشعارات

يحظى الجمع بين الصور والطباعة بشعبية كبيرة الآن. إنهم يعملون بشكل جيد معًا ويخلقون تباينًا بينهم.

22. اتجاهات الطباعة

22.1. طباعة كبيرة وجريئة وجميلة

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

المؤلف: ألكسندر لاجوتا

المؤلفون: كيم مارين

مشروع: سلسلة باوجاسم - الحزمة 4

22.2. التدرجات/التحولات اللونية في الطباعة

التدرجات هي بلا شك اتجاه اليوم، وستجدها في الطباعة أيضًا.

22.3. التسلسل الهرمي البصري

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

22.4. الطباعة الصغيرة

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

المؤلفون: سلافا أولينيك; بهاء سمير؛ بارع الرقمية

مشروع: سلسلة باوجاسم - الحزمة 4

22.5. الرسوم المتحركة في الطباعة (الطباعة المتحركة)

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

المشروع: Gotham Pro محرف متحرك مجاني

22.6. الطباعة تجتمع مع التصوير الفوتوغرافي

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

22.7. الأشكال الهندسية والطباعة

يمكن أن تعمل الأشكال الهندسية بشكل جيد مع الطباعة لإنشاء تصميم جميل.

22.8. إقران الخط

استخدم خطين أو أكثر معًا. لا يزال هذا الاتجاه في عام 2017.

———————————

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

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

1. تصميم "تجريدي" غير قياسي

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

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

2. خيارات التنقل الجديدة

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

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

3. البطاقات في التصميم

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

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

4. تقسيم التخطيطات مع تقسيم الشاشة إلى جزأين

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

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

5. الطباعة الكبيرة والأصلية

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

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

6. التدرجات والألوان الزاهية

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

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

7. الرسوم المتحركة والتفاعلات الدقيقة

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

8. تأثير المنظر

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

9. الواقع الافتراضي تقريبًا

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

10. تصميم طبيعي ملموس

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

11. اتجاهات تصميم الويب الأخرى لعام 2017

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

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

الأشكال الهندسية

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

الرسوم التوضيحية فريدة من نوعها

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

المجموع

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

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

ومع ذلك، هناك أسباب لمتابعة الاتجاهات. إن التحقق من مواقع مثل Awwwards أو FWA أو CSS Design Awards يمكن أن يلهمك، ونتيجة لذلك، يساعدك على النظر إلى ما هو أبعد من عادات التصميم الخاصة بك. يمكنك التعرف على عوالم مرئية جديدة، والتي يمكنك بعد ذلك (بوعي أو بغير وعي) دمجها مع لغة رسومية. تساعدك مشاهدة عمل الآخرين على تحسين مهاراتك الخاصة بالإضافة إلى مواكبة أحدث التقنيات.

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

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

ماذا ينتظرنا أيضًا في تصميم الويب في عام 2017؟ وهنا توقعاتي.

تكوين مفتوح

حتى وقت قريب، كانت التراكيب "المغلقة" والمتماثلة والثابتة تهيمن على عالم التصميم. ومنذ عام 2016 ظهرت العديد من المواقع التي ابتعدت عن هذا الأسلوب. تكتسب التركيبات المفتوحة التي تحتوي على عناصر مرتبة بحرية والتي تعمل في مكان ما خارج الشاشة شعبية - يمكن رؤية أمثلة على هذا العمل على romainpsd.com أو durimel.io أو booneselections.com. إن توزيع العناصر على هذه المواقع يعطي الانطباع بأنها لا تزال تعيش خلف الشاشة.

عدم التماثل

لقد كسر عام 2016 أيضًا قاعدة التناظر التي سيطرت على الصناعة لبعض الوقت. قام العديد من المصممين بإنشاء تخطيطات غير متماثلة بعيدة كل البعد عن التوازن التام على الجانبين الأيسر والأيمن. كأمثلة، أود أن أعرض لكم موقع Culture.pl الممتاز، وموقع Dada-data.net الفوضوي، وموقع durimel.io المذكور سابقًا.

تنوع

ابتكر المصممون تركيبات أكثر ديناميكية تتميز بخطوط قطرية أكثر تقاطعًا (poigneedemainvirile.com، vanderlanth.io)، أو أشكال أكثر تعقيدًا (residente.com/en، helloheco.com، Predictiveworld.watchdogs.com).

وهم الفوضى

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

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

بعض الأشكال الهندسية "المعلقة في الهواء" ليس لها سوى غرض زخرفي (ميلاني-ف). وهذا أيضًا نموذجي للعناصر المتداخلة. تتداخل النصوص جزئيًا مع الصور الفوتوغرافية، كما هو الحال في e03.epicurrence.com وmelville-design.com، أو يتم تركيب الصور فوق بعضها البعض، كما يمكن رؤيتها على olivierbernstein.com.

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

الخلفيات والأنماط الغنية

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

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

نمط الشبكة

أحد المواقع الأولى التي ظهرت عليها هذه الشبكة كان werkstatt.fr، والذي، مع ذلك، لم يستخدم الرسوم المتحركة المميزة.

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

التفاصيل الزخرفية

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

نادرًا ما يتم إنشاء الأزرار كمستطيلات واضحة تحتوي على نص بداخلها. وتظهر غالبًا كخطوط ناعمة ومتوازنة، مثل تلك الموجودة على dahllaw.dk أو yasuhiroyokota.com. خيار الزر الآخر هو التمرير المذهل على Canvas، كما هو الحال على hpsoundincolor.com وcavalierchallenge.com.

مفاهيم مدروسة - رسوم متحركة سلسة بين الأقسام

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

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

الرسوم المتحركة المثيرة للاهتمام تزين تخطيطات بسيطة. يضيفون قيمة جديدة ويجعلون الصفحة فريدة من نوعها. لقد أصبحوا جوهر المشروع بأكمله، كما هو الحال في Ifly50 أو Tennentbrown.co.nz. غالبًا ما تنشئ الرسوم المتحركة بنية جميلة وأنيقة على مواقع الويب: Cuberto.com، أو lookbook.wedze.com، أو skarv-fashion.com، أو corentinfardeau.fr.

الطباعة المتنوعة

يمكن أيضًا رؤية الاتجاهات المتغيرة في الخطوط المستخدمة. حتى وقت قريب، كانت شبكة الإنترنت بأكملها تهيمن عليها الخطوط البسيطة والغريبة مثل Helvetica أو Roboto أو Lato أو Open Sans. يتم استخدام الأسلوب الغريب "الزخرفي" قليلًا في كثير من الأحيان في العناوين، مع اختيار نسخة أبسط لبقية النص. لا يتم استخدام خطوط Serif أبدًا.

على مدى العامين الماضيين، بدأ الوضع يتغير. يستخدم المصممون بجرأة أنواعًا مختلفة من الخطوط. الآن هم أكثر استعدادًا للعمل مع التناقضات - الجمع بين خطوط serif وsans serif.

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

تعمل القدرات التكنولوجية الأكبر والقرارات الأكثر جرأة على دفع نمو التنوع في طباعة الويب.

الخطوط الهندسية

أصبحت الخطوط الهندسية sans-serif شائعة جدًا، مثل الخطوط الكلاسيكية Futura أو ITC Avant Garde أو Proxima Nova أو تلك المتوفرة في مكتبة Google - Poppins أو Montserrat. هذه الخطوط أكثر تعبيرًا من خطوط neo-sans serif "غير المرئية". يمكن تحقيق طابع أكثر "عدوانية" وتعبيرًا لموقع الويب باستخدام سمك أكبر، كما هو الحال في الموقع القديم إلى حدٍ ما Huginc.com، ولكن فيما يلي أمثلة أحدث: التسلسل.co.uk، أوstartuplab.no، أو www.protest.eu .

الخطوط الشريفة

في كثير من الأحيان، يتم استخدام الخطوط الرقيقة ليس فقط للنص الأساسي، ولكن أيضًا للعناوين الكبيرة. غالبًا ما يتم استخدام العناصر الزخرفية، مثل تلك الموجودة على duhaihang.com أو jennyjohannesson.com. تشمل الخطوط الشائعة الأخرى تلك المتعلقة بـ Bodoni أو Didot.

الخطوط أحادية المسافة ("الآلة الكاتبة")

يعد استخدام الخطوط المتناسبة، والتي ترتبط عادةً بالآلات الكاتبة، أمرًا مبتكرًا. ويمكن الآن رؤيتها على مواقع مثل admirhadzic.com أو cuberto.com أو designembraced.com.

مزيج الخطوط المتناقضة

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

طباعة ضخمة كجزء من الصورة الرئيسية

كان الشيء الرائع والشائع جدًا هو استخدام أحجام نص كبيرة جدًا على الصور الرئيسية. أدى هذا إلى خلق تباين قوي جدًا بين العناوين وبقية المحتوى. يمكن رؤية الأمثلة على موقعoursroux.com أو femmefatale.paris أو monsieurcaillou.com.

في بعض الأحيان، يتم استخدام الحروف في البداية كديكور، مثل coretinfardeau.fr أو nurturedigital.com.

والمثال الرئيسي على ما سبق هو موقع jennyjohannesson.com، الذي يستخدم الصفات الزخرفية للخط الرقيق Goku.

تأثيرات إضافية تنطبق على الطباعة

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

أحجام الحروف الكبيرة في النصوص

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

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

تعال إلى الجانب المظلم

في عام 2016، استخدم المصممون ألوانًا مختلفة. ولكن يمكنك ملاحظة الميل نحو اختيار الألوان الداكنة.

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

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

لخص

يعد عام 2017 بالعديد من الآفاق المثيرة، ولكن هناك أيضًا بعض المخاطر التي تلوح في الأفق.

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

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

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

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

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

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