الخطوات الإجرائية الأساسية للتصميم المرئي - التصميم الرقمي - ثالث ثانوي

4-6 الخطوات الإجرائية الأساسية للتصميم المرئي رابط الدرس الر www.ien.edu.sa المفاهيم الرئيسة التصميم المرئي Visual Design - المساحة البيضاء White Space - التباين Contrast أهداف الموضوع يتوقع من الطَّلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: 1. معرفة التصميم المرئي وعناصره ومبادئه. 2. تحويل المخطط الهيكلي من التصميم الرقمي إلى التصميم المرئي. الهدف الأول أن يكون الطلبة قادرين على معرفة التصميم المرئي وعناصره ومبادئه. التصميم المرئي Visual Design يقصد به تصميم الجزء الذي يشاهده المستخدم ضمن أي منتج فيزيائي أو رقمي، ويتم ذلك عبر استخدام مجموعة من العناصر والمبادئ التي تسمح بتكوين هذه التصاميم بطريقة تكون مناسبة وسهلة الاستخدام. عناصر التصميم المرئي في البيئة الرقمية الخطوط Lines تعد الخطوط من أبسط عناصر التصميم المرئي ، فلا يمكن أن تجد أي تصميم لا يحتوي على خطوط بشكل ما، وتمتلك الخطوط مع بساطتها خواصًا مختلفةً يمكن التحكم بها، فهناك خطوط مستقيمةً ومائلة وأيضًا خطوط بسماكات مختلفة وأيضًا قد تكون متقطعة، هذه الخواص توفّر للخطوط مرونةً كبيرة ، تساعد المصمم في توظيفها في الكثير من الأماكن ضمن التصميم، مثل: فصل العناصر عن بعضها أو الإشارة إلى جزئيات محددة ضمن التصميم. الأشكال Shapes تعدّ الأشكال النموذج الأكثر تطورًا من الخطوط، فهي مجموعة من الخطوط المشكلة معًا حتى تكون شكلا ما، فهناك المربعات والمستطيلات والدوائر وغيرها من الأشكال الأكثر تعقيدًا، وتستخدم الأشكال في تكوين عناصر أخرى، أو في جمع وفرز وإعادة ترتيب مجموعة من العناصر التي قد تكون من نوع واحد ضمن التصميم. 219 وزارة التعليم tion 2024-1446

المساحة البيضاء White Space المساحة البيضاء أو السلبية هي أي منطقة ضمن التصميم لا تحتوي على شيء، وعكسها المنطقة التي تحتوي على العناصر وتسمى المناطق الإيجابية ومع البساطة الشديدة لهذا العنصر (فهو لا يحتوي على شيء إلا أن المساحة البيضاء مهمة جدًا ضمن التصميم، فهي تساعد على إبراز بعض العناصر والمفاهيم بشكل مبسط للمستخدم، بالإضافة إلى أنها مهمة من أجل فرز باقي العناصر وجعلها غير مزدحمة ضمن التصميم. الكتلة Volume بعض التصاميم تظهر بشكل ثنائي البعد، مثل المنشورات وواجهات الاستخدام، أي أنها لا تملك سوى بعدين عرض وارتفاع، وهناك تصاميم أخرى تظهر بأشكال ثلاثية الأبعاد ضمن التصميم والعناصر التي تعبر عن هذه ما تسمى بالكتلة، حيث يتم التعبير عن البعد الثالث بشكل وهمي الأشكال هي ضمن التصميم. Google شكل رقم (2-6) مثال على المساحة البيضاء شكل رقم (621): مثال على الكتلة القيمة Value تستخدم القيمة للتعبير عن المناطق المعتمة والمناطق المنارة، وينتج عنها الظلال التي تعطي التصميم نوعًا من الواقعية وتستخدم القيمة من أجل إيجاد التباين بين العناصر المختلفة، وغالبًا من أجل توضيح البعد الثالث ضمن التصميم. اللون Color تعد الألوان من أكثر العناصر المستخدمة ضمن التصاميم، أيضًا للألوان تفاصيل كثيرة ومعقدة تجعل استخدامها يقدم الكثير من الميزات، حيث تستخدم الألوان لإيجاد التباين والتركيز على جزئيات محددة، وأيضًا من أجل إرسال معان مختلفة حسب درجة اللون = المستخدمة وحسب نوع الشريحة المستهدفة من الجمهور. R G C M K Y B 220 وزارة التعليم 2024-1446 ation

مبادئ التصميم المرئي: هناك مجموعة من المبادئ التي تضبط عملية استخدام عناصر التصميم و هي: 1 الوحدة Unity الوحدة تعني ترتيب العناصر المكونة للتصميم وفق مجموعة محددة بطريقة يسهل على المستخدم تمييزها، حيث إن سرد العناصر بشكل عشوائي وعدم ترتيبها يربك فهم المستخدم للتصميم. = شكل رقم (22-6): مثال على الوحدة 2. التسلسل الهرمي Hierarchy يعد التسلسل الهرمي مهما جدًا ضمن أي تصميم، فهو يوضح أهمية العناصر بالنسبة لبعضها فكلما كان العنصر أكبر زادت أهميته أكثر ، ويستخدم التسلسل الهرمي بشكل عام ضمن النصوص، حيث تظهر العناوين الرئيسة في النصوص المكتوبة في الكتب بحجم كبير ، وتأتي العناوين الفرعية بأحجام أقل ثم النصوص بالحجم الطبيعي، هذا التسلسل الهرمي للنصوص يوضح ترتيبها للمستخدم بشكل منطقي عند القراءة. 2030 نص أقل حجما النص الأكبر والأهم ثروتنا الأولى التي لا تعادلها ثروة مهما بلغت شعب طموح، معظمه من الشباب، هو فخر بلادنا وضمان مستقبلها بعون الله. شكل رقم (623) مثال على التسلسل الهرمي 221/⠀⠀ وزارة التعليم Ministry of Education 2024-1446

3 التوازن Balance 1 تفضل عين الإنسان العناصر المريحة لها، فالتصاميم أو المنتجات التي تكون فوضويةً لا تريح العين عند النظر إليها، لذلك غالبًا ما يقوم المستخدم بإزاحة نظره عنها، والتوازن يتمثل في ترتيب العناصر مجتمع ديون ممكى وبيئة عمل متميزة لهو سوق بطريقة منطقية متوازنة ضمن أي تصميم فمثلا ليس من المنطقي تجميع كل المكونات أو العناصر ضمن جزئية محددة من التصميم وترك باقي أجزاء التصميم فارغة، فهذا يسبب عدم التوازن في التصميم .4 التباين Contrast 3 شكل رقم (624): مثال على التوازن يعتمد التباين على إعطاء قيمة مخالفة لبعض العناصر ضمن التصميم بشكل مبالغ = فيه، بهدف جعلها مختلفةً تماماً عن باقي التصميم، أي جعلها متباينة بهدف إبرازها لعين المستخدم، وكمثال عن التباين نجد أن أزرار الحذف غالبًا ما تكون بلون أحمر مختلف عن باقي التصميم، لكي يستطيع المستخدم تمييزها عن باقي العناصر بسهولة. 5. الهيمنة Dominance 自 حذف العمل ؟ بمجرد حذفها لا يمكن استعادتها. هذا يتم حذف شيئ ما. ب الوصف لشرح البطاقة يلغى 2 4 يستخدم هذا المبدأ من أجل إظهار اختلاف ملحوظ لأحد العناصر عن عناصر مشابه له شكل رقم (625) مثال على التباين بشكل واضح، وكمثال عن استخدام الهيمنة نجد أن الشركات تستخدم هذا المبدأ ضمن جدول عرض الأسعار الخاص بالاشتراكات، حيث تجد أن أحد هذه العروض ملون بطريقة مختلفة تمامًا بهدف دفع المستخدم للاشتراك ضمن هذه الحزمة تحديدًا عبر إبرازها بشكل واضح. 222 Watha باقات الإشتراك الرئيسية / الباقات حافظات ایالات دعوات ابدی الصلبة سجل فان تسجيل دخول الباقة التجريبية الباطلة الأساسية مسبق الدفع باقة الأعمال بدا الان بعير المترات والدريات ابداعان خطط الاشتراك تواصل معنا شكل رقم :(626) مثال على الهيمنة English وزارة التعليم Ministry of Education 2024-1446

النشاط التطبيقي قدم عرضًا تقديميًا بمشاركة زملائك عن مجموعة من المواقع الإلكترونية توضح من خلالها واجهة كل موقع مع نقد لطريقة توظيف مبادئ التصميم المرئي وعناصره. يعد موقع الصفحة الرئيسة هيئة الحكومة الرقمية (dga.gov.sa) من المواقع الناجحة في تطبيق مبادئ التصميم المرئي وعناصره، حلل التصميم في الشكل المرفق: هيئة Digital الحكومة Government الرقمية Authority الهيئة الخدمات البرامج الوثائق التنظيمية المؤشرات والجوائز المركز الإعلامي أخبار الهيئة أفق رقمي واعد لبناء مستقبل الحكومة الرقمية التكون المملكة العربية السعودية نموذجا رائدا في تقديم خدمات رقمية محورها المواطن والمقيم والزائر والجهات الحكومية والقطاع الخاص هيئة Digital الحكومة Government الرقمية Authority الجدية تبني الجهات الحكومية لنهج التطوير GOV.SA English 1683 %90 %20 رقمي WSONE 2030 أرشيف الأخبار الهيئة تنظم ورشة عمل التعريف بالمورد التقني المشترك لأنظمة التعليم والتدريب نظمت هيئة الحكومة الرقمية بالتعاون مع المركز الوطني للتعليم الإلكتروني ورشة عمل. بعنوان التعريفة بالصورة التقني الهيئة تعقد ورشة عمل حول الهيئة تعقد ورشة عمل حول الحكومة الرقمية تطلق خدمة "بلاغ رقمي" لتحسين الاستجابة "أهمية تبني الجهات الحكومية "أهمية تبني الجهات الحكومية ورفع رضا... الطلقت هيئة الحكومة الرقمية خدمة "بلاغ رقمي من خلال مركز امر بهدف رفع مستوى المتباركة والتفاعل بين الجهات الحكومية وال 2023-06-14 لمنهجية التطوير.... عقدت هيئة الحكومة الرقمية، بحضور ما يقارب 100 مشارك من 100 جهة حكومية ورشة عمل بعنوان هدیه تبني الجهات الحكوم 2023-06-04 لواجهات برمجة.... عادت هيئة الحكومة الرقمية ممثلة بإدارة التميز والاستدامة الرقمية ورشة عمل حول الصمدية تبنى الجهات الحكومية تواجهات برسية 3023-05-31 2023-06-18 223 وزارة التعليم 2024-1446

الهدف الثاني أن يكون الطلبة قادرين على تحويل المخطط الهيكلي من التصميم الرقمي إلى التصميم المرئي. . إنشاء وإدارة الأدلة Guides: عند العمل على التصميمات، يمكن استخدام أدلة لمحاذاة الكائنات أو إدارة التباعد بين العناصر على لوح الرسم. تعمل الشبكات كإطار يمكن من خلاله تنظيم عناصر التصميم، مثل: (الصور ، الحروف الرسومية ، الفقرات وتضمن تناسق التخطيط. BD لإنشاء دليل رأسي يُمرّر المؤشر فوق الحد الأيسر للوح الرسم حتى تظهر الأيقونة مع الاستمرار بالنقر فوق الرمز ثم سحبه إلى الموضع المطلوب. لإنشاء دليل أفقي، تُمرّر الفأرة فوق الحد العلوي للوح الرسم حتى تظهر الأيقونة. ثم السحب والإفلات إلى الموضع المطلوب. ب. التوافق مع الأدلة الذكية عند تحريك الكائنات تظهر بعض الأدلة التي توظف الذكاء الاصطناعي؛ لقياس التناسب والمسافات بدقة أثناء التصميم مما يساعد في المحاذاة للكائنات ، وهناك نوعان من الأدلة: أدلة زرقاء: توضح متى تتم محاذاة كائن مع كائنات أخرى أو عندما يتم توسيطه عموديًا وأفقيًا في منتصف لوح الرسم أو الكائن الأصل الذي يحتوي عليه، عندما يتم عرض هذه الأدلة، سينجذب الكائن إليها تلقائيًا وسيساعد في تحديد موضعها. وزارة التعليم Ministry of Education 2024-1446 # 224

أدلة زهرية: تعرض المسافة بالبكسل بين الكائنات المجاورة وحواف لوح الرسم. النشاط التطبيقي OCUMENT ARTETS Cop انقل المخطط الهيكلي من التصميم الرقمي إلى التصميم المرئي موظفا مبادئ التصميم الرقمي من خلال مهارات التصميم في برنامج Adobe XD. إثراء ↑ - قائمة اختصارات لوحة المفاتيح لبرنامج Adobe XD 225 وزارة التعليم Ministry of Education 2024-1446

وزارة التعليم Ministry of Education 2024-1446 أمثلة لمشاريع بعد أن يتقن الطلبة مهارة التصميم المرئي يمكن الاستفادة من أفكار المشاريع التالية لعمل مشروع التخرج: 1 تصميم موقع لشركة تخص الفريق تقدم خدمات التصميم الرقمي، من تصميم هويات، إعلانات، تغليف، بطرق مبتكرة تعتمد على النمذجة، والواقع الافتراضي والمعزز صمم مع مجموعتك مشروعًا لواجهة موقع إلكتروني يخدم قطاع المحاماة من ضمن الأيقونات: أيقونة للقضايا. أيقونة للاستشارات. أيقونة لخدمة العملاء. أيقونة خاصة بالتقارير. أيقونة خاصة بالمكتبة. - أيقونة خاصة بالملفات. أيقونة خاصة بالجلسات. معلومات عامة وطرق للتواصل. . . . . . . . . . ..... . . . . . . . . . . .. .. .. .. . . . . . . . . . . . . . . . . . . ......... 2 ............. 3 تصميم موقع متجر لبيع منتج من تصميمك. ..... 4 مشروع يختص بمطعم وجبات سريعة صمم واجهة موقع تعرض عدد من المنتجات الخاصة بالوجبات والعصائر والسلطات، وارسم المخطط الهيكلي WireFrame في صورته الأولية، ثم انقل الرسم الأولي إلى التصميم الرقمي ثم التصميم المرئي. ....... 5 اطلع على مواقع لمتاحف عالمية أو معامل ومختبرات رقمية، يمكن أن تستوحي منه تصميما لموقع لمعرض مدرستك تستخدم فيه تقنية الواقع المعزز 226

6 تصميم موقع لاستديو استثماري يقدم خدمات التصوير الرقمي، كما يبيع صورًا من إبداعك. ويعرض إعلانا جاذبًا من تصميمك. تصميم التفاعل إن المواقع المصممة واجهاتها تصميماً احترافيًا تقدّم بعدًا آخر أكثر من مجرد تصميم جميل، فهي تعبر عن هوية علامة المنظمة وتجعل الجماهير المستهدفة تتعرف على ما تقدمه تلك العلامات من منتجات أو خدمات سواء من خلال التصميم المرئي أو من خلال نصوص المحتوى، وذلك بالاعتماد على مبادئ التصميم. ستساعد إستراتيجية التصميم أعضاء فريق التصميم في تكوين فهم مشترك حول التفاعلات التي يجب أن تحدث لتحقيق أهداف المستخدم. 227 وزارة التعليم Ministry of Education 2024-1446