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

موقع Apple من أفضل الأمثلة على النوع ده من التصميم. وبدل ما نفتح الموقع وننسخ المقاسات والألوان زي ما هي، الأهم إننا نفهم إيه القرارات اللي بتخليه يبان Premium بالشكل ده، وبعدها نشوف إزاي نطبق نفس طريقة التفكير عمليًا على WordPress وElementor.

جاي مخصوص عشان الأكواد؟

هتلاقي كل الأكواد المستخدمة في التنفيذ جاهزة للنسخ في جزء واحد.

اذهب للأكواد المستخدمة ↓

ليه موقع Apple بيبان Premium رغم إن تصميمه بسيط؟

أسهل طريقة تقلد بيها أي Website إنك تفتح الـInspector، تعرف حجم الخط والـPadding والألوان المستخدمة، وبعدها تنقل الأرقام دي عندك.

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

عشان كده قبل ما نبدأ التنفيذ على WordPress، خلينا نفكك أهم الحاجات اللي Apple مطبقينها.

1. الـVisual Hierarchy أو التسلسل البصري

أول حاجة واضحة جدًا في تصميم Apple هي إنهم محددين للمستخدم المفروض يشوف إيه الأول، وإيه ييجي بعده.

في أغلب الـHero Sections مثلًا، هتلاقي إن الصورة أو المنتج هو العنصر الأساسي، بعده العنوان، بعده وصف بسيط، وبعدها الـCTA.

مش كل العناصر بتحاول تاخد انتباهك بنفس القوة.

وده من أهم قواعد الـWeb Design: لو كل حاجة في الصفحة مهمة بنفس الدرجة، مفيش حاجة فعلًا هتبان مهمة.

وأنت بتصمم أي Section، اسأل نفسك:

  • إيه أول حاجة عايز المستخدم يشوفها؟
  • إيه الحاجة اللي بعدها؟
  • إيه الأكشن اللي المفروض يعمله بعد كده؟

بعدها استخدم الحجم، الوزن، الألوان والمسافات عشان تعمل الترتيب ده بصريًا.

2. المساحات والـWhite Space

واحدة من أكتر الحاجات اللي Apple معتمدين عليها هي المساحات.

هم مش بيحاولوا يملوا كل Pixel في الشاشة بعناصر. بالعكس، كل منتج بياخد مساحة كبيرة جدًا حواليه، وده بيدي الصورة والعنوان فرصة إنهم ياخدوا تركيز المستخدم.

الـWhite Space هنا مش مساحة ضايعة. هي جزء من التصميم نفسه.

وأنت بتطبق الفكرة دي، ركز على:

  • Padding واضح داخل كل Section.
  • مسافات ثابتة بين العنوان والوصف والزرار.
  • مساحة كافية بين كل Section والتاني.
  • عدم ضغط كمية كبيرة من المحتوى داخل مساحة صغيرة.

مش شرط تستخدم نفس أرقام Apple بالـPixel. الهدف إنك تفهم النسب والإيقاع البصري الموجود في الصفحة.

3. الـTypography

Apple مش محتاجة تستخدم عدد كبير من الخطوط عشان توصل لشكل احترافي.

الفرق الأساسي بييجي من تنظيم النص نفسه.

العنوان بياخد حجم واضح، الوصف أصغر، والزرار له وزن مختلف. وكمان المحتوى نفسه مختصر بشكل كبير، خصوصًا في صفحات المنتجات والـHomepage.

وده بيخلي المستخدم يقدر يعمل Scan للصفحة بسرعة من غير ما يحس إنه قدامه Block ضخم من الكلام.

وقت التنفيذ ركزت أكتر على:

  • Font Size
  • Font Weight
  • Line Height
  • Letter Spacing
  • عرض الـText Container

4. الصور جزء من التصميم نفسه

لو بصيت على أغلب Sections في موقع Apple هتلاحظ إن الصورة مش مجرد عنصر موجود بجانب الكلام.

في حالات كتير الصورة نفسها هي العنصر الرئيسي في التصميم.

مكان المنتج، حجمه داخل الـSection، المساحة الفاضية حواليه وطريقة ظهوره كلها بتفرق في النتيجة النهائية.

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

في بعض أجزاء التنفيذ استخدمت الصور كـBackground Images بدل Image Widget، عشان أقدر أتحكم بشكل أدق في مكانها وحجمها داخل الـSection.

5. الـConsistency

لو عندك 3 Product Cards جنب بعض في موقع Apple، هتلاقي إنهم بيتعاملوا كأنهم جزء من System واحد.

نفس أحجام الصور تقريبًا، نفس الـTypography، نفس مكان الأزرار، نفس المسافات ونفس الـBorder Radius.

وده واحد من أهم الأسباب اللي بتخلي الموقع كله يبان مرتب ومترابط.

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

6. الـInteractions والـAnimations

Apple مش معتمدة فقط على شكل الـWebsite وهو ثابت.

في Sections بتتفاعل مع المستخدم، وفي Hover Effects وصور بتتغير حسب الاختيار وAnimations مختلفة.

الفرق هنا إن الـInteraction ليه وظيفة، ومش موجود فقط عشان الصفحة تتحرك.

في صفحة الساعة مثلًا، أضفت Hover Zoom بسيط على صور المنتجات عشان الـCards يكون فيها إحساس بالتفاعل من غير ما الحركة تبقى مبالغ فيها.

من التحليل للتنفيذ على WordPress

بعد ما فهمنا المبادئ الأساسية، بدأت التنفيذ على صفحة WordPress جديدة تمامًا باستخدام Elementor.

الهدف هنا مش إننا نعمل Copy حرفي من Apple. الهدف إننا نشوف هل نقدر ناخد نفس طريقة التفكير ونترجمها إلى Website شغال فعلًا على WordPress.

إعداد WordPress والاستضافة

في التنفيذ استخدمت Cloudways لتجهيز السيرفر وتثبيت WordPress.

بعد إنشاء السيرفر، WordPress بيتثبت مباشرة، وبعدها تقدر تدخل على الـDashboard وتبدأ تضيف Elementor وتبني الصفحات.

الاستضافة المستخدمة

لو محتاج تجرب Cloudways، تقدر تستخدم اللينك والكود الخاص بيا:

تجربة Cloudways

كود الخصم: NOURMANSOUR

الكود بيديك خصم 25% على أول شهرين.

بناء أول Hero Section

لو فككنا أول Hero Section هنلاقي إن الـStructure نفسها بسيطة جدًا:

  • عنوان
  • وصف
  • زرار
  • صورة كبيرة

وده مثال واضح إن الشكل الـPremium مش شرط يكون ناتج عن Structure معقدة.

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

بعدها بدأت أظبط الـTypography والمسافات والـBackground Image والزرار، وأقارن كل مرة بالمرجع.

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

بناء Header شبيه بموقع Apple

بعد الـHero بدأت أبني الـHeader.

الـHeader نفسه بسيط: Logo، Navigation وSearch Icon. لكن أكتر حاجة بتدي له شكل مميز هي الخلفية شبه الشفافة والـBlur أثناء الـScroll.

عشان نعمل ده على WordPress احتجنا CSS بسيط.

تثبيت الهيدر وإضافة Blur Effect

أولًا أضف الكلاس التالي إلى الـHeader Container من:

Advanced → CSS Classes

apple-header

بعدها أضف الكود التالي:

.apple-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

position: fixed بيخلي الهيدر يفضل ثابت أعلى الشاشة أثناء الـScroll.

أما:

backdrop-filter: saturate(180%) blur(20px);

فهو المسؤول عن تأثير الـBlur على المحتوى الموجود خلف الهيدر.

استخدمنا كمان -webkit-backdrop-filter عشان دعم أفضل على المتصفحات المعتمدة على WebKit.

وبما إن الهيدر بقى Fixed، راعي إن أول Section في الصفحة يكون عنده مساحة كافية فوق عشان المحتوى ميدخلش تحت الهيدر.

إكمال الـHomepage

بعد أول Section والهيدر، بدأت أجزاء كبيرة من الـHomepage تبقى أسرع في التنفيذ.

وده لأن Apple نفسها بتكرر نفس الـPatterns.

بدل ما أبني كل حاجة من البداية، بعمل Duplicate للـSection الموجود، وبعدها أغير الصورة والنص والمقاسات اللي محتاجة تتغير.

وفي الجزء اللي فيه اتنين Cards جنب بعض، استخدمت Container أفقي، وضفت جواه اتنين Containers بنفس الـStructure والمسافات.

وده تطبيق مباشر لمبدأ الـConsistency اللي اتكلمنا عنه في البداية.

إزاي تخلي كلمة واحدة في العنوان بفونت مختلف؟

في أحد العناوين كنت محتاج أخلي كلمة واحدة فقط تاخد Script Font مختلف عن باقي العنوان.

بدل ما أعمل Heading منفصل لكل كلمة، استخدمت span داخل نفس العنوان.

مثلًا:

Tofaha <span class="script-word">air</span>

بعدها استوردت خط Allura:

@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

وبعدها أضفت Style للكلمة:

.script-word {
  font-family: "Allura", cursive;
  font-size: 1.5em;
  color: #0071e3;
}

استخدام em هنا مهم لأن حجم الكلمة بيبقى مرتبط بحجم الـHeading الأساسي.

يعني لو غيرت حجم العنوان بعد كده، الكلمة المختلفة هتكبر وتصغر معاه بشكل نسبي بدل ما يكون حجمها ثابت بالـPixels.

بناء صفحة Apple Watch

بعد ما خلصت الأفكار الأساسية في الـHomepage، انتقلت لصفحة Apple Watch لأنها فيها Components مختلفة نقدر نطبق عليها نفس المبادئ.

أول جزء كان عبارة عن Product Cards، وكل Card فيها:

  • صورة المنتج
  • عنوان
  • وصف
  • السعر
  • CTA Buttons

بدل ما أبني الثلاث Cards كل واحدة بشكل منفصل، ظبطت أول Card بالكامل وبعدها عملت Duplicate.

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

إضافة Hover Zoom للصور

عشان الـProduct Cards يكون فيها Interaction بسيط، ضفت Zoom للصورة عند الـHover.

من Elementor استخدمت Transform، وخليت الـScale في الحالة العادية كما هو، وبعدها زودته بشكل بسيط في Hover State.

المهم هنا إن التأثير يفضل خفيف.

لو الـScale كبير جدًا، الحركة هتشد انتباه المستخدم أكتر من المنتج نفسه، وبالتالي الـAnimation تبدأ تضر التصميم بدل ما تحسنه.

ضبط الموقع للموبايل

أغلب التنفيذ كان مركز على نسخة الـDesktop، لكن الـResponsive جزء أساسي من أي Website فعلي.

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

من التعديلات اللي اتعملت:

  • إخفاء الـDesktop Navigation.
  • تقليل أحجام الخطوط.
  • تقليل الـPadding.
  • تعديل مكان وحجم الصور.
  • استخدام صور أنسب لشاشة الموبايل.
  • تغيير بعض الـLayouts من Row إلى Column.

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

إيه اللي نقدر نتعلمه من تصميم Apple؟

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

معظم الإحساس الـPremium جاي من تطبيق أساسيات Web Design بشكل دقيق جدًا ومتناسق:

  • Visual Hierarchy واضح.
  • White Space كافي.
  • Typography بسيطة ومنظمة.
  • الصور متوظفة كجزء من التصميم.
  • Consistency بين الـComponents.
  • Interactions لها وظيفة واضحة.

لما تفهم المبادئ دي، تقدر تستخدم نفس طريقة التفكير في أي Website بتبنيه، سواء على WordPress أو أي Platform تانية.

كل الأكواد المستخدمة

لو وصلت للمقالة مخصوص عشان تنسخ الأكواد، دي النسخة الكاملة المستخدمة في التنفيذ.

@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

.apple-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.script-word {
  font-family: "Allura", cursive;
  font-size: 1.5em;
  color: #0071e3;
}

الكلاسات المستخدمة

كلاس الهيدر:

apple-header

كلاس الكلمة المختلفة داخل العنوان:

script-word

مثال على استخدامه داخل Heading:

Tofaha <span class="script-word">air</span>

فين تضيف الأكواد في WordPress؟

لو بتستخدم Elementor Free، تقدر تضيف الـCSS من:

WordPress Dashboard → Appearance → Customize → Additional CSS

الصق الكود كامل واعمل Publish.

أما الكلاسات زي apple-header فتضيفها للعنصر من:

Elementor → Advanced → CSS Classes

والـHTML الخاص بكلمة script-word تكتبه مباشرة داخل حقل الـHeading.

الخلاصة

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

ابدأ بالأساسيات: رتب انتباه المستخدم، اضبط المسافات، خلّي الـTypography واضحة، استخدم الصور بشكل مقصود وحافظ على الـConsistency.

بعدها أي CSS أو Interaction تضيفه هيكون بيكمل Design قوي موجود بالفعل.

ولو فيه Website معين حابب تشوفه في الجزء الجاي من السلسلة، اكتب اسمه في التعليقات.