
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 کی اصلاح۔
ملتے جلتے انداز
- Studio — ایک گیلری کی دیوار حرکت میں ہے۔ ہر اسکرین ایک خاموش، سرمئی نمائشی سطح کی نمائندگی کرتی ہے جہاں ٹائپوگرافک مواد اور اوورلیپنگ تخلیقی کام توجہ کے لیے مقابلہ کرتے ہیں۔
- Mollie — ایک کیشمی کاؤنٹر، ایک سیاہ لیجر۔ کالے متن کے ارد گرد ادارتی ڈیزائن کے لیے کافی سفید جگہ چھوڑیں، پھر گرم کریموں، ایسپریسو براؤنز، اور اصل ادائیگی کے طریقوں کی ٹیکٹائل تصاویر کے ساتھ پروڈکٹ سے متعلقہ پوائنٹس کو مضبوط کریں۔
- Basis Theory — ڈیزائن اسٹوڈیو میں ادائیگی کے ٹرمینلز۔ سفید تکنیکی کاغذ، پارباسی لین دین کی تہوں کو اوورلیپ کرتا ہے، اور ایک فیروزی کنٹرول عنصر بصری سمت کی وضاحت کرتا ہے۔
- CleanShot X — نیلے رنگ کے ڈیسک ٹاپ کے ساتھ ایک اسٹوڈیو۔ کمپیکٹ بلیک ٹیکسٹ کے ارد گرد ایک پرسکون سفید جگہ بنائیں، پھر بھرپور نیلے کنٹرولز اور تہہ دار میک پروڈکٹ کی تصاویر کو مرکز میں آنے دیں۔
- Modern Treasury — گراف پیپر پر ٹریژری لیجر۔ ایسے صفحات بنائیں جو ایک پرسکون، سفید آپریٹنگ شیٹ سے ملتے جلتے ہوں، جہاں نقدی کا بہاؤ باریک لکیروں، لیبل والے نوڈس، اور درست، پوشیدہ کنٹرولز کے ساتھ دکھایا جاتا ہے۔
- Basha-Franklin — سفید لنٹل کے نیچے گیلری کا گرڈ۔ ایک گرم #f4ede6 رنگت، ایک لطیف سیاہ ڈھانچہ، اور تصویروں پر مبنی غیر متناسب کالم استعمال کریں جو پرنٹ شدہ آرکیٹیکچرل پورٹ فولیو کی طرح نظر آتے ہیں۔
- Bajgart Office — ادارتی گیلری کی دیوار۔ ایک بڑی سفید جگہ کا استعمال کریں جہاں ٹھیک ٹھیک سیرف فونٹس اور پورٹ فولیو کے ٹکڑے کروم پلیٹڈ انٹرفیس عناصر سے زیادہ بصری وزن رکھتے ہیں۔
- Heptabase — سورج کی روشنی کی میز۔ گرم، کاغذ جیسی سطحیں، چارکول کے رنگ کے کنٹرول، اور تحقیق کے لیے تیرتی ہوئی کھڑکیاں سافٹ ویئر کنٹرول پینل کے بجائے ایک منظم ورک اسپیس کا احساس پیدا کرتی ہیں۔
- Bejamas — پاجامہ - سیاہ شیشے کے ذریعے تیزاب چونا۔ پُرسکون، ہلکے سرمئی ادارتی صفحات تخلیق کریں جس میں پرکشش سیاہ پینلز کے ذریعے رکاوٹ پیدا ہوتی ہے جہاں روشنی کی دھندلی سبز لکیریں سطح کو آپس میں ملتی ہیں۔
- Baba — سرخ سورج کی روشنی میں نگہداشت کے نوٹ۔ لوگوں کی تصاویر کو جذباتی مرکز کے طور پر استعمال کرتے ہوئے مباشرت سفید، گلابی، اور کریم معلوماتی سطحوں کے ارد گرد وسیع سرخ داستانی پٹیاں بنائیں۔
- Grafana Labs — سن رائز سگنل اسٹیشن کا کنٹرول روم۔ ایک پُرسکون سرمئی اور سفید ورک اسپیس ایک وسیع، چار رنگوں کے افق کے میلان اور عین مطابق نیلے انٹرفیس سگنلز کے ساتھ ملتی ہے۔
- Kagi — ایک علیحدہ پڑھنے کا کمرہ۔ سکون کو توڑنے کے لیے لطیف جامنی لہجے اور گرم پیسٹل سطحوں کا استعمال کرتے ہوئے، بولڈ گریفائٹ متن کے ارد گرد ایک کھلی سفید جگہ بنائیں۔