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

النشاط التطبيقي

باستخدام الدلالات الآتية نفذ بشكل فردي أو مع مجموعتك الخطوات الإجرائية الآتية لرسم مخطط هيكلي WireFrame لصفحة موقع أو تطبيق من اختيارك بتصميمها أولاً ورقياً ثم رقمياً في برنامج Adobe XD أو برامج أخرى.

النشاط التطبيقي باستخدام الدلالات الآتية نفذ بشكل فردي أو مع مجموعتك الخطوات الإجرائية الآتية لرسم مخطط هيكلي WireFrame لصفحة موقع أو تطبيق من اختيارك بتصميمها أولاً ورقياً ثم رقمياً في برنامج Adobe XD أو برامج أخرى. --- VISUAL CONTEXT --- **FIGURE**: Wireframe Examples Description: Three distinct wireframe templates for website or application interfaces are displayed horizontally. Each template shows a different layout of common UI elements such as headers, text blocks, image placeholders, and navigation. Below each wireframe is a button labeled 'COPY TEMPLATE'. The first wireframe on the left features a prominent header, a large image placeholder, and multiple text blocks. The middle wireframe has a similar structure but with different arrangements of text and image elements. The rightmost wireframe includes a sidebar navigation, a pie chart-like element, and various content blocks. These figures illustrate different structural approaches to interface design. Context: These examples provide visual references for students to understand the concept of wireframes and the types of elements they might include, as part of the 'Applied Activity' instruction. **TABLE**: Wireframe Elements Legend Description: A two-column table serving as a legend for common wireframe elements. The left column displays a visual representation of the element, and the right column provides its label in Arabic and English. Table Structure: Headers: Visual Representation | Label Rows: Row 1: A rectangle outline, a hatched rectangle, a circle outline, four small dots in a row, an 'x' symbol, and a '<' symbol. | الأزرار: Buttons Row 2: Three horizontal lines of varying lengths, and one long horizontal line. | كتل النص: Text Blocks Row 3: A square outline, and two overlapping squares with an 'x' inside each. | محتويات الصور: Picture Containers Row 4: A light gray filled rectangle. | التظليل: Shading Row 5: Two rectangular outlines, one larger than the other, representing screen boundaries. | الخطوط العريضة للشاشة: screen outlines Calculation needed: N/A Context: This table defines the visual language and symbols used in wireframing, enabling students to correctly interpret and create their own wireframes as instructed in the activity.