أفضل 10 اتجاهات حديثة في تصميم الويب لاتباعها

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

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

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

1. واجهة مستخدم فلات (Flat UI)

Flat-UI

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

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

مقالات مرتبطة ما هو التصميم المسطح flat design ومتى بدأ …؟!  , كيف يمكنك عمل تصميم مسطح ….؟

2. تصميم الويب المتجاوب (Responsive Web Desig)
responsive-web-design

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

مقالات مرتبطة  [انفوجرافيك]تصميم الويب المتجاوب/responsive بشكل مبسط  –   30 اضافة جي كويري لإنشاء مواقع متجاوبة – responsive

3. البساطة (Minimalism)

minimalist-design

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

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

4. محتوى الفيديو (Video Content)

video-background

الأن وسائل الإعلام التفاعلية غنية بالمحتوي مثل الفيديوهات وأصبج من السهل الوصول إليها وانتاجها رخيص . حتي الأن المستخدمين أكثر ميولا لرؤية المعلومات من خلال الفيديوهات بدلا من النصوص. كما أنه فعال جدا عندما يتعلق الأمر بتقديم الأعمال التجارية (أو نفسك) إلي العالم.

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

 5. تيبوغرافي العلامة التجارية (Branded Typography)

branded-typography

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

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

6. تمرير الصفحة الواحدة(One-Page Scrolling)

one-page-scrolling

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

7. التصفح الثابت (Fixed Navigation)

fixed-navigation

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

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

8. الشريط الجانبي المدمج (Compact Sidebars)

ولت أيام اظهار الشريط الجانبي في كل صفحة. الأن، نحن قادورن علي التركيز أكثر علي المحتوي الكامل بعرض الصفحات (full-width ) .

لن يكون ممكننا دون الجافا سكربت أو الجي كويري – ولكن رغم ذلك، تنفيذه بسيط ويعطيك مساحة أكبر للعمل معه.

9. البارالكس (Parallax)

parallax-scrolling

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

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

10. رسوم SVG متحركة (SVG Animation)

SVG-Animation

الأيقونات المتجهة SVG متواجدة منذ فترة ، ولكن الأن حققت تقدم كبير وملحوظ والمزيد من مصممي الويب المحترفين بدأوا بالاهتمام بها . و SVG سهلة التحجيم ، وحجمها صغير.

مقالات مرتبطة ادوات ومصادر لإنشاء SVG باحترافيه وسهوله  ،  مميزات وعيوب الأيقونات الخطية Font Icons والمتجهة SVG

 

المصدر

 

مقالات ذات صلة

2 تعليقان

  1. Amr Abed
    13 أغسطس,2014 في 3:30 م - Reply

    البارالكس اتجاه جديد رائع شكرا علي المقال

  2. حذيفة ماضي
    18 أغسطس,2014 في 3:36 م - Reply

    موضوع حقاً جميل .. شكراً لكم ،،