Apple
غرفة بيضاء بها مفتاح أزرق واحد
يُعدّ تصميم آبل نموذجًا للبساطة: لوحة بيضاء تقريبًا، ومساحة بيضاء واسعة، ولمسة زرقاء نابضة بالحياة تُضفي على كل حركة طابعًا مدروسًا. ينصبّ التركيز الأساسي على الطباعة - خط SF Pro، بتباعد سلبي بين الأحرف يقلّ مع ازدياد حجمها، مما يمنح العناوين وضوحًا معماريًا دون أن تبدو مُثقلة. المنتج هو جوهر التصميم: صور كبيرة للمنتج وصور تُجسّد نمط الحياة تُهيمن على التصميم، بينما تتراجع عناصر الكروم إلى إطارات رفيعة، وعناصر تنقل شفافة، وخطوط دقيقة. تتناوب الأقسام على خلفية رمادية فاتحة مع مربعات ملونة بالكامل للمواد الترويجية، مما يخلق إيقاعًا من خلال تغييرات الحجم بدلًا من العناصر الزخرفية.
تصميم الصفحة عبارة عن صفحة كاملة العرض بدون حد أقصى ثابت لعرض الحاوية - تمتد الأقسام من الحافة إلى الحافة، مع كتل نصية متمركزة داخلها عند حوالي 980 بكسل. يتكون شريط التنقل من شريط رئيسي ثابت واحد مع مجلد فرعي إضافي لكل منتج يظهر عند التمرير. التصميم الرئيسي متمركز دائمًا: اسم المنتج كبير، وشعار من سطر واحد، وزران، ثم صورة المنتج التي تملأ المساحة المتبقية من الشاشة. الأقسام مكدسة رأسيًا بإيقاع رأسي واسع (أكثر من 64 بكسل بين الأقسام)، مع تناوب بين خلفيات #f5f5f7 وخلفيات ملونة. الصفحة السفلية عبارة عن صف أفقي واحد من بطاقات الخدمات كاملة العرض (Apple TV+، Fitness+، Music، Arcade)، كل منها عبارة عن كتلة صور مع نص مُضاف وزر. لا توجد أشرطة جانبية، ولا تصميمات محتوى متعددة الأعمدة، ولا تركيبات غير متماثلة - كل شيء متمركز ومكدس ومتماثل.
تُهيمن الصور الفوتوغرافية على اللغة البصرية. تُؤخذ صور المنتجات على خلفية بيضاء نقية أو رمادية فاتحة، دون أي سياق، فالجهاز هو محور الاهتمام، معزولًا ومضاءً. تُعرض صور نمط الحياة في لافتات عريضة، غالبًا مع عناصر مُقتطعة بدقة. تُستخدم تدرجات الألوان (الأزرق الفاتح، والوردي، والأخضر) كخلفية لأقسام المنتجات، لا كعنصر زخرفي. أما الرموز فهي بسيطة وقائمة على الخطوط، بسماكة 1-2 بكسل، وبنفس تدرج الرمادي المستخدم في النص. لا توجد رسومات توضيحية، ولا رسومات تجريدية، ولا مجسمات ثلاثية الأبعاد، باستثناء صور المنتجات نفسها.
لوحة الألوان
ماركة
- Apple Blue
#0071e3— أزرار الإجراءات المعبأة، والحالات المحددة - اللون التفاعلي الوحيد المستخدم باعتدال لجعل كل ظهور ذا معنى. - Link Blue
#0066cc— تم استخدام لون أكثر تشبعًا من لون Apple Blue في حدود الإجراءات المميزة والروابط المضمنة، حيث قد يكون استخدام لون أكثر تشبعًا من لون Apple Blue أمرًا مزعجًا للغاية. - Signal Blue
#2997ff— الإطارات الزخرفية، ومخططات الصور، وحدود الأيقونات - اللون الأزرق الفاتح في النظام، ويستخدم لإضفاء جو مميز بدلاً من التفاعل مع المستخدم.
حيادي
- Carbon
#1d1d1f— النص الرئيسي، وحدود العناوين، وخطوط التنقل، وحدود البطاقات - لون الحبر السائد أسود تقريبًا مع لمحة خفيفة من الدفء. - Frost
#f5f5f7— تتميز صفحة العرض، وخلفية النص الرئيسي، وسطح التذييل باللون الرمادي الفاتح المميز لشركة آبل، وهو أبرد قليلاً من اللون الأبيض النقي. - Ice
#f4f8fb— تعبئة سطحية معبرة، وألوان دقيقة، ونص زر على خلفية داكنة - لون أزرق خفيف يضفي حيوية على القسم دون أن يجعله بارزًا. - Smoke
#333333— نص ثانوي، تعبئة التنقل، حدود الأزرار - لون محايد متعدد الاستخدامات للحدود والأيقونات التي تحتاج إلى قوة أكبر من اللون الرمادي المتوسط. - Graphite
#474747— نص التنقل، وحدود التنقل، وحدود الروابط - تحتل موقعًا وسيطًا بين Carbon و Smoke في التسلسل الهرمي للعناصر. - Ash
#707070— نص التذييل، وحدود القوائم، وحدود التنقل، ونص الجسم الخافت - لون رمادي متوسط للمحتوى الذي يجب أن يكون موجودًا ولكن ليس بارزًا.
الطباعة
من 12 إلى 56 بكسل · 8 خطوات
- SF Pro Display — الاستبدال: Inter · الخطوط العريضة 400, 600, 700 · تستخدم العناوين والنصوص الكبيرة - الأحجام التي تزيد عن 40 بكسل - تنسيق عرض لفتحة أضيق وتتبع سلبي أقوى؛ 700 مخصصة لتصميمات الإعلانات، و400 مخصصة لأسماء المنتجات في المحتوى التحريري.
- SF Pro Text — الاستبدال: Inter · الخطوط العريضة 300, 400, 600 · نص الجسم، والتنقل، والأزرار، والعناوين الفرعية - خط العمل؛ 400 لنص الجسم، و300 للعناوين الفرعية والتسميات المؤهلة، و600 لعناصر التنقل ونص الزر؛ تتناقص المسافة السالبة بين الأحرف بشكل متناسب مع الحجم (من -0.022em إلى 12px إلى -0.01em إلى 44px).
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 12px |
| نصف قطر الزر | 980px |
| نصف قطر البطاقة | 8px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 64px |
| عرض الصفحة | 1440px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Apple وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Ui — خطة سريرية على ورق غير لامع
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- monopo saigon — توهج سائل متقزح الألوان خلف الصمت التحريري - معرض تحريري أحادي اللون يطفو على ضوء منصهر
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- Dub — لوحة تحكم ورق الأرز غير اللامع من لينك
- Seline Analytics — جدول تحليلي هادئ على ورق دافئ
- Ventriloc — مرصد تحريري للبيانات على ورق دافئ - جمرة برتقالية وحيدة تسلط الضوء على دقة اللون الأحادي
- Duolingo — تميمة صف مرحة على ورق أبيض
- Stripe — دفتر حسابات مكتوب بحبر نيلي على زجاج مصنفر
- Notion — دفتر ملاحظات ورقي دافئ تحت شمس الظهيرة
- Hyer Aviation — يحلّ الغسق في قمرة القيادة فوق ورق البرشمان. تلتقي سماء الفجر الباهتة بشعار serif بحجم جسم الطائرة، وتكسر لمسة طينية دافئة واحدة رتابة اللون الأحادي.