استودیو گروسیان

آقای جوستاس گالابوردا فانوس دریایی‌اش را طراحی کرد و بدو بدو در دریبل به نمایش گذاشت. فانوس دریایی آقای جوستاس گالابوردا در دل شب، زیر نور ماه و ستاره‌ها برای خودش داشت لذت می‌برد که ناگهان به دام چشم‌های تیز و کنجکاو مسعود گروسیان افتاد. مسعود در حالی که توی دلش هنر آقای جوستاس را تحسین می‌کرد و انگشت سبابه‌اش را به سمت قلب زیر تصویرسازی می‌برد، دچار جرقه‌ای در سرش شد! او با خودش فکر کرد که شاید یک ریباند خوب از تصویرسازی آقای جوستاس، کار هیجان‌انگیز و خلاقانه و تاثیرگذاری باشد؛ پس دست به کار شد و دو تصویرسازی از همان فانوس دریایی، یکی در روز آفتابی و آرام و یکی در روز طوفانی و بارانی طراحی کرد. همان‌طور که انتظار می‌رفت، کار بسیار لذت‌بخشی بود. مسعود هم بیشتر به وجد آمد، به همین دو تصویرسازی بسنده نکرد و این کار را تبدیل به یک پروژه‌ی شخصی کرد. او تصمیم گرفت که هر روز یا هر چند روز یک بار تصویرسازی‌ کوچکی در همان یونیفرم فانوس دریایی‌اش انجام بدهد؛ چرا که باور داشت این کار هم یک تفریح کوچک و خستگی‌درکن در بین کارهای روزانه‌ی استودیو است، هم مهارت‌هایش را افزایش می‌دهد، هم کمک می‌کند که استودیو بیشتر مورد توجه قرار بگیرد. 

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

راستی! هم مسعود و هم ما خوشحال می‌شویم که نظرتان را در مورد تصویرسازی‌هایش بدانیم.

منتظرتان هستیم. 

یک غذای دوست‌داشتنی را تصور کنید. غذایی که مواد اولیۀ دقیق، ادویۀ کافی، مدت‌زمانِ پختِ اصولی و یک تزئینِ اشتهاآور دارد. حالا یکی‌یکی جزئیات را دستکاری کنید: ادویه و مواد اولیه را کم و زیاد یا حذف کنید، تصور کنید غذا زیاد بپزد یا زود از شعله برداشته شود و کمی هم نمکِ اضافه بهش بزنید. افتضاح می‌شود، نه؟

کمپین‌های تبلیغاتی بی‌شباهت به غذاها نیستند. دل‌پذیری هر کمپین یا بازی وابسته به جزئیاتی‌ست که ما نمی‌بینیم اما همان جزئیات‌اند که غذا را عمل آورده‌اند. اگر آشپز دل به کار ندهد یا ناشی‌بازی در بیاورد غذا از دهن می‌افتد. اگر هم جزئیات به‌خوبی رعایت شوند، یک میز غذای محشر خواهیم داشت. 

آشپزها معمولاً نیم‌نگاهی به میز غذا دارند تا واکنش مهمان‌ها را ببینند. نتیجۀ خوب، خستگی آشپز را در می‌کند. 

ما #فیلبازی را پختیم و منتظر واکنش مهمان‌ها نشستیم. فقط در هفته‌ اول لانچ‌ کمپین بیش از ۲۳۰ هزار نفر از کمپین #فیلمبازی باخبر شدند و دکمۀ «شروع بازی» را لمس کردند. ۴۰ هزار نفرشان دستِ پر از بازی بیرون رفتند. لحظه‌ای بود که می‌توانستیم بگوییم: «هوووومممم، خوبه». از اینکه مردم لذت بردند حسابی ذوق کردیم.

بخشی از تصویرسازی‌های کمپین #فیلمبازی

غذا چطور طبخ شد؟

بیایید از جزئیاتِ نادیدنی با خبرتان کنیم. روزی که بچه‌های فیلیمو از ما خواستند در طراحی فنی و بصری و محتوایی یک کمپین سینمایی همراهی‌شان کنیم، می‌دانستیم وقتِ پختنِ یک غذاست.
قرار بود بازی کاملاً بر اساسِ اطلاعات سینمایی طراحی شود. ایده‌پردازی مثلِ نقشه‌کشیدن برای یک هدفِ بزرگ همیشه سرحال‌مان می‌آورد. روزی که برای جلسۀ ایده‌پردازی به صباایده رفتیم حسابی حال‌مان خوب بود.
می‌دانستیم که بازی باید حسابی رنگ و عطرِ سینما بدهد. فیلم‌ها محصولِ همکاری یک گروهِ هم‌فکرند. اگر تصویربردار ساز خودش را بزند و کارگردان چیز دیگری بخواهد، هیچ فیلمی درست از آب در نمی‌آید.
همه چیز باید هماهنگ می‌بود. Artwork و هویت بصری کمپین باید سینمایی می‌بود تا حال و هوای فیلم‌ها را خوب منتقل کند و در عینِ حال، چیزی مزاحمِ تماشای بریدۀ فیلم‌ها نباشد. هشتگ و اسلوگان طراحی‌شده برای کمپین هم باید به رخت و لباسِ بازی می‌آمد. ما با هم فکر کردیم تا هیچ چیز اضافه یا کم نباشد.
یک تایپوگرافی، هشتگ #فیلمبازی را به‌سبکِ نئون‌های لاله‌زارِ دورۀ ساز و سینِما خوش‌ترکیب کرد. تایپوگرافی به هویت بصری بازی وزن خوبی داد و خوب سر جایش نشست. 

برای هشتگ کمپین فیلمبازی یک تایپ اختصاصی طراحی کردیم

وقتی قرار است بازی کنیم، سردرگم‌شدن بدترین چیز است! از آنجایی که هدف تماشای فیلم و حدس‌زدن و جواب‌دادنِ سریع بود، هر چیزِ اضافه‌ای باید حذف می‌شد. چیزی که از بازی می‌خواستیم وقار و سادگی بود. به یک One page رسیدیم که بی‌شباهت به اپلیکیشن نبود. 

فرقی نداشت برنده باشید یا بازنده. بین هر مرحله نیاز به انیمیشن‌های ساده و سبکی داشتیم که مثلِ قند شیرین باشند و کفرتان را بالانیاورند. ضمناً نباید حس می‌کردید با یک پاپ‌آپِ اعصاب‌خردکن طرفید که شما را از سینما بیرون می‌اندازد.

نه تنها نباید کسی از سینما بیرون انداخته می‌شد، بلکه عابرانی که از جلوی #فیلمبازی رد می‌شدند هم باید حدس می‌زدند چه خبر است. از طراحی یکپارچۀ عناصر بصری حرف می‌زنیم: برای مکمل بودن، مرتبط بودن و در عینِ حال متناسب بودنِ هر پوستر با رزولیشن‌های مختلف و محل‌های انتشارشان وقت صرف شد.

طراحی و متناسب‌سازی هویت بصری برای توییتر، اینستاگرام، تلگرام مهم بود چون شخصیتِ فیلمبازی باید همه جا درست و دقیق دیده می‌شد.

نمونه طراحی چند صفحه از بازی در ابعاد موبایل

حالا وقتِ سرو غذاست

تا قبل از انتشارِ کمپین و اطلاع‌رسانی، حالِ ما شبیه به آشپزی بود که هنوز غذا را سرو نکرده و بازخوردی از مهمانانش نگرفته است. سعی کرده بودیم جزئیات را رعایت کنیم تا نتیجه خوب از کار در بیاید. حالا باید قضاوت می‌شدیم.
سینما که بدون تصویر نمی‌شود. با کمک بچه‌های فیلیمو ویدیویی آماده کردیم که بخشی از پشت‌صحنۀ کمپین را روایت می‌کرد: یک تیزر تبلیغاتی با حضورِ دست‌اندارکارانِ کمپین!
ویدیو را با تکیه بر توان آپارات منتشر کردیم. حالا این ویدیو بیش از ۴۵ هزار بار فقط در آپارات تماشا شده و البته یک نسخۀ کوتاه‌تر هم برای اینستاگرام تدوین کردیم.

تیزر کمپین تبلیغات آنلاین #فیلمبازی

چیزی کم است؟

مثلِ کسی که ناگهان متوجه شود به مقدار بیشتری پلو یا خورش نیاز است، بعد از انتشارِ بازی چشم تیز کردیم تا مبادا مشکلی پیش بیاید. دقت در جزئیات هیچ‌وقت کم‌اهمیت نمی‌شود! کمپین‌ها وقتی خوب امتحان‌شان را پس می‌دهند که حسابِ کار همه چیز را کرده باشند. وقتی برای لحظاتی کوتاه برخی کاربران با مشکل مواجه شدند، تیم فنی ما و فیلیمو مثلِ برف‌روب‌های جاده‌های برفی مشغولِ باز کردنِ راهِ انتقالِ اطلاعات از سمت کاربر به سرور فیلیمو بودند. کسی آن‌ها را نمی‌دید و این خیلی خوب است: این یعنی پیش از دردسر جاده تر و تمیز شد.
 

به استقبالِ ایده‌های نو

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

آخرین‌بار کی بازی کرده‌اید؟
گوگل را باز کنید و بی‌سلام و علیک به او بگویید: «بازی». میلیون‌ها صفحه مربوط به بازی‌های آنلاین و آفلاین پیشِ روی شماست: به دنیای شگفت‌انگیزِ بازی‌ها خوش‌آمدید! کدام را انتخاب می‌کنید؟

آدم بزرگ‌ها هم گاهی وسوسه می‌شوند هیجان را تجربه کنند یا مهارت و دانش و شانس‌شان را امتحان کنند. حالا اگر بازی را با چیزهای جذابِ دیگری تلفیق کنیم، چه بهتر. مثلاً EA Sports روی جذابیتِ فوتبال حساب باز کرده و حالا خودش یک جذابیتِ جدید حساب می‌شود.

الهام‌گرفتن از فیلم برای ساختِ اسباب‌بازی، طراحی لباس، بازی‌های کنسولی و آدمک‌ها (Action Figure) رسمِ معمولی در تجارتِ امروزِ سینماست.

همانطور که یک فیلم محصولِ کاری گروهی‌ست، محصول‌های الهام‌گرفته از سینما هم ثمرۀ همفکری یک گروه است. کمپینِ فیلمبازی هم با تکیه بر جذابیتِ سینما، می‌خواست جذابیتِ جدیدی بسازد.

پشتِ پردۀ کمپین فیلمبازی فازهای مختلفی بود: طراحی گرافیک لندینگ‌پیج، طراحی بنرهای تبلیغاتی، طراحی سؤال‌ها، برش فیلم‌ها، طراحی صفحه‌ها و تجربه‌کاربری بازی و بالأخره اسلوگان و هشتگ و متن‌ها.

ما وظیفه داشتیم نتیجۀ کارِ یک گروهِ خوب را به‌خوبی معرفی کنیم تا بازی‌کنندگانِ بیشتری سراغِ فیلمبازی بروند.

باید اسلوگان را کشف می‌کردیم. می‌توانم بگویم «خلق» یا «طراحی» می‌کردیم ولی اینجا واژۀ «کشف» شورانگیزتر است. به این سؤالات فکر کردیم:

• مخاطب کیست؟
• فیلیمو چه چیزی ارائه می‌کند؟
• بازی چه جذابیتی دارد و بر چه اساسی پیش می‌رود؟
• بازی بر چه چیزی استوار است و چطور جلو می‌رود؟ 

صرفِ نظر از سؤالات، چند فرضِ اساسی در طراحی اسلوگان وجود دارد:

• ساده باش
• خوش‌آوا باش
• تداعی‌کنندۀ یک چیز ملموس باش
• بی‌ربط نه، کاملاً مربوط باش 

با بچه‌های فیلیمو درباره‌شان گپ زدیم تا پاسخ‌‌های دقیق‌تری داشته باشیم. جواب‌ها از این قرار بودند:

• تماشای آنلاین فیلم
• هرکس به فیلم و تماشای فیلم علاقه‌مند است
• اطلاعات و حافظۀ سینمایی مخاطب را محک می‌زند
• بریده‌ای از فیلم نمایش داده می‌شود و بر اساسش یک سؤال پرسیده می‌شود

از این به بعد کارمان واردِ مرحلۀ تازه‌ای شد. فکر کردیم:

• موضوعِ اصلی بازی فیلم است
• مخاطبِ اصلی چطور شناخته می‌شود؟ بهشان می‌گویند فیلمباز
• حفظِ واژۀ فیلم کمک‌مان می‌کند به فیلیمو و کارکردش وفادار بمانیم
• بازی با فیلم می‌تواند انواع داشته باشد، پس باید حسِ تعلیق را هم حفظ کنیم 

گاهی اوقات برای خلق هشتگ، اسلوگان یا تگ‌لاین اسیر واژه‌های اضافه می‌شویم. اما فقط لازم بود ساده باشیم؛ ساده مثلِ #فیلمبازی. ما دیدِ کلی‌ای دربارۀ هشتگ داریم. با تکیه بر همان دید به #فیلمبازی رسیدیم.

اما کار تمام نشده بود. «جایزه‌ات رو لابه‌لای فیلم‌ها پیدا کن!» اسلوگانی بود که بر اساسِ همان سؤال و جواب‌ها بهشان رسیدیم؛ چیزی که گمان می‌کنیم به‌خوبی نشان می‌دهد فیلمبازی چیست و با چه چیزی روبه‌رو می‌شویم.

فکرش را بکنید چه چیزی فرایندِ انجامِ کار را لذت‌بخش‌تر می‌کند؟ اینکه نتیجۀ کار را دوست داشته باشی. ما فیلمبازی را دوست داشتیم و خودمان هم بارها شانس‌مان را امتحان کردیم. گرچه هیچکدام از جایزه‌های ویژه نصیب‌مان نشد ولی جایزۀ باحال‌تری گیر آوردیم: حسِ رضایت.

شما فیلمبازی کردید؟ امتحانش کنید.

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

تیفای برای دقت، کیفیت، زیبا و حرفه‌ای بودن فعالیت‌هایش ارزش بسیار زیادی قائل است. ما هم در طراحی وب‌سایت تیفای سعی کردیم فضایی مینیمال به وجود بیاوریم که پر از المان‌ها، انیمیشن‌ها، رنگ‌ها و اشکال دقیق و منظم باشد و با فعالیت‌ها و اهداف تیفای هماهنگی خوبی داشته باشد. تک تک صفحات را به شکلی طراحی کردیم که چندین بلاک از محتوا داشته باشند و به ترتیب به معرفی تیفای، محیط کار و فرهنگ کاری، کسب‌وکارها، فرصت‌های شغلی و وبلاگ بپردازند. در پایان هر صفحه هم کاربر با یک Call To Action به صفحه‌ی بعدی هدایت می‌شود و بدین ترتیب می‌تواند به راحتی تمام صفحات وب‌سایت را ببیند. 

از نکات قابل توجه این پروژه این بود که از طراحی تا پیاده‌سازی و تولید محتوای متنی، تصویری و ویدئویی وب‌سایت را انجام دادیم و توانستیم یک کار تمیز و شسته و رفته برای ارائه داشته باشیم. 

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

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

و بالاخره مثل همیشه، نوبت، نوبت تماشای وب‌سایت و گشت زدن در فضای مینیمال و مدرن تیفای است. امیدواریم لذت ببرید.

---

۱. شعار انگلیسی تیفای Dreams work است که ما بعد از ترجمه و بومی‌سازی به رویاها، رویا نمی‌مانند رسیدیم.

شعارهای تبلیغاتی در خلأ زاییده نمی‌شوند. اگر خلاقیت را به چرخِ سفالگری تشبیه کنیم، در طراحی اسلوگان یا تگ‌لاین بدونِ خاک و آب محصولی نخواهیم داشت. در استودیو گروسیان پیش از طراحی هر اسلوگان بر نیاز واقعی سفارش‌دهنده تمرکز می‌کنیم. نزدیک شدن به دغدغۀ مشتری نخستین مرحله است. مشاهدۀ موقعیت از زاویۀ دیدِ مشتری و بررسی از بیرون دو رویکردِ موازی در این مرحله است.

مسئلۀ تگ‌لاین سرویس زوپ

برای رسیدن به تگ‌لاینِ موثرِ سرویس حمل و نقلِ زوپ فرایندِ شفافی طراحی شد. طراحی فرایند کمک می‌کند تا زنجیره‌ای پیوسته از حلقه‌های ضروری داشته باشیم.

اما پیش از طراحی و اجرای فرایند باید خاک و آب را فراهم کنیم.

«مسئله چیست؟» هر کپی‌رایتر در مواجهه با موضوعی نو باید این سؤال را مدام از خود بپرسد. ایدۀ مشتری محور کار است. پردازشِ پاسخِ «مسئله چیست؟» سؤالاتِ جزئی‌تری را که گوشه و کنارِ ذهن پنهان شده‌اند پیشِ رو می‌آورد. در نتیجه دستِ طراح اسلوگان پرتر خواهد بود.

با مرورِ چندبارۀ مسأله چیست به سؤالاتِ اساسیِ دیگری می‌رسیم:

۱. نیاز مشتری چیست؟

۲. پیام تگ‌لاین باید چه چیزی باشد؟

۳. مزیت و ارزش‌افزودۀ مشتری؟

۴. مخاطبِ پیام؟

در ادامه سؤالاتی جزئی‌تر طرح کردیم:

۱. چطور می‌توان نیاز مشتری را با شیوه‌ای بدیع و خلاقه برآورده کرد؟

۲. با چه لحن و ادبیاتی می‌توان به مخاطب هدف مشتری نزدیک شد؟

۳. سرراست‌ترین و جذاب‌ترین شیوۀ بیان برای نمایاندنِ مزیتِ مشتری ما چیست؟

۴. تگ‌لاینِ زوپ چه چیزهایی را باید بگوید و چه چیزی اولویت ندارد؟

چراغ‌ها روشن می‌شود

جلساتِ منظمِ بارشِ افکار و بررسی که بخشِ اعظمش صرفِ رد یا اصلاحِ پاسخ‌ها و ایده‌ها می‌شد، به گروهِ طراحی اسلوگان استودیو کمک کرد تا به مرحلۀ بعدی برسیم: «چه باید بگوییم؟»

روشِ کارِ ما همواره بر «پرسش» استوار است. هرچه پرسش‌ها چالش‌برانگیزتر باشد، چراغ‌های بیشتری در مغزمان روشن می‌شود.

هنوز تا رسیدن به سبدی پر از ایده راهِ زیادی وجود داشت. باید یکی یکی پاسخ‌هایمان به «چه باید بگوییم» را بر اساسِ پرسش‌هایی که پیش‌تر طرح کرده بودیم به درونِ سبد ایده‌ها می‌انداختیم.

برای طی این مرحله باز سؤال مطرح کردیم:

۱. کلیدواژه‌های مرتبط با فعالیت مشتری چیست؟

۲. رقبا چه کسانی‌اند و بر چه تمرکز کردند؟

۳. چطور می‌توانیم جذابیت و هدف را ترکیب کنیم؟

فهرستی بلندبالا از کلیدواژه‌ها و کلمات مرتبط با سرویس زوپ تهیه کردیم. همزمان سرویس‌های مشابه داخلی و خارجی را در ابعاد مختلف تحلیل کردیم. این تحلیل فقط معطوف به بررسی اسلوگان یا تگ‌لاین نبود و تا ویژگی‌های منحصر به‌فرد، مزیت‌ها، گسترۀ خدمات، استراتژی محتوا و… پیش رفت.

نوبتِ گرداندنِ چرخِ سفالگری‌ست

خاک و آب فراهم شد و نوبت به چرخاندنِ چرخ رسید. گروه محتوای استودیو بی‌توقف به ایده‌پردازی پرداخت. ایده‌ها ضمنِ درنظر گرفتنِ پاسخ‌هایی که از سؤالات‌مان گرفته بودیم، بر چند اصل استوار بود:

۱. خوش‌آوایی

۲. سادگی

۳. رسا بودن

۴. آراستگی نوشتاری

پیشنهادهایی که استانداردهای لازم را نداشتند شانسِ افتادن در سبدِ ایده‌ها را از دست می‌دادند. ایده‌های دیگری هم وجود داشت که به‌نظر می‌رسید قابلیت‌های خوبی دارند اما نه برای موقعیتِ فعلی، بنابراین به سبدِ دیگری هدایت می‌شدند.

مقصد بهانه‌ست

سرویس‌دهندۀ زوپ تمایل داشت با مشتریانِ جوان‌تر و دست به فناوری‌تر ارتباط برقرار کند. از سوی دیگر، تأکید بر لذتِ سفر از دیگر اهدافِ زوپ است. از نظرِ مدیرانِ سرویسِ زوپ به‌موقع رسیدن کافی نیست و اتفاقاتِ طولِ مسیر هم باید جذاب و دوست‌داشتنی باشد.

کپی‌رایترهای استودیو گروسیان به‌جای تمرکز روی «مسیر» که به‌نظر بیش از اندازه سرراست می‌آمد، به‌دنبالِ راهی برای استتارِ واژه یا مفهومِ کلیشه‌ای بودند.

ما می‌دانستیم می‌خواهیم چنین پیامی به مخاطب ارائه شود: شما با استفاده از سرویس حمل و نقل زوپ تجربۀ یک سواری لذت‌بخش را تصاحب خواهد کرد. بنابراین لازم بود انتظاراتِ مخاطب ارتقا داده شود. انتظارِ عرفیِ مخاطب از خدمات‌دهندگانِ حمل و نقل به‌موقع رسیدن است.

با تعریفی اینچنینی ضمنِ تأکید روی موضوعِ «رسیدن» تلاش کردیم حسِ «رسیدن کافی نیست» را به مخاطب برسانیم. اما این انتظارات‌مان را برآورده نمی‌کرد. بنابراین با تعبیر «مقصد بهانه‌ست» نویدِ دو چیز را می‌دهیم:

۱. رسیدن وظیفۀ ذاتی‌ست

۲. سفر با زوپ ذاتاً دوست‌داشتنی‌ست

زوپ! 

این کلمه احساس خوبی به شما منتقل نمی‌کند؟ خوش‌حالی، شادابی، باحال بودن و...؟ 

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

قبل از هرچیزی، زوپ یک آوا است. آوایی که حالا برای خودش شخصیتی پیدا کرده و تبدیل به یک اسم به‌یادماندنی شده است. اما در مورد کار و مسئولیتش اگر بخواهید بدانید، باید بگوییم که زوپ یک سرویس آنلاین سفارش تاکسی است که قرار نیست فقط رفت و آمد را برای ما راحت‌تر کند، بلکه قرار است با آن کلی حس و حال خوب و متفاوت را تجربه کنیم و بهمان حسابی خوش بگذرد، حتی در ترافیک!
ما این پروژه را از اسفند ۱۳۹۵ به سفارش دوستان خوب‌مان در شرکت تیفای شروع کردیم و قرار شد قبل از طراحی کامل وب‌سایت، یک صفحه‌ی به‌زودی خاص و متناسب با حس و حال این سرویس داشته باشیم. 

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

تصویرسازی‌ ماشین و منظره‌ها و ساختمان‌ها را شروع کردیم، اما وسط‌‌های کار، این فکر به ذهن‌مان رسید که اگر کمی چاشنی ِ بازی به صفحه‌ی به‌زودی اضافه کنیم، ممکن است جالب‌تر هم بشود. پس تصمیم گرفتیم کاری کنیم که کاربر بتواند روی حرکت ماشین کنترل داشته باشد، اگر دوست داشت، سرعت ماشین را زیاد یا کم کند، بوق بزند، ماشین را نگه دارد و حتی کاری کردیم که این بازی با شب و روز واقعی هماهنگ باشد و در شب، همه‌چیز به رنگ شب در بیاید و در روز هم به رنگ روز. تمام این تصویرسازی‌ها و انیمیشن‌ها را با SVG و کمی هم JavaScript انجام دادیم. 

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

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

تمام تصویرسازی‌ها را حسام کرامتی عزیز، طراح خوش‌ذوق‌مان انجام داد، مرتضی هشترودی عزیز، توسعه‌ی Front-end و اجرای انیمیشن‌ها را به عهده داشت و حسام مطهری عزیز هم تگ‌لاین زیبای زوپ را نوشت و کار را تکمیل کرد. 

اوه! داشت یادمان می‌رفت! این هم راهنمای دکمه‌های بازی: 

N: Night / D:Day / H: Horn / Right: Increase Speed / Left: Decrease Speed / Break: Space 

خب، دیگر وقت، وقت بازی کردن ا‌ست: زوپ کن؛ مقصد بهانه‌ست

تنها ۴ روز به یلدا مانده بود که ناگهان مسعود گروسیان با چهره‌ای ذوق‌زده‌ -که همیشه وقتی ایده‌ای هیجان‌انگیز به ذهنش می‌رسد، سراغش می‌آید- ما را صدا کرد و همه‌ی اتفاقات جالب توی سرش را تعریف کرد. گفت که بازی سنگ، کاغذ، قیچی ِ زودفود را دیده است و از این همه خلاقیت در ترکیب تجربه‌های بومی با بازی و بازاریابی اینترنتی، به وجد آمده است. بعد پیشنهاد داد که ما هم برای دوستان صباویژنی‌ مان، به مناسبت شب یلدا کمپینی به شکل بازی طراحی کنیم. 

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

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

فرصت زیادی باقی نبود و باید کار را به یلدا می‌رساندیم. پس طراحی را شروع کردیم و به شکل موازی پیاده‌سازی Front-end را انجام دادیم. 

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

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

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

هندونه به شرط چاقو، اولین تجربه‌ی ما در ساخت بازی با هدف بازاریابی و کمپین بود، اما بازخورد عالی‌ای داشت. بازی در بعضی از شبکه‌های اجتماعی دست به دست می‌شد و ۵ برابر میزان تبلیغاتش بازدید داشت. تا چند روز بعد از یلدا هم کلی تماس تلفنی از طرف مردم با صباویژن برقرار می‌شد. 

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

راستی، بازی هندونه به شرط چاقو هنوز هم سر جایش هست و شما می‌توانید از نزدیک تجربه‌اش کنید، فقط دیگر از جایزه خبری نیست‌ها! 
خوشحال می‌شویم تجربه‌تان را از این بازی یا بازی‌ها و کمپین‌های دیگری هم که دیده‌اید یا ساخته‌اید، با ما در میان بگذارید.

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

کوک، اسم برندی بسیار خلاق و متفاوت در زمینه‌ی تولید شیرینی‌ و کیک است که با تاثیر از مکتب شیرینی اروپای غربی، انواع شیرینی‌ها، کیک‌ها، شورینی‌ها و... را تولید می‌کند. این برند در حال حاضر، هفت شعبه‌ی فعال در تهران دارد.

 جدید این وب سایت، با تمرکز بر روی شعار برند کوک، یعنی "Tasty Colors Of Cook" انجام گرفت و قرار شد علاوه بر استفاده از تعداد زیادی رنگ شادی‌آور، ارتباط معنایی خوبی هم بین این رنگ‌ها و محصولات کوک برقرار کنیم و هارمونی و هماهنگی درستی در سایت به وجود بیاوریم. 

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

وب‌سایت کوک، بخش‌های مجزایی مثل محصولات، بلاگ، استخدام، درباره و... دارد که برای هر کدام اسلایدر جداگانه‌ای طراحی کردیم تا بشود رویدادها و مسائل مهم مربوط به هر بخش را به صورت متمرکزتری نشان داد. 

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

در بخش محصولات از تکنولوژی‌های Ajax و pushState استفاده کردیم تا هم مشاهده محصولات در دسته‌بندی‌های مختلف خیلی سریع و راحت صورت بگیرد و هم از نظر SEO کاملا بهینه و استاندارد باشد. 

در قسمت استخدام سایت، کاری کردیم که مدیران سایت و کاربران از دردسرهای فرم‌های استخدام سنتی خلاص شوند. اگر یادتان باشد، در فرم‌های استخدام سنتی، فرد جویای کار، هر نکته‌ای که به نظرش می‌رسید، در فرم وارد می‌کرد و سردرگمی زیادی برای خودش و کارفرما به وجود می‌آورد، اما فرم استخدام وب‌سایت کوک، با توجه به نیاز کارفرما و نکاتی که برایش مهم است، قابلیت تغییر و انعطاف دارد.

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

خب، بهتر است بیشتر از این سرتان را نخوریم. اصلا پیشنهاد می‌کنیم که خودتان به ورژن دسکتاپ و ورژن موبایل وب‌سایت کوک سر بزنید و تمام نکاتی که گفتیم را از نزدیک ِ نزدیک ببینید. امیدواریم از بودن میان آن همه شیرینی و شورینی رنگارنگ لذت ببرید.

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

نوبتی هم که باشد، نوبت کمپین 360 درجه است؛ پس با ما در این قسمت داستان پروژه‌ها همراه شوید.

داستان از آن‌جایی شروع شد که شرکت صباویژن تصمیم گرفت کمپینی راه‌اندازی و خدمات جامع خودش را در حوزه‌ی آنلاین، به صورت متمرکزتری معرفی کند. نام این کمپین را 360 درجه انتخاب کرد و مسئولیت طراحی‌اش را هم به استودیو گروسیان سپرد.

ما تقریبا یک هفته برای طراحی وبسایت و بنرهای این کمپین فرصت داشتیم تا کار خلاقانه و متفاوتی را اجرا کنیم؛ پس فکر کردن و جلسه گذاشتن‌های 360 درجه‌ای خودمان را شروع کردیم. سرانجام ایده‌ی اصلی وب‌سایت به ذهنمان رسید و تصمیم گرفتیم که با الهام از اسم کمپین، خدمات را هم به شکل یک قفل رمز 360 درجه طراحی کنیم که هم‌زمان با اسکرول کردن، بتواند 360 درجه بچرخد و درجه‌های مختلف با خدمات مورد نظر ارتباط معنایی خوبی پیدا کنند. اما کار همینجا تمام نشد. ما المان‌های دیگری هم طراحی کردیم که قبل و بعد از اسکرول کردن، با انیمیشن خاصی در صفحه‌ی وب‌سایت حرکت کنند، المان‌هایی مثل ابر، پرچم و آیکون‌های مرتبط با خدمات صباویژن که با هربار تکان موس، حرکت آرامی می‌کنند و کنجکاوی‌ کاربر را برای دیدن بقیه‌ی اجزاء سایت برانگیخته و او را کاملا درگیر می‌کنند.

نکته‌ی دیگر در طراحی این کمپین این است که تمام گرافیک وب‌سایت با فرمت SVG پیاده شده است، به همین دلیل، سایت خیلی سریع لود می‌شود. همچنین استفاده از تکنیک Request Animation Frame  باعث شده است که اسکرول شدن سایت بسیار سیال و روان اتفاق بیفتد و در انیمیشن‌های استفاده شده در آن، هیچ خللی وارد نشود.

سایت 360 درجه ریسپانسیو طراحی شده است، اما برای نمایش در موبایل، ترجیح دادیم که طرح را متناسب با نیاز کاربران موبایلی، کاملا ساده و بدون انیمیشن‌های ورژن دسکتاپ طراحی کنیم.

در پایان باید بگوییم که خستگی ناپذیری و موازی کار کردن تمام اعضای تیم با یکدیگر، مخصوصا گروه Front-end باعث شد که ما بتوانیم کار را حتی زودتر از زمان تعیین شده تحویل داده و بازخوردهای خوبی هم از دوستان صباویژنی‌مان دریافت کنیم. 

بعد از این همه توضیح، دیگر وقت، وقت دیدن خود سایت است. به قول معروف: "شنیدن کی بود مانند دیدن!" پس پیشنهاد می‌کنیم که حتما از وب‌سایت کمپین 360 درجه، البته در لپ‌تاپ دیدن کنید.

منتظر نظرات شما هستیم.

مدتی قبل، شرکت صباویژن تصمیم گرفته بود تا به مناسبت ماه مبارک رمضان، کمپین فروش ویژه تبلیغات اینترنتی راه اندازی کند و انجام این پروژه را به تیم ما سپرد. 

حتما می‌دانید که سایت‌های کمپینی، معمولا به دلیل کوتاهی وقت، طراحی و اجرای ضعیفی دارند که این مسئله، هم به برند برگزار کننده کمپین آسیب می‌زند و هم نمی‌گذارد به اندازه‌ای که برای کمپین هزینه شده است، بازخورد خوبی دریافت شود. اما ما با همبستگی و تلاش بی وقفه تیم خود، توانستیم کمپینی طراحی کنیم که علاوه برای طراحی و اجرای حرفه‌ای، بازخورد بسیار خوب و در نتیجه رضایت مشتری را به دنبال داشته باشد.

اگر واقعیتش را بخواهید، ما برای طراحی و اجرای Front-End  این وب سایت، تنها چند روز فرصت داشتیم و باید سایت را برای روز اول ماه رمضان آماده می‌کردیم. بنابراین در فرصت کوتاه باقی مانده، یک جلسه ایده پردازی برگزار کرده و سرانجام تصمیم گرفتیم صفحه فرود یا Landing Page را با ترکیبی از المان‌های مخصوص سفره افطار و ابزارهایی که ممکن است هر روز در فضای دیجیتال مورد استفاده قرار گیرند، شروع کنیم. بنابراین هم زمان با طراحی سایت، عکاسی از المان‌های سفره افطار ایرانی، مثل نان سنگک، خرما، چای و ابزار مورد نیاز دیگر، توسط همکار عزیزمان، آقای حامد موسوی آغاز شد. تیم Front-End، آقای نیما عمرانی و مرتضی هشترودی نیز به صورت هم زمان و موازی، اجرای سایت را به عهده گرفتند. 

در بخش اول سایت، سعی کردیم علاوه بر استفاده از المان‌های مرتبط، از انیمیشنی جذاب و پر هیجان استفاده کنیم تا کاربر را با این واقعیت مواجه کنیم که این صفحه حامل خبر بسیار مهمی است. انیمیشن به شکلی طراحی شد که ضمن اسکرول، المان‌های مختلف سایت، حرکت کرده و باعث می‌شدند مخاطب ارتباط خوبی با وب سایت برقرار کند. 

در بخش دوم وب سایت، جدول بزرگی طراحی کردیم که به شکلی شفاف، برنامه‌های مختلف تبلیغاتی صباویژن را معرفی کند. بخش‌های دیگر سایت را نیز به معرفی مختصر خدمات صباویژن اختصاص دادیم. در هر بخش از وب‌سایت، به فراخور نیاز و گرافیکی که داشت، از انیمیشنی خاص و توجه برانگیز استفاده کردیم. همچنین بخشی را نیز به توضیحات مختصری در مورد مجموعه اختصاص دادیم تا کاربرانی که با شرکت صباویژن آشنایی ندارند هم بتوانند به شناختی کافی از مجموعه برسند.

در حال حاضر، علاقه مندیم که اعلام کنیم با توجه به این که گستره خدمات ما در زمینه دیجیتال وسیع تر و ظرفیت تیم اجرایی‌مان هم بیشتر شده است، این امکان را پیدا کرده‌ایم که در زمان‌هایی کوتاه، کمپین ‌های تبلیغاتی شما عزیزان را از مرحله ایده‌پردازی تا پیشنهاد اسلوگان، کپی رایتینگ، طراحی صفحات تعاملی و طراحی ست بنرهای تبلیغاتی اجرا کنیم. در صورت تمایل، می‌توانید از طریق صفحه تماس وب سایت استودیو گروسیان، با ما ارتباط برقرار کنید.