دورة تصميم مواقع متجاوبة

الدرس 1 • أنظمة الشبكات الشائعة: شبكات 4 و8 و12 عمود ومتى استخدام كل منها

غوص في أنظمة الشبكات ذات الأعمدة 4 و8 و12 وتعلم متى يكون كل منها أكثر فعالية. ستُصمم تخطيطات شبكات متجاوبة، تحدد الفتحات والحواف، وتربط المكونات بالأعمدة لتركيبات متوقعة ومرنة.

الدرس 2 • نموذج الصندوق وأنظمة التباعد ومقياس التباعد المتجاوب (الحواف والحشوات)

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

الدرس 3 • التسلسل البصري عبر نقاط الانهيار: الحفاظ على التركيز والتدفق

تعلم كيفية الحفاظ على تسلسل بصري واضح مع تكيف التخطيطات من الهواتف إلى سطح المكتب. ستُرسم مقاييس الطباعة والتباعد وبارزية المكونات إلى نقاط الانهيار بحيث يظل التركيز وتدفق القراءة وقابلية الاستخدام متسقين.

الدرس 4 • مبادئ التصميم المتجاوب: التخطيطات السائلة والصور المرنة واستعلامات الوسائط

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

الدرس 1 • التفاعلات الدقيقة والإمكانيات: مناطق النقر والأيقونات والتغذية الراجعة

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

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

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

الدرس 3 • التعامل مع النوافذ المنبثقة والتراكبات والقوائم خارج القماش على الهواتف وسطح المكتب

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

الدرس 4 • أنماط التنقل حسب حجم الشاشة: شريط الأعلى والتنقل اللاصق وقوائم الهامبرغر

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

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

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

الدرس 2 • المكونات داخل النص وإعادة التدفق: التعامل مع الشارات والأسعار والوصف القصير

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

الدرس 3 • التخطيطات التكيفية مقابل السائلة: متى التبديل من التكديس إلى متعدد الأعمدة

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

الدرس 4 • توسيع الطباعة والإيقاع: مقاييس الخط المتجاوبة وطول السطر والمسافة بين السطور

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

الدرس 1 • استراتيجيات المحتوى المفقود والنصوص الطويلة: حاملات الأماكن والاقتصار والمحتوى القابل للتوسع

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

الدرس 2 • الشاشات الصغيرة جداً والتعامل مع القابلة للطي/الأفقي: التخطيطات المكثفة والمناطق الآمنة

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

الدرس 3 • تغييرات الاتجاه والتغيير الديناميكي للحجم: الحفاظ على استقرار التخطيط ومنع تحول التخطيط

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

الدرس 4 • رسم سلوك نقاط الانهيار: بالضبط ما يتغير عند كل نقطة انهيار (التنقل والشبكة والصور والخط)

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

الدرس 1 • التنقل بلوحة المفاتيح وحالات التركيز لتصاميم الصفحة الواحدة

أتقن أنماط التنقل بلوحة المفاتيح لتصاميم الصفحة الواحدة المتجاوبة. ستُصمم ترتيب تبويب منطقي وحالات تركيز مرئية وروابط تخطي وإدارة التركيز للنوافذ المنبثقة والتراكبات وأقسام التنقل داخل الصفحة.

الدرس 2 • تباين اللون وأنظمة الألوان يمكن الوصول إليها: فحوصات التباين واللوحات يمكن الوصول إليها

تعلم بناء أنظمة ألوان يمكن الوصول إليها تعمل عبر الأوضاع الفاتحة والداكنة وعالية التباين. ستتدرب على فحص نسب التباين وتحديد الرموز الدلالية وتجنب الإشارات القائمة على اللون فقط للمعلومات الهامة.

الدرس 3 • أهداف اللمس ومعايير منطقة الإصابة: الأحجام الدنيا والتباعد للعناصر القابلة للنقر

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

الدرس 4 • أساسيات ARIA والتسمية للتنقل وقوائم المنتجات ودعوات العمل

افهم أساسيات ARIA لتحسين دعم قارئ الشاشة في التخطيطات المتجاوبة. نغطي أدوار المعالم وتسمية التنقل وقوائم المنتجات ودعوات العمل بالإضافة إلى تجنب الاستخدام الخاطئ الذي يربك تقنيات المساعدة.

الدرس 1 • كتابة وثيقة نقاط الانهيار والسلوك: تعليمات دقيقة تشبه CSS دون كود

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

الدرس 2 • إعداد الأصول وإرشادات الصور/التصدير: الصيغ والأحجام والمتغيرات المتجاوبة

تعلم كيفية إعداد أصول وتصديرات جاهزة للإنتاج للواجهات المتجاوبة. نغطي صيغ الصور والأحجام والمتغيرات عالية الكثافة والتحسين والتسمية بحيث يمكن للمطورين دمج الأصول بأقل إعادة عمل.

الدرس 3 • قائمة تحقق التواصل للتسليم: الافتراضات والتفاعلات وحالات الحافة وإرشادات الاختبار

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

الدرس 4 • مواصفات التصميم المقدمة: رموز التباعد ومقياس الخط واللوحة وحالات المكون

افهم أي مواصفات تصميم يحتاجها مطورو الواجهة الأمامية لبناء متجاوب متسق. ستحدد رموز التباعد ومقاييس الخط ولوحات الألوان وحالات المكون التي ترتبط نظيفاً بالتنفيذ.

الدرس 1 • إرشادات التصوير والصور المنتجية: الإعداد والخلفيات ونسب العرض إلى الارتفاع المتسقة

أقم معايير التصوير والصور المنتجية التي تدعم علامة تجارية متماسكة وطموحة. ستحدد الإعداد والخلفيات والإضاءة والقص ونسب العرض إلى الارتفاع التي تتوسع نظيفاً عبر التخطيطات المتجاوبة.

الدرس 2 • تصميم الأزرار والنماذج ومكون النشرة الإخبارية الموجه نحو التحويلات

صمم أزرار ونماذج ومكونات النشرة الإخبارية التي تشعر بالعلامة التجارية مع دفع التسجيلات والمبيعات. ستحدد الحالات والتسلسل والنصوص الدقيقة والسلوك المتجاوب الذي يقلل الاحتكاك ويدعم التحويلات.

الدرس 3 • قواعد التوافق للإثبات الاجتماعي والشهادات لتتناسب مع نبرة العلامة

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

الدرس 4 • إنشاء نظام بصري بسيط: اللوحة والتزاوج الطباعي وقواعد الأيقونات

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