مراحل تصميم مواقع ويب متجاوبة

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

يمكن أن يتسائل البعض عن معنى “تصميم متجاوب”. يقصد بتصميم موقع متجاوب أو ما يطلق عليه بالإنجليزية بـ Responsive Web Design هو التصميم الذي يتغير ليتلائم مع أبعاد الشاشات المختلفة ببعض التعديلات البسيطة على ملف الـ CSS.

1. حدد ماهو المحتوى

تحديد المحتوى هو أول وأهم الحلول في أي مشروع تصميم. لا تستخف بهذه المرحلة، فهي التي يقوم فيها العمل الجماعي والتي يبدع فيها كل شخص من مصممين تجربة المستخدم “UX designer” إلى مطورين الواجهات “back-end developer”. كما ذكرت في مقالة سابقة عن الخطوات العشرين لتصميم الموقع، فكل شيء يجب أن يتم عن طريق تكفير عميق وتحليل للمشكلة وليس فقط القفز مباشرةً إلى التصميم. سأقدم الشرح بناءاً على أن المشروع يعمل عليه فريق مكون من ثلاثة أشخاص بالنسبة لاستراتيجية المحتوى:

1- الفحص والتدقيق بالمحتوى: قم بجمع كل شيء يمكنك جمعه، من النص إلى الصور والشعارات وغيرها.

2- اكتب كل شي عن موقعك في مستند جوجل Google Doc (أو ما شابهه). بدءاً بمقدمة عامة (رسالة الموقع، هيكلته ، الخ) والكتابة بشكل مفصل عن جميع محتوى الصفحات. استخدام مايكروسوفت وورد أو أي معالج نصوص ليس مهم أبداً! بل يجعلك تهتم بالمظهر ويبعدك عن النقطة الأساس ألا وهي التركيز على المحتوى.

3- ارسم لكل محتوى (لسطح المكتب و الموبايل) وابدأ بالتفكير في كيف يمكن للنظام أن يدعم المحتوى. قم بالتفكير في “أنماط تصاميم مستجيبة” وخذ بالحسبان كل جزء من المحتوى لتخلق مزيج من التفاعل بين محتويات الموقع. لن تحتاج لغير ورقة بيضاء وقلم للقيام بهذه المهمة!

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

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

2. صمم في سياقك الخاص

بعض المصممين يبدؤون بتصميم النسخة الخاصة بالموبايل أولاً والبعض الآخر العكس. قم بتجربة الطريقتين وابدأ بما تجده مناسباً لك. على سبيل المثال للبدأ من التصميم بالفوتوشوب: إذا كان لديك شاشة ذات أبعاد (1440px x 900ish) كالماك بوك برو، انشئ ملف فوتوشوب بنفس الأبعاد تماماً كجهازك ثم أنشئ حدود 1280px “للمتصفح” بداخل نفس ملف الفوتوشوب.

3. استعين بالنظام الشبكي 960

قم بتحديد الحواف والمنتصف كبداية ثم قم بتقطيع التصميم حسب ما ترغب ثم ابدأ باستخدام ما يسمى بالـ grid systems أو النظام الشبكي والذي يعطيك خيارات وتنسيق أفضل للبنية التحتية للتصميم، بهذا تطعي نفسك مجال أوسع للتعديل والحمل بأريحية وتطوير تصميمك بشكل مبدع وبسيط. اضغط على الرابط لتفاصيل أكثر (من هنا).

4. حدد وافهم قيودك

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

5. اترك عنك الزخارف والمبالغات وركز على الخطوط

الويب 95% منه نصوص وأشكال خطوط: يجب أن يكون أول اهتماماتك في سير عمل التصميم. يمكنك استخدام الكثير من المواقع التي تعطيك عرض مباشر للخطوط ومنها http://www.dafont.com و http://www.arfonts.net و http://www.1001freefonts.com وغيرها. الالتزام بتحديد الخطوط قبل القفز مباشرة إلى الفوتوشوب سيساعدك كثيراً في فعالية انجاز التصميم.

6. صمم للموبايل والأبعاد الأصغر

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

(Alt + Cmd + C) ثم حدد “Relative” وأضف 320 بسكل “للعرض” ثم أضغط على السهل اليمين بالوسط.

7. جرب التصميم على المتصفح

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

مجاناً

1440px x 1060px ملف فوتوشوب للمواقع المتجاوبة

المصدر