سادگی، وضوح و هماهنگی فرم با کارکرد
در کراپلود، طراحی محصول یک لایه تزئینی نیست؛ فرآیند مهندسی‌شده‌ای است برای کاهش اصطکاک ذهنی، وضوح سلسله‌مراتب داده‌ها و تسهیل کارکرد.
طراحی خوب دیده نمی‌شود؛ فقط حس می‌شود که کار سریع و بی‌دردسر پیش می‌رود. این صفحه توضیح می‌دهد آن حس چگونه ساخته می‌شود.
اصول طراحی
سادگی در سطح، عمق در زیرساخت
کاربر مسیر اصلی را بدون آموزش طی می‌کند؛ اما هرچه نیازش رشد کرد، امکانات بیشتری در دسترس است.
وضوح بر تزئین
هر عنصر باید کاری انجام دهد. اگر حذف یک جزء تجربه را بهتر کرد، آن جزء باید حذف شود.
سلسله‌مراتب روشن
اندازه، فاصله و رنگ، مسیر چشم را هدایت می‌کنند تا کاربر بداند از کجا شروع کند و قدم بعدی چیست.
پایداری بصری
همان الگوها در همهٔ سرویس‌ها تکرار می‌شوند تا کاربر برای هر بخش از نو یاد نگیرد.
طراحی برای شرایط واقعی
شبکهٔ کند، دستگاه ضعیف و صفحهٔ کوچک، حالت پیش‌فرض طراحی‌اند؛ نه استثنا.
احترام به زمان کاربر
هر مرحلهٔ اضافه، هر پرسش غیرضروری و هر تأخیر، هزینه‌ای است که کاربر می‌پردازد.
فرایند طراحی
شش گام، از شناخت مسئله تا سنجش نتیجه.
- کشف: مسئله چیست، چه کسی با آن روبه‌روست و امروز چگونه حل می‌شود.
- تعریف: روشن‌کردن دامنه — محصول چه چیزی هست و چه چیزی نیست.
- طراحی: ساختن مسیر کاربر با کمترین گام و روشن‌ترین بازخورد.
- آزمون: بررسی با کاربر واقعی و اصلاح بر پایهٔ شواهد، نه سلیقه.
- انتشار: عرضهٔ گام‌به‌گام با پایش خطا و امکان بازگشت سریع.
- سنجش: اندازه‌گیری رفتار واقعی و بهبود مستمر.
سیستم طراحی
یک زبان بصری مشترک، تا هر صفحه ادامهٔ صفحهٔ قبلی باشد.
| تایپوگرافی | فونت فارسی با ارتفاع خط مناسب خواندن طولانی؛ اعداد و لاتین با فونت هماهنگ |
| رنگ | پالت محدود، کنتراست کافی، حالت روشن و تاریک با توکن‌های مشترک |
| فاصله‌گذاری | مقیاس ثابت برای هماهنگی عمودی و ریتم صفحه |
| مؤلفه‌ها | دکمه، کارت، فرم، جدول و پیام با حالت‌های مشخص (عادی، هاور، فوکوس، خطا) |
| حرکت | حداقلی و هدفمند؛ با احترام به تنظیم کاهش حرکت کاربر |
دسترس‌پذیری
- کنتراست متن و پس‌زمینه با در نظر گرفتن خوانایی در هر دو تم.
- امکان پیمایش کامل با صفحه‌کلید و فوکوس قابل مشاهده.
- برچسب‌های معنایی و ساختار عنوان‌ها برای صفحه‌خوان.
- متن جایگزین برای تصاویر و نقش‌های ARIA برای مؤلفه‌های تعاملی.
- پرهیز از انتقال مفهوم تنها با رنگ.
طراحی و مهندسی، یک تیم
طراحی که در مرز تحویل فایل متوقف شود، در محصول دیده نمی‌شود. در کراپلود:
- طراح از محدودیت‌های فنی آگاه است و مهندس از هدف تجربه.
- مؤلفه‌های مشترک به‌صورت کد نوشته می‌شوند، نه تصویر.
- هر تغییر رابط، پیش از انتشار روی صفحهٔ واقعی بررسی می‌شود.
- کیفیت بصری بخشی از معیار پذیرش است، نه سلیقهٔ نهایی.
معیارهای پذیرش یک طراحی
- کاربر بدون توضیح، مسیر اصلی را پیدا می‌کند.
- هر اقدام، بازخورد روشن دارد (موفق، ناموفق، در حال انجام).
- خطاها قابل فهم‌اند و مسیر اصلاح را نشان می‌دهند.
- صفحه در موبایل و شبکهٔ کند قابل استفاده است.
- حالت‌های خالی، بارگذاری و خطا طراحی شده‌اند.
- هماهنگی با سیستم طراحی و دسترس‌پذیری رعایت شده است.