التسلسل الهرمي: Hierarchy - كتاب التصميم الرقمي - الصف 12 - الفصل 1 - المملكة العربية السعودية

التسلسل الهرمي: Hierarchy

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

التوازن: Balance

هو ترتيب العناصر بطريقة منطقية متوازنة ضمن أي تصميم، فمثلاً ليس من المنطقي تجميع كل المكونات أو العناصر ضمن جزئية محددة من التصميم وترك باقي أجزاء التصميم فارغة، فهذا يسبب عدم التوازن في التصميم.

التباين أو التنوع: Variation or Diversity

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

في المثال تصميم واجهة موقع وزارة السياحة حيث أجاد المصمم اختيار الصورة، إذ إن فيها تباينًا لونيًا باختلاف الدرجات الضوئية للون الفاتح والغامق.

24

--- SECTION: التسلسل الهرمي: Hierarchy --- التسلسل الهرمي: Hierarchy يوضح التسلسل الهرمي الاختلاف في أهمية العناصر في التصميم، فاللون والحجم هما أكثر الطرق شيوعًا ويمكن من خلالها إنشاء تسلسل هرمي، حيث يتضح ضمن التصميم أن العناوين الرئيسة تكون بحجم كبير، وتأتي العناوين الفرعية بأحجام أقل ثم النصوص بالحجم الطبيعي. هذا التسلسل الهرمي للنصوص يوضح ترتيبها بشكل منطقي للمستخدم عند القيام بالقراءة. --- SECTION: التوازن: Balance --- التوازن: Balance هو ترتيب العناصر بطريقة منطقية متوازنة ضمن أي تصميم، فمثلاً ليس من المنطقي تجميع كل المكونات أو العناصر ضمن جزئية محددة من التصميم وترك باقي أجزاء التصميم فارغة، فهذا يسبب عدم التوازن في التصميم. --- SECTION: التباين أو التنوع: Variation or Diversity --- التباين أو التنوع: Variation or Diversity يعني الاختلاف في عناصر التصميم، حيث إن لكل عنصر خواص معينة، ويتم استخدام العنصر بطريقة تهدف إلى جعله مختلفًا عن باقي العناصر الأخرى في التصميم لتمييزه وإظهاره للعين، بحيث يمكن استخدام الشكل نفسه بتصغير وتكبير مساحته، وهنا يتحقق التباين في المساحة ويتحقق معه التنوع، وكذلك يمكن اختيار ألوان مختلفة، وقد تكون متقابلة في دائرة الألوان فتحقق التباين، وغيره الكثير من الطرق التي يمكن أن يستند عليها المصمم لتحقيق التباين الذي يحقق به التنوع في المساحة التصميمية بما يتوافق مع تحقيق أهداف التصميم. في المثال تصميم واجهة موقع وزارة السياحة حيث أجاد المصمم اختيار الصورة، إذ إن فيها تباينًا لونيًا باختلاف الدرجات الضوئية للون الفاتح والغامق. 24 --- VISUAL CONTEXT --- **DIAGRAM**: تعلم مبادئ وأسس التصميم وكن مصمم منتجات ناجح Description: A diagram illustrating hierarchical design principles on a web page layout. The main title 'تعلم مبادئ وأسس التصميم وكن مصمم منتجات ناجح' is prominently displayed at the top, followed by a smaller descriptive text 'يحتوي كل ما تحتاجه لتطوير منتجاتك وخدماتك الرقمية' and a button 'ابدأ التصميم'. Below this, there are multiple smaller image thumbnails arranged in a grid, representing content. On the left and right sides, there are labels 'مساحات سلبية / بيضاء' (negative/white spaces) with lines pointing to the empty areas around the central content block, emphasizing the use of space to create hierarchy. The overall structure demonstrates how different text sizes and spacing create a visual hierarchy. Context: Illustrates the concept of hierarchy in design by showing how text size and negative space guide the user's eye and organize information on a web page. **DIAGRAM**: Untitled Description: Two side-by-side diagrams illustrating balanced and unbalanced design elements. Both diagrams are labeled 'كمصمم UI/UX' (as a UI/UX designer) at the top. The left diagram, labeled 'عناصر غير متوازنة' (unbalanced elements), shows several small, irregularly shaped blue elements scattered unevenly within a rectangular frame. The right diagram, labeled 'عناصر متوازنة' (balanced elements), shows the same blue elements arranged symmetrically and evenly distributed within a similar rectangular frame, creating a sense of visual equilibrium. Context: Demonstrates the principle of balance in design by contrasting an arrangement of elements that appears chaotic with one that appears harmonious and stable. **FIGURE**: Untitled Description: A photograph of a traditional, multi-story building with intricate wooden architecture, possibly from an old city in Saudi Arabia. The building features ornate balconies and windows. Overlaid on the lower part of the image is a modern user interface (UI) resembling a navigation bar or a set of interactive elements. The UI includes text labels such as 'من الواجهة', 'تطوير الخدمة السياحية', 'خدمات إلكترونية', 'تدريب وتطوير', 'استثمار سياحي', 'مركز ذكاء الأعمال', and 'رؤى السعودية', along with a search bar. This visual combines traditional imagery with contemporary digital design elements. Context: Serves as an example for the concept of 'Variation or Diversity' in design, specifically referencing the use of contrasting light and dark color tones in the image to achieve visual diversity within a modern UI context for a tourism website.