تصمم الصفحة أم لا تصمم؟ تلك هي المشكلة!
هل حاولت بناء موقع من قبل لتصطدم بعقبة تصميم صفحاتك؟ الصفحة الرئيسية، الخدمات، المقالات، صفحة التواصل…إلخ
الإتيان بتصميم مثالي يجمع بين البساطة والجمال وسهولة تجربة المستخدم هو الهدف، تحاول التفكير، تغطس في عشرات المواقع المشابهة لتستوحي منها، وتشاهد عشرات الفيديوهات التعليمية لكيفية بناء الصفحة، وتحاول تعلم تطبيقات تخطيط المواقع ولكنك ترهق..
ماذا لو قلت لك، أن الحل كان أمامك طوال الوقت؟ الأمر لا يحتاج إلا أن تنشط (خلايا) مخك، وتترك (صفوف) التطبيقات، لتضع (أعمدة) موقعك!
لنتعرف الآن على مخططات الصفحات، وكيفية بنائها بأبسط وسيلة، بحيث تتفاهم أنت ومطور الموقع بلغة يفهمها كلاكما.
ما هو مخطط الصفحة؟
هو الهيكل العظمي للصفحة، شكل كروكي لما يجب أن تكون عليه الصفحة، وهي تخبر فريقك ببساطة الغرض من الصفحة، وتتضمن:
- وضع الصفحة
- أشرطة التنقل
- عناصر تجربة المستخدم
- العناصر التفاعلية
ولا حاجة لإضافة محتوى في تلك المرحلة، سواءً كتابة أو صور، فقط اكتب كلمة عن ماهية المحتوى وشكله داخل المساحة المخصصة له.
أما عن كيفية التخطيط نفسه، فالحل بين يديك! تطبيقات جداول البيانات!
نعم، تطبيقات جداول البيانات مثل Microsoft Excel و Google Sheets هي أبسط وأنجح طريقة لتخطيط الصفحات، يمكنك دمج خلاياها وتلوينها وتنظيمها في شكل صفحة ويب واضحة، هي أبسط طريقة تصل بينك وبين المطورين، من السهل تنفيذها ومن السهل تطبيقها.
إذا أردت مخططاً أكثر احترافاً وتفاصيلاً يمكنك الاستعانة بتطبيقات مثل Miro و Figma، والتي تمنحك تحكمات أكثر، مثل شكل العناصر التفاعلية وحجم الشاشة وما إلى ذلك.
ما الذي يجب توفره في مخطط الصفحة؟
هناك عدة نقاط يجب وضعها في الاعتبار عندما تصمم مخطط الصفحة:
- حدد أهدافك من التصميم، هل تريد الزائر أن يقرأ الصفحة؟ أن يتنقل عبر الموقع؟ أن يذهب لصفحة التواصل؟ على حسب الهدف ستصمم الصفحة.
- راعِ حجم الجهاز بالنسبة للصفحة، هل تخطط الصفحة لموبايل؟ لتابلت؟ لكومبيوتر؟ راعِ الحجم والنسبة والتناسب بين العناصر حسب الجهاز.
- في المراحل الأولى، أبقِ التصميم في منتهى البساطة.
- حافظ على اتساق العناصر، نفس العنصر يجب أن يكون بنفس الشكل والحجم في مختلف المخططات للموقع الواحد.
- وضِّح عناصر التنقل في المخطط، وكيف يمكن التحرك من صفحة لأخرى.
- استخدم ملاحظات قصيرة لتوضيح الغرض من العناصر لفريقك أو للمطوّر.
- لا تتمسك بالتصميم! ابقَ منفتحاً على النقد والتغييرات.
كيف تتحقق من سلامة مخططك؟
لا يوجد مؤشر واضح على سلامة المخطط، ولكن هناك أدلة يمكنك التحقق منها:
- وجود ما يلبي حاجة الزائر من الصفحة.
- سهولة طلب الخدمة من خلال الصفحة.
- سلاسة التنقل وتجربة المستخدم
- وجود حساب للمحتوى والعناصر المهمة.
- مراعاة مشاكل التنقل، والسيناريوهات المختلفة له.
أو يمكنك ببساطة التواصل مع روزيلا، رواد التسويق الإلكتروني وتصميم المواقع، لنصمم لك موقع بشكل احترافي!
أسئلة شائعة
١. كم من الوقت يستغرق بناء مخطط الصفحة؟
يعتمد على تعقيد الصفحة، لكن مخطط صفحة واحدة بسيطة قد يستغرق من ٣٠ دقيقة إلى ساعتين.
٢. هل أحتاج لمخطط لكل صفحة في الموقع؟
نعم، يُفضَّل بناء مخطط لكل صفحة رئيسية على حدة لضمان وضوح الرؤية لفريق التطوير.
٣. ما الفرق بين مخطط الصفحة والتصميم النهائي (Mockup)؟
المخطط هيكل عظمي بلا ألوان أو تفاصيل بصرية، أما الـ Mockup فهو التصميم المرئي الكامل بالألوان والخطوط والصور.
مراجع
10 Best Practices for Creating Effective Wireframes
The Ultimate Breakdown of Effective Wireframes and Page Layouts
