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

• • استخدام خطوط خاصة بصفحات الويب Custom web fonts
• • أستخدام الظلال للخطوط والعناصر Text Shadow & Box Shadow
• • تفاعل التصميم معك وإبراز المحتوى الهام من خلال الحركة Animation
• • ظهور التصميم الأستجابي حسب نوعية جهازك Responsive web design وإمكانية تصفح المواقع عبر الجوال والتابلت بسهولة

ودوري الآن تسليط الضوء علي أجمل أتجاهات التصميم لمواقع الأنترنت web design trends لعام 2014 وأيضا الجانب الأسوأ منها والتي يجب علينا الأبتعاد عنها قدر الأمكان .

1- التصميم المسطح البسيط Minimal Flat design :

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

2- خطوط ويب أفضل Web fonts :

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

3- الخلفيات الكاملة Full screen backgrounds :

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

4- التصميم الأستجابي Responsive web design :

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

5-  خطوط الأيقونات Icon Fonts :

لعل الكثير مغرم بوضع أيقونات معبرة بمحتوى موقعه وبالسابق لعمل ذلك كنا نضع الأيقونات كلها بصورة واحدة ويتم استدعائها بواسطة css sprite ، ولكن ظهر الآن ما يسمي خطوط الأيقونات أو أيقونات الخطوط ..رتبها حسب ما تحب 🙂 وهي أمكانية استخدام تلك الأيقونات ووضعها في شكل خط يتم استدعائه بواسطة css3.0 ويكون لكل أيقونة Content خاص بها يعبر عن شكل ما ويتم استخدامه ، وهناك أهمية رائعة لتلك الأيقونات وهي تكون غالبة صغيرة الحجم وبالتالي سريعة بالتحميل واستهلاك أقل في Bandwidth  الخاص بموقعك على عكس الصور التقليدية ، وايضا قابلة للتكبير والعرض علي الجوال بدقة عالية ودعم Retina لأنها غالبا تكون خط بأكثر من نسق Format ويكون منها نسخة SVG وبالتالي قابلة للتكبير والتصغير والعرض بجودة عالية لأنها فيكتور !

نأتي الآن لأسوأ أتجاهات التصميم بعالم الويب :

1- نشرات النوافذ المنبثقة : Modal Window promo :

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

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

2- الشبكات الأجتماعية الزائدة : Over Social Media :

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

3- نوافذ التحميل للويب : Loading Screen :

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

 

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