این شما و این کمپین 360 درجه!

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


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


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


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

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


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


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

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



Amir Mahdi Parsaei :
۱۶ شهریور ۹۵
بسیار زیبا و عالی
پاسخ : از محبت شما سپاسگزاریم.
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی