وانت شغال بتعمل صفحات ويب في شغلك، أكيد هتلاحظ إن صفحات كتير ليها نفس الـ layouts والتركيبات. ده نتيجة سنين طويلة من البحث في الـ user interface design والـ user experience. وبعدين الشركات المختلفة والـ libraries والـ frameworks بياخدوا الـ best practices دي ويطبقوها.
أمثلة كتير من الـ layouts دي ممكن تشوفها في الـ framework المشهور اللي اسمه Bootstrap. بس فيه frameworks تانية كتير بتقدم تصميمات شبهها برضه.
Top Navbar Layout
المواقع كتير بيكون فيها layout اسمه top navbar عشان توفر مجموعة لينكات أساسية (anchor links) لليوزر. اللينكات دي غالبًا بتودي على الأماكن الرئيسية في الموقع، زي صفحات المنتجات (product pages)، أو صفحات الوظايف (careers pages)، أو صفحة اتصل بنا (contact pages). ده بيدي لزاير الموقع تجربة تصفح (navigation experience) ثابتة ومريحة.
Carousel Layout
المواقع اللي بتركز على المنتجات غالبًا بتستخدم carousel كبير في صفحتها الرئيسية. الهدف منه هو عرض أبرز منتجاتها المميزة (featured products) والخصومات والعروض. الـ carousel ده بيكون فيه عناصر محتوى (content items) بتلف وتتعرض ورا بعضها في مكان الـ carousel كل فترة زمنية ثابتة.
Blog Layout
الـ blog layout بيُستخدم عشان تعرض كذا عنصر محتوى (content items) بأهمية مختلفة. بنشوفه كتير في المواقع الإخبارية اللي مقالات جديدة بتظهر فيها كل يوم حسب الأحداث الجارية.
الـ layout ده غالبًا بيكون فيه مناطق عرض (feature areas) بأحجام مختلفة. وبعدها بتلاقي مجموعة مناطق فيها ملخصات مقالات (article summary areas) بتودي لينكاتها للمقالات الكاملة.
Dashboard Layout
الـ Dashboard layouts بنستخدمها كتير في الـ enterprise software (برامج الشركات الكبيرة) عشان تدير web applications مختلفة. غالبًا بيكون فيها sidebar (قايمة جانبية) للـ navigation (التنقل). ومنطقة المحتوى الرئيسية بيكون فيها forms (نماذج) للـ configuration (الإعدادات) أو بيانات تقارير (reporting data) زي الـ graphs (رسوم بيانية) والجداول (tables). الـ layout العصري ده بيقدم user experience كويسة للمستخدمين في الشركات (business users).
تصميمات تانية (More Layouts)
ممكن تستكشف تصميمات (layouts) أكتر من دي في صفحة الأمثلة بتاعة bootstrap هتلاقيها هنا (Examples · Bootstrap v5.2).
خلي الـ layouts دي في بالك وانت بتبني المواقع والـ web applications بتاعتك. عشان تقدر تقدم للجمهور بتاعك أحسن user experience ممكنة.