بازطراحی برای یک حضور حرفه‌ای‌تر (Project Overview)
آکادمی سبحان رئوفی به وب‌سایتی نیاز داشت که کیفیت معرفی مدرس و دوره‌هایش را بهتر بازتاب دهد. این پروژه، بازطراحی بصری و سفارشی‌سازی سایت وردپرسی موجود بود؛ از چیدمان صفحه اصلی تا روتوش و بازآفرینی تصاویر مدرس، تولید کاور اختصاصی دوره‌ها با پرامپت‌های متناسب و آماده‌سازی کاور ویدیوهای دانشجویان با کمک هوش مصنوعی. طراحی آیکون‌های موضوعی و میانبرهای استوری‌مانند نیز بخشی از این اجرا بود.
- سال اجرا۱۴۰۵
- مدت پروژهیک ماه
- بستروردپرس و قالب آماده
- دامنه کاربازطراحی و سفارشی‌سازی
تغییر را ببینید (Before & After)
در نسخه جدید، تصویر مدرس، تیتر اصلی و معرفی دوره‌ها با یک زبان مشترک کنار هم قرار گرفتند: زمینه تیره، طلاییِ تأکیدی و پرتره‌هایی هماهنگ با فضای برند.
نسخه قبلی از فایل‌های باقی‌مانده روی هاست بازیابی و توسط طراح پروژه تأیید شده است. مقایسه، نمای بصری صفحه اصلی را نشان می‌دهد؛ وضعیت بخش‌های پویا در بازیابی، مبنای قضاوت درباره عملکرد گذشته نیست.
فاصله میان کیفیت آموزش و تصویر آنلاین (The Challenge)
مسئله اصلی، ساخت یک معرفی بصری منسجم‌تر برای آکادمی بود. طبق شرح پروژه، ظاهر قبلی رضایت‌بخش نبود و تصاویر موجود نیز برای استفاده در یک وبسایت حرفه‌ای به آماده‌سازی نیاز داشتند.
تمرکز بر مدرس
معرفی روشن‌تر شخصیت برند، با تصویر و پیامی که در نگاه اول دیده شوند.
هماهنگی صفحات
یکپارچه‌کردن رنگ، تایپوگرافی و نحوه ارائه محتوا در بستر قالب وردپرس.
آماده‌سازی رسانه
تبدیل عکس‌ها و فریم‌های موجود به تصاویر قابل استفاده در هیرو، معرفی دوره و کاور ویدیو.
از بررسی نسخه قبلی تا اجرای نسخه جدید (Project Process)
- ۰۱
بازنگری ظاهر
تمرکز بر صفحه اصلی، نحوه معرفی مدرس و ارائه دوره‌ها.
- ۰۲
انتخاب زبان بصری
زمینه تیره، طلایی و پرتره‌های برجسته، برای هماهنگی تجربه سایت.
- ۰۳
آماده‌سازی تصاویر
اصلاح عکس‌های موجود و ساخت کاور از فریم ویدیوها با کمک AI.
- ۰۴
اجرا در وردپرس
سفارشی‌سازی قالب و تنظیم چیدمان صفحات در دسکتاپ و موبایل.
تیره، طلایی و متمرکز بر شخصیت برند (Visual Direction)
تصویر مدرس، نقطه شروع تجربه.
در هیروی جدید، پرتره از یک عنصر تزئینی به یکی از اجزای اصلی ترکیب تبدیل می‌شود. تیتر، تصویر و مسیر ورود به دوره در یک قاب قرار می‌گیرند و طلایی، عناصر مهم را از زمینه تیره جدا می‌کند.
اولین تصویر مدرس؛ از عکس رویداد تا هیروی سایت (Hero Portrait)
اولین تصویر مدرس در صفحه اصلی نیز از آرشیو عکس‌های قبلی آماده شد. عکس اولیه، مدرس را در فضای رویداد نشان می‌دهد؛ خروجی بازآفرینی‌شده با روتوش، اصلاح استایل، حذف پس‌زمینه شلوغ و یک قاب طلایی، برای اولین مواجهه مخاطب با برند آماده شد.
در این مقایسه، تصویر اولیه و فایل نهایی موجود در پروژه نمایش داده می‌شوند؛ رنگ طلایی و نمایش تک‌رنگ پرتره، بخشی از اجرای نهایی هیرو هستند.
از عکس خام تا کاور اختصاصی دوره (Course Artwork)
کاور دوره‌ها صرفاً انتخاب یک عکس از گالری نبود. عکس‌های خام کارفرما به‌عنوان ورودی استفاده شدند و با پرامپت‌های متناسب، خروجی‌های تازه‌ای برای معرفی هر دوره ساخته شد. روتوش پرتره، اصلاح پوشش و استایل و ساخت پس‌زمینه هماهنگ، در کنار عنوان و ترکیب‌بندی کاور قرار گرفتند.
پرامپت متناسب با کاربرد تصویر
هدف، آماده‌کردن تصویری مناسب برای فضای معرفی دوره بود؛ با استایل، نور و پس‌زمینه‌ای که با هویت تیره و طلایی سایت هماهنگ باشد. کاور «فروشنده» یک نمونه از همین مجموعه خروجی‌هاست.
بازآفرینی تصاویر «سکوی پرتاب شما» (Course Card Imagery)
عکس‌های اولیه‌ای که کارفرما برای معرفی دوره‌ها در اختیار گذاشته بود، از نظر نور، پس‌زمینه و استایل یکدست نبودند. برای این بخش، خود تصاویر روتوش و با کمک AI بازآفرینی شدند و پس‌زمینه‌های تازه و هماهنگ برای آن‌ها آماده شد.
تصاویر بالا فایل‌های واقعی خروجی پروژه‌اند. در کارت‌های صفحه اصلی، نمایش تک‌رنگ آن‌ها نیز با فضای کلی سایت هماهنگ شده است.
آیکون‌هایی برای پیدا کردن مسیر (Story-style Navigation)
بالای صفحه اصلی، یک ردیف میانبر با ظاهر استوری طراحی شد. آیکون‌های متناسب با موضوع هر میانبر، به‌صورت جداگانه طراحی و آماده شدند و در قاب‌های دایره‌ای طلایی قرار گرفتند تا معرفی مدرس، محتوای رایگان، رضایت دانشجویان و رسانه‌های برند سریع‌تر پیدا شوند. برای معرفی مدرس و دوره‌ها نیز از پرتره‌های هماهنگ استفاده شد.
مسیر آشنایی با آکادمی و مدرس.
میانبر ورود به دوره رایگان.
دسترسی به تجربه شرکت‌کنندگان.
آیکون‌های متناسب با اینستاگرام، تلگرام و پادکست، متصل به مقصد مربوط.
از عکس رویداد تا تصویر مناسب برند (AI-assisted Imagery)
به‌جای شروع از یک عکاسی تازه، عکس‌های موجود مدرس مبنای کار قرار گرفتند. با کمک هوش مصنوعی، پوشش و استایل تصویر مرتب‌تر شد و پس‌زمینه و ترکیب‌بندی برای استفاده در سایت آماده شد.
کار طراحی، فراتر از چیدمان قالب
انتخاب تصویر، اصلاح آن و قرار دادن نسخه نهایی در ترکیب مناسب، بخشی از بازطراحی بود. نمونه بالا همان عکس منبع و خروجی متناظر روی سایت است؛ تصاویر این شوکیس برای ایجاد مقایسه تازه دست‌کاری نشده‌اند.
هر ویدیو، یک کاور هماهنگ (Video Cover Design)
برای ویدیوهای رضایت دانشجویان، ابتدا یک فریم از ویدیوی اصلی انتخاب شد. سپس تصویر با کمک AI آماده و به‌عنوان کاور استفاده شد؛ روشی برای هماهنگ‌کردن گالری ویدیوها با زبان بصری سایت.
فریم‌های سمت «منبع» از ویدیوهای اصلی همین افراد ثبت شده‌اند و لزوماً همان لحظه انتخاب‌شده برای تولید کاور نیستند. فایل کاورها رنگی است؛ در گالری سایت، نمایش تک‌رنگ با هویت بصری صفحه هماهنگ شده است. این فرایند مربوط به آماده‌سازی کاور است.
قالب آماده، با اجرای متناسب با برند (WordPress Experience)
ارزش این پروژه در سفارشی‌سازی بستر موجود و هماهنگ‌کردن اجزای آن با آکادمی است. خانه، معرفی دوره، بخش معرفی مدرس و مجله آموزشی، با همان رنگ‌ها و تأکیدهای بصری ارائه می‌شوند.
MacBook Pro
تصاویر، صفحات واقعی سایت را نشان می‌دهند. امکانات پایه قالب و فروشگاه به‌عنوان توسعه اختصاصی معرفی نشده‌اند.
از آشنایی با مدرس تا بررسی دوره (Visitor Journey)
نمایش مسیر موجود در صفحات عمومی؛ پرداخت و دسترسی پس از خرید در این بررسی آزمایش نشده‌اند.
تجربه سایت در موبایل (Responsive Views)
معرفی برند، صفحه دوره و محتوای آموزشی در اندازه موبایل نیز ارائه می‌شوند. نماهای زیر از نسخه واقعی سایت ثبت شده‌اند.
Mobile presentation mockups
نماهای بیشتر از پروژه (Project Views)
چهره‌ای تازه برای آکادمی (Project Outcome)
خروجی، یک سایت وردپرسی با ارائه بصری تازه و مجموعه‌ای از تصاویر و کاورهای هماهنگ بود. طبق بازخوردی که طراح پروژه نقل کرده، کارفرما از ظاهر جدید سایت رضایت زیادی داشت.
این مطالعه بر خروجی بصری و شرح کار انجام‌شده تمرکز دارد؛ افزایش فروش یا نرخ تبدیل بدون داده به پروژه نسبت داده نمی‌شود.
