صفحة 200 - كتاب التصميم الرقمي - الصف 12 - الفصل 1 - المملكة العربية السعودية

3-6

رابط الدرس الرقمي www.ien.edu.sa

الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية Wireframes

المفاهيم الرئيسة

المخطط الهيكلي Wireframes

أهداف الموضوع

يتوقع من الطلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: 1. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي. 2. إنشاء التطبيقات في برنامج أدوبي إكس دي Adobe XD.

الهدف الأول

ثانياً: التعامل مع المخطط الهيكلي WireFrame

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

مثال (1):

وزارة التعليم Ministry of Education 2025 - 1447

200

3-6 رابط الدرس الرقمي www.ien.edu.sa الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية Wireframes المفاهيم الرئيسة المخطط الهيكلي Wireframes أهداف الموضوع يتوقع من الطلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: 1. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي. 2. إنشاء التطبيقات في برنامج أدوبي إكس دي Adobe XD. 1. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي. 2. إنشاء التطبيقات في برنامج أدوبي إكس دي Adobe XD. الهدف الأول ثانياً: التعامل مع المخطط الهيكلي WireFrame من أهم المخططات أو الرسومات التي يستخدمها المصمم في واجهات الموقع هو ما يسمى بالإطار الشبكي أو مخطط الصفحة أو المخطط الهيكلي WireFrame، ويحدد تصميم الصفحة أو طريقة تنظيم المحتويات فيها بما في ذلك عناصر الواجهة وأنظمة التصفح وكيفية التكامل بينها. وفي بعض الأحيان يمكن عمل الإطار الشبكي أو مخطط الصفحة على ورق وغالباً ما يتم إنشاء المخططات الهيكلية WireFrame باستخدام أشكال بسيطة بالأبيض والأسود قبل الانتقال لتصميمه رقمياً ومن ثم تصميمه بشكل مرئي، وفي الشكل التالي مثالان يوضحان دور الإطار الشبكي أو المخطط الهيكلي أو مخطط الصفحة WireFrame: --- SECTION: 1 --- مثال (1): وزارة التعليم Ministry of Education 2025 - 1447 200 --- VISUAL CONTEXT --- **QR_CODE**: Untitled Description: A QR code with the text 'رابط الدرس الرقمي' (Digital Lesson Link) above it and 'www.ien.edu.sa' below it. It provides a digital link to the lesson content. Context: Provides access to digital resources for the lesson. **FIGURE**: Sign In Form (Low-Fidelity Wireframe) Description: A simple, low-fidelity wireframe of a 'Sign In' form. It features a solid green rectangular header at the top. Below the header, the text 'Sign In' is centrally aligned. There are two input fields labeled 'Email' and 'Password' with placeholder text. A 'Forgot Password?' link is visible below the password field. At the bottom, there is a green rectangular button labeled 'Login'. The overall design is minimalist, using basic shapes and text, characteristic of a paper or early-stage digital wireframe. Context: Illustrates an example of a low-fidelity wireframe for a 'Sign In' page, demonstrating basic layout and elements without detailed styling. **FIGURE**: Sign In Form (Higher-Fidelity Wireframe) Description: A higher-fidelity wireframe of a 'Sign In' form, positioned to the right of the low-fidelity example, with a blue arrow pointing from the left figure to this one, indicating a progression. This wireframe shows more detail than the first. It has a 'Sign In' title at the top. Below it, there are two input fields for 'Email' and 'Password', represented by lines with placeholder text. A 'Forgot Password?' link is present. At the bottom, there is a 'Login' button. The design is more refined, suggesting a digital wireframe with more defined UI elements, but still without full visual design. Context: Illustrates a progression from a low-fidelity to a higher-fidelity wireframe for a 'Sign In' page, showing how more detail is added as the design evolves.