Allbirds
مواد طبیعی روی پارچه کتان سفید
Allbirds با اعتماد به نفسی آرام و طبیعی عمل میکند - یک بوم تقریباً کاملاً بیرنگ، که با شن گرم (#e0dacf) و تُنهای خاکی ملایم که مستقیماً از عکاسی محصول گرفته شدهاند، تکمیل میشود. رابط کاربری با تجربه محصول تداخلی ندارد: سطوح سفید، حاشیههای نازک، ناوبری تماماً بزرگ و کنترلهای قرصی شکل که بیشتر شبیه دکمههای فیزیکی هستند تا عناصر وب. Self Modern (یک فونت سریف سفارشی) برای چند لحظه حیاتی که نیاز به توجه ویراستاری دارند - تیترها و نام مجموعهها - استفاده میشود، در حالی که Geograph برای هر حروف، متن بدنه و دکمه در سه وزن متعادل استفاده میشود. کارتهای دستهبندی به یک سیستم رنگی تبدیل میشوند: هر کدام رنگ پسزمینه خود را از محصول ویژه میگیرند و ناوبری را به یک پالت زنده Pantone تبدیل میکنند.
حداکثر عرض حدود ۱۲۰۰ پیکسل است که با حاشیههای کناری فراوان در مرکز قرار گرفته است. عنصر اصلی یک نوار ویرایشی تمام عرض روی یک پسزمینه شنی گرم با یک چرخ فلک بزرگ محصول است که از مرکز امتداد مییابد. ناوبری دستهبندی، شبکهای از چهار کارت با رنگ یکسان در چهار ستون است که هر کدام شامل یک مدل کفش در مرکز هستند. در زیر تا، طرحبندی بین پنلهای تقسیمشده تمام عرض (عکس سبک زندگی در سمت چپ + نمونه محصول در سمت راست) و چرخ فلکهای محصول مرکزی تحت یک عنوان کوچک و زیرخطدار، متناوب است. ریتم کلی به این صورت است: پنل ویرایشی تمام عرض → شبکه چهار ستونی → چرخ فلک محصول مرکزی → تقسیم دو ستونی → چرخ فلک محصول مرکزی. فاصله بین بخشها ۴۰-۵۶ پیکسل است که انتقالهای روان اما نه چندان زیاد ایجاد میکند. ناوبری یک نوار بالایی ثابت و مینیمالیستی با لینکهای اصلی مرکزی است.
عکاسی، کل سیستم بصری است. تمام عکسهای محصول از نمای نزدیک، با زاویهای ملایم، در مقابل پسزمینهای یکدست که با رنگ تأکیدی کفش مطابقت دارد یا آن را تکمیل میکند، گرفته شدهاند و به طور مؤثر هر عکس را به یک مطالعه رنگی تبدیل میکنند. عکسهای سبک زندگی با تُنهای گرم و آفتابی، در محیطهای طبیعی (مزارع آگاو، عرشههای چوبی، زمین ناهموار) گرفته شدهاند و به طور نامحسوسی کمرنگ شدهاند تا با پالت رنگی کمرنگ مطابقت داشته باشند. هیچ تصویرسازی، رندر سهبعدی یا گرافیک انتزاعی وجود ندارد. با همکاری پنتون، از پالت رنگی واقعی به عنوان یک عنصر گرافیکی استفاده شده است. آیکونوگرافی مینیمالیستی و تکرنگ است (آیکونهای حاشیهای در موقعیتهای ناوبری و کمکی).
پالت
خنثی
- Canvas White
#ffffff— تصاویر پسزمینه صفحه، سطوح کارت، تصاویر پسزمینه کارت محصول. - Charcoal
#212121— رنگ خنثی برای عناصر رابط کاربری ثانویه، جداکنندهها و برچسبهای بیرنگ پشتیبانی میشود. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - True Black
#000000— سرتیترها، آیکنها، فریمهای با کنتراست بالا، متن ناوبری. - Warm Sand
#e0dacf— پسزمینه بخش اصلی، سایه سطحی اضافی، پنلهای بزرگ سرمقالهای. - Olive Char
#222519— رنگ خنثی برای عناصر رابط کاربری ثانویه، جداکنندهها و برچسبهای بیرنگ پشتیبانی میشود. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Iron Gray
#525252— متن ثانویه، متن کمکی، فریمهای نامحسوس.
تایپوگرافی
از ۱۲ تا ۴۰ پیکسل · ۶ مرحله
- Self Modern — جایگزینی: Playfair Display · طرح کلی 400 · تیترها و سرمقالهها به طور محدود استفاده شدهاند و عبارات کلیدی و عناوین مجموعه را برجسته میکنند. فونتهای Serif و Italic یکنواختی فونتهای Sans-Serif را از بین میبرند و این پیام را منتقل میکنند: «این اصل داستان است».
- Geograph — جایگزینی: Inter · طرح کلی 400, 500, 700 · فونت اصلی رابط کاربری شامل متن بدنه، برچسبهای ناوبری، دکمهها، عناوین محصولات، پاورقیها، فیلدهای ورودی و آیکونها میشود. 500 برای عناوین برجسته، 700 برای نام محصولات. فاصله زیاد بین حروف (0.025em–0.10em) با حروف بزرگ در برچسبهای ناوبری و دستهها، یک سبک برند ثابت را ایجاد میکند.
- HurmeGeometricSans3 — جایگزینی: Inter · طرح کلی 400 · به ندرت به عنوان برچسب پشتیبان یا اختصاصی برای یک دکمه استفاده میشود. Geograph روزانه از این سیستم استفاده میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 8-16px |
| شعاع دکمه | 9999px (pill) |
| شعاع کارت | 16px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 40-56px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Allbirds میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Lightship — یک دیورامای سینمایی از جادهی باز. دیوارهای گالری به رنگ کرم گرم مزین به عکسهای بزرگ منظره که در فواصل نزدیک نصب شدهاند، حروف سیاه نازکی که به سختی روی قابها دیده میشوند، و یک تکرنگ نارنجی روشن که مانند آتشی در چمنزار، تکرنگی را میشکند.
- Faire ES — کاتالوگ عمده فروشی خامه گرم
- Adanola — یک دفترچه یادداشت سرمقالهای روی کاغذ سفید. یک عکاسی مد که در آن تایپوگرافی و عکاسی روی سطوح سفید و تمیز نفس میکشند، با جوهر مشکی برای فونت و یک فونت sans-serif امضای ظریف (Favorit)، که منعکس کننده سبک کلی برند است.
- Oura Ring — کارگاه دنج تهیه بلغور جو دوسر، غرق در نور ملایم روز
- Stykka — یک کارگاه اسکاندیناویایی در نور سفید - یک نمایشگاه آرام و دستساز که تنها صدای آن، صدای عکاسی است
- DJI — بوم مشکی هوافضایی با یک هایلایت آبی برقی
- Altitude Beverages — صفحه مجله تک رنگ. یک صفحه مجله مد را تصور کنید که تمام رنگها به جز عکسهای ثابت از آن حذف شده باشد - متن و فضای سفید کل داستان را روایت میکنند.
- AATHER — یک کف دست باز، یک شعلهی تنها - تجملاتی آرام که در سکوت محصور شده است
- Cowboy — یک گالری دوچرخه بلژیکی در محیطی به سفیدی برف. نمایشگاهی که در آن سطوح مات، فونتهای بزرگ استفاده شده در مطالب سرمقاله و فقدان تقریبی تزئینات، چشم را به دوچرخه و محتویات آن جلب میکند.
- Refero — طرحبندی سرمقاله روی سنگ مرمر سفید - صفحه محصولی که توسط یک تایپوگرافر ایجاد شده است، جایی که تیتر serif کارت ویزیت برند است و هر چیز دیگری جلب توجه نمیکند
- Face Formula — یک پرتره سرمقالهای اسکاندیناویایی. یک فضای آرام و به سبک مجلهای، که در آن نگاه مدل و تیتر، که با فونت سریف فشرده نوشته شده است، در مقابل پسزمینهای سرد و مهآلود، خود گویای همه چیز هستند.
- Shupatto — ویترین موزه روی سنگ مرمر سفید