نمونه‌کار و انتخاب مجری
طراحی سایت استودیو خلاق با کاراکتر سه‌بعدی و پروژه‌های منتخب
این کانسپت شخصیت بازیگوش یک استودیو خلاق را با کاراکترهای سه‌بعدی، تایپوگرافی بزرگ و نمایش پروژه‌های متنوع معرفی می‌کند.
این طراحی سایت آژانس خلاق یک کانسپت 3DWEB است که کاراکترهای سه‌بعدی، پروژه‌های منتخب و تایپوگرافی ادیتوریال را در یک صفحهٔ پرانرژی ترکیب می‌کند. بخش‌های سفید و خاکستری تیره به‌صورت متناوب ظاهر می‌شوند و هر پروژه زبان بصری خودش را دارد. اثر به مشتری یا آژانس واقعی نسبت داده نمی‌شود.
شخصیت برند در چند ثانیه
ورودی صفحه با یک کاراکتر رنگی و تیتر بزرگ، لحن بازیگوش و کنجکاو برند را مشخص می‌کند. این انتخاب برای استودیویی مناسب است که خروجی آن فقط رسمی و سازمانی نیست و می‌خواهد تجربه‌گرایی را نشان دهد. کاراکتر نقش نشانهٔ روایی دارد و توجه را به بخش بعد هدایت می‌کند.
شخصیت بصری باید با نوع مشتری هدف هماهنگ باشد. اگر آژانس روی صنایع بسیار رسمی کار می‌کند، لازم است کنار این انرژی، شواهدی از دقت، فرایند و قابلیت تحویل هم ارائه شود. یک hero متفاوت می‌تواند توجه بگیرد، اما تصمیم همکاری با مطالعهٔ موردی و نقش روشن تیم شکل می‌گیرد.
نمایش پروژه‌های منتخب
در میانهٔ صفحه، پروژه‌ها با قاب‌ها و نسبت‌های متفاوت دیده می‌شوند. یک محصول بسته‌بندی‌شده روی پس‌زمینهٔ تایپوگرافیک، تصویر طبیعت و هویت‌های رنگی نشان می‌دهند استودیو دامنهٔ متنوعی دارد. برچسب «پروژه منتخب» به سلسله‌مراتب کمک می‌کند.
در نسخهٔ واقعی، هر کارت باید به صفحه‌ای با مسئله، نقش تیم، خروجی‌ها و وضعیت پروژه وصل شود. نمایش لوگو یا بسته‌بندی بدون توضیح معلوم نمی‌کند مسئولیت آژانس چه بوده است. پروژهٔ مفهومی، بازطراحی و کار مشتری باید برچسب‌های جدا داشته باشند.
تضاد و ریتم صفحه
پس‌زمینهٔ سفید برای معرفی و کاراکتر مناسب است و بخش تیره تمرکز بیشتری روی پروژه ایجاد می‌کند. جابه‌جایی میان آن‌ها صفحه را به فصل‌های واضح تقسیم می‌کند. accentهای رنگی کوچک نیز انرژی برند را بدون شلوغ‌کردن همهٔ فضا حفظ می‌کنند.
تغییر theme باید شامل رنگ متن، لینک، focus و کنترل ویدئو باشد. کنتراست خاکستری‌های ظریف روی زمینهٔ تیره باید آزمایش شود. در نمایشگرهای مختلف ممکن است جزئیاتی که در مانیتور طراح دیده می‌شوند برای کاربر محو شوند.
حرکت و عناصر سه‌بعدی
حرکت کاراکتر و تصاویر حس استودیو را زنده می‌کند، اما صفحه نباید به demo فنی تبدیل شود. کاربر باید بتواند خدمات، پروژه‌ها و تماس را سریع پیدا کند. انیمیشن‌ها بهتر است کوتاه، قابل توقف و وابسته به بخش مرتبط باشند.
این ظاهر قابل پیاده‌سازی با ویدئوی شفاف، sequence تصویری یا WebGL است. کانسپت فناوری خاصی را اثبات نمی‌کند. انتخاب سبک‌ترین راهی که کیفیت موردنظر را ارائه دهد، معمولاً برای سرعت و سازگاری تصمیم بهتری است.
موبایل، دسترسی و عملکرد
روی موبایل، کاراکتر سه‌بعدی نباید تیتر یا CTA را بپوشاند. پروژه‌ها می‌توانند به کارت‌های عمودی تبدیل شوند و اطلاعات بدون hover دیده شوند. poster ثابت باید پیش از بارگذاری رسانه پیام اصلی را منتقل کند.
حالت reduced motion، کنترل صفحه‌کلید و متن جایگزین برای تصاویر لازم‌اند. فایل‌های سه‌بعدی یا ویدئویی باید پس از محتوای ضروری بارگذاری شوند. بودجهٔ مشخص برای JavaScript، تصویر و ویدئو از سنگین‌شدن تدریجی صفحه جلوگیری می‌کند.
کاربرد مناسب
- آژانس branding و تبلیغات؛
- استودیوی motion و سه‌بعدی؛
- تیم طراحی محصول با هویت غیررسمی؛
- پورتفولیوی art direction و کمپین.
برای بیان مستقیم‌تر با تایپوگرافی، کانسپت آژانس تبلیغاتی را ببینید. گرید پورتفولیوی تعاملی نیز رویکرد آرشیوی‌تری به نمایش آثار دارد.
معیار ارزیابی نسخهٔ واقعی
نسخهٔ نهایی را باید با چند مأموریت روشن سنجید: آیا مدیر برند می‌تواند حوزهٔ تخصص را سریع تشخیص دهد، نمونهٔ مرتبط با صنعت واقعی خود را پیدا کند و نقش تیم را بفهمد؟ آیا پس از مشاهدهٔ کاراکتر و حرکت، راه تماس همچنان واضح است؟ نرخ مشاهدهٔ مطالعهٔ موردی و تکمیل فرم از تعداد افکت‌ها معنادارتر است. عملکرد نیز باید پیش و پس از افزودن رسانه اندازه‌گیری شود تا شخصیت بصری هزینهٔ پنهان برای تجربه ایجاد نکند.
جمع‌بندی
این کانسپت شخصیت آژانس را از طریق کاراکتر، تضاد و انتخاب پروژه منتقل می‌کند. نسخهٔ واقعی باید همین انرژی را با شفافیت نقش تیم، navigation ساده، رسانهٔ سبک و CTA روشن همراه کند. برای اجرای تجربه‌های پیچیده‌تر، خدمات طراحی سایت انیمیشنی را بررسی کنید.
سوالات متداول
آیا این صفحه متعلق به یک آژانس واقعی است؟ خیر، یک کانسپت 3DWEB است.
آیا کاراکتر سه‌بعدی حتماً WebGL می‌خواهد؟ خیر؛ ویدئو یا sequence تصویر نیز ممکن است کافی باشد.
چه چیزی یک پورتفولیوی آژانس را معتبر می‌کند؟ شرح مسئله، نقش دقیق تیم، فرایند و شواهد واقعی هر پروژه.