باید قبول کنیم  Webpack ابزار پیچیده‌ای‌ست. شاید یکی از دلایل اصلی، گستردگیِ آن در مدیریت فایل‌های پروژه باشد. Webpack فراتر از ابزارهایی مانند Gulp و Grunt کمک می‌کند مدیریت بهتری روی assetهای استاتیک داشته باشیم و از آن‌ها به طور مستقیم در کد استفاده کنیم. کاری که در نهایت یک «گراف وابستگی» یا Dependency Graph ایجاد می‌کند. 

در این مقاله می‌خواهم به طور اختصاصی در مورد فعال کردن HMR یا Hot Module Replacement در یک پروژه‌ی ساده توضیح بدهم. چرا یک پروژه ساده؟ اصلا منظور از پروژه ساده چیست؟ 

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

پروژه ساده از تعدادی ماژول (همان فایل خودمان) Javascript تشکیل شده به همراه یک فایل CSS و یک فایل index.html. می‌خواهیم فایل‌های js را یکی کنیم و در عین حال با تغییر آن‌ها یا استایل‌ها بدون ریفرش شدن بروزر تغییرات جدید را مشاهده کنیم. همین! :)

 

 

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

 

 

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

 

 

 

 

 

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

 

چرا بازتعریف مفاهیمِ رایج ضروری‌ست؟

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

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

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

 

مثلث فرانت‌اند

سه قسمت اصلی فرانت‌اند CSS, HTML و Javascript هستند. در مورد اینکه آیا HTML و CSS جزو زبان‌های برنامه‌نویسی هستند یا نه حرف و حدیث فراوان است. 

به طور کلی دو الگو  (paradigm) در مورد زبان‌های برنامه‌نویسی وجود دارد. زبان‌هایی که به یک سیستم می‌گویند «چگونه» کاری انجام شود و زبان‌هایی که می‌گویند «چه چیزی» انجام شود. دسته اول را imperative programming و دسته دوم را declarative programming می‌نامند. برای مثال زبان‌های c, java, php, python , … در دسته‌ی اول و زبان‌های SQL, Curl, html,… در دسته‌ی دوم قرار می‌گیرند.

این دو الگو نه تنها در مورد زبان‌های برنامه‌نویسی بلکه در نوع توسعه‌ی کد در یک زبان مشخص نیز وجود دارند. در ساده‌ترین شکل وقتی از functional programming استفاده می‌کنیم و برای مثال تابع factorial() را نوشته و در قسمت‌های مختلف از آن استفاده می‌کنیم، از الگوی declarative استفاده کرده‌ایم. برای توضیح بیشتر و بهتر مطالعه این مقاله را پیشنهاد می‌کنم. 

برگردیم به دو قسمت اساسی از فرانت‌اند. با تعریف‌های بالا HTML و CSS دو زبان هستند که از الگوی declarative programming استفاده می‌کنند. خب البته در مورد اینکه این دو «زبان» هستند هم مناقشه وجود دارد چه برسد به اینکه کلمه‌ی "programming" را هم به آن اضافه کنیم! واقعا بستگی به نوع نگاه دارد. ترجیح می‌دهم بیشتر وارد این موضوع نشوم و مابقی داستان را به خودتان می‌سپارم. برای اینکه با یک نگاه متفاوت آشنا شوید پیشنهاد می‌کنم ارائه‌ی Lara Schenck در CSSConf EU 2018 را ببینید. او در مورد CSS Algorithms صحبت می‌کند

 

سفت و سخت برای بازتعریف فرانت‌اند

خب پس دوباره یادآوری کردیم که HTML، CSS و javascript سه ضلع اصلیِ مثلث فرانت‌اند هستند. اما وزن آن‌ها به چه صورت است؟ هر کدام چه وظیفه‌ای دارند؟ بازار ایران از چه زاویه‌ای به فرانت‌اند نگاه می‌کند و مهمتر از آن توسعه‌دهنده‌ها چه ایده‌ای راجع به فرانت‌اند دارند؟

از نظر ما (منظورم از ما مجموعه‌ی استودیو گروسیان است) هسته‌ی اساسی در فرانت‌اند بدون هیچ شکی HTML و CSS است. این دو با همکاری هم یک ایده را از مرحله طرح به مرحله پیاده‌سازی می‌رسانند. یک توسعه‌دهنده‌ی فرانت‌اند همیشه تشنه‌ی یادگیری در این دو زبان خواهد بود. بهترین منابع هم specificationهای w3c هستند که وضعیت توسعه‌ی فعلیِ این زبان‌ها و همینطور تعاریف پایه را ارائه می‌دهند.

 

HTML: اسکلت وب

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

یک صفحه‌ی وب درست مانند یک ساختمان است. پی و اسکلت آن را کد HTML تشکیل می‌دهد و دقیقا به همان اندازه این کد اهمیت دارد. در نهایت از طریق کدهای HTML است که مفهومی را به موتورهای جستجو القا می‌کنیم و از این طریق document خود را از نظر SEO بهبود می‌بخشیم. در واقع صفحه‌ی ما باید هم برای انسان و هم برای ماشین به یک اندازه قابل خواندن و فهمیدن باشد. با استفاده‌ی درست از HTML محتوا را می‌توان برای انسان‌ها و ماشین‌ها خواناتر کرد. حال این ماشین می‌توان موتور جستجو باشد یا یک وسیله‌ برای کمک به کسانی که از ناتوانی‌های جسمی رنج می‌برند مانند screen readerها.

به screen readerها اشاره شد، مفهومی تحت عنوان Accessibility وجود دارد که بر جنبه‌ی انسانی وب تاکید می‌کند. اینکه فضای وب برای تمام انسان‌ها چه آن‌ها که دارای ناتوانی‌های جسمی هستند و چه آن‌ها که نیستند قابل دسترس باشد. زبانی که وظیفه‌ی اصلی پیاده‌سازی چنین مفهومی را بر عهده دارد HTML است. 

این زبان دنیای نه چندان وسیع اما مهمی‌ست. بیشتر توسعه‌دهنده‌ها/برنامه‌نویس‌ها با آن آشنا هستند و همین ممکن است باعث شود به آن نگاه نادرست و گاه تحقیرآمیز داشته باشند.

 

 

CSS: نازک‌کاریِ وب

خب در مثال ساختمان تا پی‌ریزی و اسکلت‌بندی پیش رفتیم. اما با این سر و شکل هیچ شخصی حاضر نیست زندگی خود را به این ساختمان منتقل کند. مراحل قبلی را در ساختمان‌سازی اصطلاحا «سفت‌کاری» می‌گویند. مراحل بعدی که شامل پوشش ظاهری ساختمان است به «نازک‌کاری» معروف‌اند. عملیاتی مانند کاشی‌کاری، نقاشی، برق‌کاری، لوله‌کشی (که خاطرتان هست!)، نصب در و پنجره و ... 

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

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

وقتی توسعه‌دهنده‌های امروز در مورد نامفهوم و غیرقابل پیشبینی بودن CSS صحبت می‌کنند برایم غیرقابل درک است. شاید این موضوع در گذشته‌ی دور (مثلا ۱۵ سال پیش در دوران IE6) صادق بود اما حقیقت این است که CSS در گذر زمان حسابی پخته و قابل اطمینان شده است. به وجود آمدن preprocessorها مانند SASS و LESS باعث شده است قدرت این زبان به مدد متغیرها، توابع و به طور کل اضافه شدن منطق به کد افزایش پیدا کند. 

پس اگر خود را توسعه‌دهنده‌ی فرانت‌اندی می‌دانید که از CSS فراری هستید بدانید یک جای کار می‌لنگد و بهتر است در انتخاب‌هایتان بازنگری کنید. 

 

Javascript: منطق بروزر (و نه وب البته!)

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

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

می‌توانیم دو وظیفه‌ی اصلی Javascript در فرانت‌اند را به تولید/تغییر DOM و مدیریت دیتا خلاصه کنیم. اگر کمی کلی‌تر به قضیه نگاه کنیم مورد دوم نیز در نهایت به مورد اول ختم می‌شود! گویا این زبان آمده‌ است تا پس از تولید اولیه‌ی DOM امکان کار روی آن را برایمان فراهم سازد. تولید و تغییر DOM به قدری پررنگ می‌شود که بخشی از فریم‌ورک‌های این زبان به طور کلی وظیفه‌ی تولید DOM را بر عهده می‌گیرند. کافی‌ست page source یک اپلیکیشن نوشته شده با React (بدون server side rendering) را ببینید تا متوجه منظورم شوید.

 

دسته‌بندی‌های فرانت‌اند: 

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

 

چند توصیه براساس تجربه:

برای عمیق شدن در هر کاری باید به ریشه‌ها پرداخت. فرانت‌اند از این قاعده مستثنی نیست. داستان زیرعنوان مقاله «مثلثی که به خط تبدیل می‌شود» همین است. اگر برداشت ما از فرانت‌اند فقط محدود به Javascript و فریم‌ورک‌های آن باشد مثلث را به خط تبدیل کرده‌ایم. فراموش نکنیم که وظیفه‌ی اصلی Javascript سر و کله زدن با DOM است. یعنی زبان HTML. HTML هم به خودی خود کار راه بنداز نیست و بزک می‌خواهد. یعنی زبان CSS

اگر نتوانیم یک document ساده را اصولی به کد HTML تبدیل کنیم یا لی‌اوت یک طرح را با استفاده از CSS عینا پیاده‌سازی کنیم پس در فریم‌ورک‌ها هم کُمِیت‌مان لنگ خواهد بود.

جمله‌هایی از این دست را زیاد می‌شنویم: 

«HTML و CSS رو تو یه هفته میشه یاد گرفت و جمعش کرد» یا 

«بابا HTML و CSS که دیگه گلابیه، یه باتن می‌خوای بذاری رو هاور رنگ عوض کنه. دیگه این همه داستان نداره» و ... 

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

 

حرف آخر:

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

سلام، امیدوارم خوب باشید. من نیما عمرانی هستم و امروز می‌خواهم به مناسبت شروع حساب گیت‌هاب استودیو گروسیان، سه پروژه‌ی خام یا استارتری (starter) را که اولین‌ ریپوهای ما در گیت‌هاب هستند به شما معرفی کنم. 

پروژه‌ی استارتر یا استارتر کیت (Starter Kit) از تعدادی فولدر و فایل تشکیل شده که چارچوب یک پروژه را مشخص می‌کند. با کمی بالا و پایین کردنِ فایل‌ها و مطالعه‌ی مستندات می‌توانید شروع به کد زدن کنید و نگران ابزارها و کانفیگ‌های عجیب و غریب نباشید. برای مثال کیت‌های مختلفی برای فریم‌ورک react وجود دارد که شما با توجه به نوع استفاده و ابزار مورد علاقه می‌توانید یکی را clone کرده و شروع به کار کنید.

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

هسته‌ی اصلی سه کیت، ساختار sass در آن‌ها است. نوع نگاه ما به کامپوننت‌های UI براساس آموخته‌هایمان در OOCSS و SMACSS بوده و از BEM به عنوان روشی برای نام‌گذاری کلاس‌ها در جهت ماژولار دیدنِ  بخش‌های مختلف یک طرح استفاده می‌کنیم.

بسیار خب برویم سراغ معرفی کیت‌ها. با قدیمی‌ترین‌شان شروع می‌کنم.

 

 

1. starter-gulp-browserify-sass-php

 

در این کیت از ابزار gulp برای build system استفاده می‌کنیم. تسک‌های اصلی مربوط به js، sass و sprite.svg هستند. چند تسک کوچک دیگر هم برای favicon، browser-sync و  build پروژه برای deploy کردن داریم. دستورهای اصلی با npm اجرا می‌شوند و در package.json ست شده‌اند.

همانطور که می‌دانید برای جداسازیِ فایل‌های جاوااسکریپت و همینطور استفاده مجدد از آن‌ها می‌توانیم از module managerی که در node.js وجود دارد استفاده کنیم. اما حالا که در فضای بروزر هستیم چه کنیم؟ browserify ابزاری‌ست که قابلیت module manager node.js را که همان require/export کردن فایل‌هاست در بروزر برایمان فراهم می‌کند. 

با sass که حتما آشنا هستید و نیاز به توضیح بیشتر ندارد. 

استفاده ما از php در این کیت و یک کیت دیگر صرفا کاربرد template engine آن است. ما markup قسمت‌های مختلف یک صفحه در طرح را در یک ساختار منظم و در فایل‌های جداگانه قرار می‌دهیم. ضمن اینکه تیم‌های فنیِ بیشتر مشتریان ما با این زبان کار می‌کنند. علاوه بر آن ممکن است پروژه در آینده به CMS (برای مثال وردپرس) متصل شود. 

 

 

2. starter-webpack-es6-sass-php

 

در این کیت با gulp خداحافظی و به webpack سلام کردیم! 

Webpack فراتر از gulp تنها ابزاری برای مثلا چسباندن فایل‌های js نیست. در یک پروژه‌ی فرانت‌اند با حضور webpack مدیریت کلیه‌ی فایل‌ها بر عهده‌ی این ابزار قرار می‌گیرد به طوری که  webpackیک گراف وابستگی (dependency graph) ایجاد کرده تا هر ماژولی که در پروژه استفاده کردید را در نهایت وارد bundle نهایی مربوط به آن کند. 

در این کیت می‌توانید از قابلیت‌های es2015 یا همان es6 استفاده کنید. خروجی نهایی با استفاده از babel به es5 کامپایل می‌شود درنتیجه نگرانی از بابت پشتیبانی در مرورگرهای مختلف نخواهید داشت. 

 

 

3. starter-webpack-react-es6-sass

 

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

در این کیت از react به عنوان کتابخانه‌ای برای تولید کامپوننت‌های UI و همینطور redux برای مدیریت state در کل پروژه استفاده کردیم. 

 

خب کیت‌ها را به اختصار معرفی کردم. امیدوارم برای شما هم مفید باشند.  

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

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

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

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

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

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

 

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

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

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

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

 

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

 

۳.Paperpillar 

سومین استودیو‌یی که می‌خواهم به شما معرفی کنم ‌‌‌Paperpillar نام دارد. این استودیو آن‌قدر خلاق و حرفه‌ای‌ست که هرروز صبح وقتی سایت دریبل را باز می‌کنم، محال است اول کارهای این استودیو را چک نکنم. به جرات می‌توانم بگویم هر فریم از کارها، یک غافل‌گیری هیجان‌انگیز دارد. این استودیو در کشور اندونزی فعالیت می‌کند و تمرکز اصلی کارش برندینگ و خلق هویت، طراحی UI/UX  و پیاده‌سازی صفحات وب و اپلیکیشن موبایل، طراحی آیکون و تصویرسازی ا‌ست. حتما حتما حتما پروژه‌هایشان را در صفحات Dribbble  و ‌‌‌Behance  دنبال کنید و با روند انجام پروژه‌ها، بیش‌تر آشنا شوید. خلق کاراکتر و هویت بصری منحصر به هر محصولی، از توانایی و ویژگی‌های این استودیو‌ست. البته سر زدن به صفحه‌ی اینستاگرام Paperpillar هم، خالی از لطف نخواهد بود.

از طراحان خوب این استودیو هم می‌توانم به Ghani Pradita، Saepul Rohman، Salestinus  Sustyo، Hafid Fachrudin اشاره کنم. 

 

 

 

 

 

 

 

 

 

 

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

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

 

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

 

 

Adidas: Creativity is the answer

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

 

 

Nike: Vai na brasileiragem 

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

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

 

 

 

Bwin: Who stole the cup

Bwin بزرگ‌ترین سایت شرط‌بندی فوتبالی محسوب می‌شود و تابه‌حال حمایت مالی چند تیم باشگاهی معروف از جمله بایرن مونیخ و رئال مادرید را به‌عهده داشته‌است. "چه کسی جام را دزدیده" نام ویدیوی پرستاره‌ی Bwin است؛ نه ستاره‌های عادی، ستاره‌هایی که نسل‌های متمادی از آن‌ها خاطره دارند و حسابی برای همه آشنا و نوستالژیک‌اند. کسانی مثل کافو، مارادونا، افن‌برگ و دل‌بوسکه! زمان این ویدیو تبلیغاتی نسبتا طولانی‌ست، اما تضمین می‌کنم که میخ‌کوب تا آخر ویدیو را نگاه می‌کنید و دنبال بقیه‌اش هم خواهید گشت. در این 2،3 دقیقه از تکنیک‌های سینمایی حرفه‌ای استفاده شده و شما احساس می‌کنید که دارید تبلیغ یک فیلم بزرگ را تماشا می‌کنید: فیلم جام‌جهانی! یک خط داستانی جذاب و ارجاعات جالب، استفاده از تصاویر بزرگ‌ترین ستاره‌ها و کمال بصری در این ویدیو، آن را تبدیل به یکی از پر بازدیدترین ویدیوهای جام‌جهانی 2018 کرده‌است. 

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

 

 

کوکاکولای معروف، همراه همیشگی 

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

 

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

 

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

 

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

 

 

 

از هشتگ‌ها چه‌خبر؟

 

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

 

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

 

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

 

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

 

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

 

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

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

 

در کل هشتگ‌ها را می‌توان به سه کاربری کلی دسته بندی کرد: نام تجاری یا برند، هشتگ کمپین و هشتگ‌های محتوایی یا توضیحی.  

 

• نام تجاری یا برند: صاحبان کسب و کارهای موفق در سرتاسر دنیا، به‌سراغ هشتگ اختصاصی برند خود می‌روند، شما هم بدون توجه به این‌که کسب و کارتان کوچک است یا بزرگ و جاافتاده، بروید سراغ طراحی هشتگ مخصوص خودتان؛ نام مجموعه‌تان به‌اضافه یک مربع کوچک کارآمد قبل از آن. بیایید حالت‌های مختلف را باهم بررسی کنیم. ممکن است نام مجموعه شما، یک نام کوتاه و تک کلمه‌ای باشد یا برعکس، یک نام چند سیلابه و طولانی داشته باشد. اگر از دسته اول هستید، بهترین هشتگ همان نام کامل مجموعه شماست؛ مفید، مختصر و مستقیم. مثلا #Nike، اما اگر از دسته‌ی دوم هستید، به شما پیش‌نهاد می‌کنم نام مجموعه را مخفف کرده و از آن هشتگ بسازید یا مهم‌ترین بخش آن‌را جدا کرده و تبدیل به هشتگ کنید. مانند کارخانه‌ی ایران خودرو که Iran Khodro Company را به #ikco تبدیل کرده‌است.

 

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

 

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

 

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

 

• جستجو قبل از انتخاب هشتگ

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

 

• استفاده از هشتگ‌های مرتبط

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

 

• مفید و مختصر

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

 

• استفاده از چند هشتگ

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

 

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

 

۲.Ueno 

 

Uneo یوانو یک آژانس تبلیغاتی بزرگ و فوق حرفه‌ای است که برای ‌Google, Apple, Facebook, Uber, ESPN, Redbull, Samsung, Visa, Dropbox ,Slack  و کمپانی‌های ابر قدرت دیگر، پروژه‌های برندینگ و مارکتینگ و توسعه محصول انجام می‌دهند. البته ناگفته نماند که مشتریانش معتقدند که یوانو، چیزی فراتر از یک آژانس تبلیغاتی‌ست؛ چیزی مثل یک چاقوی سوییسی همه فن حریف و طراحی شده. 

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

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

قسمت اول: کمپین‌های ایرانی

 

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

 

 

#همراهتیم

 

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

 

#همراهتیم، یک هشتگ درست و به‌جا

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

 

 

چرا همراهتیم می‌تواند کمپین موفقی باشد؟

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

 

 

 #بردبرد

 

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

 

 

هشتگ #بردبرد و تاثیر آن روی مخاطب

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

 

بازخورد در شبکه‌های اجتماعی

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

به‌نظر شما بهتر بود سن‌ایچ از تصویر بازیکنان ایرانی هم استفاده می‌کرد یا همان استفاده از تصاویر بازیکنان خارجی ایده‌ی بهتری‌ست؟

 

 

 

#گل_ناب

 

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

 

 

 

 هشتگ گل ناب و تاثیرات آن

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

 

 

 

 #طرفدارایرانم

 

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

 

#طرفدارایرانم در چه وضعیتی است؟

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

 

 

 

 

 بانک ملی و تیم‌ملی 90نفره

 

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

شما برای حضور در این کمپین چهار راه داشتید.

1. تی‌شرت نوشته و #پیراهن_ملی

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

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

3. با معرفی هر نفر به سامانه بام، کسب امتیاز می‌کنید و شانستان برای برنده شدن بالا می‌رود.

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

 

مشکل کجاست؟

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

 

#پیراهن_ملی و ایرادات

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

 

 

از اینستاگرام چه خبر؟

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

 

 

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

 

 

 

• مزمز جزو آن برندهای قدیمی‌است که در فضای دیجیتال، هرروز بهتر از دیروز ظاهر می‌شود. از تصاویر گرافیکی جالب و نو تا مسابقه‌های بامزه و اسم‌های خلاقی که برای کمپین‌ها انتخاب می‌کند. این‌بار هم مزمز با تصاویر جذاب و اسم جالبش وارد شد و توانست دنبال‌کنندگان زیادی برای خودش دست و پا کند. البته این‌که جایزه این مسابقه پیش‌بینی 5عدد آیفون 10 بود هم در فراگیر شدن ماجرا بی‌تاثیر نیست!

 

 

  

 

• و اما رقیب اصلی، دیجی‌کالا این‌بار با جایزه‌های گران‌قیمت و عجیبی وارد گود شد! از خودروی سراتو که جایزه نفر اول است گرفته تا 4500عدد کارت هدیه 100هزارتومانی! با چنین جوایزی بعید است که تعداد زیادی از کاربران اینستاگرامی با چنین کمپینی همراهی نکنند.  با این‌که اسم انتخابی نسبت به جایزه‌ها مناسب و بامسما است، اما نظر شخصی من این است که دیجی‌کالا می‌توانست با اسم و هشتگی قوی‌تر وارد دایره‌ی کمپین‌های اینستاگرامی شود تا بیش‌تر از پیش خاص باشد.