تصویرسازی

بیان برند

تصویرسازی

در پرتو تصویر نقش پشتیبان دارد، نه نقش اصلی. کاربر برای دیدن داده می‌آید، نه برای دیدن عکس استاک. این صفحه می‌گوید چه تصاویری مجازند و چه‌جور باید استفاده شوند.

فلسفه‌ی کلی

محصول پرتو، یک ابزار تحلیلی است. هر تصویری که در محصول، روی سایت، یا در ارتباطات می‌گذاریم، یا باید دیتای واقعی باشد (آواتار کاربر شبکه‌ی اجتماعی، اسکرین‌شات پست، عکس پروفایل اینفلوئنسر) یا هندسی-تجریدی (مثل لوگو، آیکون، نمودار). هیچ‌جا عکس استاک، هیچ‌جا ایلوستریشن کارتونی، هیچ‌جا گرادیان تزیینی.

آواتار افراد

قاعده

  • دایره‌ای، نه مربعی.
  • قاب تنگ — صورت در مرکز، بدون فضای زیاد بالا و پایین.
  • رنگ و نور همان چیزی که منبع داده، بدون filter یا اصلاح رنگ.
  • اگر تصویری نیست، یک حرف اول نام (Initial) روی پس‌زمینه‌ی خاکستری.
  • پروفایل کاربر شبکه‌ی اجتماعی همان چیزی که خودش گذاشته، حتی اگر کیفیت پایین باشد.
بله — آواتار دایره‌ای با قاب تنگ روی صورت.
خیر — آواتار مربعی. برای پرتو، آواتارها دایره‌اند.
خیر — آواتار با فاصله‌ی زیاد دور صورت.
خیر — آواتار با filter رنگی برای «هماهنگی» با برند.

عکاسی استاک

قاعده

ممنوع. عکس استاک — آدم‌های لبخندزنان جلوی لپ‌تاپ، دست‌های روی کیبورد، تیم خوشحال در دفتر — یعنی برند ندارد. برای پرتو، اگر تصویری لازم است که داده‌ی واقعی نباشد، از یکی از این موارد استفاده می‌کنیم:

  • اسکرین‌شات واقعی از محصول
  • نمودار یا داده‌ی هندسی
  • عکس واقعی تیم پرتو در محیط واقعی کار (نه ژست استاک)

ایلوستریشن

قاعده

فقط ایلوستریشن هندسی و تجریدی مجاز است — مثل لوگوی پرتو، آیکون‌های Lucide، یا تصویرسازی‌های empty state که در کتابخانه‌ی کامپوننت آمده. ایلوستریشن دستی، کاراکتر کارتونی، صحنه‌ی روایی — همه ممنوع.

بله — ایلوستریشن هندسی، با خطوط ساده، بدون رنگ‌های اضافه.
خیر — ایلوستریشن کارتونی با کاراکتر و emoji.
خیر — گرادیان چند رنگ تزیینی. پرتو گرادیان ندارد.

اسکرین‌شات محصول

قاعده

  • اسکرین‌شات از داده‌ی واقعی، نه mockup. اگر داده‌ی محرمانه است، blur کنید نه fake.
  • بدون آرایش — هیچ shadow اضافه، هیچ device frame، هیچ rotation.
  • ترجیحاً در تم روشن (مگر بصراحت زمینه‌ی تیره مدنظر است).
  • اگر اسکرین‌شات تکه‌ای از محصول است، کادر نازک ۱ پیکسلی با رنگ خط استاندارد دور آن.
بله — اسکرین‌شات تمیز با کادر نازک.
خیر — اسکرین‌شات با device frame و سایه.

آیکون‌ها

قاعده

همه‌ی آیکون‌های محصول از کتابخانه‌ی Lucide هستند — stroke ۲، انتهای گرد، اندازه‌ی پایه‌ی ۲۴. برای آیکون‌های پلتفرم‌های اجتماعی (اینستاگرام، تلگرام و...) از SVG رسمی همان پلتفرم با رنگ رسمی استفاده می‌کنیم.

  • هرگز ایموجی به‌جای آیکون.
  • هرگز آیکون PNG.
  • هرگز ترکیب چند کتابخانه‌ی آیکون مختلف.
  • آیکون‌های جهت‌دار (پیکان، شِوران) در RTL با کلاس rtl:rotate-180 برعکس می‌شوند. آیکون‌های شیء (تقویم، چشم) برعکس نمی‌شوند.

برای جزئیات فنی استفاده از آیکون و فهرست کامل آیکون‌های موجود، به صفحه‌ی foundations/icons در داک دیزاین سیستم مراجعه کنید.

پس‌زمینه و گرادیان

در محصول هیچ‌جا گرادیان نداریم. در صفحه‌های marketing هم حداکثر یک ambient glow بسیار ضعیف (مثل صفحه‌ی اول همین برند بوک) قابل قبول است. هیچ گرادیان رنگین‌کمانی، هیچ پس‌زمینه‌ی متالیک، هیچ noise/grain.

فضای خالی، خود یک عنصر طراحی است. اگر طرحی خالی به نظر می‌رسد، راه‌حل، اضافه کردن noise نیست — بلکه بازنگری در ترکیب‌بندی و سلسله‌مراتب است.