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