Glossier
عکاسی در آفتاب - کاغذ سفید، جوهر مشکی، یک تکه رنگ زرد روشن
گلاسیر مانند یک مجله زیبایی دیجیتال عمل میکند: یک بوم تقریباً تکرنگ از سفید و سیاه، که با یک لهجه زرد پر جنب و جوش که به عنوان لوگوی برند و تنها فراخوان برای اقدام عمل میکند، برجسته شده است. این سیستم از نظر ویرایشی محدود است - تیترهای بزرگ Apercu، فضای متن کافی، عکسهای سبک زندگی تمامصفحه که بخش عمدهای از بار احساسی را به دوش میکشد - و در اجرا نیز کاربردی است: کارتهای محصول تخت، حاشیههای نازک و فقدان کامل تزئینات. زرد رنگ فرعی برند نیست؛ بلکه خود برند است که به مقدار کم استفاده میشود، به طوری که هر ظاهری مانند فلاش دوربین به نظر میرسد. هر چیز دیگری قرار است در پسزمینه محو شود: رنگهای خنثی، خاکستریهای گرم با ته رنگ ملایم سرخی هستند، حاشیهها ظریف هستند و نوع نوشته متراکم و فشرده است. نتیجه، ویترین فروشگاهی است که حس اعتماد به نفس، کمرنگ بودن و به طور غیرقابل انعطافی مدرن را القا میکند.
این صفحه شامل مجموعهای از بخشهای تمامصفحه است که به صورت عمودی چیده شدهاند و هر کدام به عنوان یک بخش سرمقالهای مستقل طراحی شدهاند. بخش اصلی یک عکس تمامصفحه با یک پوشش سفید شناور (بالا سمت چپ) و یک لوگوی زرد بزرگ است که کل پایین صفحه را اشغال میکند. در زیر بخش اصلی، بخشها بین تصاویر تمامصفحه و شبکههای کارتهای جداگانه به طور متناوب قرار دارند. تقسیم دستهها (مراقبت از پوست/آرایش) به دو ستون با نسبت مساوی تصاویر (50/50) بدون حاشیه قابل مشاهده انجام میشود - فقط یک خط که تصاویر را به هم متصل میکند، آنها را از هم جدا میکند. کاتالوگ محصول از یک شبکه چهار ستونی از کارتهای مربعی روی بوم #f7f7f7 استفاده میکند. ناوبری یک نوار بالایی مینیمالیستی با یک نوار تبلیغاتی ثانویه در بالای آن است. شکافهای بین بخشها نسبتاً بزرگ هستند (64 پیکسل)، اما انتقال بین بخشها روان است - بدون جداکننده یا رنگهای پسزمینه متناوب، به جز پاورقی گرم. ریتم کلی این است: عکس، متن، عکس، شبکه، عکس - مانند ورق زدن یک مجله مد.
عکاسی زبان بصری غالب است. تمام فضای نمایش پر از تصاویر و پرترههای سبک زندگی است - نورپردازی گرم ساعت طلایی، کلوزآپهای نرم از پوست، دستهایی که بطریهای محصول را در مقابل پسزمینهای از تابش خورشید نگه داشتهاند. پالت رنگی در عکسها گرم و غیراشباع است: آسمان هلویی، تُن پوست مایل به قهوهای، آبی عمیق اقیانوس. تصاویر همیشه تمام سطح صفحه را اشغال میکنند، بدون گوشههای گرد، قاب یا پوشش، به استثنای کارتهای متنی سفید یا لوگوی زرد. عکسهای محصول روی کارتهای کاتالوگ در مقابل یک پسزمینه یکپارچه سفید خالص با نورپردازی تخت و یکنواخت گرفته شدهاند. نسبت تصویر به متن تقریباً 70/30 است - تصاویر، احساسات، متن و عملکرد را منتقل میکنند. هیچ تصویرسازی، گرافیک انتزاعی یا رندر سهبعدی وجود ندارد.
پالت
برند
- Glossier Yellow
#fff116— رنگ زرد به عنوان یک رنگ ثانویه برای جزئیات تزئینی و برجسته کردن عبارات جستجوی کمتر استفاده شده استفاده میشود. نباید به عنوان رنگ اصلی برای دکمه فراخوان عمل (Call to action) استفاده شود.
خنثی
- Ink
#000000— متن بدنه، لینکهای ناوبری، متن اصلی، متن پاورقی، طرح کلی آیکونها، حاشیههای نازک؛ رنگ غالب تایپوگرافی و ساختاری. - Paper
#ffffff— سطوح کارت محصول، قسمتهای پرکننده، پنلهای برجسته؛ روشنترین سطح در میان سطوح انباشته. - Fog
#f7f7f7— بوم صفحه، پسزمینههای بخشها، انتقال بین تصاویر در صفحه؛ سطح پایهای که کل وبسایت روی آن قرار دارد. - Blush
#faf2f4— پسزمینه پاورقی، جداکنندههای بخش با رنگ گرم و ملایم؛ رنگ صورتی-سفید ملایمی به پایین صفحات گرما میبخشد. - Mist
#f0f0f0— یک سطح حمایتی روشن برای ایجاد یک پسزمینهی نامحسوس و جداکنندهی بخشها. نباید به عنوان رنگ اصلی برای فراخوان عمل استفاده شود. - Ash
#e8e8e8— حاشیههای فیلد ورودی، پسزمینههای آیکون، خطوط جداکننده نازک؛ رنگ حاشیه ساختاری برای کارتها و عناصر فرم.
تایپوگرافی
از ۱۲ تا ۳۲ پیکسل · ۵ مرحله
- Apercu — جایگزینی: Inter · طرح کلی 400, 500, 700 · فونت اصلی در سراسر رابط کاربری استفاده میشود - متن بدنه با اندازه ۱۶ پیکسل/۴۰۰، ناوبری و زیرنویسها با اندازه ۱۲ تا ۱۴ پیکسل/۵۰۰، زیرعنوانها با اندازه ۲۰ پیکسل/۵۰۰ و تیترهای سرمقاله با اندازه ۳۲ پیکسل/۷۰۰. طراحی هندسی و انسانگرایانه Apercu به این برند سبکی فشرده و مدرن میدهد؛ فاصله تقریباً صفر بین حروف (۰.۰۰۲ تا ۰.۰۰۳em) فونت را فشرده و شبیه مجله میکند، نه راحت یا کاربرپسند. وزن ۷۰۰ برای عناصر نمایشی در سرمقالهها در نظر گرفته شده است، نه عناصر رابط کاربری.
- Apercu Mono — جایگزینی: JetBrains Mono or IBM Plex Mono · طرح کلی 400 · تایپوگرافی میکرو-کاربردی برای فرادادههای سفارش، شمارههای ردیابی و برچسبها در کنار کد؛ نسخه تکفاصله، یک بافت فنی در مقابل نوع بدن متناسب ایجاد میکند.
- GTStandard-M — جایگزینی: Inter · طرح کلی 400 · GTStandard-M - در دادههای استخراجشده یافت میشود اما توسط هوش مصنوعی توصیف نشده است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 0px |
| شعاع کارت | 0px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 64px |
| عرض صفحه | 1440px |
هوش مصنوعی وبسایت شما را به سبک Glossier میسازد و آن را پر میکند
- از طریق لینک - 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 — ویترین موزه روی سنگ مرمر سفید