از فرزاد کفایی، بنیان‌گذار آژانس دکمه
بازسازی وب‌سایت یک آژانس خلاق، فقط عوض کردن ظاهر صفحه نیست. سایت باید در چند ثانیه نشان دهد ما چه می‌سازیم، چگونه فکر می‌کنیم و چرا تجربهٔ کار با ما می‌تواند متفاوت باشد. در پروژهٔ تازهٔ دکمه، همین سؤال نقطهٔ شروع بود: چطور می‌شود هویت بصری یک استودیو را به تجربه‌ای زنده در مرورگر تبدیل کرد، بی‌آنکه محتوا، دسترسی‌پذیری و پیدا شدن در جست‌وجو قربانی جلوه‌ها شوند؟ این نوشته روایت مسیر، تصمیم‌های طراحی و درس‌های فنی این پروژه است.
چرا سراغ بازسازی سایت دکمه رفتیم؟
برای یک آژانس طراحی و توسعهٔ وب، وب‌سایت خودش یک نمونه‌کار است. مخاطب پیش از تماس، شیوهٔ نگاه ما را در سرعت بارگذاری، رفتار صفحه، کیفیت تایپوگرافی، نمایش پروژه‌ها و حتی سادگی پیدا کردن راه ارتباط می‌بیند. بنابراین هدف ما ساخت یک ویترین پرتحرک به هر قیمت نبود؛ می‌خواستیم شخصیت دکمه در تک‌تک جزئیات حضور داشته باشد و در عین حال مسیر فهمیدن خدمات و دیدن کارها روشن بماند.
تصمیم طراحی از یک پرسش ساده شکل گرفت: اگر لوگوی دکمه فقط نشانه‌ای در گوشهٔ صفحه نباشد و خودش در طول روایت حضور داشته باشد، چه اتفاقی می‌افتد؟ این پرسش به ستون فقرات تجربه تبدیل شد. بازدیدکننده از هیرو وارد می‌شود، با آدم‌ها و نگاه استودیو آشنا می‌شود، نمونه‌کارها را می‌بیند و در نهایت به مسیری برای گفت‌وگو می‌رسد. هر بخش باید دلیل حضورش را داشته باشد.
از داستان برند تا نقشهٔ صفحه
صفحهٔ اصلی به جای مجموعه‌ای از افکت‌های جدا، به صورت یک مسیر طراحی شد: معرفی اولیه، بخش بنیان‌گذار، برندهایی که با استودیو کار کرده‌اند، پروژه‌های منتخب، محتوای تصویری، خدمات، دستاوردها و پایان‌بندی. ترتیب این بخش‌ها به مخاطب کمک می‌کند از «دکمه کیست؟» به «چه تجربه‌ای می‌سازد؟» و بعد به «چطور می‌توانم همکاری را شروع کنم؟» برسد.
این ترتیب فقط مسئلهٔ زیبایی نبود. وقتی بخش‌ها پشت سر هم معنا داشته باشند، می‌توان متن هر بخش را با یک سؤال واقعی مخاطب نوشت. در صفحهٔ استودیو دربارهٔ آدم‌ها و شیوهٔ کار بیشتر می‌گوییم؛ در پروژه‌ها نتیجهٔ کار را نشان می‌دهیم؛ و در مجله دربارهٔ تصمیم‌ها و آموخته‌ها عمیق‌تر حرف می‌زنیم. این پیوندهای داخلی، هم راه‌یابی خواننده را آسان می‌کنند و هم رابطهٔ موضوعی صفحه‌ها را برای موتور جست‌وجو روشن‌تر می‌سازند.
لوگو به عنوان شخصیت، نه تزئین
در مرکز تجربه یک نسخهٔ سه‌بعدی از نشانهٔ دکمه قرار دارد. حضور آن به یک تصویر ثابت یا انیمیشن آغازین محدود نیست. لوگو در حرکت بین بخش‌ها تغییر موقعیت و رفتار می‌دهد، گاهی آرام‌تر است و گاهی نقش فعال‌تری در گذار بصری دارد. هدف این بود که بازدیدکننده حس کند با یک هویت پیوسته روبه‌روست، نه چند صفحهٔ نامرتبط که فقط رنگ مشترک دارند.
چنین ایده‌ای یک دشواری مهم دارد: حرکت باید به خواندن و کشف محتوا کمک کند. اگر مدل سه‌بعدی بر تیترها غلبه کند یا هر اسکرول به یک نمایش مستقل تبدیل شود، مخاطب مسیر را گم می‌کند. برای همین رابطهٔ لوگو، متن و فضا در هر بخش جداگانه تنظیم شد. در بعضی نقاط زمینهٔ تجربه است؛ در بعضی نقاط به تغییر حال‌وهوای صفحه کمک می‌کند.
طراحی حرکت؛ ریتمی که به محتوا خدمت کند
حرکت در وب‌سایت دکمه از چند لایه ساخته شده است. اسکرول نرم، گذارهای متنی و واکنش عناصر به ورود بخش‌ها، همگی باید با یک ریتم مشترک کار کنند. استفاده از GSAP برای حرکت‌های زمان‌بندی‌شده و Three.js برای صحنهٔ سه‌بعدی به ما امکان داد بخش‌هایی با زبان بصری متفاوت بسازیم، ولی آن‌ها را در یک مسیر واحد نگه داریم.
چالش واقعی، هماهنگ کردن این لایه‌ها بود. یک بخش ممکن است ارتفاع بیشتری به دلیل انیمیشن داشته باشد؛ بخش بعدی باید در زمان درست شروع شود. اگر فونت دیر بارگذاری شود، اندازهٔ متن و نقطهٔ شروع حرکت تغییر می‌کند. اگر بازدیدکننده در میانهٔ صفحه وارد شود یا مسیر را برعکس اسکرول کند، تجربه باید همچنان قابل فهم باشد. بنابراین طراحی حرکت برای ما فقط ساخت لحظه‌های چشمگیر نبود؛ مدیریت پیوستگی در شرایط واقعی استفاده بود.
پشت صحنهٔ فنی، به زبان ساده
پوستهٔ سایت با Next.js و TypeScript ساخته شده است. عناصر محتوایی و ساختار صفحه در کنار لایهٔ تعاملی سه‌بعدی کار می‌کنند. این جداسازی اهمیت دارد: عنوان‌ها، متن‌ها و مسیرهای اصلی باید برای کاربر و خزندهٔ جست‌وجو قابل دریافت باشند، حتی وقتی جلوهٔ بصری هنوز در حال بارگذاری است.
برای صحنهٔ سه‌بعدی از Three.js استفاده شده و حرکت‌های وابسته به اسکرول با سیستم پیمایش صفحه هماهنگ هستند. در بخش‌هایی مانند نمایش پروژه‌ها، خدمات و پایان صفحه، زبان حرکت متناسب با نقش همان بخش تغییر می‌کند. آنچه در ظاهر یک تجربهٔ یکپارچه دیده می‌شود، در عمل نتیجهٔ هماهنگی محتوای HTML، تصویر، ویدئو، زمان‌بندی و رفتار دستگاه‌های مختلف است.
در این مقاله عمداً کد اجرایی، تنظیمات زیرساخت و جزئیات دسترسی منتشر نمی‌کنیم. برای فهم تجربه، دانستن منطق طراحی و انتخاب‌های فنی کافی است؛ جزئیات حساس، ارزش بیشتری برای خواننده نمی‌سازند.
از دسکتاپ تا موبایل؛ یک ایده، چند رفتار
یک سایت تعاملی زمانی موفق است که فقط روی نمایشگر طراح خوب نباشد. اندازهٔ صفحه، توان پردازشی دستگاه، حالت لمسی و رفتار نوارهای مرورگر موبایل بر تجربه اثر می‌گذارند. در این پروژه ترکیب تصویر، متن و صحنهٔ سه‌بعدی باید در اندازه‌های مختلف قابل استفاده بماند. به همین دلیل جای عناصر، مقیاس و فاصله‌ها به شکل واکنش‌گرا تعریف شدند و مسیر اصلی محتوا بر یک اندازهٔ ثابت تکیه ندارد.
واکنش‌گرایی برای ما صرفاً کوچک کردن عناصر دسکتاپ نیست. در موبایل، فضای محدودتر یعنی باید اولویت روایت روشن‌تر باشد: تیتر خوانا، متن قابل اسکن، دسترسی ساده به پروژه‌ها و راه ارتباط. جلوهٔ بصری زمانی موفق است که این اولویت‌ها را تقویت کند.
مجلهٔ دوزبانه و مسئلهٔ سئو
دکمه با مخاطبان فارسی‌زبان و انگلیسی‌زبان حرف می‌زند. به همین دلیل سایت و مجله دو مسیر زبانی دارند. در یک مقالهٔ دوزبانه، ترجمهٔ متن به‌تنهایی کافی نیست: هر نسخه باید عنوان، توضیح متا، نشانی، زبان صفحه و پیوند روشن به نسخهٔ معادل داشته باشد. اگر این ارتباط اشتباه باشد، خواننده ممکن است به صفحه‌ای با زبان نادرست برسد و موتور جست‌وجو هم رابطهٔ دو مقاله را درست نفهمد.
در بخش وبلاگ، محتوا در وردپرس مدیریت و در تجربهٔ اصلی سایت نمایش داده می‌شود. این معماری اجازه می‌دهد تیم تحریریه متن را مستقل از توسعهٔ رابط ویرایش کند. در مقابل، کنترل کیفیت انتشار اهمیت بیشتری پیدا می‌کند: باید مطمئن شویم متن کامل در صفحهٔ عمومی دیده می‌شود، نشانی نهایی درست است، کانونیکال به همان صفحه اشاره می‌کند و نسخه‌های فارسی و انگلیسی به هم مرتبط‌اند.
سرعت، دسترسی‌پذیری و کنترل کیفیت
وب‌سایت تصویری معمولاً با فایل‌های سنگین‌تر روبه‌روست. راه‌حل، حذف شخصیت بصری نیست؛ باید بدانیم چه چیزی در ابتدا لازم است و چه چیزی می‌تواند بعدتر بارگذاری شود. طراحی مرحلهٔ بارگذاری، آماده شدن صحنه و ورود محتوا بخشی از همین تجربه است. در کنار آن، متن و لینک‌ها باید حتی پیش از کامل شدن جلوه‌ها معنا داشته باشند.
کنترل کیفیت این نوع پروژه فقط به یک تست فنی ختم نمی‌شود. مسیر رو به پایین و بالا، بارگذاری اولیه، ورود مستقیم به صفحه‌های داخلی، خوانایی روی موبایل، رفتار منو، حضور لوگو در جای درست و نمایش درست متن دو زبان، هرکدام باید جدا دیده شوند. امتیاز ابزارهای خودکار مفید است، اما جای بررسی واقعی تجربه را نمی‌گیرد.
چند تصمیم که نتیجه را تغییر داد
۱. نمایش پروژه به جای انباشتن ادعا
وقتی آژانس دربارهٔ توانایی‌های خود حرف می‌زند، طبیعی است که بخواهد همهٔ خدمات را در اولین صفحه توضیح دهد. اما برای مخاطب، دیدن یک پروژهٔ واقعی اغلب گویاتر از فهرست بلند اصطلاحات است. به همین دلیل بخش کارهای منتخب در مسیر اصلی صفحه قرار گرفت و صفحهٔ پروژه‌ها فرصت توضیح بیشتر می‌دهد. این انتخاب به متن‌ها هم نظم داد: ادعا باید به نمونهٔ قابل مشاهده وصل باشد.
۲. استفادهٔ هدفمند از ویدئو
ویدئو می‌تواند فضا و انرژی استودیو را منتقل کند، اما نباید تنها راه فهم محتوا باشد. بخش ویدئویی در کنار مسیر متنی و تصویری قرار می‌گیرد؛ اگر کسی صدا را خاموش کند یا هنوز رسانه بارگذاری نشده باشد، همچنان باید بداند در کجای روایت است. به این ترتیب رسانهٔ سنگین نقش مکمل دارد، نه نقطهٔ شکست تجربه.
۳. پایان‌بندی به عنوان بخشی از داستان
فوتر در بسیاری از سایت‌ها فقط محل تکرار لینک‌هاست. ما آن را فرصتی برای جمع‌بندی حس صفحه دیدیم: بعد از عبور از پروژه‌ها و خدمات، فضا آرام می‌شود و راه‌های ارتباطی در دسترس قرار می‌گیرند. یک پایان خوب باید هم امضای بصری داشته باشد و هم تکلیف مخاطب را روشن کند.
انتشار محتوا به عنوان بخشی از محصول
وب‌سایت آژانس با روز رونمایی تمام نمی‌شود. اگر پروژهٔ تازه‌ای اضافه شود، تجربهٔ قبلی باید همچنان منسجم بماند؛ اگر مقاله‌ای منتشر شود، باید در هر زبان مسیر درست خود را پیدا کند. همین نگاه باعث شد بلاگ، نقشهٔ سایت، فراداده و پیوندهای داخلی را بخشی از تجربه بدانیم، نه کاری که پس از پایان طراحی انجام می‌شود.
برای هر مقالهٔ جدی، عنوان صفحه باید موضوع را روشن کند، توضیح متا باید دلیل خواندن را بگوید و نشانی باید کوتاه و پایدار باشد. ساختار تیترهای میانی به خواننده اجازه می‌دهد حتی در متن بلند، مسیر را گم نکند. تصویر شاخص و متن جایگزین، اگر استفاده شوند، باید همان داستان مقاله را توضیح دهند. این‌ها تضمین رتبه در گوگل نیستند؛ پایه‌های یک انتشار درست و قابل فهم‌اند.
چه چیزی از این مسیر یاد گرفتیم؟
مهم‌ترین درس برای من این است که سایت یک آژانس زمانی به یاد می‌ماند که ایدهٔ مرکزی‌اش در تصمیم‌های کوچک هم دیده شود. لوگوی سه‌بعدی به‌تنهایی هویت نمی‌سازد؛ ترتیب روایت، کیفیت متن، رفتار حرکت، راه‌یابی، سرعت و امکان تماس هم همان‌قدر مهم‌اند. اگر هر بخش فقط برای نشان دادن توان فنی ساخته شود، حاصل می‌تواند تماشایی باشد اما لزوماً مفید نیست.
درس دوم این است که زیبایی و نگه‌داری در برابر هم نیستند. وقتی محتوا از رابط جدا باشد، صفحه‌ها ساختار مشخص داشته باشند و رفتار هر بخش قابل کنترل باشد، تجربهٔ خلاقانه برای تیم هم قابل توسعه می‌ماند. وب‌سایت دکمه را به چشم یک محصول زنده می‌بینم: فضایی که می‌تواند با پروژه‌ها، مقاله‌ها و ایده‌های تازه رشد کند.
اگر بخواهید مسیر را خودتان ببینید
از صفحهٔ اصلی دکمه شروع کنید، در پروژه‌ها نمونه‌های کار را ببینید و در استودیو با تیم و نگاه ما آشنا شوید. اگر برای ساخت یا بازطراحی سایت برندتان به تجربه‌ای فکر می‌کنید که روایت، طراحی و فناوری را کنار هم بنشاند، گفت‌وگو را شروع کنیم.
نویسنده: فرزاد کفایی، بنیان‌گذار و مدیرعامل آژانس دکمه.