درس الـ Wireframing : ماهو ؟ كيف ؟ أدواته ؟

Aly N'SIBI

نجم المنتدى
إنضم
15 جويلية 2008
المشاركات
10.674
مستوى التفاعل
27.951
136267Sanstitre2.png


السلام عليكم ورحمة الله تعالى وبركاته

ما هو ؟

مادمت تشاهد هذا الموضوع ، فأنت حتما مهتم بتصميم و صناعة وتطوير المواقع ..
وكمرحلة أساسية وأولية من مراحل بناء الموقع ، يجب عليك أن تضع مخططا لعملك ..
الفكرة تتلخص في القيام بنموذج سريع وبسيط و جذاب لصفحات موقعك قبل الشروع في تنفيذها فعليا باستعمال مختلف لغات البرمجة ..
هذا ما يعرف بالـ Wireframing Website أي مرحلة بناء تخطيط مُبسّط للموقع و لشكل صفحاته ...
( الـ Wireframing يوجد لمختلف المشاريع وليس فقط المواقع .. )
أهمية هذه العملية تكمن في كونها تسهل عليك فيما بعد العمل بكل اريحية على صناعة وتكويد صفحاتك لانك تعلم جيدا ما هي العناصر التي تحتاجها واين ستضعها ..
الميزة الثانية هي تمكين حرفائك من التعرف بطريقة سريعة و خفيفة على الشكل الأولي لموقعهم وذلك قبل حتى البدء في تصميمه فعليا ..
هناك من المصممين و المطورين من يستغنون عن هذه المرحلة ويعوضونها بما يكتسبونه من خبرة في التصميم والبرمجة ليصمموا ويفكروا في نفس الوقت ..
لكن ان كانت هذه بداياتك الأولى مع عالم التصميم و التطوير فهذه المرحلة ضرورية جدا ، وهي التي ستعلمك كيف تفكر مستقبلا وتكسبك الخبرة .
لا شيئ أفضل من النظام و الوضوح بالنسبة لأي مصمم ، و الأمر سيان بالنسبة لمصممي المواقع.

home.png


الصورة أعلاه فيها مثال مبسط لـ Wireframe منجزة لصفحة الـ home لموقع معين ..
اما الصورة التالية فهي لصفحة أخرى و لموقع آخر ولكنها تبدو أجمل قليلا ..
سنتعرف في بقية الموضوع على كيفية صناعة مثل هذه التصاميم

357faeb04f5ae03bb8c80c5bee99b693.jpg




كيف ؟

يتساءل البعض الآن عن الطريقة التي يمكن ان ننجز من خلالها Wireframe لصفحة معينة ..
ف الحققة هناك عديد الطرق ، أكثرها بداهة استخدام برنامج تصميم مثل Adobe Photoshop لعمل تصميم أولي مثل الصور التي سبق عرضها ..
ولكن العملية تبدو معقدة قليلا ونحن نتحدث عن مجرد تخطيط اولي و ليس تصميم فعلي ..
الحل موجود ، ويتمثل في استخدام برامج مصنوعة لهذا الغرض و يطلق عليها : Wireframing tools .. منها المجاني و منها المدفوع


أدوات ؟

من الأدوات المجانية و الخارقة بالنسبة لي ، برنامج Pencil

بمعاينة الموقع الرسمي و التحميل من هذا الرابط
Home - Pencil Project

هذا مثال لصفحة تم انجازه بمناسبة هذا الموضوع للتوضيح ، والرنامج سهل في الاستخدام حقيقة
Ashampoo_Snap_2017.06.10_16h14m39s_001_.png


المرحلة الموالية هي تصدير العمل من خلال الضغط على القائمة اعلى اليمين ثم Export ..
يمكننا تصدير العمل في شكل صور ، ويمكن تصديرها في شكل ملف PDF و في هذه الحالة يمكننا استغلال خاصية الـ mapping التي يتوفر عليها البرنامج وتمكن من ربط الصفحات ببعضها البعض ..

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

إلى هنا ينتهي الموضوع ، ملتقانا في موضوع قادم.

 
ممتَازْ ...
هَلْ يوجَدْ أدَاةْ تَخْطِيطْ كَهَذِه للبرَامِجْ و التطبيقَاتْ عوض التخْطيطْ بالقَلَمْ
 
أعلى