همه ما نشان‌های تجاری شرکت‌های بزرگ رو بارها روی محصولاتشون می‌بینیم و تبلیغات روی بسته‌بندی، سایت و بیلبورد‌ها دنبال می‌کنیم اما روند طراحی و داستان بسیاریشون رو نمی‌دونیم.
این پست داستان روند طراحی لوگوی فیلیموست که حتی بسیاری از همکاران من در صباایده نشنیده‌اند و برای اولین‌بار منتشر میشه :)
سلام!
من تازه توی تیم فنی صباایده شروع به کار کرده بودم تا طراحی رابط‌کاربری سایت و نرم‌افزارهای اندروید و iOS سرویس جدید مجموعه که به نوعی برادر کوچکتر آپارات بود رو طراحی کنم.
فیلیمو سرویس VOD (Video on demand) است. آرشیوی از هزاران فیلم و سریال ایرانی و خارجی بر بستر اینترنت. (برای آشنایی بیشتر با فیلیمو بخوانید)
زمانی که من کار رو شروع کردم نسخه بتای آپارات فیلیمو منتشر شده بود (گزارش دیجیاتو از نسخه بتای فیلیمو)
برای فیلیمو، لوگویی طراحی شده بود که از نظر بصری پیچیده و ناهماهنگ بود و رنگ مناسبی برای ارائه در وب نداشت. پس با سرپرستم هماهنگ شدم تا پیشنهادم رو در رابطه با لوگو مطرح کنم.
معمولا همه چیز از خط‌خطی‌ها و اتودها روی کاغذ شروع میشه اما من عادت دارم قبل از اینکه ایده‌هام رو روی کاغذ طراحی کنم یک مودبورد (Mood Board) بسازم و هر چیزی که به شکلی با حس‌وحال موضوع طراحی میتونه در رابطه باشه رو یکجا جمع کنم.
این روش برای اینکه حجم پراکنده ایده‌ها و عناصر الهام‌بخش رو سامان بدین عالیه.
تصاویر، کلمات، رنگ‌ها و هرچیز دیگه‌ای که با مفهوم نشانه در ارتباط بود رو کنار هم جمع‌آوری کردم.
مثلا پیام تبلیغاتی (slogan) فیلیمو: «بی‌نهایت آرشیو فیلم» که کمی بعد به «بی‌وقفه فیلم ببینید» تغییر کرد.
بی‌نهایت مفهومی انتزاعی است که در رشته‌های ریاضی به‌معنای «فراتر از هر مقدار» است و برای توصیف مقادیر بیش از هر عدد یا غیرقابل اندازه‌گیری به کار می‌رود. نشانهٔ بی‌نهایت در ریاضیات ∞ است.
به تصویر کشیدن مفهوم «بی‌نهایت» من رو یاد آثار موریس اشر (morris escher) هنرمند هلندی انداخت. ویژگی آثار هنری موریس اشر، استفاده از هندسه و علم ریاضی در کنار ترکیب‌بندی حاصل از خطای بصری و تکرار برای تداعی کردن مفهوم بی‌نهایت و سازه‌های غیرممکن بود.
نوار موبیوس حلقه‌ای است که توسط ریاضیدان آلمانی به نام آگوست فردینانند موبیوس () کشف و ثبت شد. این حلقه یادآور همان مفهوم بی‌نهایتی است که در آثار اشر دیدیم.
نوار موبیوس نواری است که دو لبه آن بر هم قرار گرفته و حلقه‌ای را بوجود می‌آورد. البته باید یک لبه انتهایی قبل از اتصال به لبه دیگر نیم دور چرخانده شود. می‌توان بین هر دو نقطه از سطح این نوار، بدون قطع کردن لبهٔ آن، خط ممتدی کشید.
تصاویر حلقه فیلم، سینماتوگراف و هرآنچه که در تاریخ سینما که می‌توانست برای طراحی لوگوی فیلیمو تداعی کننده و الهام بخش باشه هم بخش دیگری از محتوای پوشه من بود.
جستجو در دنیای واقعی:
آشنایی و مطالعه سرویس‌های مشابه خارجی(نت‌فلیکس) یا داخلی(فیلم‌نت) نقاط مثبت و ضعفشون رو مشخص می‌کنه.
در همین مطالعات و کنجکاوی‌ها بود که متوجه شباهت لوگوی فیلم‌نت با F-Secure شدم :)))
خط‌خطی‌های آشفته
اولین خطوط بر اساس همان مثلث پخش (PLAY icon) در ترکیب با حلقه فیلم و سینماتوگراف و... اما در نهایت، ترکیب حلقه موبیوس و آیکون پلی لوگوی نهایی رو شکل داد.
پالت رنگی فیلیمو
رنگ یکی از عوامل موثر در شکل‌گیری نشانه است و تاثیرات مستقیمی بر روی ذهنی مخاطب می‌گذارد.
رنگ لوگو فیلیمو در نسخه بتا برپایه لوگوی آپارات شکل گرفته بود و قرمز بود. کمی بعد زرد شد و در آخرین پیشنهاد بنا بود طلایی باشه!
طلایی؟!
جدای از بحث روانشناسی رنگ‌ها که طلایی رو رنگی تجملاتی معرفی می‌کنه. نمایش دادن رنگ طلایی در مانیتور دست‌و پاگیر بود و عملا نمی‌شد به عنوان رنگ سازمانی در طراحی رابط‌کاربری به راحتی استفاده بشه. بنابراین در کنار اتودهای طلایی در سه حالت تخت و طیف‌دار، رنگ نارنجی رو هم پیشنهاد دادم و خوشبختانه تایید شد.
روانشناسی رنگ:
رنگ نارنجی انرژی و قدرت رنگ قرمز را همراه با شادی رنگ زرد همراه دارد. بنابراین با شادی ، تابش خورشید و گرما همراه است. نارنجی نمایانگر غیرت و جدیت، شیدایی و شیفتگی، شادی، خلاقیت و سازندگی، اراده و نیت ، جذابیت، موفقیت و شجاعت می باشد.
رنگ نارنجی بر روی روحیه تاثیر مثبت می‌گذارد و القا کننده‌ی اثرات نیروبخش در انسان است. برای همین برای تبلیغات حوزه سرگرمی، تفریح و ورزش استفاده می‌شود و میان جوانان بیشترین مخاطب را دارد.
یکی از ابزارهایی که همیشه برای انتخاب پالت رنگی ازش استفاده می‌کنم سایت colourlovers هست.
نمونه ای از یکی پالت‌های رنگی رو انتخاب کردم و پرامتیازترین رنگ نارنجی رو با کد رنگ (#FFC23B) به عنوان رنگ اصلی انتخاب کردم.
و برای القای حس چرخش در لوگو بصورت پلکانی از نارنجی به سمت قرمز حرکت کردم.
اجرای نهایی، رازهای پنهان
اتودها تنها طراحی میشن تا کلیت و مفهوم رو برسونن.
اما عملکرد بی‌نقص در اجرا بحث جداگانه‌ای هست که نیازمند آشنایی با قوانین علم گرافیک هست.
یک نشانه خوب جدا از القای مفهوم هماهنگ با سازمان، نیازمند یک اجرای قانونمند است.
تمام تلاش یک گرافیست در این مرحله ایجاد رابطه‌ای پنهانی میان خطوط و بردارهای سازنده‌ی اثر با چشمان و مغر مخاطبان است.
من عاشق نسبت‌ها هستم. رازهای پنهانی که در اولین نگاه دیده نمی‌شوند اما مکالمه‌ای پنهانی با مخاطب برقرار می‌کنند که نتیجه آن هماهنگی و آن‌چیزی است که بهش میگیم زیبایی!
همین بردارها، نسبت‌ها و خطوط نامرئی هستن که گفتگوی بین چشم و مغز رو منظم می‌کنند تا تصویری دقیق از اثر در ذهن مخاطب ثبت بشه.
طراح گرافیک در طول مدت طراحی اتودها باید تمامی نکات رو در نظر بگیره و پتانسیل لوگو در هر شرایط رو بررسی کنه.
هر برندی باید کاتالوگ نحوه استفاده داشته باشه تا سایر طراحان و حتی آژانس‌های تبلیغاتی نحوه صحیح استفاده از اثر رو در شرایط مختلف بدانند. این مجموعه قوانین در دفترچه‌برند (Brand Book) ثبت میشه و در اختیار شرکت‌های همکار و طراحان مجموعه قرار می‌گیره.
در این دفتر تمامی بایدها و نبایدهای لوگو شرح داده میشه. رنگبندی اثر روی زمینه‌های مختلف، فاصله تایپوگرافی از لوگو بصورت عمودی یا افقی و نسبت فاصله لوگو در کنار لوگوهای دیگر و...
لوگو باید در ابعاد کوچک مشخص و خوانا باشه. مثلا در مورد فیلیمو برای ابعاد کوچک و تک‌رنگ، لوگوی متفاوتی طراحی کردیم تا در هر شرایطی مشخص باشه.
فیلیمو یک سرویس اینترنتی است که باید آیکونش برای زبان طراحی اندروید و iOS در ابعاد مختلف و هر رزولوشنی به خوبی در میان ده‌ها نسخه اپلیکیشن پیدا بشه.
ممنون که تا انتهای این داستان با من بودین
نظر شما در مورد طراحی لوگوی فیلیمو چیه؟ خوشحال میشم نظرتون رو در این‌باره بشنوم :)
اگر شما هم گرافیست هستین میتونین با همین تگ، #داستان_طراحی خودتون رو تعریف کنید.
اگر این مطلب براتون مفید بوده؛ لایکش کنید تا به افراد بیشتری پیشنهاد بشه.
خوشحال میشم من رو در شبکه‌های اجتماعی دنبال کنید:
