مراحل تصميم مواقع ويب متجاوبة
تحديد المحتوى هو أول وأهم الحلول في أي مشروع تصميم. لا تستخف بهذه المرحلة، فهي التي يقوم فيها العمل الجماعي والتي يبدع فيها كل شخص من مصممين تجربة المستخدم “UX designer” إلى مطورين الواجهات “back-end developer”. كما ذكرت في مقالة سابقة عن الخطوات العشرين لتصميم الموقع، فكل شيء يجب أن يتم عن طريق تكفير عميق وتحليل للمشكلة وليس فقط القفز مباشرةً إلى التصميم. سأقدم الشرح بناءاً على أن المشروع يعمل عليه فريق مكون من ثلاثة أشخاص بالنسبة لاستراتيجية المحتوى:
1- قم بجمع كل شيء يمكنك جمعه، من النص إلى الصور والشعارات وغيرها.
2- اكتب كل شئ عن موقعك فى Google Doc (أو ما شابهه). بدءاً بمقدمة عامة (رسالة الموقع، هيكلته ، الخ) والكتابة بشكل مفصل عن جميع محتوى الصفحات. استخدام مايكروسوفت وورد أو أي معالج نصوص ليس مهم أبداً! بل يجعلك تهتم بالمظهر ويبعدك عن النقطة الأساس ألا وهي التركيز على المحتوى.
3- ارسم لكل محتوى وابدأ بالتفكير في كيف يمكن للنظام أن يدعم المحتوى. قم بالتفكير في “أنماط تصاميم مستجيبة” وخذ بالحسبان كل جزء من المحتوى لتخلق مزيج من التفاعل بين محتويات الموقع. لن تحتاج لغير ورقة بيضاء وقلم للقيام بهذه المهمة!
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 بكسل إلى اليسار أو اليمين من ساحة العمل بعدها قم بترتيب العناصر لتلائم البعد الجديد في المساحة البيضاء وقم بوضعها في مجلد جديد اسمه “موبايل” في نفس ملف الفوتوشوب.
تعليقات
إرسال تعليق