IKEA
یک نمایشگاه مبلمان سوئدی غرق در آفتاب به شکل قطعات جدا شده
رابط کاربری IKEA مانند یک صفحه ویرایشی با کنتراست بالا به نظر میرسد: حروف تقریباً مشکی روی یک پسزمینه سفید گرم، که با پنلهای زرد تخت که به عنوان مناطق فراخوان عمل میکنند، تکمیل میشود. این سیستم عمداً مینیمالیستی است - یک فونت sans-serif سفارشی (Noto IKEA) تنها در دو وزن (400 و 700)، یک شعاع گوشه برای هر جزء، و بدون سایه یا گرادیان. این فشردگی ساختاری است، نه یک روند مینیمالیستی: فاصله منفی حروف (-0.029em در عنوان، -0.027em در متن بدنه) حتی به برچسبهای 13 پیکسلی حس معماری میدهد. کارتها بزرگ هستند و بر محتوای رسانهای متمرکز شدهاند، در بلوکهای بزرگ دو ستونی با پوششهای متنی از گرادیان تا مشکی برای بهبود خوانایی چیده شدهاند. فونت زرد #ffdb00 تمام کار را برای رابط کاربری انجام میدهد - تزئین نمیکند، صرفاً فعال میکند.
یک طراحی تمام عرض با یک محفظه محتوای مرکزی محدود به تقریباً ۱۴۴۰ پیکسل. ناوبری یک نوار بالای ساده و غیرچسبنده است. این صفحه از کارتهای افقی که به صورت عمودی با فاصلههای تقریباً ۸۰ پیکسلی روی هم چیده شدهاند، ساخته شده است. طرح "قهرمان" یک طرح تقسیم شده است - ۲/۳ کارت رسانه (تصویر) + ۱/۳ کارت زرد جامد با یک فراخوان برای اقدام. بدنه اصلی صفحه از شبکههای دو ستونی کارتها، بلوکهای متناوب تصاویر و متن استفاده میکند. تراکم محتوا جادار است، هرگز فشرده نیست. کارتها بزرگ هستند (حداقل تقریباً ۶۰۰x۴۰۰ پیکسل) با فاصلهگذاری زیاد. بخش "خط زمانی/تاریخچه" شبکه را با اعداد بزرگ تقسیم میکند. هیچ نوار کناری، هیچ مگامنو یا معماری ناوبری پیچیدهای وجود ندارد.
زبان بصری عمدتاً عکاسی از محصول و سبک زندگی است. ویرایش: فضاهای داخلی اسکاندیناویایی روشن، با نور طبیعی و گرم با احساسی زنده - نه سفیدی مطلق یک استودیو. افراد در صحنههای تعامل با محصول (در دست گرفتن، مونتاژ، استفاده) ظاهر میشوند. تصاویر همیشه تمام عرض کارت را اشغال میکنند و هرگز به شکلهای ارگانیک برش داده نمیشوند. پوششهای مشکی گرادیانی در پایین هر کارتی که متن دارد، ظاهر میشوند. تصاویر تخت گاهی اوقات نمایش داده میشوند (به عنوان مثال، نقشه آلمان با شمایلنگاری فرهنگی به رنگهای فیروزهای، سبز و نارنجی). عکسها به سبک ویرایشی اجرا شدهاند: بدون جلوه عکس براق استوک، بدون تصحیح رنگ بیش از حد سبکپردازی شده.
پالت
برند
- IKEA Yellow
#ffdb00— عناصر کلیدی برای پر کردن دکمههای فراخوان عمل، پسزمینه کارتها با تصاویر شاخص، پنلهای برجسته در پنجره اصلی - یک عنصر رنگی بینظیر در سیستم.
خنثی
- Ink Black
#111111— متن اصلی، متن بدنه، سرتیترها، حاشیههای اصلی (۸۵۱ مورد)، طرح کلی آیکون. - Pure White
#ffffff— پسزمینه صفحه، سطح کارت، پسزمینه ناوبری، متن دکمه روی پسزمینه تیره. - Warm White
#fffefb— یک رنگ کمی کرمی برای دکمهها و کارتها - که به ندرت گرمتر از سفید خالص است - سردی دیجیتال را از بین میبرد. - Steel Gray
#818181— متن ثانویه، حاشیههای بیصدا، حالتهای آیکون غیرفعال - True Black
#000000— پر کردن آیکونهای SVG، حاشیههای فیلد ورودی و لهجههای مشکی پررنگ در جایی که حداکثر کنتراست مورد نیاز است. - Link Blue
#0159a3— رنگ لینک متنی که به طور گسترده در ناوبری و لینکهای اصلی استفاده میشود، تنها رنگ آبی در این سیستم است.
تایپوگرافی
از ۱۳ تا ۵۱ پیکسل · ۵ مرحله
- Noto IKEA — جایگزینی: Inter · طرح کلی 400, 700 · تنها فونت استفاده شده، فونت معروف IKEA، یعنی Noto، است. سیستم دو وزنی (400 معمولی، 700 پررنگ) عمداً محدود شده است: بدون ایتالیک، وزن متوسط یا سبک. عنوانها با اندازه 700 و با اندازه 36 تا 51 پیکسل، کل سبک برند را منتقل میکنند؛ متن اصلی با اندازه 16 پیکسل خنثی باقی میماند. فاصله حروف با افزایش اندازه کاهش مییابد و به عنوانها حس فشرده و معماری میدهد.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 24px |
| شعاع دکمه | 8px |
| شعاع کارت | 8px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1440px |
هوش مصنوعی وبسایت شما را به سبک IKEA میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- MindMarket — یک کتاب افسانهای دنج روی کاغذ کرم - یک بوم تحریریه دوستانه که در آن تیترهای بزرگ اینتر و شخصیتهای کاغذی برشخورده روی سطحی آفتابگیر و نرم به نرمی برچسب، همزیستی میکنند.
- Lamborghini — رنگ بدنه مشکی در نمایشگاه، زیر نورافکنها - یک ماشین زرد
- amp — نارنجی گرم در پسزمینه سفید سرد. این طرح یادآور یک محصول تناسب اندام درجه یک است که در یک اتاق زیرشیروانی آفتابگیر عکاسی شده است: یک آیتم، یک لهجه، یک فونت مطمئن که همه کارها را انجام میدهد.
- LUNCH — تریبون مخملی روی پوست گرم
- Microsoft — کاتالوگ خردهفروشی از رنگ آبی خاص استفاده میکند - یک لوگوی مربعی را در کف سفید نمایشگاه تصور کنید، که در آن هر عنصر طراحی به رنگ آبی است.
- Vibrants — داروخانه اسکایبورن روی سنگ مرمر سفید - جوهر آبی تیره ملات و طیف رنگینکمان دارو است
- Isla Beauty — سبک داروخانهای کرمی با رگههایی از قرمز جراحی - دیوارهای کاغذ پوستی گرم، بطریهای کهربایی و یک مهر قرمز روی هر برچسب را تصور کنید.
- Swap — گالری تحریریه مینت: سایههای روشن مریم گلی در اتاقهایی با لهجههای لیمویی روشن و سریفهای ظریف
- Cursor — یک کارگاه دنج کاغذ پوستی، روشن شده با زغالهای گداخته
- Structured — گالری رنسانس روی کاغذ شبیه پلاستیسین
- Apple (España) — گالری موزه، در نور ملایم روز، فضایی سفید، واحد، جذاب و بیوزن است که هر نمایشگاه با نورافکنی در برابر دیواری با رنگ ملایم روشن میشود.
- Amplemarket — یک محل کار آفتابگیر و پوشیده از کاغذ رنگی