يستخدم تصميم الويب سريع الاستجابة (RWD) العلامة الوصفية لإطار العرض التي توفر توجيهات المتصفح للتحكم في أبعاد الصفحة وقياسها.
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
يستخدم موقع الويب المصمم باستخدام RWD شبكات قائمة على السوائل باستخدام Bootstrap ، والصور المتجاوبة التي تتناسب مع حجم المتصفح ، عن طريق تعيين خاصية max-width إلى 100٪ واستعلامات وسائط CSS3 لتخطيط الصفحة.
يتم تعيين حجم النص على عرض منفذ العرض (vw) للحصول على تنسيق سريع الاستجابة.
مرحبًا بالعالم h1> مع "حجم الخط: 10vw" مضمنة فيه كنمط.
بهذه الطريقة يتم ضبط النص على نافذة المتصفح.
تُستخدم استعلامات الوسائط أيضًا في تصميم الويب سريع الاستجابة ، حيث يمكنك استخدام أنماط مختلفة لعناصر الصفحة بناءً على عرض نافذة المتصفح.
شاشةmedia و (أقصى عرض: 800 بكسل) {
.left ، .main ، .right {
العرض: 100٪؛ / * يكون العرض 100٪ ، عندما يكون إطار العرض 800 بكسل أو أصغر * /
}
}
Bootstrap هو إطار عمل مجاني للواجهة الأمامية لـ HTML و CSS.
يوفر Bootstrap قوالب للنماذج والأزرار والجداول والتنقل ومربعات الحوار المشروطة ودوامات الصور ومكونات JavaScript الإضافية.
يوفر Bootstrap مرونة لسهولة الاستخدام ، وميزات سريعة الاستجابة ، ونهج Mobile-First ، وميزات متوافقة مع المستعرض.
اتجاهات تصميم الويب سريع الاستجابة –
توضيح –
الرسم التوضيحي هو تمثيل مرئي للنص أو المفهوم أو العملية.
يمكن أن تكون الرسوم التوضيحية من أنواع مختلفة ، في سياق التسويق الرقمي ، هذه هي الرسوم البيانية. الرسوم البيانية هي التمثيل المرئي للمعلومات والبيانات التي يمكنها تقديم المعلومات بسرعة.
الوحشية –
يتبنى تصميم الويب الوحشي نهجًا غير تقليدي لتصميم مواقع الويب ؛ يتحدى تصميم الويب التقليدي.
يؤثر التصميم الجرافيكي على مثل هذه المواقع ، فلا تحتوي هذه المواقع على رؤوس أو تذييلات أو قوائم.
صممت هذه المواقع عن عمد صفحات ويب غير مصقولة بامتداد "الخام" الجاذبية الجمالية المرئية من شأنه أن يزعج المستخدمين.
يستخدم موقع الويب الوحشي الخطوط الأساسية والصور الكبيرة و HTML المشفر يدويًا وتأثير التمرير غير المعتاد ، مع تمرير الماوس.
باستخدام نهج غير تقليدي تجاه تصميم الويب ، يفتح المطورون إمكانيات لتجارب مستخدم فريدة لجذب انتباه المستخدم.
رمز موقع الويب غير مصقول وغير مصقول ، ويحتوي القسم الرئيسي للموقع على تصميم مضمن بسيط وترميز أساسي.
إنه اختلاف كبير عما تراه عادة في معظم المواقع الإلكترونية الحديثة.
الطباعة –
الطباعة هي فن يتم تطبيقه على نمط وترتيب ومظهر الحروف والأرقام والرموز ، باستخدام الخط المناسب.
إنه تمثيل مرئي للكلمة المكتوبة. سيحدث الخط المختار وكيف تعمل مع عناصر HTML المختلفة في سمة التخطيط فرقًا كبيرًا.
استخدام الطباعة –
يؤدي استخدام الخطوط المتناسقة إلى تحسين شكل ومظهر موقع الويب وتصميم الويب العام.
يُحسِّن الوضع الصحيح للكلمات والحروف من سهولة قراءة موقع الويب.
يمكن تصميم عناصر HTML باستخدام فئات إطار عمل Bootstrap.
صور ملف تعريف مدورة –
توفر صورة الملف الشخصي الدائرية تركيزًا فريدًا بين الصناديق.
يمكن عرض الوجوه بشكل صحيح في صورة دائرية. تؤكد صور الملف الشخصي الدائرية على الوجوه أكثر من الوجوه المربعة ؛ تساعد المستخدمين على التمييز بين أسماء الملفات الشخصية والمحتوى.
واجهات المستخدم الملونة –
نصيحة 1. تعلم قاعدة 60-30-10 –
تأتي القاعدة 60-30-10 من التصميم الداخلي. يجب أن تكون درجة اللون السائدة 60٪. يجب أن يكون اللون الثانوي 30٪ ، وأن يكون 10٪ لهجات.
نصيحة 2. التباين صديق –
استخدام الألوان المتناقضة يجعل عنصر واجهة المستخدم الفردي ملحوظًا.
من غير المرجح أن تلفت الانتباه مثل هذه العناصر التي لها نفس ظلال الألوان. الألوان المتباينة ممتعة لأعيننا لأنها تسمح بإدراك العناصر المرئية تدريجياً. سيؤدي مزج الألوان بالتناسب المناسب إلى جعل واجهة المستخدم تبدو أنيقة.
النصيحة 3. اسعى جاهدًا لتحقيق تناغم الألوان –
الجاذبية واختيار الألوان تحقق الانسجام.
يحتاج موقع الويب إلى تناغم الألوان لتحقيق انطباع أول جيد.
النصيحة 4. اسرق الأفكار من الطبيعة –
تركيبات الألوان الطبيعية قريبة دائمًا من الكمال.
توفر مواسم الطبيعة مزيجًا جيدًا من الألوان ؛ مزيج الألوان هذا يحقق تصميمًا جيدًا.