نمای کلی پروژه (Project Overview)
آی‌آر ترافیک، وب‌سایتی برای معرفی خدمات دیجیتال مارکتینگ است؛ از طراحی سایت و سئو تا تبلیغات گوگل. طراحی رابط، خدمات تخصصی را در کنار معرفی تیم، محتوای آموزشی و مسیر درخواست مشاوره قرار می‌دهد. ویژگی متمایز این پروژه، تبدیل ظاهر استیکر به یک زبان مشترک در کل رابط است.
- مدت پروژه۲ ماه
- مخاطبکسب‌وکارهای متقاضی خدمات دیجیتال
- بستردسکتاپ و موبایل
- رویکرد بصریطراحی با زبان استیکر
یک وبسایت، با زبان استیکرها (The Creative Idea)
ایده‌ای که به کل رابط شکل داد.
استیکر در این پروژه، فقط یک تصویر تزئینی نیست. دورخط سفید، سایه کم‌عمق و چرخش‌های جزئی، در تصویرسازی‌ها، تیترها، کارت‌ها و دکمه‌ها تکرار شده‌اند؛ انگار اجزای رابط روی یک سطح روشن چسبانده شده‌اند.
این تکرار، شخصیت بصری مشخصی به وبسایت می‌دهد و معرفی خدمات را در فضایی صمیمی و خلاقانه روایت می‌کند.
مسئله طراحی چه بود؟ (Problem Statement)
چگونه می‌توان خدماتی مانند سئو، گوگل ادز و طراحی سایت را قابل‌فهم معرفی کرد و هم‌زمان تصویری خلاقانه و منسجم از یک آژانس دیجیتال مارکتینگ ساخت؟
کاربر باید تفاوت خدمات را بفهمد و مسیر ورود به جزئیات هر خدمت را پیدا کند.
معرفی تخصص آژانس به یک زبان بصری منسجم نیاز دارد؛ استیکر، پاسخ خلاقانه این طراحی است.
صفحات خدمات، پاسخ به پرسش‌ها و فرم مشاوره باید ادامه مسیر ارتباط با مجموعه را روشن کنند.
تعریف مسئله، بازسازی تحلیلی بر اساس نوع کسب‌وکار و خروجی طرح است؛ به‌عنوان یافته مصاحبه یا نتیجه پژوهش کاربری ارائه نمی‌شود.
از ساختار تا زبان بصری (Design Process)
این روایت از فرایند، بر اساس صفحات، نسخه‌های موبایل و کامپوننت‌های موجود در فایل طراحی تنظیم شده است.
- ۰۱
ساختار محتوا
تفکیک معرفی آژانس، خدمات، مقالات و راه‌های ارتباط.
- ۰۲
تعریف زبان استیکری
هماهنگی دورخط، سایه، چرخش و تأکید نارنجی در اجزای رابط.
- ۰۳
طراحی صفحات
به‌کارگیری زبان مشترک در خانه، خدمات، بلاگ، مقاله و صفحات معرفی.
- ۰۴
تطبیق و یکپارچگی
طراحی نسخه‌های موبایل و تنظیم کامپوننت‌های قابل استفاده مجدد.
مدت پروژه (Project Timeline)
از ایده تا مجموعه صفحات
مدت کل پروژه دو ماه بود. محورهای طراحی شامل ساختار محتوا، توسعه زبان بصری استیکری، طراحی صفحات و تطبیق موبایل بود. برای هر مرحله، مدت جداگانه‌ای ثبت نشده است.
مخاطب و پرسونای فرضی (User Persona)
مدیر کسب‌وکار یا مسئول بازاریابی که به خدمات دیجیتال نیاز دارد.
پرسونای فرضی؛ بازسازی‌شده برای توضیح سناریوی استفاده، بدون استناد به مصاحبه کاربری.
هدف او چیست؟
یک مجموعه مناسب برای طراحی سایت، سئو یا تبلیغات گوگل پیدا کند؛ خدمات را بشناسد و برای بررسی نیاز خود با یک متخصص گفت‌وگو کند.
نیازهای مفروض
- توضیح روشن خدمات و تفاوت آن‌ها
- آشنایی با تیم و شیوه همکاری
- دسترسی به پاسخ پرسش‌های متداول
- مسیر کوتاه و واضح برای تماس یا درخواست مشاوره
از شناخت خدمت تا درخواست مشاوره (User Flow)
سناریوی زیر، جریان پیشنهادی بر اساس صفحات موجود در طرح است؛ داده ثبت‌شده از رفتار واقعی کاربران نیست.
↓
↓
↓
↓
استیکر، از جزئیات تا سیستم (Visual Language)
در فایل، افکت مشترک «Sticker Shadow» و کامپوننت‌های تیتر، دکمه و کارت، تداوم این ایده را نشان می‌دهند. سه بخش زیر از خود طرح استخراج شده‌اند.
جدا شدن از زمینه
لبه سفید و سایه ظریف، حس برش‌خوردگی و چسبیده‌شدن تصویر روی صفحه را می‌سازند.
تکرار در متن و دکمه
تأکید نارنجی، تیترهای دورخط‌دار و دکمه‌های قاب‌سفید، ایده را به اجزای کاربردی رابط می‌رسانند.
یک زبان در چند مقیاس
کارت خدمات هم قاب، تصویر و تیتر را با همان منطق کنار هم می‌گذارد؛ یک قاعده مشترک در چند نوع محتوا.
#003333#FF6600تایپوگرافی طرح با خانواده فونت Lahzeh-FaNum شکل گرفته است؛ تیترهای برجسته و تأکیدهای رنگی، سطوح مختلف محتوا را از هم جدا می‌کنند.
اولین برخورد با ترافیک (Homepage)
تصویرسازی ورودی گوگل، تیتر دو‌رنگ و فلش‌های نارنجی، ایده «ترافیک هدفمند» را در هیرو قابل دیدن می‌کنند. ادامه صفحه، خدمات، تیم، پرسش‌های متداول و مشاوره را به هم متصل می‌کند.
MacBook Pro
از معرفی خدمت تا اقدام بعدی (Service Experience)
صفحه خدمت، توضیح گوگل ادز را با مزایا، خدمات مرتبط، پرسش‌های متداول، مراحل همکاری و فرم مشاوره ادامه می‌دهد. زبان استیکری در تمام این مسیر حضور دارد، بدون اینکه ساختار اطلاعات به یک تصویر تزئینی محدود شود.
همان شخصیت، در صفحه‌ای کوچک‌تر (Responsive Design)
در نسخه موبایل، محتوا به یک ستون تبدیل می‌شود؛ کارت‌ها، تیترها و دکمه‌ها همچنان هویت استیکری خود را حفظ می‌کنند. این نماها از صفحات موبایل خود فایل طراحی هستند.
iPhone 18 Pro Max — presentation mockups
از محتوای آموزشی تا شناخت مجموعه (Content & Brand)
صفحات بلاگ، مقاله و آرشیو، دسترسی به محتوای آموزشی را فراهم می‌کنند. درباره ما و تماس نیز داستان مجموعه و مسیر ارتباط را تکمیل می‌کنند.
گالری صفحات پروژه (Project Screens)
۱۶ صفحه دسکتاپ و موبایل؛ هر تصویر را برای مشاهده کامل باز کنید.
یک ایده کوچک؛ یک شخصیت بصری کامل.
استیکر، نخ مشترک میان تصویر، متن و تعامل.
