چند وقتی بود که ساختن بنر برای تپسی هم برای خودم و هم برای خیلی از هم‌تیمی‌ها و برندهای طرف‌قرارداد یه درگیری تکراری شده بود. قوانین، اندازه‌ها و محدودیت‌های متن هرکدوم یه‌جای جدا بودن؛ دیزاینر برند، بنر رو تو ابزارهای طراحی می‌ساخت و تازه موقع بررسی می‌فهمید که عنوان از حد گذشته و لی‌اوت شکسته میشه، یا کی‌ویژوال رفته تو ناحیهٔ ناامن، یا اصلاً سایز درست نیست. همین رفت‌وبرگشت‌ها بود که باعث شد Banner Builder رو بسازم.
ایدهٔ اصلی ساده بود: به‌جای اینکه گایدلاین یه فایل جدا باشه و ابزار ساخت یه چیز دیگه، هر دو رو یه‌جا بیارم و قوانین رو همون لحظهٔ طراحی جلوی چشم کاربر بذارم.
تو ابزار، نوع بنر رو انتخاب می‌کنی (Normal، Narrow، Square، Mini Narrow و Top)، ساختار عنوان رو یک‌خطی یا دوخطی می‌ذاری و متن رو وارد می‌کنی. پیش‌نمایش همون لحظه زنده به‌روز میشه و یه شمارندهٔ کاراکتر رو هر فیلد نشون میده کجای کاری؛ اگه از حد بگذری، همون‌جا اخطار می‌گیری که ممکنه لی‌اوت شکسته بشه. کی‌ویژوال رو به‌صورت PNG با پس‌زمینهٔ شفاف آپلود می‌کنی و رنگ بک‌گراند، عنوان، توضیحات و دکمه رو هم از همون پنل تنظیم می‌کنی.
بخشی که خودم خیلی دوستش دارم، پیش‌نمایش داخل اپه. برای بنرهای Normal می‌تونی ببینی بنرت دقیقاً داخل صفحه‌های واقعی اپ (مثل فایندینگ، این‌راید و پیکاپ، باتم و اپ سفیران) چطور دیده میشه و همون ترکیب رو هم دانلود کنی. برای Top بنر هم بنر داخل قاب واقعی بالای اپ (با استتوس‌بار و شیت سفید پایین) نمایش داده میشه و محدودهٔ ناامن کی‌ویژوال رو بهت گوشزد می‌کنه. این باعث میشه قبل از ارسال بفهمی خروجی واقعاً چه شکلی میشه، نه اینکه فقط یه مستطیل جدا رو نگاه کنی.
جدا از بنر، دو تا تب دیگه هم هست: پرومو برای پیکربندی پروموشن‌سکشن صفحهٔ اول سوپراپ (با کارت‌های محصول)، و اینباکس برای ساخت پیام‌های صندوق پیام. کل گایدلاین هم داخل خود ابزار جا گرفته: ساختار متنی، مشخصات و ناحیهٔ امن کی‌ویژوال، چک‌لیست دیزاین کی‌ویژوال، و قوانین رنگ.
مسیر کار هم شفافه: بنرت رو می‌سازی، با گزینهٔ «خروجی برای بررسی» یه تصویر برای ما می‌فرستی، و بعد از تأیید با «خروجی پکیج نهایی» یه فایل ZIP شامل همهٔ اسست‌ها و یه فایل state پروژه می‌گیری. چون پکیج اون فایل state رو همراه داره و خود ابزار گزینهٔ ایمپورت داره، کارت گم نمیشه و می‌تونی بعداً همون بنر رو ادامه بدی به‌جای اینکه از صفر شروع کنی.
نقطه‌ای که این ابزار برای من حل کرد این بود: ابزارهای عمومی طراحی قوانین بنر تپسی رو نمی‌شناسن، برای همین تا وقتی یه نفر دستی بررسی نکنه نمی‌فهمی متن یا کی‌ویژوالت ایراد داره یا نه. اینجا قوانین از قبل داخل ابزارن و پیش‌نمایش هم واقعیه، برای همین بخش زیادی از رفت‌وبرگشت‌ها قبل از ارسال حذف میشه.
دربارهٔ اجرا و دسترسی
کل ابزار داخل مرورگر اجرا میشه و چیزی نصب نمی‌کنی. رو هر سیستم‌عاملی (مک، ویندوز، لینوکس) با یه مرورگر معمولی باز میشه. فعلاً برای دسکتاپ طراحی شده و تجربه‌اش رو دسکتاپ بهترین حالتشه.
این ابزار هنوز در حال تکمیل‌شدنه و بازخوردتون کمک می‌کنه بهترش کنم.
For a while, making banners for Tapsi was a repetitive headache, both for me and for a lot of teammates and partner brands. The rules, the sizes, and the text limits each lived somewhere different. You would build a banner in Figma or Photoshop and only find out at review time that the title was too long and broke the layout, or that the key visual had crept into an unsafe area, or that the size was simply wrong. That back and forth is what pushed me to build Banner Builder.
The idea was simple: instead of keeping the guideline in one file and the design tool somewhere else, put both in one place and show the rules at the exact moment you are designing.
In the tool you pick a banner type (Normal, Narrow, Square, Mini Narrow, and Top), set the title as one line or two, and type your text. The preview updates live as you type, and a character counter on each field tells you where you stand. If you go over a limit, you get a warning right there that the layout may break. You upload the key visual as a transparent PNG and set the background, title, description, and button colors from the same panel.
One part I really like is the in-app preview. For Normal banners you can see exactly how your banner looks inside real app screens (Finding, In-Ride and Pickup, Bottom, and the Safiran app), and you can download that composite. For the Top banner, it renders inside the real top frame of the app (with the status bar and the white bottom sheet) and flags the unsafe key visual area. This way you understand what the output actually looks like before you send it, instead of judging a rectangle in isolation.
Beyond banners, there are two more tabs: Promo, for configuring the promo section on the superapp home (with product cards), and Inbox, for building inbox messages. The full guideline lives inside the tool as well: text structure, key visual specs and safe area, a key visual design checklist, and color rules.
The workflow is clear. You build your banner, send us an image through the "review export" option, and after approval you use the "final package export" to get a ZIP with all the assets and a project state file. Because the package carries that state file and the tool has an Import option, your work is not lost and you can continue the same banner later instead of starting from scratch.
The gap this closed for me was this: general design tools do not know Tapsi's banner rules, so until someone reviews by hand, you cannot tell whether your text or key visual has a problem. Here the rules are built in and the preview is real, so a good part of the back and forth now happens before anything is sent.
On platforms and access
The whole thing runs in the browser with nothing to install. It opens on any operating system (Mac, Windows, Linux) with a regular browser. For now it is built for desktop, and that is where the experience is at its best.
It is still a work in progress, and your feedback helps me make it better.