صفحه‌ی فرود کارگاه کیت برچسب موتور کراس
پیت‌لاینPitline
صفحه‌ای که به‌جای توصیف تغییر، خود تغییر را نشان می‌دهد: نشانگر را می‌کشید و موتور استاندارد، کیت‌خورده می‌شود.
01چالش
کیت برچسب اختصاصی محصولی است که تا طراحی نشود وجود ندارد. مشتری باید موتور خودش را پیش از خرید، تغییریافته ببیند.
کارگاه هم باید نشان دهد کیفیت طراحی، چاپ و نصبش چه فرقی با برچسب ارزان دارد؛ آن هم در صفحه‌ای که روی گوشی و در یک نگاه قانع کند.
02تصمیم‌ها
-
01
تغییر را نشان بده، توصیفش نکن
هیروی صفحه یک مقایسه‌ی قبل و بعد روی خود موتور است. ترتیب محتوا روی گوشی عمداً عوض می‌شود: تیتر، محصول، اقدام.
-
02
رنگ‌بندی، پیش از سفارش
انتخاب رنگ‌بندی یک گروه رادیویی واقعی است؛ با صفحه‌کلید و صفحه‌خوان هم همان‌قدر کار می‌کند که با ماوس.
-
03
فرایند تولید، به‌عنوان دلیل اعتماد
طراحی، نمونه‌ی چاپ، چاپ، برش و نصب در یک ریل سنجاق‌شده روایت می‌شود تا کیفیت، دیدنی شود.
03اجرا
کیت، از نزدیک
نمای جزئیات از همان دو رندر اصلی موتور ساخته شده است؛ همه‌ی تصاویر صفحه با اسکریپت‌های پایتون از آن دو رندر تولید می‌شوند.
ریل تولید
ریل با scroll-timeline خود CSS سنجاق می‌شود. زیر ۹۰۰ پیکسل، با کاهش حرکت یا در مرورگری که انیمیشن اسکرول‌محور ندارد، به یک نوار افقی ساده با اسنپ تبدیل می‌شود.
رنگ‌بندی
تنها رنگ تأکید رابط، رنگ برند است؛ رنگ‌های انتخاب‌گر، رنگ محصول‌اند، نه تزئین رابط.
- وقتی نشانگر مقایسه رها می‌شود، با حرکت نرم ۷۸۰ میلی‌ثانیه‌ای به وسط موتور برمی‌گردد؛ اما حرکت با صفحه‌کلید سر جایش می‌ماند تا کاربر صفحه‌خوان غافلگیر نشود.
- هیرو بر اساس ارتفاع باقی‌مانده اندازه می‌گیرد تا همیشه در یک صفحه‌ی کامل جا شود.
- تم تیره به‌عنوان پیش‌فرض برند و تم روشن کامل؛ اسکریپت کوچکی پیش از اولین رنگ‌آمیزی، تم را تعیین می‌کند تا چشمک رنگ نبینید.
- گوشه‌ها صفر؛ سطح‌های اصلی با برش مورب در دو گوشه.
- در تایپوگرافی فارسی، تأکید با وزن و رنگ ساخته می‌شود، نه با فاصله‌ی حروف.
- داده‌ی ساختاریافته‌ی LocalBusiness و FAQPage، آدرس canonical و کارت اشتراک‌گذاری.
04نتیجه
- هر واکنش به اسکرول با IntersectionObserver و scroll-timeline ساخته شده است.
- ۰شنونده‌ی اسکرول
- تیره و روشن، بدون چشمک رنگ هنگام بارگذاری.
- ۲تم کامل
- چیدمان دسکتاپ، تبلت و موبایل با Chrome بدون رابط، خودکار بازبینی می‌شود.
- ۳اندازه‌ی صفحه
- بدون مرحله‌ی ساخت و بدون وابستگی؛ فونت‌ها روی خود سایت میزبانی می‌شوند.
- ۰فریم‌ورک