خلق KOTAverse به مناسبت دهمین سالگرد KOTA
10 ژانویه 2024
نویسنده: جیمز پایپر
به لحظهای مهم در سفر ما خوش آمدید – یک دهه از ساخت و ساز، ولی هنوز هم یادم هست که چگونه در گوشهای آفتابی از یک کافه نشسته و نامهای پیشنهادی برای یک آژانس طراحی جدید را یادداشت میکردم، چیزی شبیه به فرزند اولم.
در این 10 سال، ما اکنون یک تیم فوقالعاده و متشکل از 15 نفر بااستعداد هستیم که بهطور مداوم کارهای شگفتانگیزی برای مشتریان در حال رشد خود تولید میکنند.
در سال 2023 تصمیم گرفتیم این دستاورد را با یک وبسایت تازه (که به زودی منتشر خواهد شد) و همچنین یک پروژه مستقل جشن بگیریم که بتوانیم تاریخچه و آنچه که اکنون هستیم را به اشتراک بگذاریم.
همکاری
چون میخواستیم این پروژه نتیجه تلاش گروهی باشد، تیم طراحی (مت، مارگو، نیکولا و خودم) را دور هم جمع کردیم تا به تبادل ایدهها بپردازیم.
نیازمندیها:
- وبسایت میکروسایتی مستقل
- شامل تاریخچه ما
- نشان دادن وضعیت کنونیمان
- بسیار تعاملی
- استفاده از فناوریهای وب پیشرفته
- طراحی بزرگ و برجسته
نیکولا، طراح دیجیتال بااستعداد ما، لحظهای درخشان و خلاقانه داشت: “باید اسمش رو KOTAverse بذاریم، نه؟!”
BINGO! … بدین ترتیب KOTAverse رسماً متولد شد. حالا وقت طراحی است.
طراحی جدول زمانی
تصور اینکه KOTAverse چگونه به نظر خواهد رسید، چالش بعدی ما بود. ما حال و هوای فضایی و آیندهنگرانهای که این نام در ذهن ایجاد میکند پذیرفتیم و در مرحله تحقیق به چندین ایده شگفتانگیز برخورد کردیم.
نخستین مورد، مخلوطکن blob بود، یک مؤلفه تعاملی WebGL. با توجه به اینکه ما در KOTA به گرادیانتهای مخلوط شده علاقه داریم، این گزینه برای blob بسیار جذاب به نظر میرسید. این یک شکل آیندهنگرانه است ✅، از فناوری پیشرفته بهره میبرد ✅، و عملکردی تعاملی دارد ✅!
دومین ایده جالب که کشف کردیم، پرتفوی سید استامپل، یک توسعهدهنده وب خلاق و بااستعداد مستقر در هلند، بود (بیشتر درباره سید بعداً خواهیم گفت). ما از نمایش کارهای او در صفحه اصلی با استفاده از یک کاروسل 3D چرخان بسیار تحت تأثیر قرار گرفتیم و به فکر ارائه تاریخچه خود افتادیم.
با این ایدهها و blob در ذهن، شروع به آزمایش با استفاده از After Effects کردیم. مفهوم اصلی در نظر ما، سفر تعاملی از طریق تاریخ است. وقتی کاربران اسکرول میکنند، آنها یک جدول زمانی بصری و پویا را خواهند دید که رویدادها حول یک blob مرکزی میچرخند. هر رویداد قابل کلیک است و کاربران را دعوت میکند تا عمیقتر بروند و بیشتر درباره هر لحظه مهم تحقیق کنند.
نسخه دمو اولیه
زمانی که همه ما از این مفهوم راضی بودیم، طراحی را کمی بهبود دادیم.
رفتن به عمق
برای بخش “ما اکنون چه کسی هستیم”، به سرعت متوجه شدیم که باید محتوای ما درون orb KOTAverse (blob امضایی ما) قرار گیرد. اینجا کاربران با گزینهای برای کلیک بر روی orb وسوسه میشوند تا “به عمق بروند”، یک ویژگی که آنها را به درون orb میکشاند و اکتشافی عمیق و فراگیر از هویت و فلسفه کنونی ما را ارائه میدهد.
سپس ما پنج نوع محتوا را معرفی کردیم که به نظرمان ما را بهعنوان کنونیمان معرفی میکرد، و این موارد همواره ما را مفتخر کرده و جالب است با دیگران به اشتراک بگذاریم.
عنصر پنجم
پس از اینکه به محتوا رسیدیم، مارگو (یکی دیگر از اعضای بااستعداد تیم طراحی) همه ما را شگفتزده کرد. ایده او این بود که این پنج نوع محتوا در واقع “عناصر” بودند و عنصر پنجم – تیم ما، از همه مهمتر محسوب میشد.
برای ارتباط مؤلفهها با orb، هر عنصر با یک شکل 3D بهوسیله رنگهای برند ما نمایندگی میشود.
حالا که عناصر پنجگانه را تأیید کرده بودیم، شروع به فکر کردن درباره نحوه عملکرد این بخش از سایت کردیم. ما واقعاً مفهوم فضایی درون KOTAverse را دوست داشتیم، جایی که کاربران میتوانند عناصر را بکشند و در آنجا کاوش کنند (تا وقتی که خسته شوند).
نیکولا ایده جالبی داشت که تیم روی کارتهای Top Trump باشد و بنابراین تصمیم گرفتیم از این فرمت برای سایر عناصر استفاده کنیم.
ما همچنین از AI و Neuralframes برای ایجاد آواتارهای جالبی از خودمان بهره بردیم.
رفتن به عمق
توسعه
شاید به یاد بیاورید سید را، که وبسایت او الهامبخش ایده جدول زمانی ما بود. خوب، در میانه طراحی، با او برای توسعه سایتمان تماس گرفتیم و … او پاسخ مثبت داد!
در اینجا مقداری اطلاعات از سید درباره جنبههای فنی ساخت و آنچه که آن را منحصر به فرد میکند آمده است:
جدول زمانی با استفاده از Three.js، که یک کتابخانه برای ایجاد دنیاهای 3D پیچیده است، ساخته شده است. در توسعه وب “متعارف” یک توسعهدهنده عناصر HTML را به صفحه اضافه میکند که رفتارهای پیشفرض دارند؛ مثلاً، یک عنصر دکمه HTML قابل کلیک است و حالت تمرکز دارد.
تجربههای ایجاد شده با Three.js شامل عناصر HTML نیستند، بلکه هر پیکسل که بر روی صفحه نمایش داده میشود بر روی یک عنصر canvas محاسبه میشود. برای اینکه عناصر تعاملی شوند، شما باید محاسبه کنید که آیا ماوس بر روی یک پیکسل خاص قرار دارد یا از ترفندهای دیگری برای ارائه احساسی هماهنگ با الگوی UX که کاربران به آن عادت کردهاند استفاده کنید.
این روند توسعه را پیچیدهتر میکند اما همچنین به ما این امکان را میدهد که پیکسلها در تصاویر و ویدئوها را خم کنیم که این کار در تصاویر و ویدئوهای HTML معمولی غیرممکن است و باعث میشود blob متحرک در پسزمینه به جهت و سرعت اسکرول واکنش نشان دهد.
کارتهایی که وقتی شما “به عمق بروید” نمایان میشوند با انیمیشنهای 3D سادۀ CSS ایجاد شدهاند. با انیمیشن برخی از رسانهها درون کارت به سمت یک سمت متفاوت، باعث میشود کارتهای استاتیک پویا به نظر برسند و به یاد من میآورد که کارتهای حرکتی دوران کودکیام را.
یکی از مهمترین نکات برای زیبایی یک وبسایت با انیمیشن سنگین و یکپارچگی آن، ایجاد جلوههای آرامشبخش مشابه هنگام (عدم) ظهور عناصر است. برای این موضوع از کتابخانه GSAP گرینساک استفاده کردیم و همچنین برای اسکرول مجازی (که باعث ایجاد احساسی نرمتر هنگام اسکرول در این وبسایت میشود) از Lenis بهره بردیم.
کار کردن با او فوقالعاده بود، پس حتماً کارهایش را ببینید: cydstumpel.nl
وبسایت نهایی
پس از ماهها کار سخت، اکنون میتوانیم با افتخار بگوییم؛ KOTAVERSE زنده است! ما همگی بسیار خوشحالیم که پروژه به این شکل به ثمر نشسته و هیجانزدهایم که آن را با جامعه به اشتراک بگذاریم.
همیشه امکانپذیر نیست که گروهی بزرگ بهطور همزمان بر روی پروژهای کار کنند، اما این تجربه نشان میدهد که ایدههای فوقالعادهای میتوانند از این تلاش مشترک بهوجود آیند. از مت، مارگو، و نیکولا در تیم طراحی و همچنین سید برای ساخت و توسعه سپاسگزاریم!
جیمز
مدیر خلاق @ KOTA
درباره KOTA
KOTA یک آژانس برندینگ جهانی و استودیو طراحی وب خلاق است. رویکرد ما از برند به ساخت، استراتژی، هویت، طراحی وب خلاق، توسعه و بازاریابی رشد را به یک فرآیند یکپارچه تبدیل میکند. ما به کسب و کارهای بلندپرواز کمک میکنیم تا وضوح برند پیدا کنند، آن را به آثار خلاقانه و مطمئن تبدیل کرده و سیستمهای دیجیتالی بسازند که باعث ایجاد حرکتی در تجارت شوند.
به وبلاگ برگشتید
آیا علاقهمند به کار با KOTA هستید؟
با ما تماس بگیرید:
hello@kota.co.uk
ما یک آژانس دیجیتال خلاق مستقر در کلارکنول لندن هستیم که در طراحی وب خلاق، توسعه وب، برندینگ و بازاریابی دیجیتال تخصص داریم.
پرسشهای متداول
KOTAverse چیست؟
KOTAverse یک وبسایت مستقل و تعاملی است که تاریخچه و هویت KOTA را نمایش میدهد.
چه کسانی در طراحی KOTAverse مشارکت داشتند؟
تیم طراحی شامل مت، مارگو، نیکولا و جیمز بوده است.
چگونه با KOTA همکاری کنم؟
میتوانید با ارسال یک ایمیل به hello@kota.co.uk با ما تماس بگیرید.
KOTA چه خدماتی ارائه میدهد؟
ما در طراحی وب، توسعه وب، برندینگ و بازاریابی دیجیتال تخصص داریم.
چرا KOTA را انتخاب کنم؟
KOTA به دلیل رویکرد منحصر به فرد و نوآورانه خود در خدمات دیجیتال شناخته شده است.
منبع: kota.co.uk
